Design language
Type, shape & icons
Geist with system CJK fonts, the console type scale and typesetting rules; radius tokens and the concentric rule; Lucide icons and icon tiles.
Font stack
| Role | Font | Token |
|---|---|---|
| Interface | Geist (Latin) → PingFang SC → Noto Sans SC → Microsoft YaHei → system-ui | --font |
| Data and code | Geist Mono → ui-monospace → SF Mono → Menlo | --mono |
- Numbers always use
font-variant-numeric: tabular-nums(tables, metrics, axes, counts). - Geist's geometric precision matches the "optical instrument" feel and pairs well with system CJK weights; no web font is loaded for Chinese.
Console type scale (default density)
| Token | Size / line height | Weight | Tracking | Use |
|---|---|---|---|---|
display | 40 / 44 | 600 | -0.03em | The page's main figure (at most one per page) |
metric | 28 / 34 (phone 24 / 32) | 600 | -0.02em | Metric card numbers; one step smaller on phones so two cards fit side by side |
title-lg | 26 / 32 | 600 | -0.02em | Page title |
title | 17 / 24 | 600 | -0.01em | Card and drawer titles |
headline | 15 / 22 | 600 | 0 | List primary lines, group titles |
body | 14 / 22 | 400 | 0 | Body text, tables |
body-sm | 13 / 20 | 400 | 0 | Secondary text |
label | 13 / 18 | 500 | 0 | Buttons, navigation, form labels |
caption | 12 / 16 | 500 | +0.01em | Timestamps, axes, helper text |
overline | 11 / 14 | 600 | +0.06em (Latin capitals only) | Sidebar group names, card eyebrows |
Website (comfortable density): hero 64 / 68 (phone 40 / 44), section titles 40 / 48, lead 18 / 30.
Typesetting rules
- At most three levels inside a card: title → main content (metric / body) → supporting text (caption).
- Put a space between a metric and its unit; set the unit one size smaller in
ink-2. - Headings use
text-wrap: balance; body lines stay ≤ 68ch. - No italics or all-caps for Chinese; add a space between Chinese and Latin text.
Shape
| Token | Value | Use |
|---|---|---|
r-xs | 6px | Small tags, checkboxes, tooltips |
r-sm | 10px | Buttons, inputs, nav items, icon tiles |
r-md | 14px | Menus, dropdowns, small cards, row hover fill, toasts |
r-lg | 20px | Cards, dialogs |
r-xl | 28px | Large panels, top corners of mobile bottom sheets |
r-full | 999px | Pills, segmented controls, chips, switches, avatars, badges |
- Concentric rule: inner radius = outer radius − padding, minimum 6px (a 20px card with 12px padding → 8px inside; round to the nearest token from
r-xsup). - Polished glass edges: add
corner-shape: squircle(continuous-curvature corners) where supported; elsewhere fall back to normal corners at the same size.
Icons
- Lucide at stroke width 1.75. Sizes: navigation 20, inside buttons 16, inside icon tiles 18 (28 in a 64 tile), inside badges 12.
- Icon tile: domain tint fill + domain solid icon,
r-sm(r-mdat 64), sizes 32 / 36 / 44 / 64. Used on card titles, metric cards, detail headers, settings groups and empty states. - The current nav item's icon uses
brand; other nav icons useink-2. - Icon-only buttons always have an
aria-labeland a tooltip.
Color & material
White light, the Iris key light, six spectral domain bands, status colors, dispersion and the spectrum bar; five levels of optical glass, frosted glass, scrim, specular light and z-index.
Layout
A 4px base with an 8px rhythm, four size classes, shell dimensions, seven page templates, three densities, responsive tables and the website layout.