Color Tokens · 9 colors
Typography · 6 levels
设计系统是工艺，不是装饰
排版建立层级
每个元素都要有目的
正文。15px 以下的字读起来累，超过 1.6 行距显得松散。这是默认正文，14px / 1.55。
辅助文字，用于说明、时间戳、meta
const tokens = { accent: "#4a8cff" }
Spacing Scale · 4 / 8 / 12 / 20 / 32 / 48 / 64
Components · buttons
3 Layout Variants · for the same content
Conservative · 最稳
左侧色条强调
最保守的卡片模式，企业内部工具都用这种。风险最低，用户立刻理解。
标准间距
14px / 16px 行高。读起来安全，不出错也不出彩。
Strong-fit · 强匹配
微渐变背景
保留卡片感但用渐变暗示层级。Linear / Vercel 风格。
细体数字
关键数字用大字号 + 弱色，制造"信息密度"感。
Divergent · 离经叛道
虚线边框
打破"实线 = 已完成"的预设，让人重新审视内容。
无背景卡片
信任读者：信息自己说话，不要用背景色强行分组。
Component Lab · card variations
1. Default card
纯文字卡片，最少装饰。适合文章列表、设置项。
2. Number card
2,847
较上期 +12.3%
3. Status card
运行中
3 gateway · 2 channels