Clinic：医疗健康官网设计系统

网页 · 浅色 · 柔和 · 医疗健康

Clinic

沉稳的青绿色、清晰的字体和直白的语言，为医疗网站设计。

Clinic 的核心是信任：浅薄荷白的页面、深青绿的操作按钮、易读的人文无衬线字和宽松清楚的表单。每个页面先回答患者接下来想问的问题，比如在哪、什么时候、多少钱，再谈推广。

预览

直接用下面的设计变量和这套系统自己的字体实时渲染。

2026 新功能规划、上线和复盘，都在一个地方

为小团队准备的安静工作台。该有的数字都在，多余的一个没有。

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

邀请团队成员工作邮箱you@company.com角色编辑 ▾发送邀请

最近订单客户状态金额Ada Park已付款$1,240Lukas Weber待付款$380Mei Chen已退款$96

在你的项目里使用

粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。

这个项目使用 Clinic 设计系统，规范在 https://codexdesign.io/zh/design-systems/clinic.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。

设计变量

颜色

浅色主题

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)

深色主题

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)

字体

标题: Source Sans 3 · 700
正文: Source Sans 3 · 400
等宽: Source Code Pro

字号阶梯

display · 60/1.05 · -0.025em设计让界面更好用
h1 · 40/1.1 · -0.02em设计让界面更好用
h2 · 28/1.2 · -0.01em设计让界面更好用
h3 · 20/1.3设计让界面更好用
body · 16/1.55设计让界面更好用
small · 13/1.45设计让界面更好用

圆角、间距和阴影

圆角sm 6pxmd 8pxlg 10pxxl 14px

间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

阴影柔和、低而宽的阴影，只用在卡片和面板上。

布局

最大宽度: 1200px
正文宽度: 70ch
栏数: 12
栏间距: 24px

适合

诊所和医疗机构
在线问诊和数字健康
医疗保险和患者门户
药房和健康服务

要做和不要做

按钮文字用患者自己会说的动词。
表单标签始终显示在输入框上方。
除了错误和紧急警告，不要用红色。
不要只靠颜色来表示状态。