BlueRouter Foundations
完整的暗色科技蓝设计 token:色彩、字体、组件、动效。所有页面均从此处取色用字。
Brand
Logo, mark, wordmark
Full
BlueRouter
Mark only
On overlay
BlueRouter
Background layers
深 → 浅,按层级使用
Canvas (body)
--color-canvas
Surface (card)
--color-surface
Elevated (popover)
--color-elevated
Overlay (modal)
--color-overlay
Brand · Tech Blue
主品牌色,500 为基准
brand-50brand-100brand-200brand-300brand-400brand-500brand-600brand-700brand-800brand-900Cyan accent
数据高亮,图表,live 指示
cyan-300cyan-400cyan-500cyan-600Status colors
success
--color-success
warning
--color-warning
danger
--color-danger
info
--color-info
Text scale
ink → 由强到弱
Primary · 用于 ink
--color-inkSoft · 用于 ink-soft
--color-ink-softMuted · 用于 ink-muted
--color-ink-mutedDim · 用于 ink-dim
--color-ink-dimDisabled · 用于 ink-disabled
--color-ink-disabledTypography
Space Grotesk · Inter · JetBrains Mono
display-xl · 72px / -2%生产级 AI 路由
display-lg · 56px毫秒级智能切换
heading-1 · 40px不止是中转,是 AI 基础设施
heading-2 · 28px团队工作区
body · 16px一个 API 接入 50+ 模型,故障自动 fallback,团队级监控与预算管控。
body-sm · 14pxThe quick brown fox jumps over the lazy dog · 0123456789
mono · 14pxPOST /v1/chat/completions → 200 OK · 421ms
Buttons
Chips · Live · Status
defaultbrandlive · 18.2 QPSoperationaldegradedoutage
Surfaces
surface · surface-hover · glass
.surface
标准卡片 · 1px 内描边 + 大柔阴影
.surface-hover
hover 我试试 · 加蓝色光晕
.glass
毛玻璃 · header / 浮层
Token reference
Copy these in CSS or via Tailwind utilities
| CSS variable | Tailwind utility | Sample |
|---|---|---|
| --color-brand-500 | bg-brand-500 / text-brand-500 | |
| --color-cyan-500 | bg-cyan-500 / text-cyan-500 | |
| --color-canvas | bg-canvas | |
| --color-surface | bg-surface | |
| --color-ink | text-ink | |
| --color-ink-muted | text-ink-muted | |
| --color-line | border-line | |
| --font-display | font-display | |
| --font-mono | font-mono | |
| --radius-card | rounded-card |