Design system

Couleurs

Un seul mode, sans mode sombre : les sections noires jouent ce rôle dans la page. Les contrastes sont calculés selon WCAG 2.1.

Règles

• Un seul accent, le bleu, toujours en aplat.
• Sur le bleu, le texte passe par text/inverse, text/on-brand-secondary ou text/on-brand-muted, jamais par text/muted.
• Le noir encadre l’identité (barre sous le hero, footer). Pas de troisième fond.
• text/muted (4,7:1) sert à la méta et aux légendes, à partir de 12 px, jamais à une phrase qu’on doit lire. Il reste sur canvas : sur background/subtle, il tombe à 4,3:1, sous le seuil AA.
• Un composant n’utilise que ces rôles (`--color-<groupe>-<nom>`), jamais une valeur en dur.

Styles de texte

Neuf styles, mêmes noms que dans Figma. Les tailles sont fluides entre 375 et 1 440 px de large ; Body, UI, Caption et Label ne descendent jamais sous leur taille.

• Rendre lisibles des systèmes complexes

  .text-display · clamp(2.5rem, 1.972rem + 2.254vw, 4rem) / 0.9375 · Titre de page, accroche du hero, phrase du bloc Position, adresse e-mail.

• Rendre lisibles des systèmes complexes

  .text-heading-40 · clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem) / 1 · Titres de section et de card L, titres de pilier.

• Rendre lisibles des systèmes complexes

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

• Rendre lisibles des systèmes complexes

  .text-lead · clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem) / 1.3636 · Chapô, encarts, phrase de la colonne bleue.

• Rendre lisibles des systèmes complexes

  .text-body · 1.0625rem / 1.5294 · Texte courant.

• Rendre lisibles des systèmes complexes

  .text-body-strong · 1.0625rem / 1.5294 · Début de phrase appuyé.

• Rendre lisibles des systèmes complexes

  .text-ui · 0.9375rem / 1.3333 · Navigation, liens de suite, sommaire.

• Rendre lisibles des systèmes complexes

  .text-caption · 0.8125rem / 1.5385 · Méta, légendes, tags S.

• Rendre lisibles des systèmes complexes

  .text-label · 0.75rem / 1.1667 · Surtitres et libellés de section, en capitales.

Règles

• Archivo ne sert qu’aux titres, jamais à une phrase de plus de trois lignes.
• Les capitales passent par Label, jamais par le texte saisi.
• Un début de phrase appuyé passe par Body Strong ou par `strong`, jamais par un font weight appliqué à la main.
• Chaque style fixe son font weight, quel que soit l’élément qui le porte (un titre h3 en Label reste en Regular).

Font weights

Quatre font weights seulement. Le gras à 700 n’existe pas dans le système.

• Archivo

  Schibsted Grotesk

  --font-weight-regular · 400 · Texte courant, Lead, Caption, Label.

• Archivo

  Schibsted Grotesk

  --font-weight-medium · 500 · UI, Body Strong, mise en valeur (`strong`), titres des boîtes flottantes.

• Archivo

  Schibsted Grotesk

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

• Archivo

  Schibsted Grotesk

  --font-weight-black · 900 · Display.

Règles

• Un font weight passe toujours par un token ou par un style de texte.
• `strong` est en Medium partout, par une règle globale.

Spacing

Une seule échelle, nommée en pixels, sur une base de 4 px. Les paliers de 2 et 6 px servent aux réglages fins, comme le bandeau des tags.

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

Règles

• Marges, retraits, écarts et positions n’utilisent que l’échelle `--space-<px>`.
• Toutes les dimensions en pixels sont paires.
• Les grandes mesures de layout passent par les tokens `--layout-*`.

Layout

Les mesures qui structurent les pages.

Règles

• Une seule marge latérale, `--layout-gutter`, 56 px sur desktop, 20 px sur mobile.
• Breakpoints : mobile sous 40rem, tablette de 40 à 64rem, desktop au-delà.

Mouvement

Le mouvement n’existe que s’il révèle une structure. Avec prefers-reduced-motion, les durées passent à zéro et tout s’affiche dans son état final.

Règles

• Les tags ne sont jamais animés.
• Les apparitions n’ont lieu qu’une fois, à l’entrée dans l’écran.

Déclenche une action ou mène à une page. Rendu en lien s’il a une adresse, en bouton sinon.

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

Isole un texte d’introduction sur un fond gris léger.

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

Un bandeau de texte qui qualifie un contenu, par exemple une strate touchée ou une pratique.

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

Un lien hors du texte courant, sans soulignement au repos, souligné au hover.

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

Présente un contenu en résumé, avec ou sans visuel, et mène à lui.

Unifier des logiciels métiers en une plateforme

Une architecture par profils sur un socle de données commun, tenue par un design system gouverné.

Desoutter · Plateforme SaaS industrielle

• surfaces (non touchée)
• design system (touchée)
• modèle (touchée)

Unifier des logiciels métiers en une plateforme

Une architecture par profils sur un socle de données commun, tenue par un design system gouverné.

Desoutter · Plateforme SaaS industrielle

• surfaces (non touchée)
• design system (touchée)
• modèle (touchée)

Concevoir, c’est retirer

Un système bien conçu réduit l’effort nécessaire pour passer d’un besoin à une action, sans enlever les repères utiles.

• surfaces (non touchée)
• design system (non touchée)
• modèle (touchée)

surfaces

Les endroits où l’on rencontre le produit. Je ne conçois pas un écran, mais la présence d’un même objet sur chacun d’eux.

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

Ouvre une page ou une section par un titre en Display.

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

Une illustration sur fond gris et sa légende, dans un cadre aux proportions fixes.

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

Une liste de tags S, chacun On ou Off.

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

Montre un texte avant une action, au hover et au focus clavier de son hôte.

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

Une boîte de dialogue qui demande une 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>

Copie un prompt prêt à coller dans un assistant IA, avec l’adresse de la version agent du site.

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

L’adresse e-mail en grand, copiée en un clic.

<EmailCopiable locale={locale} />

Le logo, les sections du site et le lien vers l’autre langue.

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

L’adresse e-mail en grand, la signature, les liens utiles et la localisation.

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

Un temps de la méthode, sa phrase et ses pratiques.

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

Un message de fin de page, un titre sur plusieurs lignes et des paragraphes.

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