Care: Healthcare App Design System

App · Light · Soft · Health

Care

One clear task per screen, for patients who just want to get it done.

Care is written for patients who may be tired, worried or reading on a small screen: a cool, pale background, calm cerulean for the next step and large, plain labels. Each screen handles one task, like choosing a time or confirming a visit, before moving on.

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 Care design system. Its spec is at https://codexdesign.io/design-systems/care.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#F7FAFCoklch(0.983 0.004 236.496)
foreground#0F2533oklch(0.254 0.039 238.734)
card#FFFFFFoklch(1 0 0)
card-foreground#0F2533oklch(0.254 0.039 238.734)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0F2533oklch(0.254 0.039 238.734)
primary#0A6C8Aoklch(0.496 0.092 226.189)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E2F0F5oklch(0.946 0.016 221.08)
secondary-foreground#08485Coklch(0.375 0.068 225.402)
muted#EDF3F6oklch(0.96 0.008 228.854)
muted-foreground#4F6573oklch(0.494 0.035 236.328)
accent#E5F0F5oklch(0.948 0.014 226.562)
accent-foreground#0F2533oklch(0.254 0.039 238.734)
destructive#B3261Eoklch(0.501 0.178 28.705)
border#D8E4EAoklch(0.912 0.015 228.976)
input#C7D6DEoklch(0.867 0.02 230.733)
ring#0A6C8Aoklch(0.496 0.092 226.189)
chart-1#0A6C8Aoklch(0.496 0.092 226.189)
chart-2#2EA37Aoklch(0.641 0.12 165.003)
chart-3#E0A43Aoklch(0.758 0.137 77.684)
chart-4#7C6BC4oklch(0.584 0.133 290.433)
chart-5#D45D79oklch(0.634 0.152 7.8)

Dark theme

background#0B171Eoklch(0.197 0.022 235.108)
foreground#E4EEF2oklch(0.943 0.012 223.527)
card#11212Aoklch(0.238 0.028 234.286)
card-foreground#E4EEF2oklch(0.943 0.012 223.527)
popover#11212Aoklch(0.238 0.028 234.286)
popover-foreground#E4EEF2oklch(0.943 0.012 223.527)
primary#5EC2E0oklch(0.766 0.102 220.242)
primary-foreground#0B171Eoklch(0.197 0.022 235.108)
secondary#192C36oklch(0.282 0.031 232.351)
secondary-foreground#E4EEF2oklch(0.943 0.012 223.527)
muted#152730oklch(0.261 0.029 231.106)
muted-foreground#8DA4AFoklch(0.705 0.03 228.264)
accent#1C313Coklch(0.301 0.033 232.283)
accent-foreground#E4EEF2oklch(0.943 0.012 223.527)
destructive#F28A82oklch(0.743 0.128 25.246)
border#223844oklch(0.328 0.035 233.179)
input#2B4350oklch(0.369 0.037 232.814)
ring#5EC2E0oklch(0.766 0.102 220.242)
chart-1#5EC2E0oklch(0.766 0.102 220.242)
chart-2#5FD3A6oklch(0.788 0.125 165.158)
chart-3#F0C26Eoklch(0.838 0.115 81.184)
chart-4#A99BEAoklch(0.732 0.113 291.466)
chart-5#EE93A9oklch(0.763 0.112 4.425)

Fonts

Headings: Source Sans 3 · 700
Body: Source Sans 3 · 400
Monospace: Source Code Pro

Type scale

display · 40/1.05 · -0.02emThe quick brown fox
h1 · 30/1.1 · -0.01emThe quick brown fox
h2 · 22/1.2The quick brown fox
h3 · 18/1.3The quick brown fox
body · 16/1.5The quick brown fox
small · 13/1.4The quick brown fox

Radius, spacing and shadow

Corner radiussm 10pxmd 12pxlg 14pxxl 18px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowSoft, low and wide, on cards and sheets only.

Layout

Touch targets: 48px
Tab bar: 64px, 4 items, icons with labels
Screen padding: 20px
Navigation: bottom tab bar; one task per screen
Numerals: proportional

Care: Healthcare App Design System

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