Button system story
Our button system is more than just interactive elements - it's a carefully crafted language of engagement that guides users through meaningful interactions while embodying our values of accessibility, purpose, and impact.
Button hierarchy
Our button system follows a clear hierarchical structure to guide users through their journey. Primary buttons are the main calls-to-action, using bold colors and prominent styling. Secondary buttons provide alternative or complementary actions. Tertiary buttons are used for supplementary actions
Sizes
Following our spacing system, buttons come in three sizes:
Accessibility considerations
Our button system prioritizes accessibility:
- All color combinations meet WCAG 2.1 AA contrast requirements
- Focus states are clearly visible for keyboard navigation
- Minimum touch target size of 44px on mobile devices
- Proper ARIA labels for icon-only buttons
- Consistent behavior across different input methods
Full-Width Buttons
Use full-width buttons for actions that require maximum attention, especially in mobile layouts or forms.
Dark Mode Buttons
Dark mode buttons support trauma-informed UX, reducing eye strain and providing a calm, low-stimulation experience.
Buttons with Icons
Buttons with icons provide visual cues for actions, improving scannability and accessibility.
Button Combinations
Button combinations are essential for multi-step forms in project client consultation workflows. Use clear, accessible arrangements for navigation and decision points.