---
version: alpha
name: "Clinic"
description: "沉稳的青绿色、清晰的字体和直白的语言，为医疗网站设计。 Clinic 的核心是信任：浅薄荷白的页面、深青绿的操作按钮、易读的人文无衬线字和宽松清楚的表单。每个页面先回答患者接下来想问的问题，比如在哪、什么时候、多少钱，再谈推广。"
colors:
  primary: "#0B6E69"
  on-primary: "#FFFFFF"
  secondary: "#3B82C4"
  tertiary: "#E0A43A"
  neutral: "#4E6466"
  surface: "#F8FBFB"
  on-surface: "#10282B"
typography:
  display-lg:
    fontFamily: "Source Sans 3"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Source Sans 3"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Source Sans 3"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Source Sans 3"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Source Sans 3"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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

## Colors

- **primary (#0B6E69):** 深青绿，用于预约按钮、链接和当前步骤。
- **on-primary (#FFFFFF)**
- **secondary (#3B82C4):** 清爽的蓝色，用于信息提示和第二组图表数据。
- **tertiary (#E0A43A):** 暖琥珀色，用于提醒、待处理状态和第三组数据。
- **neutral (#4E6466):** 带一点青色的石板灰，用于辅助说明和表单提示。
- **surface (#F8FBFB):** 极浅的薄荷白；白色卡片靠柔和阴影从底色上浮起来。
- **on-surface (#10282B)**

## Typography

全站用 Source Sans 3：标题粗体 700，从 60px 到 20px；正文用常规字重 400，16px，行高 1.55。预约编号和代码用 Source Code Pro。每行控制在 70 个字符左右。

## Layout

页面最大宽度 1200px，12 栏网格，栏间距 24px，间距单位 4px。服务页先给一段简短概述，再列营业时间和地址；桌面端的预约卡片始终留在视野里。

## Shapes

卡片、输入框和按钮用 10px 圆角。1px 浅灰青色描边；卡片和预约面板用柔和的低阴影托起。

## Components

带日期和时段选择的预约卡片、带照片和专长的医生卡片、标签和提示始终可见的表单，以及常见问题折叠面板。

## Do's and Don'ts

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