Tool card
Use for catalog items, metrics, feature summaries, and lightweight previews.
Tokens
Color, spacing, radius, and motion
Tokens are the only allowed source of truth for visual primitives. New pages should consume them, not redefine them.
Background
Surface
Accent
Radius
6 / 10 / 16
Use `sm`, `md`, `lg` only.
Spacing
8-32
Most UI fits inside the core spacing band.
Motion
150-220ms
Transitions should stay subtle and fast.
Typography
Readable hierarchy with compact density
Page H1: primary page identity
Section H2: major content block
Card group H3: secondary grouping
Card H4: standard card title
Lead text is reserved for short page intros and explanatory blurbs.
Body text is the default layer for help text, tool descriptions, and result explanations.
Caption is used for metadata, counters, field notes, and secondary helpers.
Cards
Standardized content containers
List card
Use for result rows, related tools, jump lists, or recent history blocks.
Controls
Buttons, fields, pills, and state language
Patterns
Reusable page composition
!
Primary notice
Use notice blocks for help text, privacy messaging, or tool limitations.
| Layer | Use case |
|---|---|
| Token | Color, type, spacing, motion |
| Base | Typography and layout primitives |
| Component | Buttons, cards, form controls |