What is Calm's primary brand color?

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.

What typography does Calm use, and what should I use if Figtree isn't available?

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.

How is the blue-to-purple gradient used?

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.

Why is everything 20px rounded?

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.

What is the role of lavender (#e2eaff) in the system?

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.

Can I use this DESIGN.md to build my own React wellness app?

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.

Calm Design System

Calm's design system as a DESIGN.md file.

About Calm DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source calm.com

Healthcare & Wellness

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.

What makes it distinct

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 radius49 of 62 corner instances; the 100px CTA pill is the only departure
No serif, no italic, no display dramaFigtree alone covers all 19 type signatures from 13.5px caption to 49.5px h1
Lavender (#e2eaff) is the warmthappears on testimonial cards and trial card surfaces where most wellness apps would reach for cream

Live at calm.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

calm.com

Explore Calm

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Calm design system FAQ

Common questions about Calm's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Calm — official site

The #1 app for meditation, sleep, and relaxation — the live marketing surface this design system was extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Calm in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→