Color System
Accessible color palette designed for the Fondation Botnar Dashboard
2
Brand Colors
4
Status Colors
100%
WCAG AA
30
Total Shades
Interactive Color Preview
Selected Color
HEX:
RGB:
HSL:
Usage Example
Sample text in this color
Text contrast:
Sample border usage
Primary Colors - Botnar Pink
The primary brand color palette based on Fondation Botnar's signature pink.
Secondary Colors - Botnar Blue
Complementary blue palette for supporting elements and data visualization.
Status Colors
Semantic colors for feedback, alerts, and status indicators.
Neutral Colors
Gray scale for text, borders, and backgrounds.
Usage Guidelines
Accessibility Best Practices
- • Use AA or AAA rated colors for text
- • Never rely on color alone to convey information
- • Include patterns or icons with color coding
- • Test with color-blind simulations
- • Maintain 4.5:1 contrast ratio minimum
- • Use high contrast mode compatibility
Brand Color Usage
- • Pink 500: Primary actions and brand highlights
- • Blue 600: Secondary actions and information
- • Status colors: Feedback and system states
- • Gray scale: Text hierarchy and structure
- • Maintain brand consistency across all touchpoints
- • Follow color hierarchy guidelines