字体与排版

正文使用 PingFang SC + Inter；大数字使用 Urbanist Medium（font-num）并开启 tabular-nums，代码与编号保留 JetBrains Mono。标签类文字统一 13px / 600 / 0.16em 大写，保证投影场景下的可读性。

返回组件库
02 · TYPOGRAPHY · 字体与排版
hero
874,200
kpi
32,847
h1
让数据成为可计算的资产
page-h1
RUNDA 页面主标题（1.833rem）
admin-h1
管理页面标题（20px）
eyebrow
EYEBROW · 标签分类 · 0.16em
body
B 端正文 17px · 行高 1.75
admin-body
管理端正文 14px · 行高 1.6
功能性字号 Token
code
P-20260001 · claude.messages.create()
button
保存修改
button-cta
开始治理
nav-link
工作台 · 患者管理 · 数据报表 · 系统设置
caption-upper
NEW · 数据治理 v2.4
table-header
患者 ID　　姓名　　科室　　状态
badge
在院 · 已出院 · 危急值
tooltip
数据资产总量：包含全部结构化临床数据条目
<section id="typography" class="section">
    <div class="section-title">02 · TYPOGRAPHY · 字体与排版</div>
    <div class="demo-box">
      <div class="space-y-6">
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-20 text-[11px] text-ink-500 font-mono">hero</div>
          <div class="font-num font-normal text-cdx-700" style="font-size:clamp(3rem,5vw,5rem);line-height:1.08;letter-spacing:-0.035em">874,200</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-20 text-[11px] text-ink-500 font-mono">kpi</div>
          <div class="font-num font-medium text-cdx-700" style="font-size:clamp(2.5rem,4vw,4rem);line-height:1;letter-spacing:-0.025em">32,847</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-20 text-[11px] text-ink-500 font-mono">h1</div>
          <div class="font-display font-medium" style="font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.15;letter-spacing:-0.025em">让数据成为可计算的资产</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-20 text-[11px] text-ink-500 font-mono">page-h1</div>
          <div class="font-display font-medium" style="font-size:1.833rem;line-height:1.2">RUNDA 页面主标题（1.833rem）</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-20 text-[11px] text-ink-500 font-mono">admin-h1</div>
          <div style="font-size:20px;font-weight:600;letter-spacing:-0.01em">管理页面标题（20px）</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-20 text-[11px] text-ink-500 font-mono">eyebrow</div>
          <div style="font-size:0.8125rem;line-height:1.4;font-weight:600;letter-spacing:0.16em;text-transform:uppercase" class="text-cdx-700">EYEBROW · 标签分类 · 0.16em</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-20 text-[11px] text-ink-500 font-mono">body</div>
          <div style="font-size:1.0625rem;line-height:1.75">B 端正文 17px · 行高 1.75</div>
        </div>
        <div class="flex items-baseline gap-6">
          <div class="w-20 text-[11px] text-ink-500 font-mono">admin-body</div>
          <div style="font-size:14px;line-height:1.6">管理端正文 14px · 行高 1.6</div>
        </div>
      </div>
    </div>

    <div class="demo-sub">功能性字号 Token</div>
    <div class="demo-box">
      <div class="space-y-5">
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-28 text-[11px] text-ink-500 font-mono">code</div>
          <div class="font-mono" style="font-size:14px;line-height:1.6">P-20260001 · claude.messages.create()</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-28 text-[11px] text-ink-500 font-mono">button</div>
          <div style="font-size:14px;font-weight:500;line-height:1">保存修改</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-28 text-[11px] text-ink-500 font-mono">button-cta</div>
          <div style="font-size:13px;font-weight:600;line-height:1;letter-spacing:0.16em;text-transform:uppercase">开始治理</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-28 text-[11px] text-ink-500 font-mono">nav-link</div>
          <div style="font-size:14px;font-weight:500;line-height:1.4">工作台 · 患者管理 · 数据报表 · 系统设置</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-28 text-[11px] text-ink-500 font-mono">caption-upper</div>
          <div style="font-size:12px;font-weight:500;line-height:1.4;letter-spacing:0.12em;text-transform:uppercase">NEW · 数据治理 v2.4</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-28 text-[11px] text-ink-500 font-mono">table-header</div>
          <div style="font-size:12px;font-weight:600;line-height:1.4;letter-spacing:0.04em">患者 ID　　姓名　　科室　　状态</div>
        </div>
        <div class="flex items-baseline gap-6 pb-4 border-b border-ink-100">
          <div class="w-28 text-[11px] text-ink-500 font-mono">badge</div>
          <div class="font-mono" style="font-size:11px;font-weight:600;line-height:1.4;letter-spacing:0.04em">在院 · 已出院 · 危急值</div>
        </div>
        <div class="flex items-baseline gap-6">
          <div class="w-28 text-[11px] text-ink-500 font-mono">tooltip</div>
          <div style="font-size:12px;line-height:1.6">数据资产总量：包含全部结构化临床数据条目</div>
        </div>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。