Design system

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.

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.

• Making complex systems legible

  .text-display · clamp(2.5rem, 1.972rem + 2.254vw, 4rem) / 0.9375 · Page title, hero line, Position statement, email address.

• Making complex systems legible

  .text-heading-40 · clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem) / 1 · Section and L card headings, pillar titles.

• Making complex systems legible

  .text-heading-24 · clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem) / 1 · M card headings, subheadings, L tag.

• Making complex systems legible

  .text-lead · clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem) / 1.3636 · Standfirst, insets, blue column sentence.

• Making complex systems legible

  .text-body · 1.0625rem / 1.5294 · Body text.

• Making complex systems legible

  .text-body-strong · 1.0625rem / 1.5294 · Emphasised sentence start.

• Making complex systems legible

  .text-ui · 0.9375rem / 1.3333 · Navigation, follow-up links, contents.

• Making complex systems legible

  .text-caption · 0.8125rem / 1.5385 · Metadata, captions, S tags.

• Making complex systems legible

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

• Archivo

  Schibsted Grotesk

  --font-weight-regular · 400 · Body, Lead, Caption, Label.

• Archivo

  Schibsted Grotesk

  --font-weight-medium · 500 · UI, Body Strong, emphasis (`strong`), floating box titles.

• Archivo

  Schibsted Grotesk

  --font-weight-extrabold · 800 · Heading/40 and Heading/24.

• Archivo

  Schibsted Grotesk

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

• --space-20.125rem
• --space-40.25rem
• --space-60.375rem
• --space-80.5rem
• --space-120.75rem
• --space-161rem
• --space-201.25rem
• --space-241.5rem
• --space-322rem
• --space-402.5rem
• --space-483rem
• --space-563.5rem
• --space-644rem
• --space-724.5rem
• --space-805rem
• --space-966rem
• --space-1127rem
• --space-1288rem

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.

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.

Rules

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

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

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

Sets an introductory text apart on a light grey background.

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

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

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

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

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

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

Unifying business software into one platform

A profile-based architecture on a shared data foundation, held together by a governed design system.

Desoutter · Industrial SaaS platform

• surfaces (not involved)
• design system (involved)
• model (involved)

Unifying business software into one platform

A profile-based architecture on a shared data foundation, held together by a governed design system.

Desoutter · Industrial SaaS platform

• surfaces (not involved)
• design system (involved)
• model (involved)

Designing is removing

A well-designed system reduces the effort needed to go from a need to an action, without removing the landmarks that matter.

• surfaces (not involved)
• design system (not involved)
• model (involved)

surfaces

The places where people meet the product. I don’t design a screen, but the presence of the same object on each of them.

web · mobile · Outlook · CLI · API · agents

<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} />

Opens a page or a section with a Display heading.

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

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

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

A list of S tags, each On or Off.

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

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

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

A dialog box that asks for confirmation.

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

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

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

The email address, large, copied in one click.

<EmailCopiable locale={locale} />

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

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

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

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

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

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

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

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