Bien démarrer avec Ibudo
Introduction
Bienvenue dans la documentation du design system Ibudo. Ce guide vous accompagne pour installer le système, comprendre ses tokens et assembler vos premières pages. Tout est pensé autour d'une idée : le « O ouvert » comme moteur d'un langage cohérent et premium.
Installation
Le cœur du système est agnostique : un fichier CSS d'entrée et deux scripts. Ajoutez-les à votre page :
<link rel="stylesheet" href="system/ibudo.css?v=0.6.1"> <script src="system/orbital.js?v=0.6.1"></script>
C'est tout. ibudo.css importe les tokens, la base typographique, les composants et les familles étendues ; orbital.js câble les comportements (révélations, compteurs, accordéons, filtres…) sans aucune dépendance.
Zéro build requis
Le système fonctionne en statique. Un compilateur Style Dictionary est optionnel pour générer le kit Elementor.
Design tokens
Les tokens suivent une architecture à trois tiers : primitive → semantic → component. Vos composants ne référencent que le tier sémantique, ce qui rend le theming instantané.
| Token | Tier | Rôle |
|---|---|---|
--ibu-blue-600 | Primitive | Bleu de marque (#1862DB) |
--accent | Semantic | Accent courant, « tourne » par section |
--surface | Semantic | Fond des composants |
--button-bg | Component | Fond de bouton (réfère l'accent) |
Composants
Plus de 30 familles de composants sont disponibles, chacune documentée sur sa propre page. Tous portent le motif orbital : l'accent s'allume au survol, l'arc ouvert sert de signature.
- Boutons, pills & badges, alertes à contour complet
- Cartes (8 variantes), hero (5), carrousels (3)
- Formulaires complets, navigation, tabs & accordéons
- Tables, overlays, avatars, progress & skeletons
Theming & accents
Posez data-theme sur <html> pour un thème complet (canvas + accent), ou data-accent sur une section pour ne changer que la couleur d'orbite :
<html data-theme="ink"> <!-- thème sombre Ibudo Ink --> <section data-accent="green"> <!-- accent vert, canvas inchangé --> <section data-accent-rotate="violet"> <!-- accent qui s'active au scroll -->
Le jaune ne porte jamais de texte clair
Sur l'accent jaune, le texte passe automatiquement en encre (contraste). Ne le forcez pas en blanc.
Accessibilité
Le focus est un anneau ouvert (clin d'œil au « O »), le contraste vise AAA, et toutes les animations respectent prefers-reduced-motion. Les composants à fort « Challenge Rating » (modales, select, tables) passent un audit a11y dédié avant publication.
FAQ
Oui. Le cœur est en HTML/CSS/JS pur, copiable dans n'importe quel contexte, y compris Elementor.
Les accents proviennent de la charte. On n'en ajoute pas : on réutilise les cinq couleurs via le tier sémantique.
Oui, en semver, avec un changelog et des décisions d'architecture (ADR) consultables.