# Design system · The "Strates" system

The system behind this site, from token to page template. Three colours carry the page: white to read, blue to assert, black to identify. Two typefaces: Archivo for headings, Schibsted Grotesk for everything else.

It is organised in five levels, each built from the previous one. Components are generic: a card, a button, a tag, with their variants. How the site uses them is described at the level of organisms and templates.

## For agents

Every token and every component on this page also exists in Markdown and in JSON. Tokens follow the W3C Design Tokens Community Group format; each component carries its level, its file, its properties, its usage rules and a code example.

Values and properties are read from the code at publication time. The documentation therefore cannot describe a component that no longer exists, nor omit a property.

- [Tokens and components in JSON](https://florianbutour.com/en/system.json)

Related writing :

- [A design system that stops at the button](https://florianbutour.com/en/writing/a-design-system-that-stops-at-the-button) : Business patterns extend the components of a design system by organising interactions around recurring tasks.
- [AI, the product’s second user](https://florianbutour.com/en/writing/ai-the-products-second-user) : When an agent acts on someone’s behalf, designing the product means defining what that person can delegate to it, how they stay in control and how they understand what was done.

## 1. Tokens

The base decisions, named by role and never by value. No component uses a colour, size or spacing that is not a token.

### Colours

A single mode, with no dark mode: the black sections play that role in the page. Contrast ratios are computed according to WCAG 2.1.

| Token | Value | Usage |
| --- | --- | --- |
| `--color-background-canvas` | #ffffff | Page background. |
| `--color-background-brand` | #1f2be0 | Hero column, Position block, On tags, hover fill. |
| `--color-background-inverse` | #0d0d0d | Identity bar, dark board, footer. |
| `--color-background-subtle` | #f5f5f5 | Inset, figure frame, floating box, card hover. |
| `--color-background-overlay` | rgb(13 13 13 / 0.4) | Veil behind an open dialog. |
| `--color-surface-inactive` | #e7e7e7 | Off tag. |
| `--color-surface-placeholder` | #d4d4d4 | Placeholder for a visual not yet delivered (preview only). |
| `--color-text-primary` | #0d0d0d | Headings and body text. 19.4:1 on canvas. |
| `--color-text-secondary` | #2a2a2a | Secondary text. 14.4:1 on canvas. |
| `--color-text-muted` | #737373 | Metadata, captions, labels. 4.7:1 on canvas. |
| `--color-text-supporting` | #5c5c59 | Text of an Off tag. 5.4:1 on surface/inactive. |
| `--color-text-inverse` | #ffffff | Text on blue or black. 8.5:1 on brand, 19.4:1 on inverse. |
| `--color-text-on-brand-secondary` | #daddff | Secondary text on blue. 6.4:1 on brand. |
| `--color-text-on-brand-muted` | rgb(255 255 255 / 0.8) | Text of an On tag. 5.9:1 on brand. |
| `--color-text-on-dark-muted` | #9a9a9a | Secondary text on black. 6.9:1 on inverse. |
| `--color-border-default` | #e7e7e7 | Subtle separators between rows and cards. Decorative. |
| `--color-border-ink` | #0d0d0d | Rule under headings, outline of the rule button, floating box. |
| `--color-border-white` | #ffffff | Button outline on dark backgrounds. |
| `--color-border-on-dark` | #333333 | Separators on black. |

Rules :

- A single accent, blue, always as a flat fill.
- On blue, text uses text/inverse, text/on-brand-secondary or text/on-brand-muted, never text/muted.
- Black frames the identity (bar under the hero, footer). No third background.
- text/muted (4.7:1) is for metadata and captions, from 12 px, never for a sentence that must be read. It stays on canvas: on background/subtle it drops to 4.3:1, below the AA threshold.
- A component only uses these roles (`--color-<group>-<name>`), never a hard-coded value.

### Text styles

Nine styles, same names as in Figma. Sizes are fluid between 375 and 1,440 px wide; Body, UI, Caption and Label never go below their size.

| Class | Size and line height | Role |
| --- | --- | --- |
| `.text-display` | clamp(2.5rem, 1.972rem + 2.254vw, 4rem) / 0.9375 | Page title, hero line, Position statement, email address. |
| `.text-heading-40` | clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem) / 1 | Section and L card headings, pillar titles. |
| `.text-heading-24` | clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem) / 1 | M card headings, subheadings, L tag. |
| `.text-lead` | clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem) / 1.3636 | Standfirst, insets, blue column sentence. |
| `.text-body` | 1.0625rem / 1.5294 | Body text. |
| `.text-body-strong` | 1.0625rem / 1.5294 | Emphasised sentence start. |
| `.text-ui` | 0.9375rem / 1.3333 | Navigation, follow-up links, contents. |
| `.text-caption` | 0.8125rem / 1.5385 | Metadata, captions, S tags. |
| `.text-label` | 0.75rem / 1.1667 | Eyebrows and section labels, in capitals. |

Rules :

- Archivo is only for headings, never for a sentence longer than three lines.
- Capitals come from Label, never from the typed text.
- An emphasised sentence start uses Body Strong or `strong`, never a weight applied by hand.
- Each style sets its own weight, whatever element carries it (an h3 heading in Label stays Regular).

### Font weights

Four weights only. Bold at 700 does not exist in the system.

| Token | Value | Usage |
| --- | --- | --- |
| `--font-weight-regular` | 400 | Body, Lead, Caption, Label. |
| `--font-weight-medium` | 500 | UI, Body Strong, emphasis (`strong`), floating box titles. |
| `--font-weight-extrabold` | 800 | Heading/40 and Heading/24. |
| `--font-weight-black` | 900 | Display. |

Rules :

- A weight always comes from a token or a text style.
- `strong` is Medium everywhere, through a global rule.

### Spacing

A single scale, named in pixels, on a 4 px base. The 2 and 6 px steps are for fine adjustments, such as the tag band.

| Token | Value |
| --- | --- |
| `--space-2` | 0.125rem |
| `--space-4` | 0.25rem |
| `--space-6` | 0.375rem |
| `--space-8` | 0.5rem |
| `--space-12` | 0.75rem |
| `--space-16` | 1rem |
| `--space-20` | 1.25rem |
| `--space-24` | 1.5rem |
| `--space-32` | 2rem |
| `--space-40` | 2.5rem |
| `--space-48` | 3rem |
| `--space-56` | 3.5rem |
| `--space-64` | 4rem |
| `--space-72` | 4.5rem |
| `--space-80` | 5rem |
| `--space-96` | 6rem |
| `--space-112` | 7rem |
| `--space-128` | 8rem |

Rules :

- Margins, indents, gaps and offsets only use the `--space-<px>` scale.
- Every pixel dimension is even.
- Large layout measures use the `--layout-*` tokens.

### Layout

The measures that structure the pages.

| Token | Value | Usage |
| --- | --- | --- |
| `--layout-max` | 90rem | Maximum content width (1,440 px). |
| `--layout-gutter` | clamp(1.25rem, 0.458rem + 3.38vw, 3.5rem) | Single side margin, from 20 to 56 px. |
| `--layout-nav-height` | 5.375rem | Navigation height (86 px). |
| `--layout-offset` | 19rem | Indent of cards in lists (304 px). |
| `--layout-strates-width` | 16.25rem | Column of vertical tag groups (260 px). |
| `--layout-section` | 8.75rem | Top of home sections and hero, 404 page (140 px). |
| `--layout-ecrit-tete` | 16.5rem | Top of writing pages (264 px). |
| `--layout-page-tete` | clamp(5rem, 0.6rem + 18.78vw, 17.5rem) | Top of inner pages, from 80 to 280 px. |

Rules :

- A single side margin, `--layout-gutter`, 56 px on desktop, 20 px on mobile.
- Breakpoints: mobile below 40rem, tablet from 40 to 64rem, desktop beyond.

### Motion

Motion only exists when it reveals a structure. With prefers-reduced-motion, durations drop to zero and everything is shown in its final state.

| Token | Value | Usage |
| --- | --- | --- |
| `--motion-duration` | 200ms | Hovers, button and navigation fills (200 ms). |
| `--motion-duration-long` | 400ms | Card sweep, reveals, method figures (400 ms). |
| `--motion-ease` | cubic-bezier(0.2, 0, 0, 1) | Curve shared by all motion. |

Rules :

- Tags are never animated.
- Reveals happen once, when entering the screen.

## 2. Atoms

The smallest interface elements, with no domain content. They only use tokens.

### Button (`Bouton`)

File : `src/components/atomes/Bouton.astro` · Figma : 2:493, 8:480

Triggers an action or leads to a page. Rendered as a link when it has an address, as a button otherwise.

Variants :

- plein (filled): light background; on hover, a blue fill sweeps the button from its left edge.
- contour (outline): white outline, for dark surfaces; on hover, a white fill.
- accent: blue fill, white text. Primary action on a light background.
- filet (rule): ink outline on white. Secondary action on a light background.
- Sizes M (16 × 24 px) and S (12 × 20 px).
- Unavailable: if the address is still "À compléter", the button becomes neutral text (preview only).

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `variante` | `'plein' \| 'contour' \| 'accent' \| 'filet'` | `'plein'` | Appearance of the button. |
| `taille` | `'M' \| 'S'` | `'M'` | M by default, S in floating boxes. |
| `href` | `string` |  | Address; without it, the button is a button element. |

Content (slots) :

- main : Label.

Do :

- A short label that states the action or the destination.
- On a dark background, plein or contour; on a light background, accent or filet.

Avoid :

- A button for a link in running text: use Link.
- Two accent buttons side by side.

Accessibility :

- Visible focus: 2 px outline in the text colour.
- Outside a form, `type` is "button"; it can be replaced ("submit" in a dialog).

Used by : CopieLienIA, Accueil, Parcours

```astro
<Bouton variante="plein" href="/travaux">Voir les travaux ↓</Bouton>
<Bouton variante="accent" taille="S" type="submit" value="copier">Copier</Bouton>
```

### Inset (`Encart`)

File : `src/components/atomes/Encart.astro`

Sets an introductory text apart on a light grey background.

Variants :

- A single appearance. Padding goes from 24 × 32 to 20 px on mobile.

Content (slots) :

- main : Text of the inset.

Do :

- One paragraph in Lead, right under a header.

Avoid :

- Several insets in a row.
- An inset for an alert or a status message.

Accessibility :

- The background is decorative; the text keeps its contrast (17.8:1 in text/primary).

Used by : Accueil, Cas, Ecrit

```astro
<Encart><p class="text-lead">Chapô du cas.</p></Encart>
```

### Tag (`Etiquette`)

File : `src/components/atomes/Etiquette.astro` · Figma : 2:494

A text band that qualifies a content, such as a layer touched or a practice.

Variants :

- Size S: Caption on a 28 px band. On in blue, Off in grey.
- Size L: Heading/24 on a blue fill, white text. Used as a heading.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `taille` | `'S' \| 'L'` | `'S'` | S (band) or L (heading). |
| `etat` | `boolean` | `true` | On (true) or Off (false). |
| `etatTexte` | `string` |  | Text read after the label, for example "touched". |
| `balise` | `'span' \| 'h2' \| 'h3' \| 'h4'` | `'span'` | Rendered element; a heading level when the tag names a block. |

Content (slots) :

- main : Label.

Do :

- Give the state as text with `etatTexte` when On and Off carry meaning.
- Group the tags of one content in a Tag group.

Avoid :

- Animating a tag or making it clickable.
- A tag for an action.

Accessibility :

- The state is never carried by colour alone: `etatTexte` is read after the label.
- Off: text/supporting on surface/inactive, 5.4:1.

Used by : Carte, GroupeEtiquettes

```astro
<Etiquette etat={false} etatTexte="non touchée">modèle</Etiquette>
<Etiquette taille="L" balise="h3">surfaces</Etiquette>
```

### Link (`Lien`)

File : `src/components/atomes/Lien.astro`

A link outside running text, not underlined at rest, underlined on hover.

Variants :

- Any text style (UI, Heading/24…).

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | required | Address. |
| `texte` | `string` |  | Text style class, for example "text-ui". |

Content (slots) :

- main : Label.

Do :

- A label that states the destination, with an arrow when it leads onward.

Avoid :

- A link inside a paragraph: running text underlines its links.

Accessibility :

- Outside running text, its position and style are enough to recognise it; focus stays visible.

Used by : PiedDePage, Cas, Ecrit

```astro
<Lien texte="text-ui" href="/ecrits">← Tous les écrits</Lien>
```

## 3. Molecules

Atoms assembled into an element with a function: a card, a header, a tooltip.

### Card (`Carte`)

File : `src/components/molecules/Carte.astro` · Figma : 2:489, 9:1600, 2:491

Presents a content in summary, with or without a visual, and leads to it.

Variants :

- Row appearance, size L: Heading/40 title, text and metadata. Without a visual, tags in a column on the right; with a visual (400 × 300, on the left), tags under the text.
- Row appearance, size M: Heading/24 title, tags in a row under the text.
- Frame appearance: border, visual on top, no link; the title can be an L tag.
- 304 px indent on desktop: by default in size M and in size L without a visual.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `taille` | `'L' \| 'M'` | `'M'` | L or M. |
| `apparence` | `'ligne' \| 'cadre'` | `'ligne'` | ligne (clickable list row) or cadre (framed block). |
| `titre` | `string` | required | Card title. |
| `texte` | `string` | required | Description or thesis. |
| `meta` | `string` |  | Metadata line in Caption, for example "company · domain". |
| `href` | `string` |  | Address of the content (row appearance). |
| `visuel` | `{ src?: ImageMetadata \| string; alt: string; largeur?: number; hauteur?: number }` |  | Image and its alternative text; without an image, a fill holds the space in preview. |
| `etiquettes` | `ItemEtiquette[]` |  | Tags of the Tag group. |
| `etiquettesLibelle` | `string` |  | Name of the tag list for assistive technologies. |
| `retrait` | `boolean` |  | 304 px indent on desktop. |
| `titreEtiquette` | `boolean` | `false` | Title rendered as an L tag (frame appearance). |
| `niveau` | `2 \| 3 \| 4` | `3` | Heading level. |
| `lang` | `string` |  | Language of the content, if it differs from the page. |

Do :

- Stack row cards in a list, separated by their rule.
- Keep one size per list: L for case studies, M for writing.

Avoid :

- A second link inside a row card: the whole card is already clickable.
- A frame card for content to open.

Accessibility :

- The link sits on the title and stretches over the whole card; there is a single tab stop.
- On keyboard focus, the background sweeps the card as on hover.
- The heading level follows the page hierarchy (`niveau`).

Built from : Etiquette, GroupeEtiquettes

Used by : Accueil, Ecrit, ListeEcrits, ListeTravaux

```astro
<Carte taille="L" titre="…" texte="…" meta="Entreprise · domaine" href="/travaux/…"
  visuel={{ src: image, alt: '…' }} etiquettes={etiquettesStrates(strates, ui)} etiquettesLibelle="Strates touchées" />
<Carte {...carteDEcrit(ecrit, locale, ui)} retrait={false} />
```

### Header (`EnTete`)

File : `src/components/molecules/EnTete.astro` · Figma : 2:488

Opens a page or a section with a Display heading.

Variants :

- Section: 20 px under the heading, set on a 3 px ink rule.
- Page: 72 px under the heading (40 px on mobile), with or without a rule.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `titre` | `string` | required | Heading text. |
| `niveau` | `1 \| 2` | `2` | 1 at the top of a page, 2 in a section. |
| `id` | `string` |  | Heading identifier, for aria-labelledby and anchors. |
| `espace` | `'section' \| 'page'` | `'section'` | section or page. |
| `filet` | `boolean` | `true` | Ink rule under the heading. |

Do :

- A single level 1 header per page.

Avoid :

- A header for a card or block title: use the Heading styles.

Accessibility :

- `niveau` sets h1 or h2; `id` lets the enclosing section be named.

Used by : Accueil, Cas, Contact, Ecrit, ListeEcrits, ListeTravaux, Parcours

```astro
<EnTete titre="Travaux" niveau={1} espace="page" />
```

### Figure (`Figure`)

File : `src/components/molecules/Figure.astro` · Figma : 119:8515

An illustration on a grey background and its caption, in a frame with fixed proportions.

Variants :

- The frame keeps its proportions (`ratio`); figures of the same rank replace each other without the page moving.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | required | Image address, in public/. |
| `legende` | `string` | required | Caption in Caption. |
| `alt` | `string` | `''` | Alternative text; empty when the caption is enough. |
| `ratio` | `string` | `'676 / 578'` | Frame proportions. |

Do :

- A caption that describes what the figure shows.

Avoid :

- A caption that repeats the nearby heading.

Accessibility :

- By default the illustration is decorative (empty alt) and the caption describes it; an alternative text can be passed.

Used by : Accueil

```astro
<Figure src="/images/methode/cadrer.svg" legende="Fig. 04 · Un parcours, ses moments et ses frictions" />
```

### Tag group (`GroupeEtiquettes`)

File : `src/components/molecules/GroupeEtiquettes.astro`

A list of S tags, each On or Off.

Variants :

- Vertical: 260 px column. Horizontal: 140 px bands.
- Folding below a breakpoint: in a row, with stretched tags (mobile) or at their natural width (tablet).

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `etiquettes` | `ItemEtiquette[]` | required | Label, state and state text of each tag. |
| `libelle` | `string` |  | Name of the list for assistive technologies. |
| `orientation` | `'verticale' \| 'horizontale'` | `'verticale'` | verticale or horizontale. |
| `replier` | `'mobile' \| 'tablette'` |  | Breakpoint below which the group goes into a row. |

Do :

- The same tags in the same order for one content type (the three layers, always in the order surfaces, design system, model).

Avoid :

- Mixing tags of different kinds in one group.

Accessibility :

- A list named by `libelle`; each state is read as text.

Built from : Etiquette

Used by : Carte, PilierDeMethode, Cas, Parcours

```astro
<GroupeEtiquettes etiquettes={[{ libelle: 'surfaces', etat: true, etatTexte: 'touchée' }]}
  libelle="Strates touchées" orientation="horizontale" replier="mobile" />
```

### Tooltip (`Infobulle`)

File : `src/components/molecules/Infobulle.astro` · Figma : 111:5507

Shows a text before an action, on hover and keyboard focus of its host.

Variants :

- Below the host, or above when space is lacking; aligned to the start or the end of the host.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | required | Identifier, for aria-describedby. |
| `titre` | `string` | required | Box title. |
| `alignement` | `'debut' \| 'fin'` | `'debut'` | Edge of the host it aligns to (desktop). |

Content (slots) :

- main : Text shown.

Do :

- Show what is about to happen (the text that will be copied), not the label again.

Avoid :

- Essential information that cannot be found elsewhere on a touch screen.

Accessibility :

- WCAG 1.4.13: it stays open under the pointer, closes with Escape and hides nothing permanently.
- Linked to its trigger by aria-describedby (`id`).

Used by : CopieLienIA

```astro
<div data-infobulle-hote style="position: relative">
  <Bouton aria-describedby="apercu">Copier</Bouton>
  <Infobulle id="apercu" titre="Ce texte sera copié">…</Infobulle>
</div>
```

### Dialog (`Modale`)

File : `src/components/molecules/Modale.astro` · Figma : 111:5507

A dialog box that asks for confirmation.

Variants :

- Same box as the tooltip; actions as S buttons, accent then filet.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | required | Identifier; the title receives `<id>-titre`. |
| `titre` | `string` | required | Box title. |

Content (slots) :

- main : Text shown.
- actions : Buttons, whose value becomes the return value of the dialog.

Do :

- Two actions at most, the primary action first.

Avoid :

- A dialog opened without an action from the person.

Accessibility :

- Native dialog element opened with showModal(); focus is trapped inside and Escape closes it.
- A click outside the box closes it.

Used by : CopieLienIA

```astro
<Modale id="confirmation" titre="Ce texte sera copié">
  …
  <Fragment slot="actions">
    <Bouton variante="accent" taille="S" type="submit" value="copier">Copier</Bouton>
    <Bouton variante="filet" taille="S" type="submit" value="annuler">Annuler</Bouton>
  </Fragment>
</Modale>
```

## 4. Organisms

Molecules and atoms assembled for a task of the site: copying a link, presenting a method pillar, navigating.

### Copy the AI link (`CopieLienIA`)

File : `src/components/organismes/CopieLienIA.astro`

Copies a prompt ready to paste into an AI assistant, with the address of the site's agent version.

Variants :

- With hover: the tooltip shows the text, the click copies.
- Touch screen: the dialog shows the text and asks for confirmation.
- If the browser refuses the copy, the dialog opens with the text to copy by hand.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `libelle` | `string` | required | Button label. |
| `confirmation` | `string` | required | Message after copying. |
| `echec` | `string` | required | Message if the copy fails. |
| `apercu` | `string` | required | Title of the tooltip and the dialog. |
| `prompt` | `string` | required | Copied text; {lien} becomes the address of the agent version. |
| `confirmer` | `string` | required | Primary action of the dialog. |
| `annuler` | `string` | required | Secondary action of the dialog. |
| `variante` | `'plein' \| 'contour'` | `'plein'` | Button variant. |
| `alignement` | `'debut' \| 'fin'` | `'debut'` | Tooltip alignment. |
| `emplacement` | `string` | required | Placement, sent to audience measurement. |

Do :

- Always show the text before copying it.

Avoid :

- Copying without confirmation on a touch screen.

Accessibility :

- Absent without JavaScript or clipboard; the link to the agent version is then enough.
- The result is announced in a role="status" region.

Built from : Bouton, Infobulle, Modale

Used by : Accueil

```astro
<CopieLienIA {...textes} variante="contour" alignement="fin" emplacement="hero" />
```

### Copyable email (`EmailCopiable`)

File : `src/components/organismes/EmailCopiable.astro`

The email address, large, copied in one click.

Variants :

- On hover and focus, the text turns blue from left to right.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `locale` | `Locale` | required | Language of the texts. |

Do :

- A single large address per page.

Avoid :

- Using it on a light background: the text is white at rest.

Accessibility :

- Without JavaScript or clipboard, the address remains a mailto link.
- The button announces the address and the action; the result is announced in a role="status" region.
- In forced colours mode, the text returns to a solid colour.

Used by : PiedDePage, Contact

```astro
<EmailCopiable locale={locale} />
```

### Navigation (`Navigation`)

File : `src/components/organismes/Navigation.astro` · Figma : 2:487

The logo, the sections of the site and the link to the other language.

Variants :

- Link states: rest, hover (blue fill), active page (8 px bar).
- Mobile: full-screen menu on the native Popover API.
- Stuck at the top, hidden when scrolling down, back when scrolling up.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `locale` | `Locale` | required | Language of the page. |
| `alternate` | `string` |  | Address of the equivalent page in the other language. |

Do :

- Only show a section once content is published.

Avoid :

- A link to the other language without an equivalent page.

Accessibility :

- aria-current is "page" on the exact page, "true" on a sub-page.
- The mobile menu opens and closes without JavaScript, and with Escape.
- Keyboard focus always brings the navigation back.

Used by : BaseLayout

```astro
<Navigation locale={locale} alternate={path('travaux', 'en')} />
```

### Footer (`PiedDePage`)

File : `src/components/organismes/PiedDePage.astro` · Figma : 2:492

The large email address, the signature, useful links and the location.

Variants :

- Without the large address on the Contact page, which already carries it.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `locale` | `Locale` | required | Language of the texts. |
| `avecEmail` | `boolean` | `true` | Shows the large address. |

Do :

- Short links, separated by middle dots.

Avoid :

- Repeating the main navigation there.

Accessibility :

- contentinfo region, named by a hidden heading.

Built from : Lien, EmailCopiable

Used by : BaseLayout

```astro
<PiedDePage locale={locale} avecEmail={false} />
```

### Method pillar (`PilierDeMethode`)

File : `src/components/organismes/PilierDeMethode.astro` · Figma : 2:490

A stage of the method, its sentence and its practices.

Variants :

- On the home page (desktop, with JavaScript), the active pillar is complete and the others shrink to their title.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `titre` | `string` | required | Pillar name. |
| `description` | `string` | required | Pillar sentence. |
| `pratiques` | `string[]` | required | Practices, as tags. |
| `niveau` | `2 \| 3 \| 4` | `3` | Heading level. |

Do :

- Short practices, as On tags.

Avoid :

- Practices as Off tags: they describe what is done, all are On.

Accessibility :

- When shrunk, inactive pillars keep their text for screen readers.

Built from : GroupeEtiquettes

Used by : Accueil

```astro
<PilierDeMethode titre="Cadrer" description="…" pratiques={['Entretiens', 'Tests d’utilisabilité']} />
```

### Board (`Planche`)

File : `src/components/organismes/Planche.astro` · Figma : 27:412

A closing message, a heading over several lines and paragraphs.

Variants :

- Light, before the footer.
- Dark, followed by content passed as a slot; it joins the footer (Contact page).

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `libelle` | `string` |  | Eyebrow in Label. |
| `titre` | `string[]` | required | Heading, one line per entry. |
| `texte` | `string[]` | required | Paragraphs in Lead. |
| `sombre` | `boolean` | `false` | Dark variant. |
| `nom` | `string` |  | Region name. |
| `niveau` | `2 \| 3 \| 4` | `2` | Heading level. |

Content (slots) :

- main : Content under the text (dark variant).

Do :

- A short heading, one line per idea.

Avoid :

- Two boards on one page.

Accessibility :

- Region named by its heading, or by `nom` if the page shows several.

Used by : Cas, Contact, Ecrit, ListeEcrits, ListeTravaux, Parcours

```astro
<Planche libelle={ui.planche.libelle} titre={ui.planche.titre} texte={ui.planche.texte} />
<Planche titre={…} texte={…} sombre><EmailCopiable locale={locale} /></Planche>
```

## 5. Templates

Page structures. Each template serves both languages; pages only pass it the language.

| Page | Description | Built from |
| --- | --- | --- |
| `src/gabarits/Accueil.astro` | Hero, layers, work, position, method and writing. | Bouton, Encart, Carte, EnTete, Figure, CopieLienIA, PilierDeMethode |
| `src/gabarits/Cas.astro` | A case study, from summary to decisions and their rules. | Encart, Lien, EnTete, GroupeEtiquettes, Planche |
| `src/gabarits/Contact.astro` | The message and the copyable address, on a dark board. | EnTete, EmailCopiable, Planche |
| `src/gabarits/Ecrit.astro` | A piece of writing, its thesis, cited cases and related writing. | Encart, Lien, Carte, EnTete, Planche |
| `src/gabarits/ListeEcrits.astro` | List of writing, as M cards. | Carte, EnTete, Planche |
| `src/gabarits/ListeTravaux.astro` | List of case studies, as L cards with a visual. | Carte, EnTete, Planche |
| `src/gabarits/Parcours.astro` | Experience and education. | Bouton, EnTete, GroupeEtiquettes, Planche |
| `src/gabarits/Systeme.astro` | This page. | Bouton, Encart, Etiquette, Lien, Carte, EnTete, Figure, GroupeEtiquettes, Infobulle, Modale, CopieLienIA, EmailCopiable, PilierDeMethode, Planche |