色彩Colors
朱砂为魂，墨灰为骨，暖纸为面。全部色板以油墨印刷逻辑构建，主色取自传统印泥朱砂。
主色 · Vermeil 朱砂
主色
中性色 · Ink 墨阶
语义色 · Semantic
成功 · Success
var(--c-success)操作完成、校验通过等正向反馈。
警告 · Warning
var(--c-warning)需要注意但不阻塞流程的提示。
错误 · Error
var(--c-error)操作失败、校验不通过等阻断反馈。
信息 · Info
var(--c-info)中性说明与上下文补充信息。
间距令牌 · Spacing Scale（4px 基数）
space-14px
space-28px
space-312px
space-416px
space-624px
space-832px
space-1248px
圆角 · Radius
直角r-sm · 4px
圆角r-md · 10px
大圆角r-lg · 18px
胶囊r-pill
阴影 · Hard Shadow 印刷硬阴影
sm
md
lg
字体Typography
中文取思源宋体（Noto Serif SC）作标题骨架，西文配 Fraunces 展现油墨衬线的温度，等宽注释统一使用 IBM Plex Mono。
章显秩序，字生万象。
一笔一画，皆是节奏。
一笔一画，皆是节奏。
Display / Noto Serif SC 900 · Fraunces Italic — 温故而知新
display
42 / 1.25
Serif 900
42 / 1.25
Serif 900
观棋不语真君子
heading-2
28 / 1.35
Serif 700
28 / 1.35
Serif 700
落子无悔大丈夫
heading-3
19 / 1.5
Sans 700
19 / 1.5
Sans 700
组件即词汇，页面即文章。
body
15 / 1.75
Sans 400
15 / 1.75
Sans 400
正文字阶以 15px 为基准，行高 1.75，段间距 1em。较宽松的行距为长时间阅读保留呼吸感，墨色文字与暖纸背景的对比度达到 AA 级以上。
quote
22 / 1.6
Fraunces Italic
22 / 1.6
Fraunces Italic
"Design is the silent ambassador of your brand."
caption
11.5 / 1.6
Plex Mono
11.5 / 1.6
Plex Mono
FIG. 02 — TYPE SPECIMEN · 子午设计系统 · 2026
表单Forms
输入聚焦时以朱砂描边加 3px 柔光提示；所有控件均为纯 CSS 定制，不依赖原生外观。
⌘ K
邮箱格式不正确，请检查 @ 后的域名
开关 · Switch
深色模式跟随系统关闭时使用纸面浅色主题
显示网格基线在画布上叠加 8pt 排版网格
动效减弱遵循 prefers-reduced-motion
卡片Cards
封面图案以朱砂斜纹摹仿雕版印刷的底纹；悬停时卡片上浮压出硬阴影。
数据卡 · Stat Cards
本周发布 / Releases
42 次
+18.2%
组件覆盖率 / Coverage
96 %
+3.4%
构建耗时 / Build
1.8 s
-12.0%
审
设计评审 · 第 14 期
本周四 16:00 · 会议室 B · 复盘表单组件的焦点态
＋新建组件卡
反馈Feedback
警示条、进度、骨架屏与加载指示——所有反馈都遵守「三秒之内必有响应」的原则。
新版本可用
子午 v2.4.0 新增 6 个表单组件与深色主题。
发布成功
站点已部署至子午 Pages，耗时 1.8 秒。
令牌即将废弃
spacing-5 将在 v3.0 移除，请迁移至 space-4 / space-6。
构建失败
无法解析 tokens.json 第 42 行，检查色值格式。
轻提示 · Toast（点击触发）
进度 · Progress（滚动到此自动播放）
组件覆盖率0%
文档完成度0%
用例通过率0%
骨架屏 · Skeleton
spinner / sm
spinner / lg
dots
弹层Overlays
对话框以弹簧曲线入场、背景磨砂压暗；工具提示四向可用，支持键盘 Esc 关闭。
对话框 · Modal（点击触发）
工具提示 · Tooltip（悬停查看四向）
下拉菜单 · Dropdown（悬停展开）
动效Motion
三曲线体系：入场用 ease-out、交互回弹用 spring、长过渡用 slow-in-out。悬停卡片，感受铅字滑过的手感。
缓动曲线 · Easing（悬停卡片触发）
入场 · Enter
cubic-bezier(.22, 1, .36, 1) · 800ms
弹簧 · Spring
cubic-bezier(.34, 1.56, .64, 1) · 800ms
缓迁 · Slow
cubic-bezier(.45, 0, .15, 1) · 1400ms
交错动画 · Stagger（点击播放）
铅字上浮
悬停我 —— translateY(-3px,-3px) + 硬阴影，如同铅字被重新排版。