Design system / component catalog
One language, every state.
Color, typography, buttons, form fields, feedback and accessible dialogs.
Color roles
Use the theme control above to change the entire catalog.
Background
--color-background
Surface
--color-surface
Raised surface
--color-surface-raised
Primary text
--color-text
Secondary text
--color-muted
Brand · #590DB4
--color-brand
Readable accent
--color-accent
Focus
--color-focus
Success
--color-success
Warning
--color-warning
Error
--color-error
Typography and spacing
Space Grotesk / Inter
Learning systems, open ideas.
Body text starts at 16 pixels. Clear hierarchy, generous line spacing and readable technical terms carry through every page.
Buttons and states
Form fields
Editing is disabled in this example.
Information
Helpful context about this action.
Attention
Something to review before continuing.
Action could not be completed
Errors are shown alongside the field that needs attention.
Empty and loading states
No content yet
The next step or an alternative route appears here.
Loading example content.