Components
Components
Scalable, accessible UI components following Atomic Design principles. Every component ships with full state documentation, design tokens, do/don't guidelines, and accessibility specs.
Scalable, accessible UI components following Atomic Design principles. Every component ships with full state documentation, design tokens, do/don't guidelines, and accessibility specs.
Component Dive Deep
Component Dive Deep
A full breakdown of a single component — states, props, tokens, and usage rules. This is the documentation standard applied across every component in the system.
A full breakdown of a single component — states, props, tokens, and usage rules. This is the documentation standard applied across every component in the system.
Primary
Secondary
Ghost
Destructive
Loading
Disabled
color/brand-accent
#7307C1
color/neutral-white
#FFFFFF
color/border-secondary
color/border-secondary
#001A99 / 45%
space/button/padding-x
16px
space/button/padding-y
8px
radius/button
12px
Prop
Type
Default
Description
variant
'primary' | 'secondary' | 'ghost' | 'danger'
'primary' | 'secondary' | 'ghost' | 'danger'
'primary'
Visual style of the button
size
'sm' | 'md' | 'lg'
'md'
Controls padding and font size
disabled
boolean
false
Disables interaction, reduces opacity
loading
boolean
false
Shows spinner, block click events
DO
Use Primary for the single most important action on a page. Limit to one per view.
DON'T
Don't use multiple Primary buttons together — it dilutes hierarchy and confuses users.
DO
Use Ghost for tertiary actions like "Cancel" or "Learn more" to reduce visual weight.
DON'T
Don't use Destructive for non-irreversible actions — reserve it for delete/remove flows only.
All states meet WCAG 2.1 AA contrast ratio (≥4.5:1 for normal text)
Focus ring visible on keyboard navigation using 2px outline offset
Loading state sets aria-busy="true" and prevents double-submit
Disabled state uses both
disabledandaria-disabledfor screen readers
All states meet WCAG 2.1 AA contrast ratio (≥4.5:1 for normal text)
Focus ring visible on keyboard navigation using 2px outline offset
Loading state sets aria-busy="true" and prevents double-submit
Disabled state uses both
disabledandaria-disabledfor screen readers
Carousel
Comments
Accordions
Banners
Card
Widgets
Checkboxes
Radio buttons
Empty State
Avatar Group
Dropdowns
Date Picker
Carousel
Comments
Accordions
Define the foundational layout and organization of components.
Banners
Centralize values to ensure consistency across design and code.
Card
Represent actions, objects, or concepts with clear visual symbols.
Widgets
Establish font styles, sizes, and hierarchy for readability.
Radio buttons
Set corner rounding to unify the aesthetic.
Checkboxes
Set corner rounding to unify the aesthetic.
Empty State
Provide a framework for aligning and organizing elements.
Avatar Group
Set corner rounding to unify the aesthetic.
Dropdowns
Date Picker
Avatar Group
Every component is built on three rules
Every component is built on three rules
Consistency
Every variant shares the same token references, spacing scale, and border radius. Changing a token updates the entire system — no manual fixes required.
Every variant shares the same token references, spacing scale, and border radius. Changing a token updates the entire system — no manual fixes required.
Accessibility First
All components are WCAG 2.1 AA compliant from day one. Contrast ratios, focus rings, keyboard navigation, and ARIA labels are built in, not bolted on.
All components are WCAG 2.1 AA compliant from day one. Contrast ratios, focus rings, keyboard navigation, and ARIA labels are built in, not bolted on.
Dev-Ready
Every component is pixel-checked in Storybook against the Figma spec. Props map 1:1 to Figma variants, so the handoff is a conversation, not a translation.
Every component is pixel-checked in Storybook against the Figma spec. Props map 1:1 to Figma variants, so the handoff is a conversation, not a translation.
Carousel
Maintain consistent margins and padding for balanced compositions.
Comments
Create a cohesive palette for branding and usability.
Accordions
Banners
Card
Widgets
Checkboxes
Radio buttons
Empty State
Avatar Group
Dropdowns
Date Picker