Design system preview

The board maps each generated theme.json into practical UI surfaces so the theme can be judged by more than swatches alone.

0 / 0 model

theme.json

Theme name

Preview copy renders with the selected theme's font, contrast, spacing, and surface treatment.

Palette health

0

Detected color-like tokens from the selected theme.

Trace

trace

Color System

0 tokens

Typography

font stack

Editorial System Aa

This paragraph uses the body font and muted text token. It tests line-height, softness, and readability on the selected surface.

const theme = { colors, typography, spacing, radii };

Component States

buttons, fields, badges

Form

Primary Ready Alert

Navigation

TokenValue

Material & Texture

surface logic

Design Tokens

key values
Raw selected theme.json