BHDicaire

Design-system-overview

Data

Preview#

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.

Example

{{< design-system-overview >}}

When to use

A printable, data-driven overview and system flow for the six connected parts of this design system.

Implementation

layouts/shortcodes/design-system-overview.html

Options

This shortcode has no named parameters in its template.

Interface manifest

Kind
Shortcode
Category
Data
Status
Implemented
Implementation
Shortcode:layouts/shortcodes/design-system-overview.html