BHDicaire

Design-system-overview

Données

Aperçu#

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

Explorer les composants Voir les jetons

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.

Exemple

{{< design-system-overview >}}

Quand l’utiliser

Un aperçu imprimable et piloté par les données des six parties reliées et du flux de ce système de conception.

Implémentation

layouts/shortcodes/design-system-overview.html

Options

Ce shortcode ne lit aucun paramètre nommé dans son gabarit.

Manifeste d’interface

Nature
Shortcode
Catégorie
Données
Statut
Implémenté
Implémentation
Shortcode:layouts/shortcodes/design-system-overview.html