Aperçu du système de conception
Cet aperçu est une affiche vivante, non une image maintenue à la main. Les noms, les valeurs et les variables des jetons, les nuanciers et les destinations de documentation sont résolus lorsque Hugo construit la page. Les spécimens de composants utilisent les mêmes classes et les mêmes partials partagés qu’ailleurs sur les sites.
Portée et frontières
Le système de conception est le contrat commun autour des fondations, des composants réutilisables et des motifs composés. Ces domaines se chevauchent délibérément : ils ne sont pas des inventaires visuels séparés.
Fondation
Guide de styles
Le langage visuel : couleur, typographie, espacement, rayons, ombres, mouvement et rôles des jetons.
- Couleur
- Typographie
- Jetons
- Accessibilité
Interface réutilisable
Bibliothèque de composants
Des interfaces définies avec UI rendue, comportement, accessibilité, sources d’implémentation, variantes et shortcodes liés.
- Navigation
- Boutons
- Cartes
- Affichage de données
Comportement composé
Motifs — émergents
Des compositions documentées de composants pour des tâches récurrentes. C’est une bibliothèque émergente, pas encore une section canonique distincte.
- Navigation du site
- Recherche
- Mise en page de documentation
- Index de référence
01Couleur
core
accent
neutral
02Typographie
font.display
Portez ce vieux whiskyfont.sans
Un langage d’interface clairfont.serif
Un rythme éditorial lisiblefont.mono
chemin.du.jeton / valeur exacte03Espacement
space.2xsspace.xsspace.sspace.mspace.lspace.xl04Composants
Carte de composant
Un spécimen de composant réel, composé de styles partagés.
Accessible par défaut
Les éléments natifs et les états fondés sur les jetons gardent l’interface cohérente.
05Jetons
color.accentcolor.paperspace.mradius.mdshadow.panel06Documentation
Comment le système se relie
Les fondations fournissent les valeurs, les jetons sémantiques donnent un sens stable, les composants composent l’interface et la documentation consigne le contrat.
- 01
Fondations
color.palette.signal-orangefont.displayspace.mradius.mdshadow.panel
- 02
Jetons sémantiques
color.accentcolor.papercolor.linecomponent.theme-toggle.size
- 03
Composants
- 04
Documentation
Les quatre couches du système de conception BHDicaire
Une décision gouvernée peut traverser plusieurs systèmes sans devenir une source de vérité distincte.
- Couche 1
Système de conception
Source de décisions partagée
La connexion Porte les décisions gouvernées vers de vrais systèmes.Une décision, plusieurs sorties fiables.
- Couche 2
Documentation et ADR
Règles et raisons
La mémoire Conserve la responsabilité, les contraintes et la raison d’une règle.Un contexte durable.
- Couche 3
Compétences et vérifications
Implémentation répétable
La recette Fait passer un changement par les mêmes règles et vérifications chaque fois.Cohérence.
- Compétences Codex
- Vérifications de jetons
- Builds Hugo
- Couche 4
Cartographie des preuves
Preuves au niveau des sources
Le lien Relie une interface ou une règle documentée à ses vrais fichiers sources.Moins de dérive.
Les six parties sont reliées plutôt qu’empilées : les jetons transportent les décisions de fondation vers les composants, et la documentation consigne le contrat qui les garde réutilisables. Le flux vivant sous l’affiche rend explicite cette frontière entre les primitives et les jetons sémantiques. Le modèle de traçabilité montre ensuite comment la même décision gouvernée atteint Hugo, DNSControl, les diagrammes, les cartes mentales et d’autres sorties sans créer une source de vérité parallèle. Imprimez cette page lorsqu’une carte concise du système est plus utile que les références détaillées.
L’accessibilité est une propriété du système
L’accessibilité est gouvernée par les jetons, le HTML natif, les contrats de composants et les règles de contenu, non par un badge de conformité.
Contraste
Calculé depuis les jetons
Les paires d’interface publiées affichent leur ratio de contraste WCAG 2.2 et leur résultat AA pour le texte normal.
color.ink17.88:1 AAcolor.accent4.76:1 AAcolor.line13.17:1 AA
Focus
Règle documentée
Chaque élément interactif conserve un indicateur de focus visible et fondé sur les jetons.
AccessibilitéStructure sémantique
Contrat de composant
Les liens, boutons, repères, titres, listes et tableaux natifs gardent leur sens sans style visuel.
ComposantsAccès clavier
Contrat de composant
Les contrôles natifs préservent les comportements Tab, Entrée et Espace; le lien d’évitement raccourcit la navigation répétée.
Lien d’évitementMouvement et contenu
Règle de gouvernance
Le mouvement non essentiel respecte les préférences de lecture, tandis que les auteurs fournissent des étiquettes, des titres et des textes alternatifs adaptés à la langue.
Contenu
Pour la propriété de la source des jetons, les sorties générées, les collections de thèmes et la vérification, utilisez Architecture des jetons.