---
version: alpha
name: Calm
description: A serene midnight-gradient canvas system where deep navy-to-indigo backgrounds carry the emotional weight, Circular Std's geometric warmth anchors every word, and nature photography breathes through every surface — a meditation app that makes stillness feel like a product feature.

colors:
  # Primary surfaces — deep night sky
  background: "#0b1e33"             # deep midnight navy — the dominant dark canvas /* estimated */
  background-mid: "#17304a"         # mid-depth teal-navy for layered sections /* estimated */
  surface: "#1a3a52"                # card/panel surface — lifted blue-teal /* estimated */
  surface-light: "#ffffff"          # white surface for marketing light sections /* estimated */

  # Gradient stops (signature brand gradient)
  gradient-start: "#0b1e33"         # deep midnight navy (top/left anchor) /* estimated */
  gradient-mid: "#1c3d60"           # blue-teal midpoint /* estimated */
  gradient-end: "#2c6e8a"           # teal accent horizon /* estimated */

  # Ink / text — light on dark canvas
  ink: "#ffffff"                    # primary white text on dark surfaces /* estimated */
  ink-secondary: "#b8cfe0"          # cool muted blue-gray for secondary copy /* estimated */
  ink-muted: "#7fa3bc"              # dimmer blue-gray for captions, metadata /* estimated */
  on-primary: "#ffffff"             # white text on teal CTA buttons /* estimated */
  on-surface-light: "#1a2f44"       # dark ink for light/white section text /* estimated */

  # Brand accent — serene teal
  primary: "#00a9b5"                # Calm teal — CTA buttons, links, active states /* estimated */
  primary-dark: "#008a95"           # deeper teal hover state /* estimated */
  primary-container: "#0d3a4d"      # tinted teal surface — badge/chip fills /* estimated */

  # Borders
  border: "#2a4a64"                 # subtle dark-blue hairline divider /* estimated */
  border-light: "#e0e8ef"           # light-section soft border /* estimated */

  # Shadow tints
  shadow-soft: "#000000"            # pure black shadow base (was rgba(0,0,0,0.13) — Google format requires hex)

  # Semantic
  success: "#4caf7d"                # soft green for positive states /* estimated */
  error: "#e05c5c"                  # muted red for error states /* estimated */

typography:
  display-hero:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.5px
  display:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -1px
  heading-section:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav-link:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  label:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.5px
  caption:
    fontFamily: "Circular Std, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2px

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

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.background-mid}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    border: "1px solid {colors.ink}"
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

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

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

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-dark:
    backgroundColor: "{colors.background-mid}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-teal:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Calm Design System

## Overview

Calm's visual identity is built on a counter-proposition: in a world of bright, energetic app interfaces, the screen itself should slow you down. The signature canvas is a deep midnight navy (`{colors.background}`) that evokes the feeling of a clear sky at dusk — not oppressive black, but the particular deep blue of 10pm before stars fully emerge. This canvas anchors the emotional promise of the product before a single element of content arrives. The brand's signature nature photography — still lakes, moon-lit forests, rolling fog — sits atop this canvas with a softness that feels less designed and more discovered.

The gradient system is the brand's most distinctive visual tool. Rather than brand-color fills or flat backgrounds, sections of the site and app flow through `{colors.gradient-start}` → `{colors.gradient-mid}` → `{colors.gradient-end}`, a slow blue-to-teal shift that mimics the transition from deep water to shallow light. This gradient never startles; it eases. The `{colors.primary}` teal emerges from the gradient's lighter horizon — a color that is both a brand accent and a literal echo of the system's naturalistic palette.

Circular Std, the geometric sans-serif also used by Spotify and other brands committed to legible warmth, handles every word in the system. At display weights (700) with tight negative tracking it feels substantial and confident; in body weight (400) at generous 1.6 line-height, it opens into something approachable and quiet. The round apertures and near-perfect geometry of Circular read as safe, measured, and human — never urgent, never corporate. All button shapes are pills; all interactive elements round their corners to the maximum. The metaphor is consistent: Calm has no sharp edges.

**Key Characteristics:**
- Deep midnight navy canvas (`{colors.background}`) as the signature dark base — evocative of the sky before sleep
- Slow blue-to-teal gradient (`{colors.gradient-start}` → `{colors.gradient-end}`) as the primary section treatment, never flat fills
- `{colors.primary}` serene teal for all CTAs and interactive elements — single accent, carefully preserved
- **Circular Std** throughout — 400–700 weight range, geometric round apertures that communicate safety without softness
- Full pill buttons (`{rounded.pill}`) on all interactive elements — zero sharp corners in the interaction layer
- Nature photography (still lakes, soft fog, moon and star imagery) as a primary design component
- Dual-mode: the dark app canvas for deep sessions; occasional white `{colors.surface-light}` sections on the marketing site
- Generous vertical rhythm (96–120px section gaps) — the site breathes like a meditation itself
- Minimal motion: slow crossfades, no snap transitions — every state change eases
- `{colors.ink-secondary}` and `{colors.ink-muted}` cool grays for secondary text, preventing high-contrast visual noise on the dark canvas
- Shadow from `{colors.shadow-soft}` is diffused and dark — elevation is felt rather than seen
- Category badge chips in `{colors.primary-container}` teal tint keep content labels legible without competing with photography

## Colors

### Primary Surfaces
- **Midnight Navy** (`{colors.background}`): The foundational dark canvas. Not pure black — the `#0b1e33` value carries enough blue depth to feel oceanic and calm rather than void. All major hero and app sections ground here.
- **Mid-Depth Navy** (`{colors.background-mid}`): A lighter surface for layered sections and card-adjacent backgrounds, preserving the dark atmosphere while creating subtle depth.
- **Card Surface** (`{colors.surface}`): The lifted teal-blue panel background — cards, modal interiors, and feature panels sit one level above the base canvas.
- **White Surface** (`{colors.surface-light}`): Used sparingly in marketing contexts for contrast sections; testimonials, press logos, and CTA panels with a lighter mood.

### Gradient System
- **Gradient Start** (`{colors.gradient-start}`): Deep midnight anchor — matches the base canvas.
- **Gradient Mid** (`{colors.gradient-mid}`): Blue-teal midpoint of the characteristic brand horizon gradient.
- **Gradient End** (`{colors.gradient-end}`): Teal horizon stop — where the dark sea meets the suggestion of light.

### Brand Accent
- **Calm Teal** (`{colors.primary}`): The singular interactive color. Every CTA button, active link, and focus indicator uses this teal. Its restraint is deliberate — appearing only where action is needed, its warmth reads as an invitation.
- **Deep Teal** (`{colors.primary-dark}`): Hover state for teal CTAs; the same hue a step darker.
- **Teal Container** (`{colors.primary-container}`): Tinted fill for badge chips and category tags — low-saturation teal that acknowledges the accent without competing.

### Ink / Text
- **White** (`{colors.ink}`): Primary text on dark surfaces. Pure white for maximum legibility on the deep navy canvas.
- **Cool Blue-Gray** (`{colors.ink-secondary}`): Supporting copy, subtitle text, card body. Cool enough to read as distinctly secondary without losing legibility.
- **Dimmer Blue-Gray** (`{colors.ink-muted}`): Captions, timestamps, metadata. The coolest text value — nearly whispered.
- **Dark Navy Ink** (`{colors.on-surface-light}`): Primary text on white light sections, matching the brand's deep navy.

### Borders & Shadows
- **Dark Blue Hairline** (`{colors.border}`): Subtle card and panel edges on dark surfaces.
- **Light Gray Border** (`{colors.border-light}`): Dividers and card edges on white/light sections.
- **Shadow Base** (`{colors.shadow-soft}`): Opaque approximation of `rgba(0,0,0,0.13)` used for card elevation on the dark canvas.

## Typography

### Font Family
- **Primary**: `Circular Std` — Lineto's geometric sans, also used by Spotify, Airbnb, and other experience-forward consumer brands. Self-hosted or licensed (not available on Google Fonts). Fallback stack: `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`.
- **Weight range**: 400 (regular) for body and nav; 500 (medium) for labels; 700 (bold) for all headings, display, and buttons.
- **No secondary typeface**: Circular Std does everything. The font's tonal range — from 400 body openness to 700 display authority — is wide enough to carry the full hierarchy alone.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px / 700 / -1.5px — primary marketing hero headline |
| `display` | 48px / 700 — section-level campaign headings |
| `heading-section` | 36px / 700 — feature section openers |
| `heading-sub` | 24px / 700 — card titles, feature names |
| `body-large` | 20px / 400 — hero supporting copy, lead paragraphs |
| `body` | 17px / 400 — standard flowing body copy |
| `body-small` | 15px / 400 — card body, feature descriptions |
| `nav-link` | 15px / 500 — navigation item labels |
| `button-ui` | 16px / 700 — all CTA and button labels |
| `label` | 13px / 500 / 0.5px tracking — badge chips, category tags |
| `caption` | 12px / 400 — fine print, metadata |

### Principles
- **One family, total discipline**: Circular Std's tonal range handles every use case. No serif accent, no condensed variant.
- **Bold is for impact, not anxiety**: 700 weight appears only at heading and button scale — body copy stays at 400 to preserve the reading calm.
- **Tracking opens at small sizes**: `{typography.label}` and `{typography.caption}` add slight positive tracking (0.2–0.5px) for legibility at small sizes on the dark canvas.
- **Generous line-height on body**: 1.60 at `{typography.body}` creates reading comfort on the deep navy background — the open spacing prevents any sense of density or urgency.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Calm's spacing personality is theatrical at the macro level — hero sections breathe at 96–120px (`{spacing.4xl}`–`{spacing.5xl}`), reinforcing the unhurried, meditative pacing. Card interiors tighten to 16–32px (`{spacing.md}`–`{spacing.xl}`). The result is an alternating rhythm: generous space between ideas, efficient density within them.

### Grid & Container
- Max content width: approximately 1280px, centered
- Hero sections: full-viewport-width imagery with centered copy and a single CTA
- Feature sections: alternating two-column and centered-single layouts
- Card grids: 3-column on desktop, 2-column on tablet, 1-column on mobile
- Breakpoints extracted from dembrandt: 390px / 480px / 481px / 620px (mobile-first)

### Whitespace Philosophy
- **The pause is the product**: large vertical gaps between sections mirror the pause between breaths in guided meditation — this isn't empty space, it is deliberate.
- **Photography needs room**: nature imagery requires generous margins to achieve its calming effect; cramped images become wallpaper; spaced images become atmosphere.
- **Centered copy over long lines**: headings are typically centered with max-width constraints, preventing the line-length sprawl that creates reading fatigue.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; gradient or solid canvas | Hero sections, full-bleed photography |
| Subtle (Level 1) | `rgba(0,0,0,0.13) 0px 2px 9px -1px` | Resting content cards on the dark canvas |
| Card (Level 2) | `rgba(0,0,0,0.25) 0px 4px 16px -2px` | Feature panels, elevated modals |
| Overlay (Level 3) | `rgba(0,0,0,0.40) 0px 8px 32px -4px` | Full-screen overlays, deep session UI |
| Focus Ring | `0 0 0 3px {colors.primary}` | Focused interactive elements |

**Shadow Philosophy**: On a deep navy canvas, shadows work differently than on white. The natural darkness of the background absorbs shadow edges, making elevation feel more atmospheric than geometric. Calm uses soft, high-spread drop shadows (`rgba(0,0,0,0.13)` observed from dembrandt data) that act as gentle floating effects rather than structural depth cues. Cards feel suspended in the dark field rather than stacked above a surface. The result is dimensionality without drama — consistent with the brand's whole tone.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Image thumbnail crops, small indicator states |
| `md` | 8px | Content card images, article thumbnails |
| `lg` | 16px | Feature cards, panel containers |
| `xl` | 24px | Large feature panels, image containers |
| `pill` | 9999px | All buttons, badge chips, input fields |

Calm's shape vocabulary is fully rounded at the interactive layer — every button, every input, every badge is a pill. This is not incidental. The pill shape in Calm's language echoes the brand's circular wordmark, the full-moon iconography of the sleep content, and the round apertures of Circular Std itself. Containers allow sharper corners (16px, 24px) because they frame photography rather than invite touch. The visual language says: where you act, there are no edges; where you rest, there is gentle structure.

## Components

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

### Button Variants

- **`button-primary`** — Calm teal (`{colors.primary}`) pill, white text, 16px 700 Circular Std, `{rounded.pill}`, 14px/28px padding. The "Try Calm for Free" CTA. Hover deepens to `{colors.primary-dark}`.
- **`button-secondary`** — Dark card-surface fill (`{colors.surface}`) with subtle border, white text, pill shape. Used for softer secondary actions like "Learn More."
- **`button-ghost`** — Transparent with white border (`{colors.ink}`), white text. Used within deep photography sections where teal would compete with the imagery.
- **`button-light`** — White fill (`{colors.surface-light}`) with dark navy text (`{colors.on-surface-light}`). The CTA variant for the rare light-background marketing sections.

### Cards
- **`card`** — Teal-navy surface (`{colors.surface}`), 24px radius, 32px padding. Feature and product content cards.
- **`card-dark`** — Mid-depth navy background (`{colors.background-mid}`), same radius and padding. Slightly lower contrast for ambient content blocks.

### Inputs
- **`input`** — Card-surface fill with white text, pill radius, 12px/20px padding. Focus state adds a 1px teal border (`{colors.primary}`) — the accent color as a system signal.

### Badges / Tags
- **`badge`** — Tinted teal container (`{colors.primary-container}`) with cool secondary text, pill shape. Used for content category chips (Sleep, Meditation, Focus).
- **`badge-teal`** — Full teal fill (`{colors.primary}`) with white text. Higher emphasis chip for premium or featured tags.

### Navigation
- **`nav-bar`** — Midnight navy background (`{colors.background}`), white nav-link text (15px / 500). Logo sits left, primary "Try for Free" teal pill CTA sits right. The nav sits flat against the page on initial load, matching the hero's canvas.

## Do's and Don'ts

### Do
- Start every layout on the deep midnight navy canvas (`{colors.background}`) — the dark base is the brand's emotional signature
- Use the blue-to-teal gradient (`{colors.gradient-start}` → `{colors.gradient-end}`) as the primary section treatment for hero and feature backgrounds
- Apply `{colors.primary}` teal only to primary CTA buttons and interactive active states — preserve its calming authority by limiting its appearance
- Round all interactive elements to `{rounded.pill}` — pills on buttons, badges, and inputs are the defining interactive shape
- Allow 96–120px vertical gaps between major sections (`{spacing.4xl}`–`{spacing.5xl}`) — the unhurried pace is a core brand expression
- Use `{colors.ink-secondary}` and `{colors.ink-muted}` cool grays for supporting copy — full white on all body text creates visual noise on the dark canvas
- Set all display headings in Circular Std at weight 700 with negative tracking (-1.5px at 64px, scaling proportionally)
- Let nature photography breathe with generous margins — it is a functional design component, not decoration

### Don't
- Don't use a warm or bright accent color alongside `{colors.primary}` teal — the single-accent discipline is what gives CTAs their quiet power
- Don't introduce pure white (`#ffffff`) as a dominant canvas — the brand's identity lives on the dark navy; white sections are exceptions, not the norm
- Don't use square or lightly-rounded corners (below `{rounded.lg}`) on buttons or inputs — rectangular interactive elements break the pill-and-circle language
- Don't compress section vertical spacing below 48px (`{spacing.2xl}`) for major content transitions — density reads as urgency, which is antithetical to Calm
- Don't use weight 400 for headings — Circular Std at 700 provides the only appropriate authority for headlines in this system; lighter weights lose their grounding
- Don't introduce photography that is dynamic, energetic, or visually complex — imagery should be still, horizontal, and tonally cool (lakes, fog, moon, forest dusk)
- Don't use `{colors.primary}` teal as a background fill for large surfaces — it is a button and highlight color, not a section canvas
- Don't center-align body paragraphs — centered display headings are the rule; flowing body copy is left-aligned for legibility

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <390px | Single column; hero type reduces to ~32px; pill buttons go full-width |
| Mobile | 390–480px | Standard phone layout; hamburger nav; hero photography cropped portrait |
| Mobile Mid | 480–620px | Slightly wider; 2-column card hints begin |
| Tablet | 620–1024px | 2-column card grids; nav expands; hero type ~48px |
| Desktop | 1024–1280px | Full 3-column grid; gradient hero at full width |
| Large Desktop | >1280px | Centered max-width container; generous symmetric margins |

### Touch Targets
- All pill buttons: 14px/28px padding ensures minimum 44px rendered height for thumb targets
- Badge chips and nav links maintain minimum 44px tap height via container padding
- Category chip rows scroll horizontally on mobile with adequate spacing between tappable items

### Collapsing Strategy
- **Navigation**: horizontal nav → hamburger drawer on mobile; teal CTA button persists in mobile nav
- **Hero**: full-viewport photography scales to portrait crop; display headline reduces from 64px → ~36px on mobile
- **Feature grids**: 3-column → 2-column → single stacked column; bottom cards stack with `{spacing.lg}` gap
- **Type**: proportional reduction; negative tracking softens on smaller sizes
- **Section padding**: 96px vertical gaps reduce to 40–48px on mobile

### Image Behavior
- Hero photography: full-viewport-width at all breakpoints; portrait crop applied from ~620px down
- Feature section imagery: maintains `{rounded.xl}` 24px crops; goes full-width on mobile
- Nature scene images (lakes, forests, sky): object-fit cover with centered focal point at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background (dark): `{colors.background}` — midnight navy
- Background gradient: `{colors.gradient-start}` → `{colors.gradient-end}`
- Primary text: `{colors.ink}` (white on dark)
- Secondary text: `{colors.ink-secondary}`
- Brand accent / CTA: `{colors.primary}` (Calm teal)
- Border: `{colors.border}`
- Light section text: `{colors.on-surface-light}`

### Example Component Prompts

- "Build a hero section on a dark navy-to-teal gradient background (`{colors.gradient-start}` → `{colors.gradient-end}`, linear 135deg). Overlay a full-bleed still-lake nature photograph at 60% opacity above the gradient. Center a 64px Circular Std 700 headline in white (`{colors.ink}`) with -1.5px letter-spacing, line-height 1.1. Below: 20px / 400 body copy in `{colors.ink-secondary}`. Single pill CTA: `{colors.primary}` teal fill, white text, Circular Std 700 16px, `{rounded.pill}`, 14px/28px padding."
- "Create a primary CTA button: `{colors.primary}` teal fill, white text (`{colors.on-primary}`), Circular Std 700 16px, `{rounded.pill}`, 14px/28px padding. On hover, transition background to `{colors.primary-dark}` over 0.2s ease."
- "Design a feature card on `{colors.surface}`. Background: `{colors.surface}`. Radius: `{rounded.xl}` (24px). Padding: 32px. Eyebrow label: 13px / 500 / 0.5px tracking / `{colors.ink-muted}`. Headline: Circular Std 24px / 700 / -0.3px tracking / `{colors.ink}`. Body: 15px / 400 / 1.55 line-height / `{colors.ink-secondary}`. Bottom: one pill CTA using `{colors.primary}` fill, white text."
- "Render a content category badge: `{colors.primary-container}` tint fill, `{colors.ink-secondary}` text, Circular Std 13px / 500 / 0.5px tracking, `{rounded.pill}`, 4px/12px padding. Use for 'Sleep', 'Meditation', 'Focus' category chips."
- "Build the Calm navigation bar. Background: `{colors.background}`. Height: 56px. Logo: Calm wordmark left-aligned with circular icon. Nav links: Circular Std 15px / 500 / `{colors.ink-secondary}`. Right: 'Try Calm for Free' pill using `{colors.primary}` fill, white text, `{rounded.pill}`, 10px/20px padding."
- "Design a full-screen meditation session overlay. Background: `{colors.background}` with a soft radial gradient using `{colors.gradient-mid}` at 40% opacity from center. Typography: large Circular Std 700 48px centered white headline (`{colors.ink}`). Beneath: session timer in `{colors.ink-secondary}` 20px / 400. Bottom control strip: pill pause/play button in `{colors.primary}` teal with icon, 14px/28px padding."

### Iteration Guide

1. Open every layout on `{colors.background}` midnight navy — the dark canvas is the emotional foundation, not an optional dark mode
2. Apply the blue-to-teal gradient (`{colors.gradient-start}` → `{colors.gradient-end}`) as hero and feature section treatments; use solid `{colors.background}` for neutral sections
3. Set all display headings in Circular Std at weight 700 with proportional negative tracking (-0.025em is a safe rule of thumb); body stays 400 at 1.6 line-height
4. Reserve `{colors.primary}` teal for primary CTA buttons and active/focus states only — no more than one teal CTA per section
5. All interactive elements (buttons, inputs, badges) must use `{rounded.pill}` — the system has no rectangular interactive elements
6. Maintain 96px+ vertical section gaps (`{spacing.4xl}`) — resist compression; the unhurried pace is a design specification
7. Photography is a functional component: still, cool-toned, nature imagery layered over the gradient canvas at ~60% opacity

---

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