Calm: Wellness App Design System
App · Light · Soft · Serif · HealthCalm
Soft sage, a gentle serif and room to breathe.
Calm slows the screen down: a sage background, deep green for actions, a gentle serif for titles and plenty of space between elements. Each screen asks for one thing at a time.
Preview
Rendered live from the tokens below, in the system's own fonts.
9:41
Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse it in your project
Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.
This project uses the Calm design system. Its spec is at https://codexdesign.io/design-systems/calm.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.
Tokens
Colors
Light theme
- background#F1F3EEoklch(0.961 0.007 124.448)
- foreground#1E2A24oklch(0.272 0.02 163.043)
- card#FAFBF8oklch(0.986 0.004 121.559)
- card-foreground#1E2A24oklch(0.272 0.02 163.043)
- popover#FAFBF8oklch(0.986 0.004 121.559)
- popover-foreground#1E2A24oklch(0.272 0.02 163.043)
- primary#2F5446oklch(0.413 0.049 167.738)
- primary-foreground#F1F3EEoklch(0.961 0.007 124.448)
- secondary#DCE5DCoklch(0.913 0.015 145.447)
- secondary-foreground#1E2A24oklch(0.272 0.02 163.043)
- muted#E6EBE4oklch(0.934 0.011 136.561)
- muted-foreground#56655Coklch(0.491 0.023 159.104)
- accent#E3EADFoklch(0.929 0.016 133.827)
- accent-foreground#1E2A24oklch(0.272 0.02 163.043)
- destructive#A8392Aoklch(0.502 0.149 30.61)
- border#D3DCD1oklch(0.885 0.018 140.021)
- input#C9D3C6oklch(0.856 0.021 138.44)
- ring#2F5446oklch(0.413 0.049 167.738)
- chart-1#2F5446oklch(0.413 0.049 167.738)
- chart-2#B5784Aoklch(0.626 0.098 56.778)
- chart-3#5F86B8oklch(0.612 0.088 255.035)
- chart-4#9C6A8Foklch(0.589 0.082 336.495)
- chart-5#7A9A55oklch(0.645 0.102 129.249)
Dark theme
- background#121815oklch(0.202 0.011 163.644)
- foreground#E6ECE6oklch(0.937 0.01 145.493)
- card#18201Coklch(0.234 0.014 163.477)
- card-foreground#E6ECE6oklch(0.937 0.01 145.493)
- popover#18201Coklch(0.234 0.014 163.477)
- popover-foreground#E6ECE6oklch(0.937 0.01 145.493)
- primary#9CC5AEoklch(0.787 0.054 160.274)
- primary-foreground#121815oklch(0.202 0.011 163.644)
- secondary#1F2924oklch(0.27 0.017 163.393)
- secondary-foreground#E6ECE6oklch(0.937 0.01 145.493)
- muted#1C2420oklch(0.251 0.014 163.622)
- muted-foreground#93A39Aoklch(0.7 0.022 161.216)
- accent#222C27oklch(0.282 0.017 163.492)
- accent-foreground#E6ECE6oklch(0.937 0.01 145.493)
- destructive#E07A68oklch(0.689 0.13 31.169)
- border#2A352Foklch(0.317 0.018 161.322)
- input#33403Aoklch(0.358 0.02 165.566)
- ring#9CC5AEoklch(0.787 0.054 160.274)
- chart-1#9CC5AEoklch(0.787 0.054 160.274)
- chart-2#E0A577oklch(0.767 0.093 58.756)
- chart-3#93B4E0oklch(0.761 0.073 255.745)
- chart-4#D3A2C6oklch(0.769 0.075 336.085)
- chart-5#B4CF8Eoklch(0.818 0.092 126.655)
Fonts
- Headings
- Newsreader · 500
- Body
- Figtree · 400
- Monospace
- Figtree
Type scale
- display · 44/1.1 · -0.015emThe quick brown fox
- h1 · 32/1.15 · -0.01emThe quick brown fox
- h2 · 24/1.25The quick brown fox
- h3 · 19/1.3The quick brown fox
- body · 17/1.6The quick brown fox
- small · 14/1.45The quick brown fox
Radius, spacing and shadow
Corner radiussm 20pxmd 22pxlg 24pxxl 28px
Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px
ShadowSoft, low and wide, on cards and sheets only.
Layout
- Touch targets
- 48px
- Tab bar
- 68px, 3 items, icons with labels, no badges
- Screen padding
- 24px
- Navigation
- bottom tab bar; one primary action per screen
- Numerals
- proportional
Best for
- Meditation and sleep apps
- Journaling and mood trackers
- Therapy and health apps
- Habit apps with a gentle tone
Do's and don'ts
- Do ask for one action per screen.
- Do use the serif only for titles and quotes.
- Don't use red or urgent badges.
- Don't fill every gap; space is part of the design.