Fondation Botnar
Design System
A comprehensive design system for building consistent, accessible, and beautiful dashboard experiences that support child health and development initiatives worldwide.
System Overview
Accessibility First
WCAG 2.1 AA compliant components with full keyboard navigation and screen reader support.
Design Consistency
Unified visual language with consistent spacing, typography, and interaction patterns.
Performance Focused
Optimized components with minimal CSS and efficient JavaScript patterns.
Component Library
Atoms Complete
Basic building blocks of the design system
Molecules Complete
Simple groups of UI elements functioning together
Organisms In Progress
Complex UI components composed of groups of molecules
Templates Complete
Page-level objects that combine organisms and molecules
Pages Complete
Complete page implementations with full functionality
Authentication Pages
Development Progress
48+
Components
100%
WCAG AA
5
Atomic Elements
2
Theme Modes