---
version: alpha
name: Calm
website: "https://www.calm.com"
description: >-
  Calm's marketing system is a meditation-app surface dressed as a quiet print
  magazine — a near-white canvas, deep-blue ink (#1a3e6f) carrying every
  headline and link, and a single blue-to-purple gradient (#2477aa → #6461e0)
  reserved for the primary CTA pill and the live mountain backdrop. Type runs
  Figtree at weight 700 for display (49.5px h1, 36px h2) and weight 500 for
  meta, with no italic, no display-serif moment, and no decorative weight
  jumps. Every interactive surface is 20px rounded; the CTA pill stretches to
  100px, the only fully-pill geometry in the system. The brand trusts deep
  blue against pale lavender (#e2eaff) and photography of mountains, lakes,
  and breath-pacing animations to do the emotional work — the chrome itself
  is almost mute.

seo:
  title: "Calm Design System for React — Figtree, deep blue ink, and 19 components"
  metaDescription: "Calm's design system as a DESIGN.md file. Deep blue #1a3e6f, Figtree, blue-purple gradient CTAs, 19 colors, 19 components. For React, Next.js, and AI tools."
  tags:
    - "Healthcare & Wellness"
  highlights:
    - "Deep-blue ink monopoly — #1a3e6f carries every h1, h2, h3, and brand link; pure black is reserved for body paragraphs only"
    - "One gradient, one job — #2477aa → #6461e0 lives exclusively on the primary CTA pill and the hero mountain wash"
    - "20px is the house radius — 49 of 62 corner instances; the 100px CTA pill is the only departure"
    - "No serif, no italic, no display drama — Figtree alone covers all 19 type signatures from 13.5px caption to 49.5px h1"
    - "Lavender (#e2eaff) is the warmth — appears on testimonial cards and trial card surfaces where most wellness apps would reach for cream"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Calm's marketing system is what happens when a wellness brand refuses to be cute. There is no eucalyptus green, no terracotta, no soft-serif headline, no rounded illustration of a smiling lotus. Instead: a near-white canvas, a deep navy-blue ink (#1a3e6f) running every headline, a single blue-to-purple gradient (#2477aa → #6461e0) reserved for the primary CTA pill, and Figtree — a humanist sans — doing the entire typographic job at three weights. The hero photograph (snow-tipped mountains over an alpine lake) carries the brand's atmosphere; the chrome around it is almost mute. Where most wellness apps shout serenity through soft pastels and hand-drawn motifs, Calm whispers it through restraint — a quiet, almost editorial composure that reads less like an app store screenshot and more like a print quarterly.

    This file packages that restraint as a Google Labs DESIGN.md spec: 19 color tokens (12 extracted hexes plus their semantic role assignments), 13 typography levels (all Figtree, weights 400 / 500 / 700, sizes 13.5px to 49.5px), 3 corner radii (20px / 100px / 10px — the 100px pill being the system's one departure from soft-rectangle geometry), 9 spacing values built around an 8 / 12 / 20 / 40px scale, and 19 components covering top-nav, hero headline, CTA gradient pill, testimonial review card, trial-card form, FAQ row, and the lavender content blocks that anchor the page below the fold. Every value is grounded in the live extraction — no invented hexes, no aspirational radii.

    Feed this DESIGN.md to Claude, Cursor, or GitHub Copilot and the AI will build React components that look like Calm rather than a generic shadcn theme — deep-blue headings on near-white, gradient CTAs on 100px pills, 20px-rounded cards floating over lavender bands, Figtree everywhere. Or use the file as a reference: every hex, every font weight, every spacing value is documented inline. The result is a marketing surface that earns its serenity by refusing the visual shortcuts — no soft-serif gestures, no nature-toned palette, no rounded-illustration mascots. Just deep blue, pale lavender, and one gradient moment per page.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.calm.com"
      title: "Calm — official site"
      description: "The #1 app for meditation, sleep, and relaxation — the live marketing surface this design system was extracted from."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Calm's primary brand color?"
      answer: "Calm's signature voltage is a blue-to-purple gradient — #2477aa to #6461e0 — that lives exclusively on the primary CTA pill ('Try Calm for Free') and on the hero mountain-photograph wash. The brand's load-bearing ink color is the deep navy-blue #1a3e6f, which carries every h1, h2, h3, and brand link on the page (frequency 63 across text and borders). Pure black (#000000) is reserved for body paragraphs and is the only place black appears — Calm avoids using black on headlines because it reads colder than the navy ink the brand is built around."
    - id: "typography"
      title: "What typography does Calm use, and what should I use if Figtree isn't available?"
      answer: "Calm runs Figtree across every type signature on the page — display, body, navigation, form labels, microcopy. There is no display serif, no italic moment, and no second family. The system pivots on three weights: 700 for headlines (49.5px h1, 36px h2, 22.5px h3), 500 for sub-heads and CTA labels, and 400 for body paragraphs. Fallbacks walk Helvetica Neue, Helvetica, Arial, and the system sans stack. Inter is the closest open-source substitute if Figtree is unavailable — adjust line-heights up by ~3% to match Figtree's slightly tighter x-height."
    - id: "gradient-usage"
      title: "How is the blue-to-purple gradient used?"
      answer: "The gradient (#2477aa → #6461e0) appears in exactly two places: the primary 'Try Calm for Free' CTA pill, and the hero mountain-photograph color wash. That is the entire gradient footprint. The system never uses the gradient on secondary buttons, cards, hairlines, or text — it is reserved as the single voltage moment per scroll. This is a deliberate restraint move: where most wellness apps splash gradient backgrounds across every section, Calm uses gradient as punctuation."
    - id: "radius"
      title: "Why is everything 20px rounded?"
      answer: "20px is the house radius — 49 of 62 rounded-corner instances on the page use it, including testimonial cards, trial-card forms, FAQ rows, image plates, and the editorial content blocks. The only departure is the 100px fully-pill radius reserved for the primary CTA and the navigation menu pills (11 instances). 10px is a rare third tier used on a handful of inline chips. The system has no 4px, no 8px, and no 32px radius — three values cover everything."
    - id: "lavender-surfaces"
      title: "What is the role of lavender (#e2eaff) in the system?"
      answer: "Lavender (#e2eaff) is Calm's warmth color — a pale, slightly-cool tint that appears on the testimonial review cards and on the 'Start your free trial' card-band that anchors the page below the fold. Most wellness apps reach for cream, sand, or pale terracotta to create warmth on light surfaces; Calm uses lavender, which keeps the palette inside the same blue-purple family as the deep navy ink and the gradient CTA. The system never uses warm earth tones — the entire palette stays cold-spectrum."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React wellness app?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Calm's quiet composure (deep navy headlines, one gradient moment, 20px radii, Figtree everywhere) rather than a generic shadcn theme. You can also reference the tokens directly: every color, type style, radius, and spacing value in the spec is a quoted value you can paste into Tailwind config, CSS variables, or your own component library."

colors:
  primary-gradient-start: "#2477aa"
  primary-gradient-end: "#6461e0"
  primary-gradient-deep: "#176293"
  brand-purple: "#5340cb"
  brand-magenta: "#8946a3"
  hero-ink: "#1a3e6f"
  ink: "#1a3e6f"
  ink-strong: "#1c1c1c"
  ink-soft: "#383838"
  body: "#000000"
  canvas: "#ffffff"
  surface: "#ffffff"
  surface-lavender: "#e2eaff"
  surface-deep: "#1b2250"
  hairline: "#1a3e6f"
  hairline-soft: "#383838"
  on-primary: "#ffffff"
  on-dark: "#ffffff"
  scrim: "#000000"

typography:
  display-xl:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 49.5px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0
  display-lg:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.67
    letterSpacing: 0
  display-md:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 31.5px
    fontWeight: 700
    lineHeight: 1.52
    letterSpacing: 0
  display-sm:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 22.5px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 22.5px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  heading-sm:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: 0
  body-lg:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: 0
  body-md:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0
  body-sm:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.88
    letterSpacing: 0
  caption:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13.5px
    fontWeight: 500
    lineHeight: 1.48
    letterSpacing: 0
  caption-strong:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13.5px
    fontWeight: 700
    lineHeight: 1.48
    letterSpacing: 0
  button-md:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: 0
  nav-link:
    fontFamily: "Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "10px"
  md: "20px"
  full: "100px"

spacing:
  xs: "8px"
  sm: "12px"
  md: "16px"
  base: "20px"
  lg: "24px"
  xl: "32px"
  xxl: "40px"
  section: "100px"
  page-pad: "40px 44px"

components:
  button-primary:
    backgroundColor: "{colors.primary-gradient-start}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "14px 17.7778px"
    height: "60px"
  button-primary-hover:
    backgroundColor: "{colors.primary-gradient-end}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.hero-ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "14px 17.7778px"
    height: "60px"
    borderColor: "{colors.hero-ink}"
  button-tertiary-text:
    backgroundColor: "transparent"
    textColor: "{colors.hero-ink}"
    typography: "{typography.nav-link}"
    border: "0"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.hero-ink}"
    typography: "{typography.nav-link}"
    height: "60px"
    padding: "10px 0px"
  nav-pill:
    backgroundColor: "transparent"
    textColor: "{colors.hero-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.full}"
    padding: "10px 0px"
  hero-headline:
    backgroundColor: "transparent"
    textColor: "{colors.hero-ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  hero-subhead:
    backgroundColor: "transparent"
    textColor: "{colors.body}"
    typography: "{typography.heading-md}"
    padding: "0"
  section-headline:
    backgroundColor: "transparent"
    textColor: "{colors.hero-ink}"
    typography: "{typography.display-lg}"
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.hero-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "40px 32px"
  image-tile:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.md}"
    padding: "0"
  testimonial-card:
    backgroundColor: "{colors.surface-lavender}"
    textColor: "{colors.hero-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "40px 44px"
  testimonial-stars:
    backgroundColor: "transparent"
    textColor: "{colors.brand-purple}"
    typography: "{typography.caption-strong}"
  trial-card:
    backgroundColor: "{colors.surface-lavender}"
    textColor: "{colors.hero-ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "40px 44px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    height: "48px"
    borderColor: "{colors.hairline}"
  faq-row:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.hero-ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.md}"
    padding: "24px"
  faq-row-divider:
    backgroundColor: "transparent"
    textColor: "{colors.hero-ink}"
    borderColor: "{colors.hairline-soft}"
  footer-band:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    padding: "40px 44px"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    border: "0"
---

## Overview

Calm's marketing surface reads less like an app-store wellness pitch and more like a print quarterly that happens to sell a meditation subscription. The base canvas is **near-white** (`{colors.canvas}` — #ffffff), the load-bearing text color is a **deep navy-blue** (`{colors.hero-ink}` — #1a3e6f) running every h1, h2, h3, and brand link, and pure black (`{colors.body}` — #000000) is reserved for body paragraphs and is the only place black appears in the system. Where most wellness brands shout serenity through pastel greens, terracotta, or soft-serif headlines, Calm whispers it through deep navy on near-white — a quiet, almost editorial composure.

**Gradient as punctuation**: The signature blue-to-purple voltage (`{colors.primary-gradient-start}` → `{colors.primary-gradient-end}` — #2477aa → #6461e0) appears in exactly two places: the primary "Try Calm for Free" CTA pill and the hero mountain-photograph wash. That is the entire gradient footprint. Not on secondary buttons, not on cards, not on hairlines, not on text. Unlike the convention of wellness brands splashing gradient washes across every section, Calm rations the gradient to one moment per scroll — the CTA pill becomes the only chromatic peak on a page otherwise composed of navy ink and white space.

Type runs **Figtree** alone — display, body, navigation, captions, microcopy. There is no display serif, no italic, and no second family. The system pivots on three weights (400 / 500 / 700) and a size scale that climbs from 13.5px caption to 49.5px h1. The h1 ("Calm your mind. Change your life.") at 49.5px / 700 / 74.25px leading is the system's loudest typographic moment — and even that sits in deep navy rather than black, keeping the brand's color identity intact at the top of the page. Shape language is equally narrow: 20px on every card and image plate (`{rounded.md}`), 100px on the primary CTA and nav pills (`{rounded.full}`), 10px on a handful of inline chips. Three radii cover everything.

**Key Characteristics:**
- Single voltage gradient: `{colors.primary-gradient-start}` → `{colors.primary-gradient-end}` (#2477aa → #6461e0) carries only the primary CTA pill and the hero mountain wash. Two appearances per page.
- Deep navy ink monopoly: `{colors.hero-ink}` (#1a3e6f, frequency 63) runs every h1, h2, h3, and brand link. Pure black (`{colors.body}` — #000000) appears on body paragraphs only.
- One typeface, three weights: Figtree at 400 / 500 / 700, sizes 13.5px to 49.5px. No serif, no italic, no display drama.
- House radius 20px: 49 of 62 rounded-corner instances. The 100px pill (11 instances) is reserved for the primary CTA and nav menu items.
- Lavender warmth: `{colors.surface-lavender}` (#e2eaff) anchors testimonial cards and the free-trial card-band — Calm's substitute for the cream / terracotta most wellness apps would use.
- Hero typography under photography: h1 at 49.5px / 700 sits over a snow-capped mountain landscape; the photo carries the brand's atmosphere, the type carries the proposition.
- Spacing scale of 8 / 12 / 20 / 40px: section bands run 40×44px padding (frequency 20), card grids gap at 8px (frequency 32).
- No dark mode on the marketing site: every scroll is white canvas + lavender bands + a single deep-navy footer (`{colors.surface-deep}` — #1b2250).

## Colors

### Brand & Gradient
- **Gradient Start** (`{colors.primary-gradient-start}` — #2477aa) — frequency 11. Used as gradient (11). The left stop of the primary CTA pill and the hero mountain wash — Calm's calm-blue voltage.
- **Gradient End** (`{colors.primary-gradient-end}` — #6461e0) — frequency 13. Used as gradient (11), text (1), border (1). The right stop of the same gradient, drifting into a deeper purple — provides the brand's warmth without using a warm hue.
- **Gradient Deep** (`{colors.primary-gradient-deep}` — #176293) — frequency 2. Used as gradient (2). A darker mid-tone occasionally folded into the gradient stack for the hero wash; never used as a flat fill.
- **Brand Purple** (`{colors.brand-purple}` — #5340cb) — frequency 1. Used as gradient (1). Rare accent inside the testimonial star row — the only place a saturated purple appears as a flat fill.
- **Brand Magenta** (`{colors.brand-magenta}` — #8946a3) — frequency 1. Used as gradient (1). A single magenta moment in a sub-feature accent gradient — reserved for editorial micro-illustration.

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff) — frequency 211. Used as text (93), bg (26), border (92). The dominant page floor. Calm has no light dark-mode on marketing.
- **Surface Lavender** (`{colors.surface-lavender}` — #e2eaff) — frequency 2. Used as gradient (2). The pale lavender that backs testimonial cards and the trial card-band — Calm's substitute for warm cream.
- **Surface Deep** (`{colors.surface-deep}` — #1b2250) — frequency 2. Used as bg (2). The deep-navy footer band — the only dark surface in the entire marketing scroll.

### Ink & Body
- **Hero Ink / Ink** (`{colors.hero-ink}` — #1a3e6f) — frequency 63. Used as text (31), border (32). The signature ink. Every h1, h2, h3, and brand link renders in this navy. Never used as a background fill.
- **Ink Strong** (`{colors.ink-strong}` — #1c1c1c) — frequency 68. Used as text (34), border (34). A near-black used on sub-section headings and high-contrast captions where navy would feel too soft.
- **Ink Soft** (`{colors.ink-soft}` — #383838) — frequency 7. Used as text (4), border (3). A graphite tone for secondary running text inside body paragraphs.
- **Body** (`{colors.body}` — #000000) — frequency 608. Used as text (309), bg (4), border (295). Pure black — reserved for body paragraphs and most 1px hairline borders. Despite the high raw count, body rarely appears as a headline color; navy ink monopolizes display.

### Hairlines
- **Hairline** (`{colors.hairline}` — #1a3e6f) — same navy used as 1px outlines on text inputs and secondary buttons. Hairline color matches headline color — there is no separate gray border token.
- **Hairline Soft** (`{colors.hairline-soft}` — #383838) — softer graphite hairline for FAQ row dividers and footer column splitters.

### On-Color
- **On Primary** (`{colors.on-primary}` — #ffffff) — white text inside the gradient CTA pill.
- **On Dark** (`{colors.on-dark}` — #ffffff) — white text inside the deep-navy footer band.

### Scrim
- **Scrim** (`{colors.scrim}` — #000000 at 50% opacity) — modal backdrop for the trial sign-up dialog. Stored as the base hex; opacity is applied at render time.

## Typography

### Font Family
The system runs **Figtree** for everything — display, body, navigation, captions, button labels, footer links. Fallbacks walk `"Helvetica Neue", Helvetica, Arial, sans-serif`. There is no separate display family, no italic family, and no monospace family. Figtree is a humanist sans designed by Erik Demaine — Calm uses it for its slightly elongated x-height and friendly aperture, which keeps even 49.5px headlines from feeling architectural.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 49.5px | 700 | 1.5 | Hero h1 ("Calm your mind. Change your life.") |
| `{typography.display-lg}` | 36px | 700 | 1.67 | Section h2 ("We're here to help you feel better.") |
| `{typography.display-md}` | 31.5px | 700 | 1.52 | Sub-section h3 ("Over 2 million 5-star reviews.") |
| `{typography.display-sm}` | 22.5px | 700 | 1.2 | Card titles inside feature columns |
| `{typography.heading-md}` | 22.5px | 500 | 1.5 | Hero subhead ("The #1 app for sleep, meditation and relaxation") |
| `{typography.heading-sm}` | 18px | 700 | 1.56 | FAQ row question titles |
| `{typography.body-lg}` | 18px | 500 | 1.56 | Lead body paragraphs inside feature columns |
| `{typography.body-md}` | 18px | 400 | 1.56 | Default body — testimonial copy, FAQ answers |
| `{typography.body-sm}` | 16px | 400 | 1.88 | Footer running text and inline secondary copy |
| `{typography.caption}` | 13.5px | 500 | 1.48 | Card meta — review counts, plan labels |
| `{typography.caption-strong}` | 13.5px | 700 | 1.48 | Testimonial star-row labels and badge text |
| `{typography.button-md}` | 18px | 700 | 1.56 | Primary CTA pill label, secondary button label |
| `{typography.nav-link}` | 18px | 500 | 1.56 | Top-nav menu items (Meditate, Sleep, Discover, etc.) |

### Principles
**Weight as hierarchy**: Calm's type system relies on weight more than size to separate roles. The same 18px size carries h3 (weight 700), nav links (weight 500), and body paragraphs (weight 400) — readers parse hierarchy through stroke weight rather than dramatic size jumps. Where most marketing systems use a 6–8x scale ratio (16px body to 96px+ display), Calm caps at 49.5px ÷ 13.5px ≈ 3.7x. The result is a typographic surface that feels even-tempered rather than billboard-loud.

The single typographically loud moment is the hero h1 at 49.5px / 700 — and even that sits in deep navy (`{colors.hero-ink}`) rather than black, keeping the brand identity intact at the highest visual stress point.

### Note on Font Substitutes
If Figtree is unavailable, **Inter** is the closest open-source substitute. Adjust line-heights up by ~3% to match Figtree's slightly tighter x-height.

## Layout

### Spacing System
- **Base unit:** 4px (with 2px and 8px modal steps).
- **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.base}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 40px · `{spacing.section}` 100px · `{spacing.page-pad}` 40px 44px.
- **Section padding (vertical):** `{spacing.section}` (100px) between major bands — testimonial → trial-card → FAQ rhythm. Generous editorial breathing room rather than dense marketplace stacking.
- **Card internal padding:** `{spacing.page-pad}` (40px 44px) for testimonial and trial cards (frequency 20); `{spacing.xxl}` (40px 32px) for feature columns (frequency 9); `{spacing.lg}` (24px) for FAQ rows.
- **Gutters:** `{spacing.xs}` (8px) between dense card rows (frequency 32); `{spacing.sm}` (12px) between inline chips (frequency 20).

### Grid & Container
- **Max content width:** ~1280px centered on the homepage.
- **Hero band:** centered single-column composition with the h1 + subhead stack sitting above the centered CTA pill, all on a 4500px-tall scroll with a mountain-photograph backdrop bleeding from the top.
- **Feature-column grid:** 3-column grid at desktop with each column housing an illustrated icon, an 18px / 700 title, and 2–3 lines of `{typography.body-md}` body.
- **Testimonial grid:** 3-column lavender card row with each card carrying a 5-star icon header, a multi-line review excerpt, and a star count badge.
- **Trial-card band:** single-column lavender-on-white card carrying the email form, plan-toggle, and gradient CTA — anchors the page mid-scroll.
- **FAQ band:** single-column accordion list separated by 1px graphite hairlines (`{colors.hairline-soft}`).

### Whitespace Philosophy
The system gives major bands 100px of vertical breathing room (`{spacing.section}`) but compresses card meta — testimonial review rows sit just 8px apart. The contrast is intentional: the page reads as "open hero, breathable mid-scroll, dense card meta when it matters" — reinforcing the contemplative brand voice without padding the page into editorial vagueness.

## Elevation

The system has **no shadow tier**. Every card, every nav surface, every button sits flat against the canvas — depth comes entirely from color separation (lavender card on white canvas, deep-navy footer on white canvas) and from 20px corner rounding.

- **Flat (no shadow):** 100% of surfaces. Testimonial cards, trial cards, feature columns, FAQ rows, top nav, footer — every component renders without a box-shadow.
- **Photographic depth:** The hero mountain photograph is the only visual depth in the system — its atmospheric perspective (snow-capped peaks receding into haze) does the elevation work that shadows would in a more conventional system.
- **Modal scrim:** `{colors.scrim}` rendered at 50% opacity — the global modal backdrop for the trial sign-up dialog.

**Flat-as-philosophy**: Where most marketing systems reach for layered shadows (Stripe's chromatic shadows, Vercel's mesh gradients, Linear's surface ladder), Calm refuses elevation entirely. The brand argues — through its chrome — that calmness is non-hierarchical; nothing floats above anything else.

## Shapes

The corner-radius scale is unusually narrow: **three radii cover every interactive surface**.

- **20px** (`{rounded.md}`) — frequency 49. The house radius. Testimonial cards, trial cards, feature columns, image tiles, FAQ rows, footer card surfaces.
- **100px** (`{rounded.full}`) — frequency 11. Fully-pill geometry. Reserved for the primary CTA pill, secondary outline buttons, and the top-nav menu pills.
- **10px** (`{rounded.sm}`) — frequency 2. A rare third tier used on a handful of inline chips and the text input on the trial card.

There is no 4px radius, no 8px radius, no 16px radius, and no 32px radius. The system collapses the conventional radius scale into a 3-step ladder where the jumps (10 → 20 → 100) are dramatic — soft-rectangle, soft-rectangle-larger, fully-pill. The visual effect is that the brand reads as either "calm rectangle" or "calm pill" with no ambiguous middle.

## Components

### Buttons

**`button-primary`** — Gradient pill, white text, 100px radius, 14×17.78px padding, 60px height, weight 700. Background runs `linear-gradient(90deg, #2477aa, #6461e0)`. The single voltage moment on the page — "Try Calm for Free", "Start Free Trial".

**`button-primary-hover`** — The press state inverts the gradient direction. No transform, no shadow change.

**`button-secondary`** — White fill, deep-navy text, 1px navy hairline, 100px radius. Used for "Learn more" and "Sign in" inverse CTAs.

**`button-tertiary-text`** — Plain navy text, no surface, no border. Used for inline footer links and "Read more" body links.

### Top Navigation

**`top-nav`** — White surface, 60px height, no shadow, no bottom hairline. The Calm wordmark sits flush left, the product menu pills (Meditate / Sleep / Discover / Pricing) sit center, and account utilities (Sign in, Try free) sit flush right.

**`nav-pill`** — Transparent surface, 100px radius, navy text in `{typography.nav-link}` (18px / 500). Hover state fills with `{colors.surface-lavender}`.

### Hero

**`hero-headline`** — The signature 49.5px / 700 / 74.25px-leading h1 in deep navy ink. Sits over a snow-capped mountain photograph with the gradient color wash bleeding from the top of the page. Single line on desktop, wraps to two on tablet.

**`hero-subhead`** — A 22.5px / 500 paragraph in pure black ("The #1 app for sleep, meditation and relaxation") sitting directly beneath the h1, centered.

**`section-headline`** — The recurring 36px / 700 h2 in deep navy that anchors each mid-page band ("We're here to help you feel better", "Over 2 million 5-star reviews").

### Cards

**`feature-card`** — White surface, 20px radius, 40×32px padding, no shadow. Houses a top-aligned illustrated icon, an 18px / 700 title, and 2–3 lines of body in `{typography.body-md}`. Stacks in a 3-column grid below the hero.

**`image-tile`** — A 20px-rounded photo plate (mountains, lakes, breath animations) used inside the gallery band. No padding, no border — the photograph fills edge-to-edge inside the rounded clip.

**`testimonial-card`** — Lavender surface (`{colors.surface-lavender}` — #e2eaff), deep-navy text, 20px radius, 40×44px padding. Houses a 5-star icon row, a multi-line review excerpt, and a star count badge in `{typography.caption-strong}`. The signature card surface on the page.

**`testimonial-stars`** — Inline gradient-purple star icons (`{colors.brand-purple}`) sitting above the review excerpt. The only place a saturated purple appears as a flat fill rather than as a gradient stop.

**`trial-card`** — Lavender surface, deep-navy text, 20px radius, 40×44px padding. The mid-page anchor: houses the email input, the annual/monthly toggle, and the gradient CTA pill. The only place the gradient CTA appears below the fold.

### Forms

**`text-input`** — White surface, 1px navy hairline (`{colors.hairline}`), 10px radius, 48px height, 12×16px padding. Placeholder text in `{typography.body-md}` at `{colors.ink-soft}`. On focus, the border thickens to 2px and saturation lifts toward the gradient-start blue.

### FAQ

**`faq-row`** — White surface, 20px radius, 24px padding, 18px / 700 question title in deep navy. Expands on click to reveal an 18px / 400 answer paragraph in `{typography.body-md}`.

**`faq-row-divider`** — 1px graphite hairline (`{colors.hairline-soft}`) separating accordion rows. The only divider treatment in the entire system.

### Footer

**`footer-band`** — Deep-navy surface (`{colors.surface-deep}` — #1b2250), white text, 40×44px padding. The only dark surface in the marketing scroll. Houses 4 columns of link blocks plus a copyright line and social icons.

**`footer-link`** — Plain white text in `{typography.body-sm}`, no surface, no border. Underlined on hover. The footer's restraint mirrors the page's — no accent color, no badge, no over-styled link state.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Top nav collapses to logo + hamburger; product menu pills hide behind a sheet; hero h1 drops to 32px / 700; feature columns stack 1-up; testimonial cards stack 1-up; trial-card form collapses to a single-column input + CTA stack. |
| Tablet | 744–1128px | Top nav keeps logo + a 2-pill menu (Pricing, Try free); hero h1 drops to 40px / 700; feature columns 2-up; testimonial cards 2-up. |
| Desktop | 1128–1440px | Full top nav with 4 product menu pills centered; hero h1 at full 49.5px / 700; feature columns 3-up; testimonial cards 3-up; trial-card band at full width. |
| Wide | > 1440px | Content width caps at 1280px; outer margins absorb the rest. |

### Touch Targets
- Primary CTA pill at 60px height — comfortably above WCAG AAA.
- Nav pills at 60px tap-area height with 14×17.78px internal padding.
- FAQ rows at 24px padding give a ~72px tap-target for accordion expansion.

### Collapsing Strategy
- Top product pills collapse into a hamburger sheet below 744px.
- Hero h1 scales down 49.5 → 40 → 32px across breakpoints; weight stays at 700.
- Feature, testimonial, and trial-card grids drop column counts cleanly at each breakpoint — never reflow rows; always reduce columns.
- Trial-card form collapses from a 2-column input + CTA into a stacked single-column on mobile.

## Do's and Don'ts

### Do
- Use `{colors.hero-ink}` (#1a3e6f) for every h1, h2, h3, and brand link. The navy ink is the system's identity — pure black on headlines breaks the brand voice.
- Reserve the gradient (`{colors.primary-gradient-start}` → `{colors.primary-gradient-end}`) for the primary CTA pill only. The hero wash is the one exception.
- Use 20px radius (`{rounded.md}`) on every card, image tile, FAQ row, and feature column. The 100px pill is reserved for the CTA and nav pills.
- Use `{colors.surface-lavender}` (#e2eaff) for warmth on light surfaces. It is the brand's substitute for cream / terracotta.
- Stay inside three Figtree weights (400 / 500 / 700). Weight 600, weight 800, and italic are not part of the system.

### Don't
- Don't use `{colors.body}` (#000000) on headlines — despite its high raw frequency (608), it is reserved for body paragraphs only. Headlines render in deep navy.
- Don't add a second gradient. The blue-to-purple voltage is the only gradient on the page; adding a green-to-teal or pink-to-orange voltage breaks the single-moment-per-page rule.
- Don't add a box-shadow to cards. The system is flat-as-philosophy — depth comes from color separation (lavender on white) and 20px rounding, never from elevation.
- Don't reach for a serif display family. Figtree alone covers every type signature; pairing it with a serif breaks the single-typeface restraint that defines the brand's editorial composure.
- Don't use the 100px pill radius on cards. It is reserved for the primary CTA and nav pills only; rounding a feature card to 100px collapses the geometry distinction the system relies on.
- Don't use a warm earth tone (terracotta, sand, cream) anywhere in the palette. Calm's warmth comes from lavender (`{colors.surface-lavender}`), which stays inside the same cold-blue spectrum as the navy ink and the gradient.

## Known Gaps

- **Hover state colors:** the system has no visible hover state for cards; precise extraction of nav-pill hover backgrounds is unreliable from a static screenshot.
- **Loading states / skeleton screens:** not visible on the extracted surfaces.
- **App product UI:** the iOS and Android meditation player, breath-pacing animations, and sleep-story player live inside the native apps; this spec captures the marketing site only.
- **Form input error states:** the text-input outline (`{colors.hairline}`) is documented, but the full input outline + helper-text combination on validation failure was not visible in the captured surfaces.
- **Dark mode:** the marketing site is light-only; a native dark mode exists in the iOS and Android apps but isn't represented in this DESIGN.md.
- **Motion:** breath-pacing easing curves, gradient wash animations on the hero, and accordion expand timings are not captured as tokens.