Design System
A reference page for theme tokens, typography, form elements, and components used across the app.
Theme — Colors
Semantic tokens
Primary tints
Typography
Heading 1 — The quick brown fox
Heading 2 — The quick brown fox
Heading 3 — The quick brown fox
Paragraph — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Blockquote — Design is not just what it looks like and feels like. Design is how it works. — Steve JobsAnchor link
inline codeText
Body text - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Caption text - Lorem ipsum dolor sit amet.
Muted text - Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis porro laudantium nemo earum voluptate aperiam sint voluptas excepturi ut cum quia vel dolor ratione eveniet impedit dignissimos consequuntur, perferendis quidem!
Table
| Name | Type | Default |
|---|---|---|
color | string | — |
size | sm | md | lg | md |
disabled | boolean | false |
Forms — Buttons
Variants
Sizes
States
Forms — Inputs
Example form
Misc Components
Badges
Cards
Plain card
A simple bordered card with shadow.
Primary card
Card with primary accent border.
Error card
Card for destructive or warning states.
Dividers
or
Keyboard shortcuts
Focus ring (tab through)