Guide

Design tokens

所有视觉决策都编码为 --ody-* 自定义属性：两级映射 —— 原始色阶 --ody-c-* → 语义 --ody-*。组件规则只引语义层，因此换肤或切主题只需覆盖语义 token。

下方所有色块都用 live 变量渲染，会随主题自动变化。标注的十六进制为亮色取值 —— 点右上角切到暗色即可预览对照。

品牌 / 强调色

--ody-accent

#4f46e5

--ody-accent-2

#6366f1

--ody-accent-ink

#4338ca

--ody-accent-soft

#eef0fe

--ody-accent-soft-2

#e4e7fd

语义状态色

Success · ok

--ody-ok

#16a34a

--ody-ok-soft

#e6f6ec

--ody-ok-ink

#15803d

Warning · warn

--ody-warn

#d97706

--ody-warn-soft

#fdf1de

--ody-warn-ink

#b45309

Danger · down

--ody-down

#e11d48

--ody-down-soft

#fde7ec

--ody-down-ink

#be123c

Info

--ody-info

#0891b2

--ody-info-soft

#e0f5f9

--ody-info-ink

#0e7490

表面 / 边框

--ody-bg

#f6f7f9

--ody-bg-2

#eef0f4

--ody-surface

#ffffff

--ody-surface-2

#f7f8fa

--ody-surface-3

#f0f2f6

--ody-border

#e5e7ec

--ody-border-2

#d3d7e0

--ody-hairline

#eef0f4

文字 / ink

--ody-ink

#1a1d24

--ody-ink-2

#4a5160

--ody-ink-3

#727a8a

--ody-ink-4

#9aa2b1

圆角

--ody-r-xs6px

--ody-r-sm8px

--ody-r11px

--ody-r-lg16px

--ody-r-pill999px

间距（base-4）

--ody-sp-14px

--ody-sp-28px

--ody-sp-312px

--ody-sp-416px

--ody-sp-520px

--ody-sp-624px

--ody-sp-832px

阴影 / 层级

--ody-sh-xs

--ody-sh-sm

--ody-sh-md

--ody-sh-lg

--ody-sh-pop

字号梯

--ody-fs-stat1,02426px

--ody-fs-h1敏捷的棕狐 Aa22px

--ody-fs-h2敏捷的棕狐 Aa17px

--ody-fs-h3敏捷的棕狐 Aa14.5px

--ody-fs-body敏捷的棕狐 Aa14px

--ody-fs-sm敏捷的棕狐 Aa12px

--ody-fs-micro敏捷的棕狐 Aa11px

--ody-fs-eyebrowEyebrow11.5px

字重

--ody-fw-mediumMedium 中等字重 550550

--ody-fw-semiboldSemibold 半粗 650650

字体族

核心样式表不内嵌字体，只声明 --ody-font 变量并回退到系统字体栈。若需 Inter，额外 <link> 引入 odyssey-font.css 即可。

--ody-font: "Inter","Inter Variable",system-ui,-apple-system,
            "Segoe UI",Roboto,Helvetica,Arial,"PingFang SC",sans-serif;
--ody-mono: "JetBrains Mono","SFMono-Regular",ui-monospace,
            "SF Mono",Menlo,Consolas,monospace;