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.
Interactions
Atomic Design
Variables
Tokens
WCAG 2.1 AA
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.
button - atoms layer
ALL STATES
ALL STATES
Primary
Secondary
Ghost
Destructive
Loading
Disabled
TOKEN REFERENCES
TOKEN REFERENCES
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
PROPS
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
USAGE GUIDELINES
USAGE GUIDELINES
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.
ACCESSIBILITY
ACCESSIBILITY
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
DESIGN PRINCIPLES
DESIGN PRINCIPLES
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