Care: 헬스케어 앱 디자인 시스템
App · Light · Soft · HealthCare
화면마다 명확한 할 일 하나. 빨리 끝내고 싶은 환자를 위해.
Care는 지쳤거나 걱정되거나 작은 화면으로 읽는 환자를 위해 쓰였습니다. 서늘하고 옅은 배경, 다음 단계를 알리는 차분한 세룰리안, 크고 평이한 라벨. 시간 선택이나 방문 확인 같은 하나의 작업을 마쳐야 다음으로 넘어갑니다.
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 Care design system. Its spec is at https://codexdesign.io/ko/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
Best for
- 진료 예약·원격 진료 앱
- 환자 포털과 건강 기록
- 복약·진료 알림
- 약국·검사 결과 앱
Do's and don'ts
- 모든 예약은 요약 화면으로 확인하세요.
- 모든 상태 색상에는 아이콘과 단어를 함께 쓰세요.
- 한 화면에 주요 버튼을 두 개 두지 마세요.
- 쉬운 말이 있다면 의학 용어를 쓰지 마세요.