Design Operating System
我们的设计系统
让我们所有项目保持一致的视觉基础。令牌、色板、字体、间距——全部开放并附有文档。
色板
Primary — 赤陶色
--primary: 16 71% 42%唯一的操作色：CTA、链接。白底对比度 5.3:1
Accent — 藏青色
--accent: 214 52% 25%标题、结构。白底对比度 11.3:1
深藏青
--navy-deep: 213 56% 17%横幅与页脚背景
亮金色
--gold-bright: 41 88% 62%仅用于藏青背景上的数字
正文
--foreground: 215 28% 17%正文文字。白底对比度 14.7:1
次要文字
--muted-foreground: 215 14% 40%备注、说明。白底对比度 6.0:1
玫红
--rose: 14 62% 40%扩展色板，收敛至主色系
紫色
--violet: 214 52% 32%扩展色板，收敛至主色系
青色
--cyan: 205 48% 33%扩展色板，收敛至主色系
金色
--gold: 40 90% 30%评价、奖项。白底对比度 ≥ 4.5:1
靛蓝
--indigo: 213 56% 25%扩展色板，收敛至主色系
Destructive
--destructive: 0 72% 42%错误、删除
字体排印
Display — Outfit Variable
里昂式的排版之美
标题、CTA、强调。100–900。
Body — Plus Jakarta Sans Variable
长段落也能轻松阅读，编排节奏考究。
正文、导航、标签。200–800。
| 元素 | 字号（流式） | 行高 | 用途 |
|---|---|---|---|
h1 | clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem) | 1.06 | 页面标题，首屏 |
h2 | clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem) | 1.14 | 板块标题 |
h3 | clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem) | 1.25 | 副标题，卡片 |
h4 | 1.125rem | 1.35 | 小节标题 |
h5, h6 | 1rem | 1.4 | 次级标题 |
body | 1rem | 1.65 | 正文（Plus Jakarta Sans） |
text-sm | 0.875rem | 1.25rem | 次要正文，备注 |
text-xs | 0.75rem | 1rem | 元信息、徽章、说明 |
间距（Tailwind 刻度）
0.52px14px28px312px416px624px832px1248px1664px2496px阴影
shadow-e1几乎不可察觉的细线——输入框、标签
shadow-e2静止状态的卡片
shadow-e3悬停状态的卡片、悬浮按钮
shadow-e4对话框、面板
自定义 CSS 工具类
.glass白色卡片、细边框、柔和阴影——卡片、输入框
.glass-strong同一表面，阴影更明显——对话框、页头
.glass-premium突出显示的表面——首屏、作品集
.surface-sunken冷灰色交替板块，边缘 40 px 渐隐
.section-y板块垂直节奏（--section-y）
.measure行长限制为 68 个字符
.text-gradient-warm标题中某个词的赤陶色底块
.text-gradient-cool标题中某个词的藏青色底块
.cta-gradient赤陶色底块 + --primary-foreground 文字
.section-divider1 px 细线，两端渐隐
.card-img-frame16/10 图片框，零 CLS，悬停放大
.spot-card跟随光标的光晕与描边
.btn-glow-fill实心按钮：悬停时出现反光 + 赤陶色光晕
.btn-glow-ring描边按钮：悬停时边框发光
.link-grow从左侧展开的下划线
.skip-link跳转链接，获得焦点时显示
组件预览
按钮
徽章
PrimarySuccessWarningError
渐变
KAYZEN Premium
现代工程
Glass Strong
使用 .glass-strong 类的卡片示例。