DESIGN.md inspired by Calm

---
name: Calm
tagline: Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion.
updated_at: 2026-05-08T00:00:00.000Z
published_at: 2026-05-07T20:02:24.739Z
author: webdesignhot
source_url: https://www.calm.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [healthcare]
tags: [light, soft, serif, sans, warm, spacious]
preview_swatch: ['#f6f1e6', '#1d4763', '#2a4a3e']
related: [headspace, brilliant-org, marriott]
description: 'Calm''s site is the rare wellness brand that has rejected both the medical-utility look and the corporate-consumer-app look in favor of something closer to a Japanese-tea-ceremony space online. The canvas is "Calm Cream" `#f6f1e6` (warm off-white, never pure), display headings sit in Visby Round Bold (a soft humanist sans with rounded terminals) at 48–72px, body in a quieter serif (Calm''s commissioned face descended from Garamond) at 16-18px line-height 1.7. The dual brand colors are Moonlit Blue `#1d4763` (deep teal-blue) and Forest Green `#2a4a3e` (muted moss). All UI motion follows a 4-second breathing pace — buttons scale ±2px on a slow inhale-exhale rhythm. The whole brand reads like a guided meditation translated to web typography.'


# Canonical 8-role aliases (per google-labs-code/design.md PR #76).
# 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
  muted: text-muted
  border: border
  ring: border-brand
colors:
  bg: '#f6f1e6'
  bg-soft: '#fbf8f0'
  bg-deeper: '#ede5d3'
  bg-warm: '#f9f4ea'
  surface: '#ffffff'
  surface-soft: '#fbf8f0'
  surface-cream: '#f0e9d8'
  brand: '#1d4763'
  brand-hover: '#163847'
  brand-pressed: '#102835'
  brand-deep: '#091e29'
  brand-tint: '#dde6ed'
  on-brand: '#f6f1e6'
  forest: '#2a4a3e'
  forest-deep: '#1c3a30'
  forest-soft: '#dce5e0'
  text: '#1d2629'
  text-strong: '#091e29'
  text-muted: '#5a6770'
  text-soft: '#8a949c'
  text-faint: '#bcc4ca'
  text-on-brand: '#f6f1e6'
  link: '#1d4763'
  link-hover: '#2a4a3e'
  selected-bg: '#dde6ed'
  border: '#d8d2c4'
  border-strong: '#bcb6a8'
  border-soft: '#e8e3d6'
  border-brand: '#1d4763'
  amber: '#cb9c45'
  rose: '#c47e7e'
  success: '#2a4a3e'
  warning: '#cb9c45'
  danger: '#a35353'
  info: '#1d4763'

typography:
  display:
    family: '"Visby Round", "Avenir Next", "Inter", -apple-system, sans-serif'
    weights: [400, 600, 700]
  serif:
    family: '"Calm Serif", "Garamond Premier Pro", "Adobe Garamond Pro", Georgia, serif'
    weights: [400, 600]
  body:
    family: '"Visby Round", "Avenir Next", "Inter", -apple-system, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 72, weight: 600, lineHeight: 1.1,  tracking: '-0.015em', family: serif }
    display-xl:      { size: 56, weight: 600, lineHeight: 1.15, tracking: '-0.012em', family: serif }
    display-lg:      { size: 48, weight: 600, lineHeight: 1.2,  tracking: '-0.008em', family: serif }
    h1:              { size: 36, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: serif }
    h2:              { size: 28, weight: 600, lineHeight: 1.3,  tracking: '0',        family: serif }
    h3:              { size: 22, weight: 600, lineHeight: 1.35, tracking: '0',        family: display }
    h4:              { size: 18, weight: 600, lineHeight: 1.4,  tracking: '0',        family: display }
    eyebrow:         { size: 11, weight: 700, lineHeight: 1.2,  tracking: '0.20em',   family: display }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.7,  tracking: '0',        family: display }
    body:            { size: 16, weight: 400, lineHeight: 1.7,  tracking: '0',        family: display }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.6,  tracking: '0',        family: display }
    label:           { size: 12, weight: 600, lineHeight: 1.3,  tracking: '0.10em',   family: display }
    button:          { size: 15, weight: 600, lineHeight: 1.0,  tracking: '0.04em',   family: display }
    caption:         { size: 12, weight: 400, lineHeight: 1.5,  tracking: '0',        family: display }

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

spacing:
  base: 8
  scale: [0, 8, 16, 24, 32, 40, 48, 64, 80, 96, 120, 160, 200]

layout:
  page-width: 1200
  prose-width: 680
  header-height: 80

motion:
  ease-standard: 'cubic-bezier(0.42, 0, 0.58, 1)'
  ease-breathing: 'cubic-bezier(0.5, 0, 0.5, 1)'
  duration-slow: 320
  duration-breathe: 4000
  reduced-motion: 'respects prefers-reduced-motion: reduce — disables breathing-pace UI animations'

breakpoints:
  mobile: 480
  tablet: 768
  desktop: 1200
  wide: 1440

shadows:
  card: '0 2px 16px rgba(29, 71, 99, 0.08)'
  card-hover: '0 8px 28px rgba(29, 71, 99, 0.12)'
  modal: '0 24px 64px rgba(29, 71, 99, 0.20)'

accessibility:
  contrast-text-on-bg: 13.4
  contrast-text-on-brand: 7.8
  focus-ring: '2px solid #1d4763 + 2px outset gap'
  reduced-motion-honored: true

components:
  button-primary: { bg: brand, text: on-brand, padding: '14px 32px', radius: pill, font: button }
  button-secondary: { bg: bg, text: brand, padding: '12px 30px', radius: pill, border: '1px solid border-brand' }
  button-ghost: { bg: transparent, text: brand, padding: '10px 20px' }
  card: { bg: surface, radius: 16, padding: 32, shadow: 'card' }
  pill: { bg: surface-cream, text: brand, radius: pill, padding: '4px 14px', font: 'label' }
  input: { bg: surface, border: '1px solid border-strong', text: text, radius: 12, padding: '14px 16px', focus-border: brand }

lineage:
  summary: 'Calm''s marketing system rejects both the medical-utility look (e.g., MyFitnessPal, GoodRx) and the corporate consumer-app look (e.g., Headspace pre-2023) in favor of something closer to a Japanese-tea-ceremony space translated to web. Calm Cream `#f6f1e6` (warm off-white) is the canvas — never pure white. Visby Round (a soft humanist sans with rounded terminals) handles UI; a commissioned serif descended from Garamond carries display headlines and meditation-quote pull-quotes. Moonlit Blue `#1d4763` and Forest Green `#2a4a3e` are the brand''s muted dual anchors. All UI motion follows a 4-second breathing pace — buttons subtly inhale-exhale, hero photographs slow-pan over 8-12 seconds. The whole brand reads like a guided meditation translated to typography.'
  influences:
    - { name: 'Visby Round (Connary Fagen)', role: 'rounded humanist sans for soft, breathable UI', url: 'https://connary.com/visby.html' }
    - { name: 'Garamond Premier Pro / Adobe Garamond', role: 'serif lineage for editorial meditation pull-quotes', url: 'https://fonts.adobe.com/fonts/garamond-premier-pro' }
    - { name: 'Japanese tea-ceremony spatial design', role: 'wabi-sabi negative space + warm-cream palette', url: 'https://en.wikipedia.org/wiki/Japanese_tea_ceremony' }
    - { name: 'Aman Resorts brand language', role: 'luxury-wellness contemporary; muted nature palette', url: 'https://www.aman.com' }
    - { name: 'Headspace (pre-2023)', role: 'wellness contemporary; Calm differentiated via cream + serif', url: 'https://www.headspace.com' }
---

## 1. Visual Theme & Atmosphere

Calm's site is the rare wellness brand that has rejected both the medical-utility look (MyFitnessPal, GoodRx) and the corporate consumer-app look (Headspace pre-2023) in favor of something closer to a Japanese-tea-ceremony space translated to web. The canvas is "Calm Cream" `#f6f1e6` — a warm off-white, never pure. Display headings sit in a commissioned serif (descended from Garamond Premier Pro) at 48–72px; UI sits in Visby Round (rounded humanist sans) at 14-18px line-height 1.7.

The dual brand colors are Moonlit Blue `#1d4763` (deep teal-blue evoking twilight skies) and Forest Green `#2a4a3e` (muted moss). All UI motion follows a 4-second breathing pace — buttons subtly inhale-exhale, hero photographs slow-pan over 8-12 seconds. Photography is nature-led — forests, lakes at dusk, candle-lit interiors, never people in poses. The whole brand reads like a guided meditation translated to typography.

Where Headspace went bright orange and animated friendly mascots, Calm went muted moonlit-and-forest with no mascot. Where MyFitnessPal went corporate utility, Calm went editorial spaciousness. The brand commits to its meditation thesis: design that lowers the user's heart rate.

**Key Characteristics:**
- Warm cream canvas `#f6f1e6` (never pure white)
- Serif display + rounded-sans UI (Visby Round) — dual-typeface signature
- Moonlit Blue `#1d4763` + Forest Green `#2a4a3e` dual anchors
- Body line-height 1.7 (more generous than typical)
- 4-second breathing-pace motion
- No mascot, no aspirational selfies, only nature
- Pill-radius CTAs (subtly soft, not aggressive)
- 16px card radius
- Light-only canvas on web (mobile app has dark)

## 2. Color Palette & Roles

### Primary
- **Background** (`#f6f1e6`): warm cream off-white. Calm's signature canvas.
- **Bg Soft** (`#fbf8f0`): palest cream alternate band.
- **Bg Deeper** (`#ede5d3`): deeper cream for nested panels.
- **Bg Warm** (`#f9f4ea`): hero-warm wash.
- **Text** (`#1d2629`): body. Soft warm dark.
- **Text Strong** (`#091e29`): emphasized headlines.

### Brand — Moonlit Blue (primary)
- **Brand** (`#1d4763`): deep teal-blue. Primary CTA, wordmark.
- **Brand Hover** (`#163847`), **Pressed** (`#102835`), **Deep** (`#091e29`).
- **Brand Tint** (`#dde6ed`): selection wash.

### Forest Green (secondary)
- **Forest** (`#2a4a3e`): muted moss. Subscription tier accent, sleep-content theme.
- **Forest Deep** (`#1c3a30`), **Forest Soft** (`#dce5e0`).

### Surface
- **Surface** (`#ffffff`): cards lift slightly from cream.
- **Surface Soft** (`#fbf8f0`), **Surface Cream** (`#f0e9d8`).

### Accent
- **Amber** (`#cb9c45`): warm accent for editorial moments, warning states.
- **Rose** (`#c47e7e`): rare pink for love/heart features.

### Borders
- **Border** (`#d8d2c4`), **Border Strong** (`#bcb6a8`), **Border Soft** (`#e8e3d6`).

### Semantic
- success forest, warning amber, danger `#a35353`, info brand.

## 3. Typography Rules

### Font Family
- **Display (Serif)**: Calm Serif (commissioned, descended from Garamond Premier Pro). Fallback Garamond Premier → Adobe Garamond → Georgia.
- **UI + Body**: Visby Round (rounded humanist sans by Connary Fagen). Fallback Avenir Next → Inter.
- **Mono**: system mono only.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Serif | 72 | 600 | 1.1 | -0.015em |
| display-lg | Serif | 48 | 600 | 1.2 | -0.008em |
| h1 | Serif | 36 | 600 | 1.25 | -0.005em |
| h2 | Serif | 28 | 600 | 1.3 | 0 |
| h3 | Visby Round | 22 | 600 | 1.35 | 0 |
| h4 | Visby Round | 18 | 600 | 1.4 | 0 |
| eyebrow | Visby Round | 11 | 700 | 1.2 | 0.20em UPPER |
| body | Visby Round | 16 | 400 | 1.7 | 0 |
| label | Visby Round | 12 | 600 | 1.3 | 0.10em |
| button | Visby Round | 15 | 600 | 1.0 | 0.04em |

### Principles
- **Serif for editorial display + meditation pull-quotes only.** UI uses sans.
- **Body line-height 1.7** — deliberately generous. Reading rhythm matters.
- **Heavy tracking on uppercase** (0.10-0.20em).
- **Mixed case display, UPPER eyebrows + labels.**
- **Visby Round's tucked terminals** are the brand's UI texture.

## 4. Component Stylings

### Buttons (3 variants — pill-radius)

**Primary** — Moonlit Blue:
- bg `#1d4763`, text cream `#f6f1e6`, 15px Visby 600 0.04em
- Padding 14×32, **radius 9999 (pill)**
- Hover: bg `#163847`, subtle scale +0.5%
- Press: bg `#102835`

**Secondary** — bordered:
- bg cream, text brand, 1px brand border, pill radius

**Ghost**: bg transparent, text brand, padding 10×20.

### Cards
- bg white, **16px radius**, padding 32
- Soft moonlit-blue-tinted shadow `0 2px 16px rgba(29,71,99,0.08)`
- Hover: shadow shifts to `0 8px 28px rgba(29,71,99,0.12)`

### Pills (content tags)
- bg `surface-cream`, text brand, pill radius, label font

### Inputs
- bg white, 1px gray-cream border, 12px radius, padding 14×16
- Focus: border Moonlit Blue

### Navigation
- 80px sticky header, cream bg with soft hairline
- Calm wordmark left (serif italic, navy), top-level nav center, "Try Calm Free" pill CTA right

## 5. Layout Principles

- Base 8px (not 4 — looser rhythm), 96-160px between sections
- Page max width 1200px, prose 680px
- Hero often full-bleed nature photograph with Ken Burns zoom
- Content grid: 2-up at desktop (looser than typical 3-up), 1-up at tablet/mobile

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 4 | inline tags |
| Standard | 8 | tooltips |
| Comfortable | 12 | inputs |
| Relaxed | 16 | **cards** |
| Featured | 24 | hero modules |
| Pill | 9999 | **buttons + tags** |

## 7. Depth & Elevation

| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 16px rgba(29,71,99,0.08)` resting (very soft, generous blur) |
| 2 | `0 8px 28px rgba(29,71,99,0.12)` hover |
| 3 | `0 16px 40px rgba(29,71,99,0.16)` featured |
| 4 | `0 24px 64px rgba(29,71,99,0.20)` modal |

### Shadow Philosophy
Very soft, generous blur, blue-tinted (mirrors brand). Never harsh black shadows.

## 8. Interaction & Motion

- **Standard ease**: gentle in-out
- **Breathing ease**: `cubic-bezier(0.5, 0, 0.5, 1)` — for 4-second inhale-exhale animations
- 320ms standard transitions, 4000ms breathing-pace UI loops
- Hero photographs Ken Burns zoom 8-12s
- Buttons subtly inhale-exhale on idle (scale 1.0 → 1.005 → 1.0 over 4s)
- Reduced motion disables breathing animations entirely

## 9. Accessibility & A11y

- text on bg = **13.4:1** AAA
- on-brand on brand = **7.8:1** AAA
- 2px Moonlit Blue focus ring + 2px outset gap

Meditation-content cards have `aria-describedby` linking to duration + description. Photography is `aria-hidden` decorative. Audio meditations have full transcripts available.

## 10. Responsive Behavior

mobile <479: hero 72→44; nav hamburger; 1-up cards. tablet 480-767: 1-up still. desktop+: 2-up.

## 11. Content & Voice

### Tone
**Calm-considered.** Slow, present, never urgent. Voice is the meditation teacher who has time.

### Microcopy patterns
- Primary CTA: **"Try Calm Free"** / **"Begin"** — short, present-tense
- Sign-up: **"Create a Calm account"**
- Errors: **"That didn't quite work. Take a breath and try again."**
- Loading: **"Preparing your session…"**
- Empty: **"Begin your first session — try a 1-minute breathing exercise"**

### CTA verb conventions
- **Begin / Start / Try / Continue**
- Avoid: imperative ("Buy", "Click"), urgency ("Last chance")

## 12. Dark Mode & Theming

**Light-only on web.** The cream canvas IS the brand. Mobile app has dark mode (deep moonlit blue bg with cream text); web has not adopted.

## 13. Lineage & Influences

Calm's marketing system rejects medical-utility and corporate consumer-app aesthetics for something closer to a Japanese tea-ceremony space online. Visby Round (humanist sans with rounded terminals) handles UI; commissioned serif descended from Garamond Premier carries display + meditation pull-quotes. Moonlit Blue + Forest Green are the muted dual anchors.

The brand reads like a guided meditation translated to web typography — slow, present, never hurried.

**Named influences:**
- **Visby Round (Connary Fagen)**
- **Garamond Premier Pro** — serif lineage
- **Japanese tea-ceremony spatial design** — wabi-sabi negative space
- **Aman Resorts brand language** — luxury-wellness contemporary
- **Headspace (pre-2023)** — wellness contemporary differentiation

## 14. Do's and Don'ts

### Do
- **Cream canvas `#f6f1e6`** — never pure white.
- **Serif display + Visby Round UI.**
- **Moonlit Blue + Forest Green dual anchors.**
- **Body line-height 1.7** — generous.
- **Pill-radius CTAs.**
- **Breathing-pace motion (4s inhale-exhale loops).**
- **Nature photography only** — forests, water, candlelight.
- **Mixed case display, 0.20em UPPER eyebrows.**

### Don't
- **Don't use pure white.** Cream is the brand.
- **Don't add a mascot.** Calm has no mascot.
- **Don't use bright/saturated accents.** Muted-only palette.
- **Don't add gradients on CTA.**
- **Don't use sans for display headlines.** Serif is the brand's editorial voice.
- **Don't add urgency microcopy.** ("Last chance", "Hurry") is anti-brand.
- **Don't add aspirational lifestyle photos** (people in yoga poses, etc.). Nature only.
- **Don't add dark mode** to web without explicit Calm approval.

## 15. Agent Prompt Guide

### Quick Color Reference
- bg (Calm Cream): `#f6f1e6`
- text: `#1d2629` / strong `#091e29`
- brand (Moonlit Blue): `#1d4763` / hover `#163847`
- forest: `#2a4a3e`
- amber: `#cb9c45` / rose: `#c47e7e`
- border: `#d8d2c4`

### Example Component Prompts

> Build a Calm-style hero: full-bleed forest-at-dusk photo with slow Ken Burns zoom, cream-tinted overlay scrim, 72px Calm Serif heading "Find your calm" mixed-case `-0.015em`. Pill-radius Moonlit Blue `#1d4763` "Try Calm Free" CTA, 15px Visby Round 600 0.04em.

> Design a meditation-session card: white surface, 16px radius, 32px pad, soft blue-tinted shadow `0 2px 16px rgba(29,71,99,0.08)`. 22px Visby Round h3 "10-Minute Breathing", 11px UPPER 0.20em eyebrow "BEGINNER · MEDITATION" Moonlit Blue. Body in 16px Visby line-height 1.7.

> Render a quote pull-out: 36px Calm Serif italic, body 16px Visby Round, on cream surface-cream `#f0e9d8` band, 96px vertical padding.

> Build a "Begin Session" button: pill radius, Moonlit Blue bg, cream `#f6f1e6` text 15px Visby Round 600 0.04em. On idle, scale 1.0 → 1.005 → 1.0 over 4 seconds (breathing pace).

> Design a content tag pill: pill radius, surface-cream `#f0e9d8` bg, brand text 12px Visby Round 600 0.10em "BEGINNER".

### Iteration Guide

1. **Cream canvas + Serif display + Visby Round UI.**
2. **Moonlit Blue primary, Forest Green secondary.**
3. **Body line-height 1.7** — generous reading rhythm.
4. **Pill-radius CTAs, 16px radius cards.**
5. **Soft blue-tinted shadows, generous blur.**
6. **Breathing-pace motion (4s loops).**
7. **Nature photography only, no people-in-pose.**
8. **Reject pure white, mascots, urgency, bright saturation.**