Local Preview
组件库示例和 Web 页面入口
打开本地服务时，可以从这里进入组件库示例和各个 Web 页面。
Design Token Consistency Audit
Semantic Token Validation Page
This page verifies the current Design Token bridge against the synced token CSS and only uses token-backed semantic variables for color, radius, shadow, typography, and spacing.
Color Mapping
Core semantic surfaces
The key page surfaces, text, borders, and primary states below are mapped directly to the requested semantic token paths.
Page background
`semantic.light.color.bg.page`
Subtle surface
`semantic.light.color.bg.surface-subtle`
Card surface
`semantic.light.color.bg.surface`
Strong border
`semantic.light.color.border.strong`
Text and field states
Primary, secondary, placeholder, input border, focus ring, and disabled state all come from semantic tokens.
Primary text sample
Secondary text sample
Primary state bridge
Hover, active, disabled, and focus values are bridged as dedicated variables rather than simulated with opacity.
Radius and Shadow
Semantic shape and elevation
rounded-control
4px control sm/md
rounded-control-lg
6px control lg
rounded-card
8px card/panel/popover
rounded-modal
12px modal
rounded-tag
4px tag
rounded-pill
999px pill
shadow-card
shadow-1
shadow-floating
shadow-2
shadow-modal
shadow-3 with modal radius and modal padding.
Typography
Token-backed type styles
Each style below reads font-size, line-height, font-weight, and letter-spacing from the generated typography tokens.
headline-large
Uses `--typography-headline-large-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
headline-medium
Uses `--typography-headline-medium-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
headline-small
Uses `--typography-headline-small-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
title-extralarge
Uses `--typography-title-extralarge-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
title-medium
Uses `--typography-title-medium-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
title-small
Uses `--typography-title-small-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
body-large
Uses `--typography-body-large-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
body-medium
Uses `--typography-body-medium-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
body-small
Uses `--typography-body-small-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
mark-small
Uses `--typography-mark-small-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
mark-medium
Uses `--typography-mark-medium-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
link-large
Uses `--typography-link-large-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
link-medium
Uses `--typography-link-medium-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
link-small
Uses `--typography-link-small-font-size`, `line-height`, `font-weight`, and `letter-spacing`.
Spacing
Semantic spacing usage
Card and form spacing
24px card padding, 16px card header gap, 16px form item gap, 8px label gap.
Table and modal spacing
16px horizontal and 12px vertical table cells, 24px modal padding.
Modal padding sample
Uses `spacing.modal.padding` = 24px.
Status Colors
Semantic status verification
Success now uses the brand green token group. Caution has no `default` token and is flagged for design confirmation instead of being invented here.
warning
完整三态来自 status.warning
info
信息状态保留蓝色 token
success
成功状态使用品牌绿色 token
caution
Token 中缺少 caution.default，只展示 bg 与 text
error
完整三态来自 status.error
Motion Validation
Animate UI / Motion Preview
This section shows hover-triggered Animate UI icons, motion surfaces, staggered entry, collapsible content, and an animated dialog while keeping the existing token-backed visual system.
Dynamic Icons
Motion Card
Entrance + hover surface
This card fades in on load, lifts slightly on hover, and keeps the existing token-backed border, radius, and shadow.
Motion List
Collapse
Dialog
Open the demo dialog to check overlay fade, content fade + light scale, Escape close, and overlay close.
Reduced Motion
When reduced motion is enabled, icon playback, lift, scale, stagger movement, and chevron rotation are minimized or removed, while opacity-based state changes remain.