Nexus Digital Academy (école demo)
Horizon UI
Horizon UI est un design system complet construit avec React et Storybook. Il propose 48 composants accessibles (WCAG AA), un système de theming basé sur des tokens CSS, et une documentation interactive avec des exemples live éditables.
Tokens & Theming
Le système de theming repose sur des CSS custom properties organisées en couches sémantiques : primitives (couleurs brutes), sémantiques (surface, text, border), et composants (button-bg, input-border). Switcher de thème en une ligne de code.
Chaque token est documenté avec son rôle, ses contraintes de contraste et des exemples d'utilisation.
Accessibilité
Tous les composants respectent les guidelines WCAG 2.1 AA. Navigation clavier complète, ARIA labels, gestion du focus trap pour les modales, annonces screen reader pour les toasts et notifications.
Documentation vivante
Chaque composant est documenté dans Storybook avec des contrôles interactifs, des exemples de code copiables et des guidelines d'utilisation. Les designers peuvent tester les variantes directement dans le navigateur.
"Un design system n'est pas une bibliothèque de composants — c'est un langage commun entre designers et développeurs. Horizon UI incarne cette philosophie.
Visuels du projet
