Subtitle
Section label with an inline rule.
Used as a sub-heading inside cards and panels.
Header
Full-width H1 heading with a bottom rule.
Mirrors the top header of each Figma frame.
Supports an --inverse modifier for dark surfaces.
Typography
Colour Palette
Post-it
Sticky-note annotation block. Use for inline callouts, design notes, or tooltips.
Card
Base surface container with hover elevation. Modifier: --elevated (raised surface + shadow).
Base surface. padding: gap-xl · gap: gap-xl · radius-16.
Raised surface color + shadow-md.
Badge
Seven semantic colour variants for status, category, and intent labels.
In context — status tags on a list
Button
Four intent variants (primary, secondary, ghost, danger) in three sizes.
All states — hover, focus, active, and disabled — are token-bound.
Input
Text field component. Five states: default, hover, focus, error, and disabled.
Focus ring uses --color-borders-focus with a 3px blue-100 halo.
Alert
Contextual message block in four semantic variants: info, success, warning, and error.
Information
This is an informational message for the user.
Success
Your action was completed successfully.
Warning
Please review this information before proceeding.
Error
Something went wrong. Please try again.
Tooltip
Contextual label with optional directional arrow. Two variants: light and dark. Nine arrow positions.