---
version: alpha
name: Synthesia
description: Enterprise AI video platform — white-and-deep-navy canvas, Basier Square weight 500 with aggressive negative tracking, cobalt-indigo primary, ring-shadow bordered buttons, and a dual-mode system that flips between airy white sections and ink-dark statement panels.

colors:
  # Primary surfaces
  background: "#ffffff"
  surface: "#f5f7ff"           # light blue-tinted section background
  surface-dark: "#0d0f2c"      # deep navy dark panel
  surface-mid: "#1d2041"       # mid-navy for gradient dark sections
  surface-card: "#ffffff"

  # Text / ink
  ink: "#0d0f2c"               # near-black navy — primary text
  ink-secondary: "#333b52"     # muted navy — secondary text, captions
  ink-tertiary: "#656c86"      # cool gray — nav links, metadata
  ink-placeholder: "#969bb5"   # placeholder text
  ink-inverted: "#ffffff"      # text on dark panels

  # Brand accent
  primary: "#3e57da"           # cobalt indigo — primary CTA
  primary-dark: "#2c43b8"      # darker indigo — button hover
  primary-light: "#8098f9"     # periwinkle — accent links on dark
  on-primary: "#ffffff"

  # Tonal / container
  primary-container: "#1f235b" # dark indigo — badge backgrounds on dark
  primary-tint: "#e3ebff"      # lightest periwinkle — section washes
  primary-mid: "#c6d7fe"       # mid periwinkle — focus ring, dividers

  # Semantic
  success: "#15a261"           # --_semantic---text-success
  error: "#d92d20"             # --_semantic---text-error
  warning: "#f79009"           # --_semantic---text-warning

  # Borders
  border: "#d1d6e5"            # cool blue-gray — standard borders
  border-subtle: "#e6eaf4"     # softer border, section dividers
  border-card: "#e9ecf6"       # was rgba(233,236,246,0.4) over white — Google format requires hex

  # Shadows (opaque approximations)
  shadow-soft: "#ebeff8"       # was rgba(16,24,40,0.08) on white — Google format requires hex
  shadow-glow: "#e3ebff"       # periwinkle ambient glow on featured panels

typography:
  display-hero:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 106px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -5.28px
  display:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 86px
    fontWeight: 500
    lineHeight: 1.03
    letterSpacing: -4.32px
  display-md:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 67px
    fontWeight: 500
    lineHeight: 1.04
    letterSpacing: -2.69px
  heading-1:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.92px
  heading-2:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -1.18px
  heading-3:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: -0.24px
  body-large:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: -0.17px
  body:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: -0.08px
  nav-link:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: -0.07px
  button-ui:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: -0.08px
  button-sm:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.57
    letterSpacing: -0.03px
  label-uppercase:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.67px
  caption:
    fontFamily: "Basier Square, DM Sans, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 116px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 14px
  2xl: 19px
  3xl: 29px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 14px 22px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"

  button-primary-lg:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 19px 29px
  button-secondary-lg:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 19px 29px

  card:
    backgroundColor: "{colors.surface-card}"
    rounded: "{rounded.3xl}"
    padding: 24px

  card-dark:
    backgroundColor: "{colors.surface-dark}"
    rounded: "{rounded.3xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 14px 19px
  input-focus:
    backgroundColor: "{colors.background}"

  badge:
    backgroundColor: "{colors.primary-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-dark:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  nav-link:
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.primary}"
---

# Synthesia Design System

## Overview

Synthesia's website operates as two interlocking worlds. The primary canvas is pure white (`{colors.background}`) — corporate, spacious, and enterprise-trustworthy. But every few sections the design dives into a deep navy panel (`{colors.surface-dark}`, `{colors.surface-mid}`), creating a rhythm of lightness and gravity that matches the product's own duality: serious AI infrastructure, presented accessibly. The switch between these modes isn't jarring; it's deliberate, like a documentary intercut with b-roll.

The typography is anchored entirely in Basier Square, a custom square-geometry sans-serif that Synthesia self-hosts. The closest publicly available analogue is DM Sans. What's distinctive isn't the choice of typeface — it's the tracking. Display text runs at extreme negative letter-spacing (up to -5.28px at 106px), which pulls headlines tight and gives the visual system an engineering precision. Medium weight (500) is the workhorse from display down through buttons; regular (400) appears only in body copy and secondary text. The result reads as capable and precise without feeling cold.

Color is sparse by design. `{colors.primary}` — a cobalt indigo at #3e57da — is the one chromatic anchor in an otherwise navy-white-gray system. It appears on primary CTAs, interactive focus states, and selected navigation elements. On dark panels, this blue lightens to periwinkle (`{colors.primary-light}`) to maintain contrast. The gradients are exclusively blue-toned: horizontal washes from periwinkle to cobalt mark hero backgrounds and featured content sections. Shadow treatment is light and consistent — a single dark-neutral drop shadow at 8% opacity, occasionally paired with a 1px ring border in `{colors.border}`.

**Key Characteristics:**
- Dual-mode light/dark layout rhythm — white enterprise sections alternating with deep navy (`{colors.surface-dark}`) statement panels
- Basier Square at weight 500 with extreme negative tracking (-5px at display scale) — tight, engineered headlines
- Single chromatic accent: cobalt indigo `{colors.primary}` on light, periwinkle `{colors.primary-light}` on dark
- Horizontal blue gradient washes (`{colors.primary-tint}` → `{colors.primary}`) for hero and featured backgrounds
- Buttons use consistent 12–14px radius with shadow-ring borders (`{colors.border}`) on secondary style
- `{typography.label-uppercase}` with 0.67px letter-spacing for section eyebrows and category labels
- 8px base spacing grid; section spacing uses 96–116px to create exhibit-like breathing room
- Pill radius reserved exclusively for badges and social proof chips
- Shadows are restrained and uniform: `rgba(16,24,40,0.08)` — same tint across all elevations
- Focus ring uses periwinkle ring color `{colors.primary-mid}` — brand-tinted, not generic blue
- Motion is fast (0.2s ease default) — micro-interactions feel immediate, not theatrical
- Framework-heavy internally (PrimeReact, Fluent UI, Quasar, Element Plus) suggesting a component library beneath the branded skin

## Colors

### Primary Surfaces
- **White** (`{colors.background}`): The dominant canvas — all light-mode sections, cards, nav bar
- **Deep Navy** (`{colors.surface-dark}`): Dark panel backgrounds — statement sections, pricing dark variant
- **Mid Navy** (`{colors.surface-mid}`): Gradient dark sections, secondary dark panel depth
- **Blue Tint** (`{colors.surface}`): Subtle light section washes — used sparingly

### Brand Accent
- **Cobalt Indigo** (`{colors.primary}`): Primary CTA buttons, interactive highlights, selected states, focus treatment on light
- **Dark Indigo** (`{colors.primary-dark}`): Hover state on primary button
- **Periwinkle** (`{colors.primary-light}`): Accent links and interactive highlights on dark panels
- **Navy Badge** (`{colors.primary-container}`): Badge/chip backgrounds on dark mode panels

### Text Scale
- **Near-Black Navy** (`{colors.ink}`): Headings, primary text on white
- **Muted Navy** (`{colors.ink-secondary}`): Secondary text, body on light backgrounds
- **Cool Gray** (`{colors.ink-tertiary}`): Nav links, metadata, tertiary labels
- **Placeholder** (`{colors.ink-placeholder}`): Form placeholder text
- **Inverted** (`{colors.ink-inverted}`): All text on dark panels

### Semantic
- **Success** (`{colors.success}`): Confirmation states, positive metrics — `--_semantic---text-success`
- **Error** (`{colors.error}`): Validation errors — `--_semantic---text-error`
- **Warning** (`{colors.warning}`): Warning states — `--_semantic---text-warning`

### Borders & Shadows
- **Border** (`{colors.border}`): Standard 1px solid borders on inputs and secondary buttons
- **Border Subtle** (`{colors.border-subtle}`): Section dividers, lighter separators
- **Border Card** (`{colors.border-card}`): Semi-transparent border on button ring shadows — was `rgba(233,236,246,0.4)` over white
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque approximation of uniform drop shadow
- **Shadow Glow** (`{colors.shadow-glow}`): Periwinkle ambient glow on featured dark panels

## Typography

### Font Family
- **Primary**: `Basier Square` (self-hosted woff2, regular + medium weights), fallbacks: `DM Sans, system-ui, sans-serif`
- Basier Square is a geometric square-based sans-serif; DM Sans is the closest publicly available match in character width and geometry
- No monospace font detected in the marketing site

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Top-of-page hero headlines — 106px, weight 500, -5.28px tracking |
| `display` | Second-tier hero — 86px, weight 500, -4.32px tracking |
| `display-md` | Large section titles — 67px, weight 500, -2.69px tracking |
| `heading-1` | Section-level headlines — 48px, weight 500, -1.92px tracking |
| `heading-2` | Card and feature titles — 34px, weight 500, -1.18px tracking |
| `heading-3` | Sub-section titles — 24px, weight 400, -0.24px tracking |
| `body-large` | Lead paragraph text — 22px, weight 400, -0.17px tracking |
| `body` | Standard body copy — 19px, weight 400 |
| `body-medium` | Emphasized body, list items — 19px, weight 500 |
| `nav-link` | Navigation text — 17px, weight 400 |
| `button-ui` | All button labels — 19px, weight 500 |
| `button-sm` | Smaller button and link labels — 17px, weight 500 |
| `label-uppercase` | Section eyebrows, category chips — 17px, weight 500, uppercase, +0.67px tracking |
| `caption` | Badge text, small metadata — 14px, weight 400 |

### Principles
- **Tracking as the differentiator**: Basier Square's geometry is unremarkable at normal tracking; the extreme negative letter-spacing at display sizes (-1 to -5px) is what makes the typography feel distinctive and engineered.
- **Weight 500 is the default**: Medium weight dominates from display through buttons. Regular (400) appears only in body and heading-3 — the design reads as confident-by-default.
- **Single family, dual canvas**: The same typeface works both on the white enterprise sections and the deep navy panels — only the ink color flips.
- **Uppercase only for eyebrows**: `{typography.label-uppercase}` with positive spacing is reserved for section-opening category labels. All other text uses default case.
- **Tight line-heights on display**: 1.00–1.04 line-height on display text means headlines stack densely — mass and presence at large sizes.

## Layout

### Spacing System
Base unit is **8px**. The scale in YAML runs from 4px (`xs`) to 116px (`5xl`). Section-to-section spacing uses 96–116px, creating a slow, deliberate pace that communicates enterprise confidence.

### Grid & Container
- Max content width: approximately 1225px (widest breakpoint before 1440 large desktop)
- Standard Webflow-style full-width sections with centered constrained content columns
- Feature grids: 2–4 column layouts on desktop, collapsing to single column on mobile
- Hero section: centered typography over a gradient background wash
- Dark sections: full bleed from edge to edge, content remains constrained

### Whitespace Philosophy
- **Exhibit-style section separation**: 96–116px between major sections creates breathing room that implies each section is its own story.
- **Internal tightness at component level**: Spacing within cards and UI elements is compact — the 8px grid keeps components dense while sections feel airy.
- **Dual-mode rhythm**: The alternation between white and dark panels creates natural visual "chapters" that substitute for excess whitespace.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Dark panels, section backgrounds |
| Subtle (Level 1) | `rgba(16,24,40,0.08) 0px 2px 10px` | Small cards, nav elements |
| Card (Level 2) | `rgba(16,24,40,0.08) 0px 2px 16px` + `rgb(209,214,229) 0px 0px 0px 1px` | Standard card elevation with ring border |
| Elevated (Level 3) | `rgba(16,24,40,0.08) 0px 6px 20px` | Featured cards, hero product previews |
| Featured (Level 4) | `rgb(227,235,255) 0px 0px 30px` + `rgba(16,24,40,0.08) 0px 6px 40px` | Glow halo effect on dark panel highlights |
| Focus Ring | `rgb(198,215,254) 0px 0px 0px 3px` using `{colors.primary-mid}` | Keyboard focus on interactive elements |

**Shadow Philosophy**: Synthesia's shadow system is deliberately minimal and uniform. All elevation shadows use the same dark-neutral tint (`rgba(16,24,40,0.08)`) regardless of elevation level — only the spread and offset change. The secondary button style uses a ring shadow (`{colors.border}` 1px) rather than a visible border, creating a clean "float" effect. On featured elements in dark sections, a periwinkle glow halo (`{colors.shadow-glow}`) replaces neutral shadows entirely, letting the brand color define elevation.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rarely used — section dividers only |
| `sm` | 4px | Tag chips, small status indicators |
| `md` | 8px | Small UI elements |
| `lg` | 12px | Standard buttons (small variant) |
| `xl` | 14px | Standard buttons (primary CTA) |
| `2xl` | 19px | Inputs, select dropdowns |
| `3xl` | 29px | Cards, feature panels |
| `pill` | 9999px | Badges, social proof chips, nav indicators |

The radius system is functionally split between a **component tier** (12–14px for buttons, 19px for inputs) and a **container tier** (29px for cards and panels). Pill radius is reserved exclusively for small inline elements like badges and chips — buttons never use pill, which differentiates Synthesia from consumer-facing AI brands.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly.

### Button Variants
- **`button-primary`** — Cobalt indigo (`{colors.primary}`) fill, white text, 12px radius, 14/22px padding. The standard CTA across all sections.
- **`button-primary-hover`** — Shifts to `{colors.primary-dark}` on hover; transitions with 0.2s ease.
- **`button-secondary`** — White fill with `{colors.border}` ring shadow and light drop shadow. Used for "Book demo" alongside a primary CTA.
- **`button-primary-lg`** — Identical spec to `button-primary` but 19/29px padding and `{rounded.xl}` (14px) radius for hero-scale placements.
- **`button-secondary-lg`** — Large white ghost with ring shadow for hero pairings.

### Cards
- **`card`** — White surface, 29px radius, generous internal padding. Used for feature tiles, customer story cards.
- **`card-dark`** — Same structure on `{colors.surface-dark}` — product feature panels and pricing dark variants.

### Inputs
- **`input`** — White surface, `{colors.border}` 1px solid, 14px radius, generous 14/19px padding. Focus state applies `{colors.primary}` border and `{colors.primary-mid}` 3px ring shadow.

### Badges
- **`badge`** — Light periwinkle tint background (`{colors.primary-tint}`), indigo text, pill radius. Used for feature labels like "New" or category chips.
- **`badge-dark`** — Dark navy container (`{colors.primary-container}`), white text for use on dark panels.

### Navigation
- **`nav-bar`** — White sticky header, cool gray nav link text (`{colors.ink-tertiary}`), right-aligned indigo CTA button. Transitions background and shadow on scroll with 0.3s ease-out.
- **`nav-link`** — Rest state in `{colors.ink-tertiary}`, hover shifts to `{colors.primary}` with underline decoration.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for primary CTAs and interactive states — preserve its action-signal role
- Apply extreme negative tracking on display text (down to -5.28px at 106px) — the engineered compression is the signature
- Alternate white and deep navy (`{colors.surface-dark}`) sections to create visual rhythm and "chapter" separation
- Use the same shadow tint (`rgba(16,24,40,0.08)`) across all elevation levels — uniformity is deliberate
- Reserve pill radius (`{rounded.pill}`) for badges and chips only — buttons use 12–14px radius
- Use `{typography.label-uppercase}` with positive tracking for section eyebrows and category labels
- Pair a primary button with a secondary button (white ring) in CTA groups — the contrast is intentional
- Use periwinkle tones (`{colors.primary-tint}`, `{colors.primary-mid}`) for wash backgrounds and focus rings, not arbitrary grays

### Don't
- Don't use warm grays or neutral browns — the palette is exclusively cool (navy/indigo/periwinkle scale)
- Don't apply pill radius to buttons — it would signal consumer/lifestyle rather than enterprise
- Don't mix shadow tints — avoid warm or color-tinted shadows, the system uses one neutral shadow color
- Don't introduce display fonts beyond Basier Square / DM Sans — the single-typeface discipline is architectural
- Don't use regular weight (400) for buttons or headings above 24px — weight 500 is the confidence signal
- Don't put blue accents on dark panels without adjusting to periwinkle — `{colors.primary}` at 4.21:1 contrast on `{colors.surface-dark}` is too low; use `{colors.primary-light}` instead
- Don't create narrow cards with pill radius — the container tier uses 29px and rounded forms read as soft; pair with appropriate content density
- Don't use the horizontal gradient outside hero or featured panel contexts — it signals "primary content" and should remain rare

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <479px | Single column, minimum padding, stacked hero |
| Mobile | 479–767px | Single column, hamburger nav, full-width CTAs |
| Tablet | 768–991px | Two-column grids, expanded nav starts transitioning |
| Desktop Small | 992–1224px | Full multi-column grids, constrained max-width |
| Desktop | 1225–1439px | Standard desktop layout, max-width container active |
| Large Desktop | 1440–1919px | Increased container width, hero scales up |
| XL Desktop | ≥1920px | Maximum layout expansion, hero at largest sizes |

### Touch Targets
- Primary buttons with 14px vertical padding provide ~47px tap height — meets minimum
- Nav links at 17px have adequate spacing with 8px padding
- Input fields at 14px padding provide ~47px height comfortably

### Collapsing Strategy
- Navigation collapses to hamburger at approximately 991px
- Feature grids: 3–4 column → 2 column → single column at mobile
- Dark sections maintain full-bleed behavior across all breakpoints
- Hero typography scales down proportionally; extreme tracking reduces at smaller sizes
- CTA groups stack vertically on mobile (primary above secondary)

### Image Behavior
- AI avatar and product screenshots maintain aspect ratio and scale responsively
- Hero background gradients maintained full-width at all breakpoints
- Video previews and product UI thumbnails use fluid width within constrained columns

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white) or `{colors.surface-dark}` (deep navy)
- Primary text: `{colors.ink}` on light / `{colors.ink-inverted}` on dark
- Secondary text: `{colors.ink-secondary}`
- Tertiary / nav: `{colors.ink-tertiary}`
- Brand accent: `{colors.primary}` on light, `{colors.primary-light}` on dark
- Border: `{colors.border}`
- CTA: `{colors.primary}` background, `{colors.on-primary}` text

### Example Component Prompts
- "Create a hero section on white (`{colors.background}`). Headline at 86px Basier Square (or DM Sans) weight 500, line-height 1.03, letter-spacing -4.32px, color `{colors.ink}`. Subheadline at 22px weight 400, line-height 1.44, letter-spacing -0.17px, color `{colors.ink-secondary}`. Two buttons side-by-side: primary (`{colors.primary}` fill, white text, 12px radius, 14px 22px padding) and secondary (white fill, `{colors.border}` 1px ring shadow, same size). Background: horizontal periwinkle-to-indigo gradient wash."
- "Design a card: white background, 29px radius, 24px padding. Feature icon top-left. Title at 34px Basier Square weight 500, letter-spacing -1.18px, `{colors.ink}`. Body at 19px weight 400, `{colors.ink-secondary}`. Optional badge in top-right: `{colors.primary-tint}` background, `{colors.primary}` text, pill radius, 14px caption."
- "Build a deep navy section (`{colors.surface-dark}`): centered headline at 67px Basier Square weight 500, letter-spacing -2.69px, white text. Grid of 3 cards with `{colors.primary-container}` backgrounds, rounded 29px, white body text. Section-opening eyebrow label in uppercase 17px weight 500 letter-spacing 0.67px using `{colors.primary-light}`."
- "Create navigation: white sticky header with `rgba(16,24,40,0.08) 0px 6px 20px` shadow on scroll. Logo left, nav links center in 17px Basier Square weight 400 `{colors.ink-tertiary}` with 0.2s ease hover to `{colors.primary}` + underline. Right: 'Log in' text link + 'Get started' indigo button (`{colors.primary}`, 12px radius, 14px 22px padding)."
- "Design a badge/chip: `{colors.primary-tint}` background, `{colors.primary}` text, 14px Basier Square weight 400, pill radius, 4px 12px padding. For dark background variant: swap to `{colors.primary-container}` background and white text."

### Iteration Guide
1. Start with the canvas pair — decide if section is white (`{colors.background}`) or deep navy (`{colors.surface-dark}`) before anything else
2. Set the section eyebrow first: uppercase 17px weight 500, +0.67px tracking in `{colors.primary}` on light or `{colors.primary-light}` on dark
3. Apply extreme negative tracking to all display text: the tighter the headline, the more engineered it feels — don't soften to 0
4. Use weight 500 for all headings and CTAs; drop to 400 only for body copy and nav links
5. Button pairs: always offer primary (indigo fill) + secondary (white ring) together — solo CTAs look underdeveloped in this system
6. Shadow formula: `rgba(16,24,40,0.08)` everywhere, adjust only offset and spread; add 1px `{colors.border}` ring for secondary buttons
7. Radius is structural: 29px for containers, 12–14px for buttons, 19px for inputs, pill for chips only — don't mix tiers

---

## 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 Synthesia. Brand names and trademarks belong to their respective owners.