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

# Wonder · Design System

> Dark canvas, vivid accents, real product in focus

**Theme:** dark · **Industry:** ai · **Source:** https://wonder.design/ · **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._

Wonder presents its AI design workspace through a high-contrast dark homepage, then shifts into light feature sections to make product details easy to inspect. Oversized interface previews, restrained typography, and vivid violet calls to action connect the story from design exploration to production code.

## North star

Let the real product interface lead, using a near-black canvas and violet only to mark meaningful actions.

## Overview

The page opens on a near-black canvas (#101010), where white headings and muted gray copy create a focused, studio-like mood. Vivid violet (#bc49e9), sometimes deepened toward #732a90, is reserved for primary actions and small accent details; it does not compete with the product UI. A broad off-white feature band (#f6f6f6) interrupts the dark sequence, giving interface captures and explanatory content a clean, readable stage before the page returns to dark pricing and closing sections. Uncut Sans Variable carries prominent page copy, with Inter used for supporting headings and labels; JetBrainsMono gives captions and code a technical register. Layouts alternate centered hero messaging with multi-column feature and pricing blocks. Large product screenshots, rather than decorative photography, are the main visual material. Compact gaps, thin dark borders, soft button insets, and restrained card shadows keep the experience crisp without making it feel heavily elevated.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#101010` | `--color-studio-black` | brand | Dominant homepage canvas, hero, toolkit, pricing, and footer background. |
| Deep Orchid | `#732a90` | `--color-deep-orchid` | accent | Deep violet accent in button gradient treatments; keep secondary to the brighter CTA violet. |
| Gallery White | `#f6f6f6` | `--color-gallery-white` | surface | Broad light feature bands that contrast with the dark hero and product toolkit sections. |
| Signal Violet | `#bc49e9` | `--color-signal-violet` | accent | Primary download and app buttons, highlighted links, and small emphasis details. |
| Soft Chalk | `#e5e5e5` | `--color-soft-chalk` | neutral | Main light text and subtle content surfaces, especially on dark sections. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | High-contrast headings, button labels, and UI details; product mockups also contain white. |
| Graphite Line | `#212121` | `--color-graphite-line` | semantic | Subtle borders and separators on the dark canvas. |
| Quiet Silver | `#b7b7b7` | `--color-quiet-silver` | neutral | Muted navigation and supporting copy against dark backgrounds. |
| Sky Tint | `#9ecbff` | `--color-sky-tint` | accent | Occasional colored text accent; not a dominant page-wide brand color. |
| Mid Gray | `#999999` | `--color-mid-gray` | neutral | Secondary text, small labels, and subdued badge copy. |
| Dim Gray | `#777777` | `--color-dim-gray` | neutral | Low-emphasis supporting text and badge details. |
| Slate Gray | `#404040` | `--color-slate-gray` | neutral | Subdued text details on dark surfaces. |
| Raised Black | `#1c1c1c` | `--color-raised-black` | surface | Slightly lifted dark UI and input-adjacent details. |
| Lilac Glow | `#b392f0` | `--color-lilac-glow` | accent | Occasional violet-tinted text accent; supporting rather than dominant. |
| Umber Panel | `#2b1a12` | `--color-umber-panel` | surface | Warm dark tone found inside product or code imagery, not a primary page surface. |
| Porcelain Gray | `#f0f0f0` | `--color-porcelain-gray` | surface | Small light card and media details, mainly within showcased interface content. |

### Semantic aliases

`--color-canvas` → `#101010` (Studio Black) · `--color-surface` → `#f6f6f6` (Gallery White) · `--color-surface-2` → `#e5e5e5` (Soft Chalk) · `--color-surface-3` → `#ffffff` (Pure White) · `--color-surface-4` → `#2b1a12` (Umber Panel) · `--color-text` → `#e5e5e5` (Soft Chalk) · `--color-text-muted` → `#b7b7b7` (Quiet Silver) · `--color-text-subtle` → `#999999` (Mid Gray) · `--color-border` → `#212121` (Graphite Line) · `--color-accent` → `#bc49e9` (Signal Violet) · `--color-accent-2` → `#732a90` (Deep Orchid) · `--color-accent-3` → `#9ecbff` (Sky Tint) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e5e5e5` | `#101010` | 15.11:1 | AAA |
| `#e5e5e5` | `#f6f6f6` | 1.17:1 | fail |
| `#e5e5e5` | `#ffffff` | 1.26:1 | fail |
| `#b7b7b7` | `#101010` | 9.49:1 | AAA |
| `#b7b7b7` | `#f6f6f6` | 1.86:1 | fail |
| `#b7b7b7` | `#e5e5e5` | 1.59:1 | fail |
| `#b7b7b7` | `#ffffff` | 2.01:1 | fail |
| `#999999` | `#101010` | 6.68:1 | AA |
| `#999999` | `#f6f6f6` | 2.64:1 | fail |
| `#999999` | `#e5e5e5` | 2.26:1 | fail |

### Gradients

- `radial-gradient(circle, rgba(0, 0, 0, 0.07) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(lab(4.75859 0 0) 20%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0))`
- `linear-gradient(lab(52.8653 63.6781 -60.5912) 50%, oklab(0.439598 0.117816 -0.118748))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-display` | webfont | 400, 500, 600, 700 | Secondary headings, UI labels, and compact feature text | Inter |
| JetBrainsMono | `--font-mono` | webfont | 400 | Captions, code samples, and technical microcopy | JetBrains Mono |
| Uncut Sans Variable | `--font-body` | webfont | 400, 500, 600 | Hero, body copy, navigation, buttons, and primary page messaging | Inter |

- **Inter:** Measured weights 400–700; use strong heading weight and compact label styling.
- **JetBrainsMono:** Regular monospace; retain a technical, compact feel for code and small metadata.
- **Uncut Sans Variable:** Variable weights 400–600; hero uses tight tracking, while button labels are slightly tracked.

### Type scale — Major Third (ratio ≈ 1.286, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 34px | 600 | 1.1 | -0.025em | — | Uncut Sans Variable | Centered hero headline introducing faster design-to-production. |
| h2 | 28px | 700 | 1.2 | -0.04em | — | Inter | Section titles for major product, pricing, and mission blocks. |
| h3 | 24px | 600 | 1.25 | -0.025em | — | Inter | Subheadings within feature and toolkit content. |
| body | 16px | 400 | 1.5 | 0 | — | Uncut Sans Variable | Explanatory copy beneath headings and beside product previews. |
| caption | 12px | 400 | 1.5 | 0 | — | JetBrainsMono | Small technical labels and supporting interface metadata. |
| button | 14px | 500 | 1 | 0.143em | — | Uncut Sans Variable | Compact labels on primary and secondary calls to action. |
| link | 14px | 400 | 1.43 | 0 | — | Uncut Sans Variable | Navigation, inline product links, and footer destinations. |
| eyebrow | 10px | 500 | 1.5 | 0.05em | uppercase | Inter | Uppercase section labels such as feature and pricing markers. |
| code | 12px | 400 | 1.5 | 0 | — | JetBrainsMono | Code examples and developer-oriented interface content. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 24, 32, 40 px.
- Section rhythm 40px · element gap 4px · card padding — · max content width —.

Use a restrained centered content area with deliberate horizontal breathing room; the measured page maximum width is unspecified, so match proportions from the screenshots rather than imposing a numeric width. The hero is centered above a wide interface showcase. Alternate broad full-width dark and pale section bands, then use two- or three-column feature and pricing layouts. Keep spacing compact within content groups but allow generous separation between major page beats. Align feature copy to the start or center according to its product visual.

## Shape & elevation

- Radius: button `8px` · input `9999px` · card `14px` · media `3px` · badge `9999px` · link `8px` · xs `3px` · sm `6px` · md `8px` · lg `10px` · xl `14px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0.12) 0px 1px 1px -0.5px, rgba(255, 255, 255, 0.04) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0.12) 0px 1px 1px -0.5px, rgba(255, 255, 255, 0.15) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset`
- Shadow `hairline` (section, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.8) 0px 0px 1px 0px`
- Shadow `hairline-2` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.03) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.08) 0`
- Shadow `hairline-3` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat section surfaces and thin, low-contrast borders over pronounced cards. Buttons have subtle inset highlights and restrained dark shadowing; media and cards use quiet hairline edges, with soft shadow only where a preview needs separation. Preserve clear overlap between the interface showcase and its background without adding heavy depth effects.

## Imagery

Product interface captures are the primary imagery: large, clean screenshots of the design canvas, panels, and generated screens. Set them against the current section's dark or pale background, retaining visible interface detail rather than adding decorative framing. The hero uses a broad workspace preview with a subtle violet-lit wave beneath it. Avoid relying on lifestyle photography; code and interface mockups carry the product story.

## Components

### Primary CTA

Violet #bc49e9 fill, white label, compact inset highlight, and measured 8px corner radius; used for app and download actions.

### Secondary CTA

Dark neutral button beside the primary action, with restrained border or highlight and white text.

### Hero workspace preview

Wide product interface capture below centered headline and description; a subtle violet wave treatment adds emphasis beneath the canvas.

### Feature band

Pale #f6f6f6 section with dark copy, product UI imagery, and compact supporting feature statements.

### Pricing columns

Three aligned plan columns on the dark canvas, with concise feature lists and a violet emphasis on the upgrade action.

### Eyebrow label

Small uppercase Inter label above a larger section heading, used to signal content category.

### Measured component styles

- **Primary button** (“Open app”): background #bc49e9 · text #ffffff · radius 8px · padding 0px 12px · 500 14px Uncut Sans Variable · shadow rgba(0, 0, 0, 0.12) 0px 1px 1px -0.5px, rgba(255, 255, 255, 0.15) 0px 2px 1px 0p
- **Secondary button** (“Downloads”): background #242424 · text #ffffff · radius 8px · padding 0px 12px · 500 14px Uncut Sans Variable · shadow rgba(0, 0, 0, 0.12) 0px 1px 1px -0.5px, rgba(255, 255, 255, 0.04) 0px 2px 1px 0p
- **Link** (“Slack”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Uncut Sans Variable
- **Input** (“A delicate flower in soft natural light”): background #242424 · text #ffffff · border 1px solid #1d1d1d · radius 3.35544e+07px · padding 8px 32px 8px 12px · 400 14px Uncut Sans Variable
- **Card** (“9:41 Discover Search artists, styles, co”): background #ffffff · text #ffffff · radius 0px · padding 0px · 400 16px Inter
- **Badge** (“STILLEBEN”): background #fefefe · text #333333 · radius 0px · padding 6px 8px · 500 12px Inter · uppercase
- **Navigation item** (“Pricing Changelog Docs Careers Downloads”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Uncut Sans Variable

## Do

- Keep the main canvas near-black and use pale bands as deliberate section breaks.
- Use #bc49e9 for the primary action and restrained inline emphasis.
- Make product interface previews the dominant imagery.
- Pair concise headings with subdued, readable supporting copy.
- Use JetBrains Mono for code and technical captions.
- Keep borders quiet and shadows subtle.

## Don't

- Do not turn the page into a bright, all-white layout.
- Do not use violet as a broad background wash.
- Do not replace product screenshots with generic lifestyle imagery.
- Do not add heavy shadows or stacked decorative cards.
- Do not use multiple competing accent colors for primary actions.
- Do not make every section use the same alignment or background.

## Agent prompt

Build a new page in Wonder's product-led visual style. Use Studio Black (#101010) as the dominant canvas, with Gallery White (#f6f6f6) reserved for clear feature-section contrast. Set headings and body copy in a clean sans-serif close to Uncut Sans Variable; use Inter for supporting labels and JetBrains Mono for code or technical captions. Make real interface screenshots or faithful product UI mockups the central visual material. Keep the hero centered, then vary feature layouts and section alignment to create a clear page rhythm. Use Signal Violet (#bc49e9) for primary actions and occasional link emphasis, with Deep Orchid (#732a90) only as a supporting gradient tone. Maintain quiet borders, modest inset button highlights, and compact component spacing. Avoid decorative imagery, loud gradients, or heavy elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above paired calls to action, followed by a wide workspace preview. | Primary download CTA, Secondary browser entry | Dark canvas, Violet selection outline, Wide interface preview |
| 2 | product-showcase | Single-column, full-width product visual on a dark section. | Visual product demonstration | Large interface capture, Violet-lit wave |
| 3 | logo-cloud | Centered label above a compact row of partner marks. | Partner credibility | Muted logos, Small uppercase eyebrow |
| 4 | feature-grid | Pale band with introductory copy and product screen, followed by three compact feature columns. | Feature explanation, Product-led demonstration | Light section band, Interface screenshot, Three-column supporting copy |
| 5 | feature-split | Light section with centered heading and description above a wide, multi-panel product visual. | Code-to-design workflow, Inline product link | Pale background, Code and canvas panels, Side-by-side composition |
| 6 | feature-grid | Dark section with heading and summary, followed by a dense multi-column feature grid. | Tool discovery, Prompt input | Dark canvas, Feature tiles, Code and image examples |
| 7 | pricing | Dark section with introductory title and three aligned plan columns. | Compare plans, Upgrade CTA | Free, Pro, Enterprise columns, Violet Pro action, Compact feature lists |
| 8 | footer | Centered mission and CTA above a multi-column footer navigation. | Closing CTA, Grouped site navigation | Dark full-bleed area, Centered mission block, Compact link columns |

## Source CSS custom properties (selected)

```css
--font-mono: "JetBrainsMono", "JetBrainsMono Fallback", monospace;
--background: lab(4.75859% 0 0);
--background-elevated: lab(7.78201% -.0000149012 0);
--background-inverted: lab(96.984% 0 0);
--foreground: lab(100% 0 0);
--foreground-inverted: lab(10.448% 0 0);
--foreground-secondary: lab(100% 0 0/.7);
--foreground-tertiary: lab(100% 0 0/.4);
--foreground-body: lab(100% 0 0/.85);
--accent: lab(52.8653% 63.6781 -60.5912);
--accent-muted: lab(28.2503% 49.3246 -49.4174);
--accent-subtle: lab(13.6229% 29.6437 -29.4625);
--accent-dark: lab(1.99521% 7.18552 -8.37012);
--surface: lab(14.044% 0 0);
--surface-hover: lab(100% 0 0/.1);
--popover-foreground: lab(100% 0 0/.8);
--border: lab(25.3993% 2.43703 -2.64763);
--border-subtle: lab(100% 0 0/.07);
--border-inverted: lab(0% 0 0/.08);
--grid-spacer: 6rem;
--radius: .625rem;
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
--shadow-elev-1: 0 1px 1px -.5px #0000001f;
--shadow-elev-2: 0 1px 1px -.5px #0000001f, 0 3px 3px -1.5px #0000001f;
--shadow-elev-3: 0 1px 1px -.5px #0000001f, 0 3px 3px -1.5px #0000001f, 0 6px 6px -3px #0000001f;
--shadow-elev-4: 0 1px 1px -.5px #0000000a, 0 4px 8px -3px #00000014, 0 8px 16px -2px #00000014;
--shadow-card: 0 1px 1px -.5px #0000001f, 0 3px 3px -1.5px #0000001f, 0 6px 6px -3px #0000001f;
```

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