Clinic: 헬스케어 디자인 시스템

Web · Light · Soft · Health

Clinic

건강 웹사이트를 위한 차분한 틸, 또렷한 타이포그래피, 쉬운 말.

Clinic은 신뢰를 위해 만들어졌습니다. 옅은 민트빛 흰 페이지, 행동에는 짙은 틸, 가독성이 높은 휴머니스트 산세리프, 명확하고 여유로운 폼. 모든 페이지는 무언가를 팔기 전에 환자의 다음 질문, 즉 어디서, 언제, 얼마인지에 먼저 답합니다.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

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

Tokens

Colors

Light theme

background#F8FBFBoklch(0.986 0.003 197.105)
foreground#10282Boklch(0.259 0.03 206.13)
card#FFFFFFoklch(1 0 0)
card-foreground#10282Boklch(0.259 0.03 206.13)
popover#FFFFFFoklch(1 0 0)
popover-foreground#10282Boklch(0.259 0.03 206.13)
primary#0B6E69oklch(0.487 0.082 189.198)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E3F1EFoklch(0.947 0.015 186.688)
secondary-foreground#0B4C48oklch(0.378 0.061 188.501)
muted#EEF5F4oklch(0.965 0.008 186.892)
muted-foreground#4E6466oklch(0.486 0.027 203.19)
accent#E6F2F0oklch(0.952 0.013 185.091)
accent-foreground#10282Boklch(0.259 0.03 206.13)
destructive#B3261Eoklch(0.501 0.178 28.705)
border#D6E4E3oklch(0.908 0.015 191.74)
input#C6D8D6oklch(0.868 0.02 188.766)
ring#0B6E69oklch(0.487 0.082 189.198)
chart-1#0B6E69oklch(0.487 0.082 189.198)
chart-2#3B82C4oklch(0.592 0.124 249.268)
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#0D1A1Coklch(0.207 0.019 208.072)
foreground#E4EFEEoklch(0.944 0.012 190.437)
card#132326oklch(0.243 0.022 210.657)
card-foreground#E4EFEEoklch(0.944 0.012 190.437)
popover#132326oklch(0.243 0.022 210.657)
popover-foreground#E4EFEEoklch(0.944 0.012 190.437)
primary#5CC8BFoklch(0.767 0.1 187.944)
primary-foreground#0D1A1Coklch(0.207 0.019 208.072)
secondary#1B2E31oklch(0.286 0.025 208.362)
secondary-foreground#E4EFEEoklch(0.944 0.012 190.437)
muted#172A2Doklch(0.27 0.025 208.428)
muted-foreground#8FA7A9oklch(0.711 0.027 202.725)
accent#1F3438oklch(0.309 0.028 210.85)
accent-foreground#E4EFEEoklch(0.944 0.012 190.437)
destructive#F2827Aoklch(0.729 0.139 25.284)
border#24393Coklch(0.328 0.027 207.159)
input#2D4549oklch(0.372 0.03 208.959)
ring#5CC8BFoklch(0.767 0.1 187.944)
chart-1#5CC8BFoklch(0.767 0.1 187.944)
chart-2#7DB4E8oklch(0.752 0.095 247.822)
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 · 60/1.05 · -0.025emThe quick brown fox
h1 · 40/1.1 · -0.02emThe quick brown fox
h2 · 28/1.2 · -0.01emThe quick brown fox
h3 · 20/1.3The quick brown fox
body · 16/1.55The quick brown fox
small · 13/1.45The quick brown fox

Radius, spacing and shadow

Corner radiussm 6pxmd 8pxlg 10pxxl 14px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

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

Layout

Max width: 1200px
Text width: 70ch
Columns: 12
Gutter: 24px

Best for

병원·의원
원격 진료와 디지털 헬스
건강보험과 환자 포털
약국·웰니스 서비스

Do's and don'ts

버튼은 환자가 실제로 쓸 쉬운 동사로 쓰세요.
모든 폼 라벨을 입력창 위에 항상 보이게 두세요.
오류와 긴급 경고 외에는 빨간색을 쓰지 마세요.
상태를 색상만으로 표현하지 마세요.