Type
Display
Build it once.
Display font · extra-bold · gradient accent
Heading scale
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body & utility
Lead — opens an article, lifts above body weight, draws the reader in. Slightly larger, slightly looser.
Body — the quick brown fox jumps over the lazy dog. Body text holds long-form copy: paragraphs, descriptions, articles, prose.
Small — secondary info, captions inline with body, footnotes.
Caption — section labels, eyebrow text
const tokens = useTokens()
Colors
Palette
Semantic
Extended palette
Neutrals
Spacing
Space scale
Radii
Shadows
Components
Buttons
Badges
Field
Alert
Card
Card title
Card body uses the surface + border tokens.
Switch + tag
Top nav
Testimonial
Motion
Try the animation knobs
Buttons honor --ry-ease-out-back and --ry-duration-normal. Hover to see the easing; click to fire a toast.
Icons
Preview (switches with Icon set knob)
Brand
Hero treatment (auto-derived)
Iconography sample · Lucide substitute · 1.5px stroke
Logo · primary (on light)
Logo · reverse (on brand gradient)
Favicon
Browser tab
Voice · do / don't
Do
- Sentence case. Trust the reader.
- Plain English. Short verbs.
- Name the thing. "Save", not "Persist".
Don't
- ALL CAPS or Title Every Word.
- "Leverage synergy", "best-in-class".
- Apologize for the product working.