A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
14tokens
12type steps
5radius steps
12pxspacing base
Calm, in one page
Calm's iOS app is a night sky you can fall asleep inside. The defining surface is a full-screen vertical gradient that runs from a deep twilight blue (#2A6FD6) at the top down to a near-black navy (#0B1E3F) at the bottom — the color of dusk just after the sun has gone. Over that gradient, almost everything is glass: cards are translucent white (rgba(255,255,255,0.08)) so the sky shows through them. The result is an interface that feels less like an app and more like a calm physical space — a planetarium, a lakeside at night — where nothing is sharp, nothing is loud, and the eye is never asked to work.
The accent system is a single, quiet blue. Calm Blue (#2A6FD6) is the only saturated color, and it is used sparingly: the primary "Play"/"Start" pill, the active tab, the progress arc on the breathing exercise. Everything else is white at varying opacities — full white for headlines, ~72% white (#B8C4D8) for supporting copy. There are no reds, no greens, no semantic traffic lights in the main experience; even errors are stated softly. Photography does the emotional work: full-bleed nature imagery (forests, rain on glass, slow waves) sits behind the content, gently darkened so type stays readable.
Typography is a deliberate pairing. Headlines are set in Lora, a contemporary serif with a literary, bedtime-story warmth — "Daily Calm", a sleep story title, the greeting "Good evening". Body and UI text are Inter, a clean humanist sans that disappears into the background. The contrast between the two is the brand's voice: the serif speaks (calm, human, narrative), the sans supports (functional, quiet). Sizes are generous and airy — a 30pt serif hero, 17pt body — with weights kept soft (400 / 600 / 700, never heavier). The single most expressive moment is the breathe bubble: a soft white circle that expands and contracts on a 4-7-8 cycle, the type around it fading "Breathe in… Hold… Breathe out…" in time.
Key Characteristics:
- Full-screen night-sky gradient (
#2A6FD6→#0B1E3F) as the canvas — dusk, not pure black - Glass cards — translucent white (
rgba(255,255,255,0.08)) so the sky shows through - Calm Blue (
#2A6FD6) as the single accent — primary actions, active tab, progress arc - Full-bleed, gently-darkened nature photography behind content
- Serif/sans pairing — Lora for headlines (bedtime-story warmth), Inter for body
- The breathe bubble — a soft circle that scales on a 4-7-8 breathing loop (signature)
- Daily Calm hero card — the day's featured meditation, large and photographic
- Sleep Story list rows — narrator + duration, designed to be read in the dark
- Bottom tabs (Home / Sleep / Meditate / Music / More) — soft, glass-backed
- Motion is slow and continuous — nothing snaps; everything eases over 600ms+
Do's and don'ts
Do
- Use the night-sky gradient (
#2A6FD6→#0B1E3F) as the canvas — dusk, not pure black - Make cards glass —
rgba(255,255,255,0.08)with backdrop blur so the sky shows through - Reserve Calm Blue (
#2A6FD6) for primary actions, the active tab, and progress - Set headlines in Lora (serif) and body/UI in Inter (sans) — never swap the roles
- Give the layout generous air — 20pt margins, 1.55 body leading, 32pt sections
- Animate the breathe bubble on a true 4-7-8 ease-in-out cycle — it must feel like breath
- Scrim-darken photography with a navy gradient so white type stays readable
- Keep motion slow and continuous — 500ms+ cross-dissolves, nothing snaps
- Use the soft session timer in Inter Light (300) — it should feel weightless
Don't
- Don't use pure black
#000000as the canvas — Calm is a twilight gradient, not a void - Don't add saturated accent colors beyond Calm Blue (gold streak is the only rare warm)
- Don't set headlines in a sans — the Lora serif is the brand's voice
- Don't use hard drop shadows — depth is translucency and blur, not cast shadow
- Don't crowd the layout — busyness is the opposite of calm
- Don't animate fast or bouncy — no spring overshoot; everything eases gently
- Don't use harsh red for errors — use the soft desaturated rose, stated quietly
- Don't put solid opaque cards on the gradient — the sky must show through the glass
- Don't make the breathe bubble linear or mechanical — it has to breathe
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Calm design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Calm Blue: #2a6fd6
- Calm Blue Pressed: #1f57ab
- Calm Blue Soft: #4a85e0
- Gradient Top: #2a6fd6
- Gradient Mid: #1a4a8f
- Gradient Bottom: #0b1e3f
- Scrim Navy: #091830
- Text Primary: #ffffff
- Text Secondary: #b8c4d8
- Text Tertiary: #8794a8
Type:
- families: Lora, Inter
- scale: 11, 12, 13, 15, 16, 17, 19, 22, 24
- weights: 300, 400, 500, 600, 700
Shape:
- radius: 16, 20, 23, 24, 26
- elevation: Don't use hard drop shadows — depth is translucency and blur, not cast shadow
Spacing: 12, 14, 16, 20, 28, 32
Rules:
- Use the night-sky gradient (`#2A6FD6` → `#0B1E3F`) as the canvas — dusk, not pure black
- Make cards glass — `rgba(255,255,255,0.08)` with backdrop blur so the sky shows through
- Reserve Calm Blue (`#2A6FD6`) for primary actions, the active tab, and progress
- Set headlines in Lora (serif) and body/UI in Inter (sans) — never swap the roles
- Give the layout generous air — 20pt margins, 1.55 body leading, 32pt sections
- Animate the breathe bubble on a true 4-7-8 ease-in-out cycle — it must feel like breath
Avoid:
- Don't use pure black `#000000` as the canvas — Calm is a twilight gradient, not a void
- Don't add saturated accent colors beyond Calm Blue (gold streak is the only rare warm)
- Don't set headlines in a sans — the Lora serif is the brand's voice
- Don't use hard drop shadows — depth is translucency and blur, not cast shadow
- Don't crowd the layout — busyness is the opposite of calm
- Don't animate fast or bouncy — no spring overshoot; everything eases gently
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Calm Blue (
#2A6FD6): The single accent — primary "Play"/"Start" pill, active tab icon/label, breathing progress arc, selected state. - Calm Blue Pressed (
#1F57AB): Pressed/active state for the blue pill and controls. - Calm Blue Soft (
#4A85E0): Lighter blue used for secondary highlights and the breathe-bubble glow.
Canvas (Night-Sky Gradient)
- Gradient Top (
#2A6FD6): The twilight-blue top of the full-screen background gradient. - Gradient Mid (
#1A4A8F): The transitional mid-band of the gradient (~45% down). - Gradient Bottom (
#0B1E3F): The deep near-black navy at the base — behind the tab bar. - Scrim Navy (
#091830): Photo-darkening overlay applied beneath text on imagery.
Surfaces (Glass)
- Glass Surface (
rgba(255,255,255,0.08)): Standard card fill — translucent so the sky shows through. - Glass Surface Raised (
rgba(255,255,255,0.12)): Higher-elevation cards, the Daily Calm hero, pressed list rows. - Glass Divider (
rgba(255,255,255,0.12)): Hairline separators between list rows. - Glass Hover (
rgba(255,255,255,0.16)): Pressed state on glass surfaces.
Text
- Text Primary (
#FFFFFF): Headlines, card titles, primary copy — pure white for maximum readability on the dark sky. - Text Secondary (
#B8C4D8): Narrator names, durations, descriptions, supporting copy (~72% white, cool-toned). - Text Tertiary (
#8794A8): Very low-emphasis metadata, disabled labels, timestamps.
Semantic (Used Sparingly)
- Progress Blue (
#2A6FD6): Session progress arc / scrubber fill (same as accent). - Streak Gold (
#F2C94C): Streak flame and "X-day streak" emphasis — the only warm accent, rare. - Gentle Error (
#E08A8A): Soft desaturated rose for the rare error message — never harsh red. - Success Calm (
#7FB8A0): Soft sage for "Session complete" confirmation.
Light Mode
Calm's iOS app is effectively dark-only — the night-sky gradient is intrinsic to the brand and the product is used primarily before sleep. There is no shipped light variant. (A daytime reference would invert to Canvas #EAF1FB, Text #0B1E3F, but it is not part of the product.)
Type scaleRead the full spec
Font Family
- Headline / Display:
Lora— a contemporary serif with literary, bedtime-story warmth - Body / UI:
Inter— a clean humanist sans that recedes - Fallback (serif):
Georgia, 'Times New Roman', serif - Fallback (sans):
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Greeting Hero | Lora | 30pt | 600 | 1.25 | -0.2pt | "Good evening, Sam" on Home |
| Screen Title | Lora | 26pt | 600 | 1.3 | -0.2pt | "Sleep", "Meditate" screen heads |
| Daily Calm Title | Lora | 24pt | 600 | 1.3 | -0.1pt | The featured-session title on the hero card |
| Card Title | Lora | 19pt | 600 | 1.35 | 0pt | Sleep-story / meditation card titles |
| Section Header | Inter | 16pt | 700 | 1.3 | 0.2pt | "Sleep Stories", "Featured" labels |
| List Row Title | Inter | 17pt | 600 | 1.35 | 0pt | Sleep-story row name |
| Body | Inter | 17pt | 400 | 1.55 | 0pt | Descriptions, session intros |
| Subtitle / Narrator | Inter | 15pt | 400 | 1.4 | 0pt | "Narrated by Tamara · 32 min" |
| Button (Primary) | Inter | 17pt | 600 | 1.0 | 0.1pt | "Play", "Start session" pill text |
| Meta / Duration | Inter | 13pt | 500 | 1.3 | 0.2pt | "10 min", "Day 214" |
| Tab Label | Inter | 11pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
| Breathe Cue | Lora | 22pt | 400 | 1.2 | 0.5pt | "Breathe in" / "Hold" / "Breathe out" |
| Timer (large) | Inter | 44pt | 300 | 1.0 | 0pt | The countdown during a session (light weight, airy) |
| Label (UPPER) | Inter | 12pt | 700 | 1.2 | 1.0pt | "DAILY CALM", "NEW" tags |
Principles
- Serif speaks, sans supports: Lora carries every emotional/narrative string (greetings, titles, breathe cues); Inter carries every functional one (buttons, meta, navigation). Never swap them.
- Generous leading: Body runs at 1.55 — this is a calm reading surface, not a dense feed.
- Soft weights only: Lora at 400/600, Inter at 400/500/600/700. The session timer uses Inter 300 (Light) deliberately — it should feel weightless.
- Whitespace is the typography: large type, lots of air, short lines. Nothing is cramped.
- Color is structural: text is white or cool-grey; Calm Blue is never used for body text emphasis (use the serif or weight instead).
Components and layoutRead the full spec
Buttons
Primary Play / Start Pill
- Shape: Full pill, height 52pt
- Background:
#2A6FD6 - Text:
#FFFFFF, Inter 17pt weight 600, with a leadingplay.fillSF Symbol 16pt - Padding: 16pt vertical, 40pt horizontal
- Pressed: background
#1F57AB, scale 0.97, soft haptic - Used for: "Play", "Start session", "Begin", "Continue"
Glass Secondary Button
- Background:
rgba(255,255,255,0.12) - Text:
#FFFFFF, Inter 16pt weight 600 - Border: 1pt
rgba(255,255,255,0.16) - Padding: 14pt vertical, 28pt horizontal, corner radius 26pt (full pill)
- Pressed: background
rgba(255,255,255,0.16) - Used for: "Add to favorites", secondary CTAs on cards
Icon Actions (Favorite, Download, Share, Background-sound)
- Size: 22pt glyph, 44pt hit area
- Default:
#FFFFFFat 80% opacity - Active:
#2A6FD6(favorite saved, downloaded) - Spacing: 28pt between icons in the player action row
Text Button ("See all", "Skip")
- Font: Inter 15pt weight 600
- Color:
#B8C4D8 - No background, 44pt hit area
Cards & Containers
Daily Calm Hero Card *(signature)*
- Height: ~220pt, full content width
- Background: full-bleed nature photograph, darkened with a
#091830→ transparent bottom-up gradient (so text is legible) - Overlay content (bottom-left): "DAILY CALM" label 12pt w700 letter-spaced
#FFFFFF, then Lora 24pt w600 title, then Inter 15pt#B8C4D8subtitle "Today · 10 min" - Trailing: a 44pt circular glass play button (
rgba(255,255,255,0.16),play.fill18pt white) - Corner radius: 20pt
- Pressed: scale 0.98, subtle brightness lift on the photo
Sleep Story / Meditation Card (Shelf tile)
- Width: 160pt, photographic top (1:1 or 4:3), text below
- Background: glass
rgba(255,255,255,0.08)behind the text zone - Corner radius: 16pt on the image
- Structure: image → Lora 19pt w600 title (2-line clamp) → Inter 13pt w500
#B8C4D8"32 min · Sleep" - Gap between tiles: 14pt
- Tap: scale 0.97 with soft haptic
Sleep Story List Row
- Height: 76pt
- Layout: 56pt rounded thumbnail (12pt radius) → stacked title/narrator → trailing duration + download glyph
- Background: transparent over the gradient; pressed →
rgba(255,255,255,0.12) - Title: Inter 17pt w600 white; Narrator: Inter 15pt w400
#B8C4D8 - Divider: 1pt
rgba(255,255,255,0.12)between rows
Glass Card (generic container)
- Background:
rgba(255,255,255,0.08)with a 20pt backdrop blur (the sky blurs through it) - Border: 1pt
rgba(255,255,255,0.12) - Corner radius: 20pt
- Padding: 20pt
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
rgba(11,30,63,0.72)with.regularMaterialblur (the deep navy base of the gradient, glassed) - Tabs: Home, Sleep, Meditate, Music, More
- Icon size: 24pt
- Active color:
#2A6FD6(icon + label both pick up Calm Blue) - Inactive:
#FFFFFFat 60% opacity - Labels: Inter 11pt w600, always shown
- Active icon: filled SF Symbol; inactive: outlined
- A hairline
rgba(255,255,255,0.12)top border
Top Bar
- Height: 44pt + safe area, transparent (the gradient runs behind it)
- Left: profile avatar (30pt circular) or greeting
- Right: streak flame (
#F2C94C) with day count, then a settings glyph 22pt white - No solid background — it floats on the sky; content scrolls beneath
Player Screen (Full)
- Full-bleed scene photo or animated gradient, scrim-darkened
- Centered: Lora 24pt w600 title, Inter 15pt narrator
- Large circular scrubber arc (Calm Blue progress) around a central 64pt play/pause
- Below: background-sound selector, timer, favorite — glass icon row
- A soft "x min remaining" caption in Inter 13pt
#B8C4D8
Input Fields
Search Field
- Background:
rgba(255,255,255,0.10) - Height: 46pt, corner radius 23pt (full pill)
- Leading
magnifyingglassSF Symbol 16pt#B8C4D8 - Placeholder: "Search meditations, sleep stories", 16pt
#8794A8 - Text:
#FFFFFF - Focus: border
rgba(255,255,255,0.20), no color shift
Mood Check-in Chip
- Background:
rgba(255,255,255,0.10)/#2A6FD6selected - Text:
#FFFFFF - Padding: 12pt vertical, 20pt horizontal, corner radius 24pt
- Examples: "Calm", "Anxious", "Tired", "Grateful"
Distinctive Components
Breathe Bubble *(signature)*
- A soft white circle, base diameter ~120pt, on the night-sky gradient with a subtle outer glow (
#4A85E0blur) - Animation cycle (4-7-8 default): expand to ~220pt over 4s (inhale), hold at full for 7s, contract to 120pt over 8s (exhale)
- The Lora 22pt cue text crossfades in time: "Breathe in" → "Hold" → "Breathe out"
- Concentric faint rings ripple outward on each inhale
- Motion easing is
easeInOut, continuous, never linear — it must feel like breath
Daily Calm Streak
- A
#F2C94Cflame glyph + "214-day streak" in Inter 13pt w500 - On milestone, a gentle particle shimmer (no confetti — Calm stays serene)
Session Timer Ring
- Circular progress arc around the player play button
- Track:
rgba(255,255,255,0.16), 3pt; Progress:#2A6FD6, 3pt, rounded cap - Sweeps clockwise over the session length; the center shows
pause.fill24pt white
Soundscape Mixer
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 140pt shelf tiles; breathe bubble base 104pt |
| iPhone 13/14/15 | 390pt | Standard 160pt tiles; breathe bubble base 120pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the floating top bar |
| iPhone 15/16 Pro Max | 430pt | 180pt tiles; breathe bubble base 136pt; hero 240pt tall |
| iPad | 768pt+ | 3-column shelves; player centers with max 600pt content width |
Dynamic Type
- Greetings, titles, body, narrator: full scale (Lora and Inter both)
- Tab labels, duration meta: fixed (layout-sensitive at 11-13pt)
- Session timer: scales modestly, capped at 56pt
- Breathe cue: scales but the bubble geometry stays fixed
Orientation
- Home / Sleep / Meditate / Music: portrait-locked (the gradient is vertical by intent)
- Player: portrait-locked — the scene composition assumes vertical
- iPad: rotates — landscape widens shelves; the player keeps a centered column
Touch Targets
- Primary play pill: 52pt tall — generous
- Card play buttons: 44pt circular
- List rows: full 76pt height tappable
- Tab icons: 24pt glyph, 44pt effective hit
- Breathe bubble: not a button (it is ambient) — controls sit below it
Safe Area Handling
- Top: floating bar respects the notch / Dynamic Island; gradient runs to the top edge
- Bottom: tab bar floats above the home indicator; gradient runs to the bottom edge
- Sides: 20pt content insets
- Player: full-bleed scene ignores safe area for the background; controls inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-calm {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #93700b;
--link-hover-color: #644c07;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #f2c94c;
--button-text-color: #000000;
--button-hover-bg: #efbb1c;
--button-border: none;
--button-border-radius: 23px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-serif);
--heading-font: var(--font-inter);
--card-border-radius: 23px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- gyokusendo 76.8%
- lovable 76.2%
- monday 75.5%
- skyscanner 75.1%
- paramount plus 74.8%
Where this came from
- Source document
ios/design-md/fitness/calm/DESIGN.md· 21.3 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.