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é
    Fondations
  • 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
    Composants
  • 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
    Navigation

01Couleur

core

accent

neutral

02Typographie

font.display Portez ce vieux whisky
font.sans Un langage d’interface clair
font.serif Un rythme éditorial lisible
font.mono chemin.du.jeton / valeur exacte

03Espacement

space.2xs
space.xs
space.s
space.m
space.l
space.xl

04Composants

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.accent
color.paper
space.m
radius.md
shadow.panel
Carte de composant Un spécimen de composant réel, composé de styles partagés.

06Documentation

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.

  1. 01

    Fondations

    • color.palette.signal-orange
    • font.display
    • space.m
    • radius.md
    • shadow.panel
  2. 02

    Jetons sémantiques

    • color.accent
    • color.paper
    • color.line
    • component.theme-toggle.size
  3. 03

    Composants

  4. 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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.ink 17.88:1 AA
    • color.accent 4.76:1 AA
    • color.line 13.17:1 AA
    Accessibilité
  • 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.

    Composants
  • Accè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’évitement
  • Mouvement 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.