---
version: alpha
name: Wonderful
description: Confident AI-product minimalism — near-black canvas with bright off-white ink, a single warm coral-orange accent doing all the work, oversized tightly-tracked sans-serif display, generous pill buttons and softly rounded cards on a dark editorial grid.
colors:
  # Canvas + ink
  background: "#0b0b0f"
  surface: "#141419"
  surface-soft: "#1c1c23"
  ink: "#f5f4f0"
  ink-secondary: "#a8a7b0"
  ink-muted: "#71707a"

  # Accent — the single warm signature
  primary: "#ff5c39"
  primary-hover: "#ff734f"
  accent-soft: "#3a221b"      # warm tinted surface (coral over dark canvas)

  # Light inversion (used in alternating sections)
  surface-light: "#f5f4f0"
  ink-on-light: "#0b0b0f"

  # Borders + hairlines
  border: "#26262e"
  border-strong: "#34343d"

  # On-color
  on-primary: "#0b0b0f"
  on-ink: "#0b0b0f"

  # Status tint
  badge-bg: "#1c1c23"
  badge-text: "#a8a7b0"

typography:
  display-hero:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -2.88px
  display:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2.24px
  section-heading:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.66px
  body-large:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.15px
  caption:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Manrope, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 1.3px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 6px
  sm: 10px
  md: 14px
  lg: 20px
  xl: 28px
  2xl: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
---

# Wonderful Design System

## Overview

Wonderful presents itself as a confident, product-led AI company, and its visual language reflects that posture: a deep near-black canvas (`{colors.background}`), warm off-white ink (`{colors.ink}`), and a single bright coral-orange accent (`{colors.primary}`) that carries every call to action. There is no second accent fighting for attention — the restraint is the statement. The result reads as premium, editorial, and unmistakably modern AI-product, closer to a launch keynote slide than a conventional SaaS marketing page.

Typography does the heavy lifting. A geometric humanist sans (Manrope as the closest Google match) runs at large display sizes with aggressive negative tracking (-2.88px at the 72px hero), compressing headlines into dense, sculptural blocks. Body copy relaxes to neutral tracking and a comfortable 1.6 line-height, keeping long-form readable against the dark surface. An uppercase, wide-tracked eyebrow label in the coral accent introduces sections, and a monospace voice appears for technical or product-detail labels.

The chrome is soft and generous. Buttons are full pills with comfortable 14px/28px padding; cards use large radii (`{rounded.lg}`–`{rounded.xl}`) and sit on slightly-lifted surfaces (`{colors.surface}`, `{colors.surface-soft}`) separated from the canvas by hairline borders (`{colors.border}`) rather than heavy shadows. Some sections invert to a warm off-white (`{colors.surface-light}`) with near-black ink for rhythm, but the dark mode is the home identity.

**Key Characteristics:**
- Deep near-black canvas with warm off-white ink — premium dark-mode identity
- One bright coral-orange accent (`{colors.primary}`) for all CTAs and eyebrows; no competing accent
- Oversized geometric-sans display with aggressive negative tracking (-2.88px at hero)
- Full-pill buttons with generous padding
- Large card radii (20–28px) on lifted dark surfaces with hairline borders, not shadows
- Uppercase wide-tracked eyebrow labels in the accent color
- Alternating dark / warm-light sections for editorial rhythm

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): Page background, the home dark surface.
- **Surface** (`{colors.surface}`): Cards, secondary buttons, inputs — one step off the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, nested panels.
- **Ink** (`{colors.ink}`): Primary text and headings — warm off-white, never pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and descriptive copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled labels.

### Accent
- **Coral** (`{colors.primary}`): The signature. All primary CTAs, eyebrow labels, focus, active states.
- **Coral Hover** (`{colors.primary-hover}`): Hover state for primary CTAs.
- **Accent Soft** (`{colors.accent-soft}`): Warm tinted surface for accent-context panels.

### Light Inversion
- **Surface Light** (`{colors.surface-light}`): Warm off-white background for inverted sections.
- **Ink on Light** (`{colors.ink-on-light}`): Near-black text on light sections.

### Borders
- **Border** (`{colors.border}`): Hairline dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary button outlines.

### On-Color
- **On Primary** (`{colors.on-primary}`): Near-black text on the coral accent.

## Typography

### Font Family
- **Primary**: `Manrope`, with fallbacks `Inter, Arial, sans-serif` — a geometric humanist sans standing in for the brand's display face.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — technical labels and product detail.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 72px hero — keynote billboard impact |
| `display` | Large statement headers |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group titles |
| `card-title` | Feature cards |
| `body-large` | Lead paragraphs, hero subtitle |
| `body` | Standard reading text |
| `body-small` | UI text, dense copy |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, badges |
| `eyebrow` | Uppercase wide-tracked section labels (accent) |
| `mono-label` | Technical / product-detail labels |

### Principles
- **Compression at scale**: Negative tracking grows with size (-2.88px hero, -1.6px section, neutral at body).
- **One weight for impact**: Headings sit at 600; the system avoids 700/800 — confidence through size, not weight.
- **Eyebrow rhythm**: Every major section opens with an uppercase, +1.3px-tracked coral eyebrow.
- **Readable dark body**: Body copy uses `{colors.ink-secondary}` at 1.6 line-height for sustained reading on dark.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps (`{spacing.4xl}` 96px, `{spacing.5xl}` 140px) for section separation.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: single-column, left- or center-aligned, generous top padding
- Feature sections: 2–3 column card grids
- Alternating dark / warm-light section bands for rhythm

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical padding between sections (`{spacing.4xl}`–`{spacing.5xl}`).
- **Dark gallery**: The near-black canvas makes the coral accent and off-white type feel spotlit.
- **Hairline separation**: Cards lift via `{colors.border}` hairlines and a single surface step, not drop shadows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 6px | Inline chips, small spans |
| `sm` | 10px | Small controls |
| `md` | 14px | Inputs, list items |
| `lg` | 20px | Cards |
| `xl` | 28px | Feature cards |
| `2xl` | 40px | Large panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Coral fill, near-black text, full pill, 14px/28px padding. The default CTA.
- **`button-secondary`** — Dark surface with `{colors.border-strong}` outline, off-white text, full pill.

### Badges
- **`badge`** — Dark surface, muted text, hairline border, full pill — quiet status/tag chip.

### Cards
- **`card`** — Lifted dark surface, `{rounded.lg}`, hairline border, 28px padding.
- **`card-feature`** — Softer surface, larger `{rounded.xl}` radius, 32px padding for headline features.

### Inputs
- **`input`** — Dark surface, `{rounded.md}`, `{colors.border-strong}` outline. Focus switches the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Dark sticky header, off-white links, coral pill CTA right, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the coral accent (`{colors.primary}`) as the only accent — CTAs, eyebrows, focus.
- Use warm off-white `{colors.ink}` for text, never pure `#ffffff`.
- Use full-pill buttons with generous padding.
- Open sections with uppercase, wide-tracked coral eyebrows.
- Separate cards with hairline borders and a single surface step, not heavy shadows.
- Scale negative tracking with font size on display headings.

### Don't
- Don't introduce a second competing accent color.
- Don't put coral text on the coral fill — use `{colors.on-primary}` (near-black).
- Don't use weight 700+ on headlines — size carries the impact.
- Don't drop the eyebrow label rhythm above section headings.
- Don't use sharp 0px corners on cards or buttons.
- Don't use pure black (`#000000`) — the canvas is a warm near-black.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales to ~40px, tight padding |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1280px | Full 3-column layout, max content width |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero: 72px → ~40px, maintains proportional negative tracking
- Navigation: links + CTA → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Section spacing: 140px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Coral `{colors.primary}` with near-black text `{colors.on-primary}`
- Background: Near-black `{colors.background}`
- Heading text: Warm off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: hairline `{colors.border}`
- Focus: `{colors.primary}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Coral uppercase eyebrow (`{colors.primary}`, 13px, +1.3px tracking). Headline 72px Manrope weight 600, line-height 1.02, letter-spacing -2.88px, `{colors.ink}`. Subtitle 20px weight 400, `{colors.ink-secondary}`. Coral pill CTA (`{colors.primary}`, near-black text, 9999px radius, 14px/28px padding) plus a dark outlined secondary pill."
- "Feature card: surface `{colors.surface-soft}`, 28px radius, hairline `{colors.border}`, 32px padding. Title 22px Manrope weight 600 letter-spacing -0.66px `{colors.ink}`, body 17px weight 400 `{colors.ink-secondary}`."
- "Badge: dark `{colors.badge-bg}`, muted text `{colors.badge-text}`, hairline border, full pill, 13px weight 500."

### Iteration Guide
1. One accent only — coral does all the work.
2. Negative tracking scales with size; body stays neutral.
3. Headings cap at weight 600 — impact comes from scale.
4. Cards lift with a surface step + hairline, never heavy shadow.
5. Warm near-black and warm off-white — avoid pure black/white.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Wonderful. Brand names and trademarks belong to their respective owners.