设计令牌 Tokens
颜色 · 字体 · 圆角 · 阴影 · 液态玻璃。定义于 packages/rodel-ui/src/styles/tokens.css，统一 --rd-* 前缀。
品牌与语义色
Primary #EA543F · Brand Blue #122341（Maastricht Blue）。
| 名称 | CSS 变量 | 值 |
|---|---|---|
| Primary | --rd-color-primary | #EA543F |
| Primary Hover | --rd-color-primary-hover | #D94432 |
| Primary Dark | --rd-color-primary-dark | #C73B2B |
| Primary Light | --rd-color-primary-light | #FDF1EE |
| Primary Muted | --rd-color-primary-muted | #F5D8D3 |
| Brand Blue | --rd-color-brand-blue | #122341 |
| Brand Blue Hover | --rd-color-brand-blue-hover | #1A2F54 |
| Brand Blue Tint | --rd-color-brand-blue-tint | rgba(18,35,65,.06) |
| Sidebar | --rd-sidebar-bg | #122341 |
| Background | --rd-color-bg-page | #F0F2F5 |
| Surface | --rd-color-surface | #FFFFFF |
| Surface Muted | --rd-color-surface-muted | #F8F9FB |
| Border | --rd-color-border | #E3E6EC |
| Text | --rd-color-text | #122341 |
| Text Secondary | --rd-color-text-secondary | #60718A |
| Text Muted | --rd-color-text-muted | #4A5A72 |
| Success | --rd-color-success | #0A8055 |
| Warning | --rd-color-warning | #9A6B00 |
| Error | --rd-color-error | #C0302A |
| Info | --rd-color-info | #1E5CB8 |
| Violet | --rd-color-violet | #5D44A8 |
字体排版 Typography
Geist · 模块化字号层级。字族 var(--rd-font-family)，行高 var(--rd-line-height-base)。
页面标题 H1 · 26px / 800
区块标题 H2 · 18px / 600
卡片标题 H3 · 14px / 600
正文 Body · 14px / 400
辅助 Caption · 12px / 500
OVERLINE · 11px / 600
| 层级 | 字号 | 字重 | CSS 变量 |
|---|---|---|---|
| H1 | 26px | 800 | --rd-font-size-h1 / --rd-font-weight-h1 / --rd-letter-spacing-h1 |
| H2 | 18px | 600 | --rd-font-size-h2 / --rd-font-weight-h2 |
| H3 | 14px | 600 | --rd-font-size-h3 / --rd-font-weight-h3 |
| Body | 14px | 400 | --rd-font-size-body / --rd-font-weight-body（同 --rd-font-size-base） |
| Caption | 12px | 500 | --rd-font-size-caption / --rd-font-weight-caption |
| Overline | 11px | 600 | --rd-font-size-overline / --rd-font-weight-overline / --rd-letter-spacing-overline |
液态玻璃 Glass
Glass BG
Glass Border
Glass Shadow
| 名称 | CSS 变量 |
|---|---|
| Glass BG | --rd-glass-bg |
| Glass Border | --rd-glass-border |
| Glass Shadow | --rd-glass-shadow |
圆角 Radius
sm · 5px
md · 8px
lg · 12px
xl · 16px
2xl · 20px
3xl · 28px
full · 9999px
| 名称 | CSS 变量 | 值 |
|---|---|---|
| sm | --rd-radius-sm | 5px |
| md | --rd-radius-md | 8px |
| lg | --rd-radius-lg | 12px |
| xl | --rd-radius-xl | 16px |
| 2xl | --rd-radius-2xl | 20px |
| 3xl | --rd-radius-3xl | 28px |
| full | --rd-radius-full | 9999px |
阴影 Shadow
xs
sm
md
lg
xl
card
primary
| 名称 | CSS 变量 |
|---|---|
| xs | --rd-shadow-xs |
| sm | --rd-shadow-sm |
| md | --rd-shadow-md |
| lg | --rd-shadow-lg |
| xl | --rd-shadow-xl |
| card | --rd-shadow-card |
| primary | --rd-shadow-primary |
使用方式
css
.card {
background: var(--rd-color-surface);
color: var(--rd-color-text);
border: 1px solid var(--rd-color-border);
border-radius: var(--rd-radius-lg);
box-shadow: var(--rd-shadow-card);
}
.page-title {
font-family: var(--rd-font-family);
font-size: var(--rd-font-size-h1);
font-weight: var(--rd-font-weight-h1);
letter-spacing: var(--rd-letter-spacing-h1);
}引入库样式后即可使用（见 快速开始）。