---
title: "Metaview design system"
variant: extended
source: https://www.metaview.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/metaview-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Metaview · Design System

> Quiet editorial clarity with bold, unexpected imagery.

**Theme:** light · **Industry:** ai · **Source:** https://www.metaview.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Metaview pairs a bright, editorial SaaS layout with near-black navigation and deep-green feature bands. Restrained typography and pill-shaped actions keep the experience calm, while vivid photography gives the recruiting platform a distinctive, human tone.

## North star

Keep the interface quiet and spacious, then use deep-green contrast and one vivid, human image to give each key section a clear focal point.

## Overview

The page is built around a predominantly white canvas, with a narrow near-black announcement strip and occasional deep-green sections providing strong contrast. Warm off-white surfaces soften cards, while the measured mint, blue, and lilac accents belong mainly to gradient treatments rather than serving as everyday interface colours. Euclid Circular A gives headings and body copy a rounded, contemporary voice; headings are medium weight with tight tracking, and body text remains open and readable. The desktop hero uses a two-column composition: compact copy and pill actions sit beside a large, tightly cropped photograph. Sections below alternate spacious white fields, dark feature bands, product explanations, proof points, testimonials, and FAQ content. The layout uses generous vertical separation and restrained borders instead of dense decoration. Black capsule CTAs, outlined secondary actions, and rounded media frames provide the main interaction cues. The overall effect is calm and clear, punctuated by high-impact image colour.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, light section background, and reversed text on dark CTAs. |
| Soft Pewter | `#b8bab9` | `--color-soft-pewter` | semantic | Muted copy and low-emphasis supporting text. |
| Warm Porcelain | `#fbf8f4` | `--color-warm-porcelain` | surface | Warm card and surface treatment against the white page canvas. |
| Forest Black | `#000805` | `--color-forest-black` | brand | Announcement strip, dark section surfaces, and selected dark controls. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary headings, body copy, navigation text, and black pill CTAs. |
| Quiet Rule | `#d9d9d9` | `--color-quiet-rule` | semantic | Fine borders around cards and navigation elements. |
| Deep Canopy | `#0a2119` | `--color-deep-canopy` | surface | Large dark-green feature bands and inverted content areas. |
| Mint Haze | `#e3ffef` | `--color-mint-haze` | accent | Light text accent associated with dark sections. |
| Fresh Mint | `#5aecb8` | `--color-fresh-mint` | accent | Gradient accent within section effects; not a dominant control colour. |
| Periwinkle Beam | `#88acfa` | `--color-periwinkle-beam` | accent | Cool gradient accent, used as a secondary atmospheric highlight. |
| Lilac Glow | `#dbbef7` | `--color-lilac-glow` | accent | Soft gradient accent rather than a primary interface colour. |
| Pine Edge | `#233830` | `--color-pine-edge` | semantic | Subtle outlines around dark cards, media controls, and links. |
| Stone Gray | `#808483` | `--color-stone-gray` | semantic | Secondary text and understated interface details. |
| Sage Gray | `#82938b` | `--color-sage-gray` | semantic | Muted footer copy and supporting text on dark surfaces. |
| Night Moss | `#0b1b15` | `--color-night-moss` | surface | Dark cards, selected buttons, and inverse interactive surfaces. |
| Charcoal Moss | `#29302d` | `--color-charcoal-moss` | semantic | Low-contrast outlines and card-detail borders in dark UI. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fbf8f4` (Warm Porcelain) · `--color-surface-2` → `#000805` (Forest Black) · `--color-surface-3` → `#0a2119` (Deep Canopy) · `--color-surface-4` → `#0b1b15` (Night Moss) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#b8bab9` (Soft Pewter) · `--color-text-subtle` → `#000805` (Forest Black) · `--color-border` → `#d9d9d9` (Quiet Rule) · `--color-accent` → `#5aecb8` (Fresh Mint) · `--color-accent-2` → `#88acfa` (Periwinkle Beam) · `--color-accent-3` → `#dbbef7` (Lilac Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#fbf8f4` | 19.84:1 | AAA |
| `#000000` | `#000805` | 1.04:1 | fail |
| `#000000` | `#0a2119` | 1.24:1 | fail |
| `#b8bab9` | `#ffffff` | 1.95:1 | fail |
| `#b8bab9` | `#fbf8f4` | 1.84:1 | fail |
| `#b8bab9` | `#000805` | 10.38:1 | AAA |
| `#b8bab9` | `#0a2119` | 8.65:1 | AAA |
| `#000805` | `#ffffff` | 20.25:1 | AAA |
| `#000805` | `#fbf8f4` | 19.13:1 | AAA |

### Gradients

- `radial-gradient(45% 62% at 18% 38%, rgba(29, 231, 159, 0.7), rgba(0, 0, 0, 0) 72%), radial-gradient(52% 68% at 82% 44%, rgba(62, 118, 255, 0.58), rgba(0, 0, 0, 0) 74%), radial-gradient(48% 56% at 52% 92%, rgba(196, 111, `
- `linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.86), rgba(154, 244, 226, 0.56), rgba(255, 255, 255, 0))`
- `radial-gradient(circle at 65% 32%, rgb(122, 250, 178) 0px, rgb(122, 250, 178) 15%, rgba(0, 0, 0, 0) 42%), radial-gradient(circle at 28% 70%, rgb(15, 152, 102) 0px, rgb(15, 152, 102) 18%, rgb(64, 218, 202) 46%, rgb(30, 76`
- `linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgb(61, 212, 176), rgb(94, 198, 232))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Euclid Circular A | `--font-body` | webfont | 400, 500, 700 | Main interface font for headings, body copy, navigation, links, and buttons. | Inter |
| Onsite Mono | `--font-mono` | webfont | 400, 500 | Small code-like or technical labels. | IBM Plex Mono |

- **Euclid Circular A:** Use measured 400, 500, and 700 weights; headings are medium with tight negative tracking, while interface text stays in sentence case.
- **Onsite Mono:** Use sparingly at medium weight, with slightly open tracking; it is a minor supporting face.

### Type scale — Major Third (ratio ≈ 1.26, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 500 | 1.16 | -0.03em | — | Euclid Circular A | Hero headline and primary page-level statement. |
| h2 | 28px | 500 | 1.16 | -0.02em | — | Euclid Circular A | Major section headings and prominent content titles. |
| h3 | 24px | 500 | 1.28 | -0.02em | — | Euclid Circular A | Feature, card, and subsection headings. |
| body | 18px | 400 | 1.48 | 0 | — | Euclid Circular A | Introductory copy and primary explanatory text. |
| caption | 16px | 400 | 1.48 | 0 | — | Euclid Circular A | Compact supporting copy and card details. |
| button | 16px | 500 | 1.6 | 0 | — | Euclid Circular A | CTA and action labels. |
| nav | 15px | 500 | 1.6 | 0 | — | Euclid Circular A | Header navigation labels. |
| link | 18px | 400 | 1.48 | 0 | — | Euclid Circular A | Inline and standalone text links. |
| code | 14.5px | 500 | 1.48 | 0.01em | — | Onsite Mono | Occasional technical labels or code-like content. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 6, 8, 10, 12, 16, 24, 40, 56, 104, 120 px.
- Section rhythm 120px · element gap 3px · card padding 16px · max content width 1158px.

Use a centered, spacious desktop composition with a measured maximum content width of 1158px. The hero is a two-column split, with left-aligned text and actions opposite wide, cropped media. Keep most content on white, punctuating the long page with full-bleed dark-green bands and centered feature sections. The measured section rhythm is generous, with a 120px section gap and an 8px base spacing unit. Lower sections use two- to four-column arrangements for benefits, proof, and resource content; FAQ and footer content become more compact while retaining clear alignment.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `50%` · nav `9999px` · link `12px` · xs `4px` · sm `8px` · md `10px` · lg `12px` · xl `16px` · pill `9999px`
- Shadow `xl` (button): `rgba(0, 0, 0, 0.01) 0px 109px 106px 0px, rgba(0, 0, 0, 0.01) 0px 45.538px 44.284px 0px, rgba(0, 0, 0, 0.01) 0px 24.347px 23.676px 0px, rgba(0, 0, 0, 0.01) 0px 13.648px 13.273px 0px, rgba(0, 0, 0, 0.01`
- Shadow `lg` (card): `rgba(42, 207, 145, 0.18) 0px 12px 36px 0px`
- Shadow `lg-2` (other): `rgba(61, 212, 176, 0.592) 0px 0px 7.92207px 0px, rgba(61, 212, 176, 0.247) 0px 0px 19.6104px 0px`
- Shadow `xl-2` (card): `rgba(162, 229, 200, 0.1) 0px 0px 58.45px 0px`
- Shadow `inset` (link): `rgba(0, 0, 0, 0.3) 0px 0px 0px 2px inset`
- Motion: standard transition `0.15s ease` on interactive elements.

The page is mostly flat: white fields and dark bands rely on contrast and spacing rather than decoration. Use fine measured borders for card edges, with rounded card corners. Reserve soft, restrained shadows for key buttons or highlighted cards; avoid adding a shadow to every surface. Layer gradients as subtle atmosphere within selected feature areas.

## Imagery

Use large, editorial lifestyle photography with unusual, close cropping; the hero image’s vivid lime clothing is image content, not a brand colour token. Pair photography with product UI and workflow visuals in feature sections. Maintain clean rectangular media framing and avoid heavy filters. Logos and testimonial media appear as supporting proof, while the primary visual emphasis comes from authentic human imagery and occasional interface demonstrations.

## Components

### Announcement strip

A narrow near-black band above the main header, carrying compact light copy and a directional arrow.

### Navigation

Logo and text links on white, with account actions and a black rounded “Book a demo” pill.

### Hero split

Left-aligned headline, concise explanatory copy, paired pill CTAs, and a large right-side lifestyle image with a text link overlay.

### Dark feature band

Full-width deep-green section used to create contrast around product and workflow storytelling.

### Feature card

Rounded product or testimonial panel; dark variants use #0b1b15 with #233830 borders.

### Proof and metrics

Logo marks, customer stories, and quantified outcomes arranged as sparse supporting evidence.

### FAQ accordion

A simple vertically stacked question list with clear text hierarchy and restrained separators.

### Footer

Multi-column link groups on a dark base, using muted sage text and compact social links.

### Measured component styles

- **Primary button** (“Watch”): background #0b1b15 · text #000000 · border 1px solid #233830 · radius 12px · padding 16px · 400 16px Euclid Circular A
- **Secondary button** (“Book a demo”): background #000000 · text #ffffff · radius 9999px · padding 0px 15.2px · 500 13.333px Euclid Circular A · shadow rgba(0, 0, 0, 0.01) 0px 109px 106px 0px, rgba(0, 0, 0, 0.01) 0px 45.538px 44.284
- **Link** (“Catawiki 2-6H SAVED PER RECRUITER WEEKLY”): background #0b1b15 · text #0000ee · border 1px solid #233830 · radius 12px · padding 16px · 400 16px Euclid Circular A
- **Card** (““I can confidently say that if you're no”): background #0b1b15 · text #000000 · border 1px solid #233830 · radius 12px · padding 16px · 400 16px Euclid Circular A
- **Navigation item** (“Platform”): transparent background · text #01051b · radius 0px · padding 0px · 500 15.238px Euclid Circular A

## Do

- Keep the main canvas white and uncluttered.
- Use #0a2119 or #000805 for deliberate dark section breaks.
- Set headings in Euclid Circular A with measured tight tracking.
- Use black pill-shaped primary CTAs with white labels.
- Pair concise copy with large, closely framed human photography.
- Give sections generous vertical breathing room.
- Use borders sparingly to define cards and controls.

## Don't

- Do not turn illustration-only accents into the page’s dominant UI palette.
- Do not crowd the hero with extra labels or decorative elements.
- Do not apply heavy shadows to every card.
- Do not make all sections dark or gradient-filled.
- Do not use sharp, square CTAs where the measured controls are pill-shaped.
- Do not treat the lime hero clothing as a reusable brand colour.
- Do not compress the long-page section rhythm.

## Agent prompt

Build a new Metaview-style SaaS page with a predominantly #ffffff canvas, near-black #000805 announcement strip, and selective #0a2119 feature bands. Use Euclid Circular A or a close geometric sans substitute; keep headings medium-weight with tight tracking and body copy calm and readable. Compose the hero as a left-aligned text-and-CTA column beside a large, editorially cropped human photograph. Use black pill CTAs with white labels, restrained outlined secondary actions, warm #fbf8f4 cards, and fine #d9d9d9 rules. Treat #5aecb8, #88acfa, and #dbbef7 as occasional gradient atmosphere, not default button colours. Preserve generous whitespace, clear section breaks, and simple proof, feature, testimonial, FAQ, and footer modules. Keep decoration subordinate to content and imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two columns: copy and actions at left, large image at right. | primary and secondary CTA, image-linked platform overview | large headline, pill buttons, cropped lifestyle image |
| 2 | logo-cloud | Single horizontal row of customer marks on white. | trust through customer logos | muted logo marks, wide horizontal alignment |
| 3 | how-it-works | Two-column product explanation with supporting visuals and action links. | workflow overview, task-specific actions | feature panels, product visuals, compact buttons |
| 4 | feature-split | Two-column feature block with product imagery and explanatory copy. | feature discovery, product trial link | large feature heading, paired text and media |
| 5 | product-showcase | Full-bleed, centered feature showcase. | ask-the-agent interaction concept | centered headline, immersive dark treatment |
| 6 | stats | Wide three-column results area with supporting visuals. | quantified outcomes, end-to-end value explanation | large metric headings, feature illustrations |
| 7 | feature-grid | Two-column section with multiple feature points and supporting artwork. | benefit scanning, platform capability exploration | stacked feature headings, small product visuals |
| 8 | feature-grid | Three-column security content with supporting icons or imagery. | guardrail explanation, control discovery | icon-led feature items, compact lists |
| 9 | testimonials | Multi-column case-study and testimonial cards with video content. | customer proof, video testimonials | rounded cards, quote-led content, media thumbnails |
| 10 | cta | Full-bleed centered CTA with supporting visual content. | book-a-demo conversion, free-start option | centered headline, paired action links |
| 11 | contact | Three-column resource and support content. | resource discovery, team support information | link groups, support feature blocks |
| 12 | faq | Single-column question list with expandable-answer patterns. | accordion questions, quick answer discovery | stacked rows, clear question hierarchy |
| 13 | footer | Four-column footer with grouped product and resource links. | category-based navigation, social destinations | compact link columns, muted footer text |

## Source CSS custom properties (selected)

```css
--mv-color-white: #FFFFFF;
--mv-color-whiteFaded: #FFFFFF80;
--mv-color-black: #000000;
--mv-color-background: #FBF8F4;
--mv-color-backgroundAccent: #F7F1E9;
--mv-color-backgroundAccent80: #F9EFE2CC;
--mv-color-backgroundAlt: #EDF0F7;
--mv-color-metaviewDark: #020416;
--mv-color-text: #01051B;
--mv-color-textFaded: #01051B8F;
--mv-color-textLight: #FFFFFF;
--mv-color-textLightFaded: rgba(255, 255, 255, 0.5);
--mv-color-alpha2Secondary: #0008058F;
--mv-color-alpha2SecondaryAlt: rgba(0, 2, 12, 0.56);
--mv-color-alpha3Tertiary: rgba(0, 2, 10, 0.32);
--mv-color-alpha4: rgba(0, 2, 12, 0.24);
--mv-color-alpha6Border: rgba(0, 2, 12, 0.08);
--mv-color-color0Bg: #F1FCFF;
--mv-color-color1: #D4F7FF;
--mv-color-color2: #AEEBFF;
--mv-color-color3: #00CFFF;
--mv-color-color4: #00FFA5;
--mv-color-color8Primary: #FFFFFF;
--mv-color-gradientSecondary: rgba(233, 255, 245, 0.56);
--mv-color-offText: #0F1329;
--mv-color-blue: hsla(231, 100%, 53%, 1);
--mv-color-darkBlue: hsla(231, 100%, 46.64%, 1);
--mv-color-brandBlue1: #E3F6FF;
--mv-color-brandBlue2: #9BDEFE;
--mv-color-brandBlue3: #2D8BE3;
--mv-color-green: hsla(146, 100%, 74%, 1);
--mv-color-darkGreenAccent: hsla(146, 100%, 65.12%, 1);
--mv-color-navy: #071253;
--mv-color-errorRed: #ff0000bd;
--mv-color-limeDark: #258B66;
--mv-color-primaryDark: #002317;
--mv-color-light-lime0: #F7FFFB;
--mv-color-light-lime1: #E3FFEF;
--mv-color-light-lime2: #7AFFB4;
--mv-color-light-lime3: #258B66;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/metaview-ai