Design System · v0.1

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-50

brand-100

brand-200

brand-300

brand-400

brand-500

brand-600

brand-700

brand-800

brand-900

Cyan accent

数据高亮，图表，live 指示

cyan-300

cyan-400

cyan-500

cyan-600

Status colors

success

--color-success

warning

--color-warning

danger

--color-danger

info

--color-info

Text scale

ink → 由强到弱

Primary · 用于 ink--color-ink

Soft · 用于 ink-soft--color-ink-soft

Muted · 用于 ink-muted--color-ink-muted

Dim · 用于 ink-dim--color-ink-dim

Disabled · 用于 ink-disabled--color-ink-disabled

Typography

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 · 14px

The quick brown fox jumps over the lazy dog · 0123456789

mono · 14px

POST /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