Système de design agentique · v1.0.0Agentic Design System · v1.0.0
Un système de design compris par les humains et les agents IA.A design system understood by humans and AI agents.
Livrez plus vite, éliminez les incohérences visuelles, et permettez à vos agents IA de contribuer sans risque. Un design system conçu pour les équipes qui bougent — et pour les agents qui les assistent.Ship faster, eliminate visual inconsistencies, and let AI agents contribute safely. A design system built for teams that move fast — and the agents that assist them.
Pour chaque membre de l'équipeFor every team member
Un système de design unifié parle à tous — gestionnaires, designers, développeurs et POs — avec une valeur concrète pour chacun.A unified design system speaks to everyone — managers, designers, developers, and POs — with concrete value for each.
GestionnairesManagers
Livraisons 2× plus rapides, moins de régressions visuelles, gouvernance documentée et traçable.2× faster delivery, fewer visual regressions, documented and traceable governance.
DesignersDesigners
Tokens Figma synchronisés, marque appliquée automatiquement, cohérence garantie à chaque mise à jour.Synced Figma tokens, auto-applied brand guidelines, consistency guaranteed on every update.
DéveloppeursDevelopers
Web Components framework-agnostic, variables CSS générées, zéro valeur en dur, audit accessibilité intégré.Framework-agnostic Web Components, generated CSS variables, zero hardcoded values, built-in accessibility audit.
Product OwnersProduct Owners
Décisions architecturales traçables, conformité WCAG AA garantie, pipeline qualité automatisé.Traceable architecture decisions, guaranteed WCAG AA compliance, automated quality pipeline.
Preuves & chiffresEvidence & numbers
Les bénéfices des systèmes de design sont mesurables. Sources publiques et vérifiables.The benefits of design systems are measurable. Public and verifiable sources.
2×Livraisons plus rapidesFaster deliveryLes équipes avec un design system mature livrent jusqu'à 2× plus fréquemment — Sparkbox Design Systems Survey 2024Teams with a mature design system ship up to 2× more frequently — Sparkbox Design Systems Survey 2024(Sparkbox, 2024)
80%Moins de violations a11yFewer a11y violationsRéduction des violations d'accessibilité grâce aux composants WCAG AA natifs — IBM Carbon Case StudyReduction in accessibility violations through native WCAG AA components — IBM Carbon Case Study(IBM Carbon)
34%Délais respectésDeadlines metLes équipes utilisant un design system respectent davantage leurs délais de livraison — Sparkbox DSS 2024Teams using a design system are more likely to meet delivery deadlines — Sparkbox DSS 2024(Sparkbox, 2024)
3 niveauxArchitecture tokenToken architecturePrimitif → Sémantique → Composant : une architecture qui sépare les valeurs des intentions — compréhensible par les humains ET les agents IA.Primitive → Semantic → Component: an architecture separating values from intentions — understandable by humans AND AI agents.
Valeurs non négociablesNon-negotiable values
Ces quatre principes guident chaque décision du système et chaque action des agents.These four principles guide every system decision and every agent action.
Souveraineté numériqueDigital sovereignty
Les données, décisions et outils restent sous contrôle organisationnel.Data, decisions and tools remain under organizational control.
Accessibilité premièreAccessibility first
WCAG 2.1 AA minimum. Non contournable, non négociable.WCAG 2.1 AA minimum. Non-negotiable.
Auditabilité totaleFull auditability
Toute décision est traçable, versionnée, justifiée.Every decision is traceable, versioned, and justified.
Le dernier mot est humainHumans decide
Les agents proposent. Les humains décident. Toujours.Agents propose. Humans decide. Always.
21WCAG 2.1 AA
22Décisions architecturalesArchitecture decisions
3Niveaux de tokensToken levels
494Tokens au totalTokens total
34Échelles de couleurColor scales
Pipeline de tokensToken pipeline
Trois niveaux ordonnés, chacun avec un rôle précis. Les agents comprennent la fonction, pas la valeur brute.Three ordered levels, each with a precise role. Agents understand function, not raw values.
Niveau 1 — PrimitifLevel 1 — Primitive
Valeurs physiquesPhysical values
Couleurs, espacements, rayons. Très stables. Jamais utilisées directement dans les composants.Colors, spacing, radii. Very stable. Never used directly in components.
primitive.color.blue.11 → #0d74ce
Niveau 2 — SémantiqueLevel 2 — Semantic
Intentions UXUX intentions
Traduit les primitives en langage métier. Ce que les agents utilisent pour comprendre l'intention.Translates primitives into business language. What agents use to understand intent.
color.action.primary → primitive.color.blue.11
Niveau 3 — ComposantLevel 3 — Component
Contrats institutionnelsInstitutional contracts
Décisions spécifiques à chaque composant. Toute modification requiert approbation.Component-specific decisions. Any change requires approval.
button.primary.background → color.action.primary
Explorer le systèmeExplore the system
Chaque section encode une dimension du système — accessible aux humains et lisible par les agents.Each section encodes a dimension of the system — human-readable and machine-parseable.
Décisions architecturales (ADRs)Architecture Decision Records (ADRs)
Un design system accumule des décisions invisibles : pourquoi ce token est nommé ainsi, pourquoi cette variante a été rejetée. Les ADRs rendent ces décisions visibles, traçables et auditables par les humains comme par les agents.A design system accumulates invisible decisions: why this token is named this way, why this variant was rejected. ADRs make these decisions visible, traceable and auditable by both humans and agents.
Format MarkdownMarkdown format
Chaque décision est un fichier .md versionné dans le dépôt — lisible par Git, GitHub et les agents.Each decision is a versioned .md file in the repo — readable by Git, GitHub and agents.
ImmutabilitéImmutability
Un ADR ne se supprime jamais. On le marque remplacé ou déprécié. L'historique est inaltérable.An ADR is never deleted. It is marked superseded or deprecated. History is immutable.
Lisible par les agentsAgent-readable
Les agents lisent les ADRs pour comprendre les pourquoi, pas seulement les quoi.Agents read ADRs to understand the why, not just the what.
Chaque couche du pipeline est outillée. Les Web Components garantissent la portabilité — un même composant fonctionne dans n'importe quel framework (React, Vue, Angular, ou aucun).Every layer of the pipeline is tooled. Web Components guarantee portability — the same component works in any framework (React, Vue, Angular, or none).