Calm: sistema de diseño de apps de bienestar

App · Light · Soft · Serif · Health

Calm

Verde salvia suave, una serif amable y espacio para respirar.

Calm ralentiza la pantalla: un fondo salvia, verde profundo para las acciones, una serif amable para los títulos y mucho espacio entre los elementos. Cada pantalla pide una sola cosa cada vez.

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

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use 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/es/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

Calm: sistema de diseño de apps de bienestar

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps