<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Synthesia
tagline: A white enterprise canvas where Basier Square headlines run near-black navy and a single indigo-blue pill carries every action.
updated_at: 2026-05-29T21:43:20.397Z
published_at: 2026-05-29T21:43:20.397Z
author: webdesignhot
source_url: https://www.synthesia.io
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, saas]
tags: [light, sans, enterprise]
preview_swatch: ['#ffffff', '#3e57da', '#e585d7']
related: [runway-ml, openai, vercel]
description: 'Synthesia''s site is an enterprise AI-video platform that dresses like a product brochure for a Fortune 500 buyer. The canvas is pure white `#ffffff`, body copy sits in a desaturated slate `#333b52`, and headlines are typeset in **Basier Square** at 88px weight 500 in a near-black navy `#0d0f2c` — confident but never shouting. Every primary action collapses into one signature: an indigo-blue `#3e57da` pill at 8px radius reading "Get started". A secondary pink palette (`#e585d7` main, scaling `#fef6fb` → `#26042f`) supplies decorative accents and feature illustration without ever touching the call to action. The register is polished, trustworthy, video-product enterprise.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-pink
  muted: text-muted
  border: border
  ring: brand
colors:
  # Primary
  bg: '#ffffff'                   # pure white enterprise canvas
  bg-alt: '#f7f8fb'               # faint cool-grey section band
  bg-navy: '#0d0f2c'              # inverted near-black navy band
  text: '#333b52'                 # desaturated slate body copy
  text-strong: '#0d0f2c'          # near-black navy headings
  text-muted: '#6b7280'           # quiet grey caption / metadata
  text-soft: '#9aa1b1'            # whisper label / placeholder

  # Brand
  brand: '#3e57da'                # signature indigo-blue (rgb 62,87,218)
  brand-hover: '#3349c0'          # darkened indigo on hover
  brand-active: '#2c3ea6'         # pressed indigo
  brand-soft: '#eef1fd'           # indigo tint surface / highlight
  on-brand: '#ffffff'             # white text on the indigo pill

  # Accent — secondary PINK palette (decorative only, never CTA)
  accent-pink: '#e585d7'          # pink-500 main accent
  pink-100: '#fef6fb'             # faintest pink wash
  pink-200: '#ffebfc'             # pale pink surface
  pink-300: '#ffd7f9'             # light pink tint
  pink-400: '#f6b2ec'             # mid pink
  pink-500: '#e585d7'             # main pink accent
  pink-600: '#a73b98'             # deep magenta
  pink-700: '#751b68'             # plum text-safe pink
  pink-800: '#26042f'             # near-black aubergine

  # Interactive
  link: '#3e57da'                 # indigo links in body copy
  link-hover: '#2c3ea6'           # darker indigo on hover
  link-visited: '#5a4bc4'         # blue-violet visited
  selected: '#eef1fd'             # indigo-tint selection bg
  disabled: '#c7ccdb'             # muted disabled grey

  # Neutral scale (cool blue-grey ladder)
  neutral-50: '#f7f8fb'
  neutral-100: '#eef0f5'
  neutral-200: '#e2e5ee'
  neutral-300: '#cdd2e0'
  neutral-400: '#9aa1b1'
  neutral-500: '#6b7280'
  neutral-600: '#4c5468'
  neutral-700: '#333b52'
  neutral-800: '#1e2438'
  neutral-900: '#0d0f2c'

  # Surface & Borders
  surface: '#ffffff'              # default card surface (flat white)
  surface-alt: '#f7f8fb'          # tinted card / section band
  surface-navy: '#0d0f2c'         # inverted navy feature panel
  surface-pink: '#fef6fb'         # pink-wash accent card
  border: '#e2e5ee'               # default hairline divider
  border-strong: '#cdd2e0'        # visible input / card border
  border-subtle: '#eef0f5'        # faintest rule
  border-brand: '#3e57da'         # focused / active indigo border

  # Shadow colors
  shadow-ambient: 'rgba(13,15,44,0.06)'
  shadow-standard: 'rgba(13,15,44,0.10)'
  shadow-elevated: 'rgba(13,15,44,0.16)'

  # Semantic
  success: '#1f9d6b'
  success-bg: '#e8f7f0'
  success-text: '#0f5a3c'
  warning: '#c77d12'
  warning-bg: '#fbf3e2'
  warning-text: '#7a4d06'
  danger: '#d64545'
  danger-bg: '#fbeaea'
  danger-text: '#8a2424'
  info: '#3e57da'
  info-bg: '#eef1fd'
  info-text: '#2c3ea6'

typography:
  display:
    family: '"Basier Square", "Basiersquare Webfont", system-ui, -apple-system, "Segoe UI", sans-serif'
    weights: [500, 600, 700]
  body:
    family: '"Basier Square", "Basiersquare Webfont", system-ui, -apple-system, "Segoe UI", sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 88, weight: 500, family: display, lineHeight: 1.0,  tracking: '-0.03em'  }
    display-lg:      { size: 56, weight: 500, family: display, lineHeight: 1.05, tracking: '-0.02em'  }
    h1:              { size: 88, weight: 500, family: display, lineHeight: 1.0,  tracking: '-0.03em'  }
    h2:              { size: 56, weight: 500, family: display, lineHeight: 1.05, tracking: '-0.02em'  }
    h3:              { size: 32, weight: 500, family: display, lineHeight: 1.2,  tracking: '-0.012em' }
    h4:              { size: 24, weight: 500, family: display, lineHeight: 1.25, tracking: '-0.005em' }
    h5:              { size: 20, weight: 600, family: body,    lineHeight: 1.3,  tracking: '0'        }
    body-lg:         { size: 18, weight: 400, family: body,    lineHeight: 1.55, tracking: '0'        }
    body:            { size: 16, weight: 400, family: body,    lineHeight: 1.55, tracking: '0'        }
    body-sm:         { size: 14, weight: 400, family: body,    lineHeight: 1.5,  tracking: '0'        }
    lead:            { size: 20, weight: 400, family: body,    lineHeight: 1.5,  tracking: '0'        }
    label:           { size: 13, weight: 500, family: body,    lineHeight: 1.4,  tracking: '0'        }
    caption:         { size: 12, weight: 500, family: body,    lineHeight: 1.4,  tracking: '0.02em'   }
    overline:        { size: 12, weight: 600, family: body,    lineHeight: 1.3,  tracking: '0.08em'   }
    button:          { size: 16, weight: 500, family: body,    lineHeight: 1.0,  tracking: '0'        }
    nav-link:        { size: 15, weight: 500, family: body,    lineHeight: 1.0,  tracking: '0'        }
    code:            { size: 14, weight: 400, family: mono,    lineHeight: 1.5,  tracking: '0'        }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  xxl: 24
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

shadows:
  ambient: 'rgba(13,15,44,0.06) 0 1px 2px'
  standard: 'rgba(13,15,44,0.10) 0 4px 16px -2px'
  elevated: 'rgba(13,15,44,0.16) 0 16px 40px -8px'
  brand-glow: 'rgba(62,87,218,0.24) 0 8px 24px -6px'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — autoplay video freezes to poster, transitions degrade to opacity'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

accessibility:
  contrast-text-on-bg: 11.12         # slate #333b52 on #ffffff, AAA
  contrast-heading-on-bg: 18.72      # navy #0d0f2c on #ffffff, AAA
  contrast-white-on-brand: 5.87      # #ffffff on indigo #3e57da, AA (AAA large)
  contrast-brand-on-bg: 5.87         # indigo #3e57da on #ffffff, AA (AAA large)
  contrast-pink700-on-bg: 9.94       # plum #751b68 on #ffffff, AAA
  focus-ring: '3px solid rgba(62,87,218,0.45) with 2px offset'
  focus-ring-offset-color: '#ffffff'
  reduced-motion-honored: true
  keyboard-nav: 'full tab traversal; ESC closes modal/menu; arrow keys move within mega-menu columns'

components:
  button-primary:
    bg: '#3e57da'
    text: '#ffffff'
    border: 'none'
    radius: 8
    padding: '12px 20px'
    font: 'body 16/1.0 weight 500'
    hover: 'bg #3349c0'
    active: 'bg #2c3ea6'
    focus: '3px ring rgba(62,87,218,0.45) + 2px offset'
  button-secondary:
    bg: '#ffffff'
    text: '#0d0f2c'
    border: '1px solid #cdd2e0'
    radius: 10
    padding: '12px 20px'
    font: 'body 16/1.0 weight 500'
    hover: 'border #0d0f2c, bg #f7f8fb'
    active: 'bg #eef0f5'
  button-ghost:
    bg: 'transparent'
    text: '#3e57da'
    border: 'none'
    radius: 8
    padding: '12px 16px'
    font: 'body 16/1.0 weight 500'
    hover: 'bg #eef1fd'
  button-navy:
    bg: '#0d0f2c'
    text: '#ffffff'
    border: 'none'
    radius: 8
    padding: '12px 20px'
    font: 'body 16/1.0 weight 500'
    hover: 'bg #1e2438'
  card:
    bg: '#ffffff'
    border: '1px solid #e2e5ee'
    radius: 16
    padding: '24px'
    shadow: 'standard'
    hover: 'shadow elevated, translateY -2px'
  card-pink:
    bg: '#fef6fb'
    border: '1px solid #ffd7f9'
    radius: 16
    padding: '24px'
    shadow: 'none'
  input:
    bg: '#ffffff'
    text: '#333b52'
    placeholder: '#9aa1b1'
    border: '1px solid #cdd2e0'
    radius: 8
    padding: '10px 14px'
    font: 'body 16/1.5 weight 400'
    focus: 'border #3e57da, 3px ring rgba(62,87,218,0.18)'
  badge:
    bg: '#eef1fd'
    text: '#2c3ea6'
    border: 'none'
    radius: 9999
    padding: '4px 12px'
    font: 'body 13/1.4 weight 500'
  badge-pink:
    bg: '#ffebfc'
    text: '#751b68'
    border: 'none'
    radius: 9999
    padding: '4px 12px'
    font: 'body 13/1.4 weight 500'

lineage:
  summary: |
    Synthesia reads like an enterprise SaaS brochure that learned the
    discipline of a video product. The canvas is pure white `#ffffff`,
    body copy a desaturated slate `#333b52`, and headlines run in
    **Basier Square** — a humanist grotesque from French foundry
    Fontsmith/atipo — at 88px weight 500 in a near-black navy `#0d0f2c`.
    The one chromatic anchor is an indigo-blue `#3e57da` that owns every
    primary action: a single 8px-radius pill reading "Get started"
    repeated down the page. That restraint — one blue, one shape, one
    verb — is the trust move; it signals a product safe for a procurement
    committee. A secondary pink palette (`#e585d7` main, scaling from a
    `#fef6fb` wash to a `#26042f` aubergine) supplies decorative warmth,
    feature illustration, and avatar-product energy without ever
    competing with the CTA. Where Runway keeps its chrome silent so video
    can shout, Synthesia keeps its chrome bright and reassuring so the
    enterprise buyer feels at home: lots of white, soft elevation, a calm
    blue button, and the product demo doing the convincing.
  influences:
    - name: Stripe
      role: White-canvas enterprise SaaS register — single confident brand blue carrying every primary action.
      url: https://stripe.com
    - name: Linear
      role: Humanist-grotesque headline discipline and tight negative tracking on a clean light surface.
      url: https://linear.app
    - name: Intercom
      role: Friendly enterprise B2B polish — soft elevation, rounded cards, approachable product brochure feel.
      url: https://intercom.com
    - name: Atipo Foundry
      role: Basier Square humanist grotesque as the single display-and-body typeface.
      url: https://www.atipofoundry.com
    - name: Notion
      role: Generous whitespace and calm, product-forward marketing layout for a broad business audience.
      url: https://notion.so

dark-mode: light-only      # Synthesia ships a light-only marketing surface; navy bands are inversions, not a theme
---

## 1. Visual Theme & Atmosphere

Synthesia is an enterprise AI-video platform that dresses like a product brochure built for a Fortune 500 procurement committee. The canvas is pure white `#ffffff` — no off-white, no warm paper, just clean product-page white. Body copy sits in a desaturated slate `#333b52`, a blue-leaning grey that reads calm and trustworthy rather than stark. Headlines run in **Basier Square** at a confident 88px, weight 500, in a near-black navy `#0d0f2c`. The headline weight is the tell: 500, not 700. Synthesia never shouts. It states its case in a measured, well-spaced voice and lets the product demo do the persuading.

The single chromatic anchor is an indigo-blue `#3e57da` (rgb 62, 87, 218). It owns every primary action on the page: a small 8px-radius pill reading "Get started", repeated from the nav through the hero down to the footer. That discipline — one blue, one shape, one verb — is the brand's trust signature. A buyer scanning the page never has to wonder where the action is; it is always the indigo pill, always the same words. The white secondary button (10px radius, navy text) sits beside it for the lower-commitment path ("Book a demo", "Watch video").

Beneath the chrome runs a secondary pink palette — `#e585d7` as the main accent, scaling from a faint `#fef6fb` wash through `#ffebfc` and `#ffd7f9` tints up to a deep `#751b68` plum and a near-black `#26042f` aubergine. Pink is the brand's warmth: it tints feature illustrations, avatar-product imagery, accent cards, and decorative gradients. Crucially, pink never touches a primary CTA. The indigo carries action; the pink carries personality. Keeping those two jobs separate is what lets the page feel both enterprise-serious and product-friendly at once.

The sensory register is bright, polished, and reassuring — a well-lit demo studio rather than a brutalist gallery. Soft `rgba(13,15,44,...)` navy-tinted shadows lift cards a few pixels off the white ground. Corners are generously rounded (16px cards, 8px buttons). Whitespace is abundant. Where Runway keeps its chrome silent so generated video can dominate, Synthesia keeps its chrome bright and legible so the enterprise buyer feels at home, then drops a product video into the frame to close.

**Key Characteristics**

- Pure white `#ffffff` enterprise canvas — clean, bright, product-page white
- Basier Square humanist grotesque carries both display and body
- Headlines at 88px weight **500** in near-black navy `#0d0f2c` — confident, never shouting
- Body in desaturated slate `#333b52` — calm, trustworthy, blue-leaning grey
- One indigo-blue `#3e57da` pill (8px radius) owns every primary action
- Secondary white button at 10px radius for lower-commitment paths
- Secondary pink palette (`#e585d7`) for warmth, illustration, accents — never CTA
- Soft navy-tinted elevation; generously rounded 16px cards
- Abundant whitespace; product-brochure rhythm
- Occasional inverted navy `#0d0f2c` bands for emphasis sections

## 2. Color Palette & Roles

### Canvas / Primary

- **bg** (`#ffffff`): pure white enterprise canvas — the default ground everywhere
- **bg-alt** (`#f7f8fb`): faint cool-grey band to separate sections without a hard rule
- **bg-navy** (`#0d0f2c`): inverted near-black navy band for emphasis / footer / feature spotlight
- **text** (`#333b52`): desaturated slate body copy — calm, blue-leaning, the default reading colour
- **text-strong** (`#0d0f2c`): near-black navy for all headings and high-emphasis copy
- **text-muted** (`#6b7280`): quiet grey for captions, metadata, secondary labels
- **text-soft** (`#9aa1b1`): whisper grey for placeholders and disabled-adjacent labels

### Brand

- **brand** (`#3e57da`): the signature indigo-blue — every primary CTA, every link, the focus ring
- **brand-hover** (`#3349c0`): darkened indigo on hover
- **brand-active** (`#2c3ea6`): pressed indigo
- **brand-soft** (`#eef1fd`): pale indigo tint for highlight surfaces, badges, selection
- **on-brand** (`#ffffff`): white text sitting on the indigo pill

### Accent — Pink (decorative only)

- **accent-pink / pink-500** (`#e585d7`): the main pink accent — illustration, gradient, avatar energy
- **pink-100** (`#fef6fb`): faintest pink wash — accent card background
- **pink-200** (`#ffebfc`): pale pink surface
- **pink-300** (`#ffd7f9`): light pink tint — card border on pink cards
- **pink-400** (`#f6b2ec`): mid pink — illustration midtone
- **pink-600** (`#a73b98`): deep magenta — accent text on light pink
- **pink-700** (`#751b68`): plum — text-safe pink, 9.94:1 on white
- **pink-800** (`#26042f`): near-black aubergine — deepest pink for high-contrast text on pink wash

The pink set is purely decorative and brand-warmth. It never appears on a primary call to action — that job belongs to the indigo exclusively. The separation of duties (indigo = action, pink = personality) is structural.

### Borders

- **border** (`#e2e5ee`): default hairline divider between cards and sections
- **border-strong** (`#cdd2e0`): visible border on inputs and secondary buttons
- **border-subtle** (`#eef0f5`): faintest rule, for nested dividers
- **border-brand** (`#3e57da`): indigo border on focused inputs / active states

### Surface

- **surface** (`#ffffff`): default flat-white card surface
- **surface-alt** (`#f7f8fb`): tinted card or section band
- **surface-navy** (`#0d0f2c`): inverted navy feature panel (white text inside)
- **surface-pink** (`#fef6fb`): pink-wash accent card

### Shadow

- **shadow-ambient** (`rgba(13,15,44,0.06)`): the base navy-tinted lift on resting cards
- **shadow-standard** (`rgba(13,15,44,0.10)`): default card elevation
- **shadow-elevated** (`rgba(13,15,44,0.16)`): hover / modal lift
- **brand-glow** (`rgba(62,87,218,0.24)`): optional soft indigo glow under a featured CTA

Shadows are tinted with the navy `#0d0f2c` rather than pure black — the lift reads soft and cool, in keeping with the calm enterprise register.

### Semantic

- **success** (`#1f9d6b`): teal-green — confirmations, render-complete
- **warning** (`#c77d12`): amber — usage limits, billing nudges
- **danger** (`#d64545`): muted red — destructive in-product actions only, never marketing
- **info** (`#3e57da`): reuses the brand indigo for informational banners

## 3. Typography Rules

### Font Family

- **Display & Body**: `"Basier Square", "Basiersquare Webfont", system-ui, -apple-system, "Segoe UI", sans-serif` — a humanist grotesque from atipo foundry. Display weights 500/600/700; body weights 400/500/600. Basier Square carries the entire type system — there is no second sans, no serif.
- **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace` — weights 400/500. Reserved for code samples, API snippets, and technical IDs.

### Hierarchy

| Role          | Font         | Size | Weight | Line H | Tracking  | Notes |
|---------------|--------------|------|--------|--------|-----------|-------|
| display-hero  | Basier Square| 88   | 500    | 1.0    | -0.03em   | hero headline — the canonical Synthesia head |
| display-lg    | Basier Square| 56   | 500    | 1.05   | -0.02em   | major section opener |
| h1            | Basier Square| 88   | 500    | 1.0    | -0.03em   | page title (= hero) |
| h2            | Basier Square| 56   | 500    | 1.05   | -0.02em   | feature section head |
| h3            | Basier Square| 32   | 500    | 1.2    | -0.012em  | sub-section / card title |
| h4            | Basier Square| 24   | 500    | 1.25   | -0.005em  | feature head |
| h5            | Basier Square| 20   | 600    | 1.3    | 0         | inline group label |
| lead          | Basier Square| 20   | 400    | 1.5    | 0         | hero supporting paragraph |
| body-lg       | Basier Square| 18   | 400    | 1.55   | 0         | intro / large body |
| body          | Basier Square| 16   | 400    | 1.55   | 0         | default body |
| body-sm       | Basier Square| 14   | 400    | 1.5    | 0         | secondary body / footnote |
| label         | Basier Square| 13   | 500    | 1.4    | 0         | form labels, UI labels |
| caption       | Basier Square| 12   | 500    | 1.4    | 0.02em    | image / metric captions |
| overline      | Basier Square| 12   | 600    | 1.3    | 0.08em    | section eyebrow, uppercase |
| button        | Basier Square| 16   | 500    | 1.0    | 0         | CTA label |
| nav-link      | Basier Square| 15   | 500    | 1.0    | 0         | top-nav links |
| code          | mono         | 14   | 400    | 1.5    | 0         | inline code / API snippet |

### Principles

- **Single-family discipline**: Basier Square carries display and body. Weight, size, and colour do all the hierarchical work — no second face is introduced.
- **Weight 500 is the headline weight**: the canonical hero runs at weight 500, not 700. Confidence comes from size (88px) and tracking (`-0.03em`), not from heaviness. Reserve 600/700 for the rare moment that genuinely needs it.
- **Tighten as size grows**: tracking runs `-0.03em` at 88px, `-0.02em` at 56px, easing to `0` by the time you reach body sizes. Big heads pull tight; reading copy stays neutral.
- **Generous body line-height**: body sits at 1.55 — airy, calm, easy to scan. This is a reading surface, not a dense data table.
- **Navy for headings, slate for body**: every heading is near-black navy `#0d0f2c`; every paragraph is slate `#333b52`. The two-tone contrast gives the page a quiet vertical rhythm.
- **Overline eyebrows**: small section eyebrows use the `overline` style — 12px weight 600, `0.08em` tracking, often uppercase — to introduce a section above its h2.
- **No italics for emphasis**: emphasis is structural (weight, the navy/slate split, the indigo of a link), not italicised.

## 4. Component Stylings

### Buttons

**button-primary** — the signature indigo pill (the only thing that should ever look like the main action)
- Background: `#3e57da`
- Text: `#ffffff`, Basier Square 16/1.0 weight 500
- Border: none
- Radius: **8px**
- Padding: `12px 20px`
- Hover: bg `#3349c0`
- Active: bg `#2c3ea6`
- Focus: 3px `rgba(62,87,218,0.45)` ring + 2px offset
- Use: "Get started", "Get a demo" — the primary action everywhere

**button-secondary** — the white companion
- Background: `#ffffff`
- Text: `#0d0f2c`, 16/1.0 weight 500
- Border: `1px solid #cdd2e0`
- Radius: **10px**
- Padding: `12px 20px`
- Hover: border darkens to `#0d0f2c`, bg `#f7f8fb`
- Active: bg `#eef0f5`
- Use: "Book a demo", "Watch video" — the lower-commitment path beside the indigo pill

**button-ghost** — the bare link-button
- Background: transparent
- Text: `#3e57da`, 16/1.0 weight 500
- Border: none
- Radius: 8px
- Padding: `12px 16px`
- Hover: bg `#eef1fd` (indigo tint)
- Use: tertiary actions, "Learn more", in-card secondary

**button-navy** — the inverted CTA on light bands
- Background: `#0d0f2c`
- Text: `#ffffff`, 16/1.0 weight 500
- Border: none
- Radius: 8px
- Padding: `12px 20px`
- Hover: bg `#1e2438`
- Use: high-contrast CTA when the indigo would clash with a coloured illustration behind it

### Cards

**Default card** (feature, pricing, logo grid):
- Background: `#ffffff`
- Border: `1px solid #e2e5ee`
- Radius: **16px**
- Padding: `24px`
- Shadow: `standard` (`rgba(13,15,44,0.10) 0 4px 16px -2px`)
- Hover: shadow lifts to `elevated`, card translates up 2px

**Pink accent card** (feature highlight, testimonial):
- Background: `#fef6fb`
- Border: `1px solid #ffd7f9`
- Radius: 16px
- Padding: `24px`
- Shadow: none — the pink wash provides the separation
- Use: warmth moments — a quote, a stat, an avatar showcase

**Navy panel** (spotlight, CTA band):
- Background: `#0d0f2c`
- Text: white headings, `#cdd2e0` body
- Radius: 24px (or full-bleed)
- Use: a single emphasis section that inverts the page

### Badges / Tags / Pills

**Indigo badge** (default):
- Background: `#eef1fd`
- Text: `#2c3ea6`, 13/1.4 weight 500
- Radius: 9999 (pill)
- Padding: `4px 12px`
- Use: "New", "Enterprise", feature tags

**Pink badge** (accent):
- Background: `#ffebfc`
- Text: `#751b68`, 13/1.4 weight 500
- Radius: 9999
- Padding: `4px 12px`
- Use: decorative category chips, "Popular"

### Inputs / Forms

**Text input**:
- Background: `#ffffff`
- Text: `#333b52`, 16/1.5
- Placeholder: `#9aa1b1`
- Border: `1px solid #cdd2e0`
- Radius: 8px
- Padding: `10px 14px`
- Focus: border `#3e57da`, 3px `rgba(62,87,218,0.18)` ring
- Error: border `#d64545`, helper text `#8a2424`

**Label**: 13/1.4 weight 500 in `#333b52`, sits above the field with 6px gap.

### Navigation

- Top bar: 64px tall, white `#ffffff`, no border at rest; a 1px `#e2e5ee` rule and faint shadow appear on scroll
- Wordmark: hard-left, navy `#0d0f2c`
- Link list: centre or left-of-CTA, nav-link 15/1.0 weight 500 in `#333b52`, hover to `#0d0f2c`
- Mega-menu: products/solutions expand into a multi-column white panel with `standard` shadow; arrow keys move between columns
- Right cluster: a white secondary button ("Book a demo") beside the indigo "Get started" pill
- Mobile: links collapse into a hamburger sheet; the indigo pill stays pinned

## 5. Layout Principles

### Spacing System

Base 4px. Scale: `0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128`. Section vertical padding lands at 96 or 128. Component internal padding lives in the 16–24 range; card padding is 24. The system is regular and predictable — no asymmetric drama. Enterprise buyers read predictability as reliability.

### Grid & Container

- Page max width: **1280px**, centred with comfortable gutters
- Prose max width: **720px** for long-form reading
- Hero: split layout — copy column left (~540px), product video/illustration right — or centred copy above a full-width product still
- Feature grids: 3-column above desktop, 24px gutters, collapsing to 2 then 1
- Logo / social-proof strips: full-width single rows of customer marks

### Whitespace Philosophy

Whitespace is abundant and deliberate. The page breathes — generous 96–128px section padding, lots of air around the hero headline, plenty of margin around cards. This openness is the enterprise trust signal: the page never feels cramped or hard-selling. The eye is guided, not crowded.

### Section Cadence

A typical scroll: white hero with split copy/video → white logo proof strip → alternating white / `#f7f8fb` feature bands → one inverted `#0d0f2c` navy spotlight (or pink accent band) for emphasis → pricing on white → a final navy or indigo CTA band → footer. The `#f7f8fb` band is the workhorse separator; the navy/pink moments are the rare emphasis beats.

## 6. Shapes & Radius Scale

| Tier        | px   | Use |
|-------------|------|-----|
| Micro       | 2    | tiny inline chips, checkbox corners |
| Small       | 4    | nested tags, small controls |
| Medium      | 8    | **primary indigo button**, inputs, ghost buttons |
| Large       | 12   | minor cards, dropdown panels |
| XL          | 16   | default cards, feature tiles |
| XXL         | 24   | navy spotlight panels, large hero containers |
| Pill        | 9999 | badges, tags, avatar chips |

Note the **two button radii**: the primary indigo pill is **8px**, while the secondary white button is **10px** — a small, deliberate live-token difference. Cards round generously at 16px; emphasis panels go to 24px. Badges and tags are full pills. The overall feel is soft and approachable without tipping into playful.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | Flat, no shadow | bg, section bands, navy panels |
| 1 | `ambient` `rgba(13,15,44,0.06) 0 1px 2px` | resting low cards, input chrome |
| 2 | `standard` `rgba(13,15,44,0.10) 0 4px 16px -2px` | default cards, dropdowns |
| 3 | `elevated` `rgba(13,15,44,0.16) 0 16px 40px -8px` | card hover, modals, mega-menu |
| 4 | `brand-glow` `rgba(62,87,218,0.24) 0 8px 24px -6px` | a single featured indigo CTA |

### Shadow Philosophy

Elevation is soft, cool, and navy-tinted — shadows use `rgba(13,15,44,...)` rather than pure black, so the lift reads gentle against the white ground rather than harsh. Cards rest at a subtle standard shadow and lift to `elevated` on hover with a 2px upward translate. The optional `brand-glow` is reserved for one hero CTA at most — a faint indigo halo that draws the eye without breaking the calm. Navy spotlight panels carry no shadow; the colour inversion is their depth.

## 8. Interaction & Motion

### Easing

- `ease-standard` `cubic-bezier(0.4, 0, 0.2, 1)` — default for most transitions
- `ease-emphasized` `cubic-bezier(0.2, 0, 0, 1)` — entrances, reveals, modal opens
- `ease-out` `cubic-bezier(0, 0, 0.2, 1)` — exits and dismissals

### Durations

- `duration-fast` **150ms** — focus rings, hover colour shifts
- `duration-standard` **240ms** — button states, card hover lift
- `duration-slow` **320ms** — modal / mega-menu reveals, section fade-ups

### Per-Component Micro-States

- **Primary button hover**: bg shifts `#3e57da` → `#3349c0` over 150ms `ease-standard`; no scale, no bounce — calm and immediate
- **Secondary button hover**: border darkens to `#0d0f2c`, bg tints to `#f7f8fb` over 150ms
- **Card hover**: shadow lifts `standard` → `elevated` and the card translates up 2px over 240ms `ease-standard`
- **Link hover**: indigo `#3e57da` deepens to `#2c3ea6`; an underline may grow from 0 over 150ms
- **Mega-menu**: opens with a 320ms `ease-emphasized` fade-up + 8px translate
- **Product video**: autoplays muted in the hero, loops, with a soft crossfade between scenes

### Page Transitions

Section content fades up via `IntersectionObserver` — opacity 0→1 with a 12px translate-y over 320ms `ease-emphasized`, lightly staggered across a row of cards. The hero product video autoplays and loops on first paint.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. Autoplay video freezes to a poster still. Fade-up reveals collapse to instant or opacity-only. Hover translates are dropped; colour-only state changes remain. Focus rings are unaffected — they are functional, not decorative.

## 9. Accessibility & A11y

### Contrast Pairs (computed from live tokens)

- Slate `#333b52` on white `#ffffff` (body): **11.12:1** — AAA
- Navy `#0d0f2c` on white `#ffffff` (headings): **18.72:1** — AAA
- White on indigo `#3e57da` (primary button): **5.87:1** — AA at all sizes, AAA at large
- Indigo `#3e57da` on white (links): **5.87:1** — AA at body sizes
- Plum `#751b68` on white (pink-700 text): **9.94:1** — AAA
- Aubergine `#26042f` on pink-200 `#ffebfc` (text on pink wash): **16.25:1** — AAA

Note the failure to avoid: navy `#0d0f2c` text on the indigo `#3e57da` button is only **3.19:1** — never put navy text on the indigo pill. The pill always carries **white** text. Likewise, the pink-500 `#e585d7` (2.42:1 on white) is decorative only and must never carry text — use `#751b68` or `#26042f` for any pink-on-light text.

### Focus Indicators

- 3px `rgba(62,87,218,0.45)` indigo ring with 2px offset on white surfaces
- Inputs add an inner 3px `rgba(62,87,218,0.18)` halo plus a solid `#3e57da` border on focus
- Never removed; `:focus-visible` only so mouse clicks stay clean

### ARIA Patterns

- **Menu / menubar**: top-nav mega-menu uses `role="menu"` with `role="menuitem"` children; arrow keys move within a column, left/right between columns
- **Dialog**: demo-request and video modals use `role="dialog"` `aria-modal="true"` with `aria-labelledby`
- **Tablist**: pricing toggles (monthly/annual) use `role="tablist"`
- **Status**: form submit and video-render states use `role="status"` `aria-live="polite"`

### Keyboard Navigation

- Strict tab order following visual flow
- ESC closes mega-menu, modal, and mobile sheet
- Enter / Space activate buttons and menu items
- Arrow keys traverse mega-menu columns and pricing tabs

### Screen Reader Hints

- Hero product video carries a descriptive `aria-label`; decorative B-roll uses `aria-hidden="true"`
- Icon-only buttons require `aria-label`
- Pink decorative illustration is `aria-hidden`; it carries no information
- Form fields are programmatically associated with their labels via `for`/`id`

### Reduced Motion

Autoplay video freezes to a poster; fade-ups become instant; hover translates drop. Functional motion (focus, modal open) is preserved but minimised.

## 10. Responsive Behavior

| Breakpoint | px        | Behavior |
|------------|-----------|----------|
| mobile     | 0–639     | single column, hamburger nav, 16px gutters; hero headline drops to ~40px |
| tablet     | 640–1023  | 2-column feature grids, condensed nav, headline ~56px |
| desktop    | 1024–1279 | 3-column grids, full nav with mega-menu, headline ~72px |
| wide       | 1280+     | 1280 max container, full split hero, headline up to 88px |

### Touch Targets

44×44px minimum on mobile. The indigo pill and white secondary button keep their height (~44px) and gain horizontal padding on touch surfaces. Nav links expand their tap zone on the mobile sheet.

### Collapsing Strategy

- **Nav**: full link list + mega-menu above 1024; hamburger sheet below, with the indigo "Get started" pill pinned
- **Hero**: split copy/video above 1024; stacks to copy-over-video below, headline scaling down
- **Headline tracking**: held tight (`-0.03em`) at large sizes; relaxed toward `-0.01em` on mobile to avoid character collision at smaller sizes
- **Feature grids**: 3 → 2 → 1 column
- **Pricing table**: horizontal columns above 1024; stacked card-per-plan below

### Image Behavior

Product stills and demo video serve at native aspect ratio; `loading="lazy"` below the fold, `srcset` for retina, `<video>` `preload="metadata"`. Pink decorative illustrations scale fluidly and are `aria-hidden`.

## 11. Content & Voice

### Tone

Confident, plain-spoken, enterprise-reassuring. Synthesia writes like a product team that knows its buyer is a business, not a hobbyist. Sentences are clear and benefit-led without hype. The voice is warm but professional — friendly enough to feel approachable, measured enough to pass a procurement review. "The #1 AI video platform for business." is the canonical Synthesia line: a claim, stated plainly, no exclamation.

### Microcopy Patterns

- **Buttons**: "Get started", "Book a demo", "Watch video", "Get a demo" — single clear actions
- **Errors**: "Something went wrong. Please try again." — polite, recoverable
- **Success**: "Your video is ready." — plain confirmation
- **Loading**: "Generating your video…" — present participle, ellipsis

### Empty States

- No items: "Nothing here yet. Create your first video to get started." — guides toward the action
- Search empty: "No results. Try a different search." — offers a recovery path

### CTA Verb Conventions

- "Get started" (the single dominant primary verb, repeated for consistency)
- "Book a demo" / "Get a demo" (the enterprise secondary path)
- "Watch video" (product proof)
- "Learn more" (tertiary, ghost button)

The voice's signature is **consistency over cleverness**: the same primary verb, the same indigo pill, the same calm claim repeated down the page. Enterprise buyers reward predictability; Synthesia delivers it.

## 12. Dark Mode & Theming

Synthesia ships a **light-only** marketing surface. The default and only theme is the white `#ffffff` canvas with navy headings and slate body.

The inverted navy bands (`#0d0f2c` with white text) are **not** a dark mode — they are emphasis sections inside a light layout, the way a brochure prints one spread on dark stock for contrast. A page commonly contains a white hero, white feature bands, one navy spotlight, and a white footer. No `prefers-color-scheme: dark` override is applied to the marketing site; the white canvas holds across OS preferences.

(The in-product application may offer its own theming; this entry documents the marketing surface, which is light by design.)

## 13. Lineage & Influences

Synthesia's marketing surface inherits from the modern enterprise-SaaS tradition, filtered through a video-product sensibility.

**White-canvas enterprise SaaS** — Stripe, Notion, Intercom. The pure-white ground, the single confident brand colour owning every CTA, the generous whitespace, the soft elevation, and the calm benefit-led copy all trace to this lineage. Synthesia's discipline of "one blue, one pill, one verb" is the Stripe move applied to a video product: reduce decision friction for a business buyer by making the action unmistakable.

**Humanist-grotesque headline discipline** — Linear, atipo's Basier Square. The choice of a single humanist grotesque for both display and body, the weight-500 (not bold) headlines, and the tight negative tracking on large heads borrow the clean-light-surface register that Linear popularised — but Synthesia keeps it warmer and more approachable, trading Linear's precision-cool for enterprise-friendly polish.

What Synthesia rejects: the dark research canvas (Runway, Anthropic), the brutalist hard edge, the gradient-heavy hero, and any reliance on a second brand colour for action. The pink palette is deliberately fenced off to decoration so the indigo can stay the unambiguous signal.

**Named influences:**

- Stripe — `https://stripe.com` — white-canvas enterprise SaaS, single brand colour on every CTA
- Linear — `https://linear.app` — humanist-grotesque headlines, tight tracking on a light surface
- Intercom — `https://intercom.com` — friendly B2B polish, rounded cards, soft elevation
- atipo foundry — `https://www.atipofoundry.com` — Basier Square as the single typeface
- Notion — `https://notion.so` — generous whitespace, calm product-forward marketing

## 14. Do's and Don'ts

### Do

- Keep the canvas pure white `#ffffff` — bright product-page white, not off-white or warm paper
- Make the indigo `#3e57da` pill the single primary action, repeated consistently down the page
- Use **white text** on the indigo pill — always (navy text fails contrast)
- Set headings in near-black navy `#0d0f2c` and body in slate `#333b52` — the two-tone split is the rhythm
- Keep headlines at weight **500** — confidence from size and tracking, not heaviness
- Use 8px radius on the primary indigo button, 10px on the white secondary — the live-token difference is intentional
- Round cards generously at 16px; reserve 24px for navy spotlight panels
- Use the pink palette for warmth, illustration, and accent cards — decorative only
- Use text-safe pinks (`#751b68`, `#26042f`) whenever pink carries text; never `#e585d7`
- Keep elevation soft and navy-tinted (`rgba(13,15,44,...)`)
- Use abundant 96–128px section padding — the openness is the trust signal
- Keep CTA copy consistent ("Get started") rather than clever and varied

### Don't

- Put navy `#0d0f2c` text on the indigo pill — it fails contrast (3.19:1); use white
- Use the pink `#e585d7` on a primary CTA — action belongs to indigo only
- Use pink-500 `#e585d7` as a text colour on white — 2.42:1 fails
- Set headlines in 700 by default — Basier Square at 500 with tight tracking is the voice
- Introduce a second action colour — one blue, one shape, one verb
- Use a warm off-white or paper ground — Synthesia is clean white
- Use harsh pure-black shadows — depth is soft and navy-tinted
- Cram sections together — the whitespace is part of the enterprise register
- Mix Basier Square with a second sans face
- Add exclamation-heavy hype copy — the voice is a calm plain claim
- Animate buttons with bounce or scale — state changes are calm colour shifts
- Treat the navy bands as a dark theme — they are emphasis inversions inside a light layout

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg:            #ffffff   (pure white canvas)
bg-alt:        #f7f8fb   (faint cool-grey band)
bg-navy:       #0d0f2c   (inverted navy spotlight)
text:          #333b52   (slate body)
heading:       #0d0f2c   (near-black navy)
brand:         #3e57da   (indigo — every primary CTA + links)
brand-hover:   #3349c0
brand-soft:    #eef1fd   (indigo tint surface)
on-brand:      #ffffff   (white text on the pill)
accent-pink:   #e585d7   (decorative only, never CTA, never text)
pink-text:     #751b68   (text-safe plum on light)
border:        #e2e5ee   (hairline)
```

### Example Component Prompts

1. **"Create a hero on white `#ffffff` with a split layout: left column ~540px with a Basier Square headline at 88px weight 500 line-height 1.0 tracking `-0.03em` in navy `#0d0f2c` reading 'The #1 AI video platform for business.', a 20px slate `#333b52` supporting line, and a button row — an indigo `#3e57da` pill 'Get started' (8px radius, white text) beside a white secondary button 'Book a demo' (10px radius, `1px #cdd2e0` border, navy text). Right column holds a looping muted product video."**

2. **"Design a feature card on white at 16px radius with a `1px #e2e5ee` border and a soft navy-tinted `standard` shadow: Basier Square h3 at 32/500/`-0.012em` in navy `#0d0f2c`, body in slate `#333b52` 16/1.55, and an indigo `#eef1fd` pill badge reading 'Enterprise'. On hover, lift the shadow to `elevated` and translate up 2px."**

3. **"Build a 3-column feature grid on a `#f7f8fb` band, 24px gutters, each tile a white 16px-radius card with an icon, an h4 at 24/500 in navy, and slate body — collapsing to 2 then 1 column below tablet."**

4. **"Compose a navy spotlight band: full-width `#0d0f2c` panel at 24px radius, white Basier Square h2 at 56/500/`-0.02em`, `#cdd2e0` supporting copy, and an indigo `#3e57da` 'Get started' pill (white text, 8px radius) centred beneath."**

5. **"Make a pink accent testimonial card: `#fef6fb` background, `1px #ffd7f9` border, 16px radius, no shadow, a quote in slate `#333b52` 18/1.55, and an attribution in plum `#751b68` 13/500 — pink for warmth, never for the action."**

6. **"Design a top nav on white at 64px tall: navy wordmark hard-left, nav links 15/500 in slate `#333b52` (hover to navy), and a right cluster with a white 'Book a demo' button beside an indigo 'Get started' pill. No border at rest; a `1px #e2e5ee` rule and faint shadow appear on scroll."**

### Iteration Guide

1. **One blue owns the action**: if there are two coloured buttons competing, demote one to the white secondary or the ghost. Only the indigo pill should read as the primary CTA.
2. **White text on the pill, always**: if you see navy text on indigo, fix it — that pairing fails contrast. The pill is `#3e57da` + `#ffffff`.
3. **Drop headline weight to 500**: if a headline looks heavy or shouty, pull it from 700 to 500 and tighten tracking instead. Confidence is in size, not bold.
4. **Fence the pink to decoration**: if pink has crept onto a button or into body text, move it back to illustration, accent cards, and badges. Action is indigo; text-on-light pink is `#751b68`.
5. **Split the two tones**: headings should be navy `#0d0f2c`, body slate `#333b52`. If everything is one colour, the vertical rhythm flattens.
6. **Add air**: if a section feels cramped, increase section padding toward 96–128px. The openness is the enterprise trust signal.
7. **Soften, don't harden, the shadows**: use navy-tinted `rgba(13,15,44,...)` lifts, not pure-black drops. Cards rest soft and lift gently.
8. **Keep the CTA verb consistent**: if buttons vary ("Try now", "Sign up", "Get going"), unify to "Get started" — repetition reads as reliability to a business buyer.