BHDicaire

Design system overview

This overview is a live poster, not a maintained image. Token names, values, variables, colour swatches, and documentation destinations are resolved when Hugo builds the page. The component specimens use the same shared classes and partials used elsewhere in the sites.

Scope and boundaries

The design system is the shared contract around foundations, reusable components, and composed patterns. These areas overlap by design; they are not separate visual inventories.

  • Foundation

    Style guide

    The visual language: colour, typography, spacing, radii, shadows, motion, and token roles.

    • Colour
    • Typography
    • Tokens
    • Accessibility
    Foundations

  • Reusable interface

    Component library

    Defined interfaces with rendered UI, behavior, accessibility, implementation sources, variants, and related shortcodes.

    • Navigation
    • Buttons
    • Cards
    • Data display
    Components

  • Composed behaviour

    Patterns — emerging

    Documented compositions of components for recurring tasks. This is an emerging library, not yet a separate canonical section.

    • Site navigation
    • Search
    • Documentation layout
    • Reference indexes
    Navigation

01Colour

core

accent

neutral

02Typography

font.display The quick brown fox
font.sans Clear interface language
font.serif Readable editorial rhythm
font.mono token.path / exact value

03Spacing

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

04Components

Explore components View tokens

Component card

A real component specimen, composed from shared styles.

Accessible by default

Native elements and token-backed states keep the interface coherent.

05Tokens

color.accent
color.paper
space.m
radius.md
shadow.panel
Component card A real component specimen, composed from shared styles.

06Documentation

How the system connects

Foundations provide values, semantic tokens provide stable meaning, components compose the interface, and documentation records the contract.

  1. 01

    Foundations

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

    Semantic tokens

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

    Components

  4. 04

    Documentation

Four layers of the BHDicaire design system

One governed decision can travel through several systems without becoming a separate source of truth.

  1. Layer 1

    Design system

    Shared decision source

    The connection Carries governed decisions into real systems.

    One decision, many trustworthy outputs.

  2. Layer 2

    Documentation and ADRs

    Rules and rationale

    The memory Holds ownership, constraints, and the reason behind a rule.

    Durable context.

  3. Layer 3

    Skills and checks

    Repeatable implementation

    The recipe Runs a change through the same rules and verification every time.

    Consistency.

  4. Layer 4

    Evidence mapping

    Source-level evidence

    The wire Connects a documented interface or rule to its real source files.

    Less drift.

The six parts are connected rather than stacked: tokens carry foundation decisions into components, and documentation records the contract that keeps them reusable. The live flow below the poster makes that primitive-to-semantic boundary explicit. The traceability model then shows how the same governed decision reaches Hugo, DNSControl, diagrams, mindmaps, and other outputs without creating a parallel source of truth. Print this page when a concise system map is more useful than the detailed references.

Accessibility is a system property

Accessibility is governed through tokens, native HTML, component contracts, and content rules—not by a compliance badge.

  • Contrast

    Computed from tokens

    Published interface pairs expose their WCAG 2.2 contrast ratio and normal-text AA result.

    • color.ink 17.88:1 AA
    • color.accent 4.76:1 AA
    • color.line 13.17:1 AA
    Accessibility

  • Focus

    Documented rule

    Every interactive element retains a visible, token-backed focus indicator.

    Accessibility

  • Semantic structure

    Component contract

    Native links, buttons, landmarks, headings, lists, and tables keep meaning without visual styling.

    Components

  • Keyboard access

    Component contract

    Native controls preserve Tab, Enter, and Space behavior; the skip link shortens repeated navigation.

    Skip link

  • Motion and content

    Governance rule

    Non-essential motion respects reader preferences, while authors provide language-aware labels, headings, and text alternatives.

    Content

For token source ownership, generated outputs, theme collections, and verification, use Token architecture.