Style Guide
Heading
Heading
Heading
Heading
Heading
Heading
Primary
Secondary
Accent
Base
Neutral
Surface
Primitives
Success
Warning
Danger
Info
Spacing — Base Scale
Spacing — Section Scale
Spacing — Contextual
Border
Border Radius
Transition
--transition: 250ms cubic-bezier(0, 0, 0.2, 1)Hover the button to see the transition in action:
Buttons
Focus Style
Tab to or click the element below to see the focus ring:
--focus-ring: 2px solid var(--focus) | --focus-ring-offset: 3pxModal / Dialog
Modal Title
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 laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Narrow Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion
Single mode — only one panel open at a time. Add [data-accordion-single] to allow multiple.
An accordion is a vertically stacked list of items where each item can be expanded to reveal additional content. It follows the ARIA disclosure pattern with aria-expanded and keyboard navigation support.
Use Tab to reach the accordion. Then use ↑ ↓ to move between triggers, Home to jump to the first, and End to jump to the last. Press Enter or Space to toggle.
Yes — remove the [data-accordion-single] attribute and each panel toggles independently. The single-open constraint is opt-in.
Tabs
Arrow keys navigate between tabs. Home / End jump to first / last.
This is the Overview panel. Tabs follow the ARIA tablist / tabpanel pattern with roving tabindex so only the active tab is in the document's tab sequence.
This is the Details panel. Arrow key navigation is automatic — no need for individual keyboard listeners on each tab.
This is the Resources panel. Each .tabs instance is independently initialized and supports multiple instances on the same page.
Toast / Notifications
Toasts appear bottom-right. Auto-dismiss after 4s by default. Error variant is persistent until dismissed.
aria-live="polite" • Persistent toasts use role="alert" • Slides in from the right • Reduced-motion safe
Cards
Card Heading
Short supporting copy that describes the card content in a sentence or two.
Card Heading
Short supporting copy that describes the card content in a sentence or two.
Card Heading
Short supporting copy that describes the card content in a sentence or two.
Card Heading
Short supporting copy that describes the card content in a sentence or two.