← Tout le portfolio

En production Ovation.eco 2026 Concevoir & construire

Un design system livré comme une compétence

Les jetons, les composants et les règles d'usage empaquetés pour qu'un agent les applique au lieu de les réinventer.

Motif mAIllon — arcs concentriques sur fond bleu canard.
Motif mAIllon, pas une capture — cet outil n'a pas d'écran public que je puisse montrer sans exposer les données d'un client.

Le point de départ

Une direction artistique qui vit dans un fichier de style se copie-colle, dérive, et finit en trois variantes dont aucune ne fait autorité. Le problème s'aggrave quand une partie du code est produite par un modèle de langage : faute de trouver la bonne couleur, il en invente une plausible, et personne ne le voit avant la mise en ligne.

Ce que j'ai construit

Le périmètre,
dans le détail.

  • Deux kits : l'identité de marque — jetons, motifs, logos, gabarit de départ — et le design system produit des outils web : coque d'application, en-têtes, champs, progression, états vides, squelettes de chargement.
  • Composants fournis prêts à poser : barre de navigation, feuille du bas, barre d'étapes, état de sauvegarde, squelettes.
  • Une note de dérive qui liste ce qui s'écarte du système, et ce qu'on fait de chaque écart — plutôt qu'un système qu'on prétend respecté.
  • Les deux kits sont rédigés comme des instructions chargées avant production, pas comme une documentation qu'on espère lue.

Les arbitrages qui comptent

Ce qui tient le projet debout,
et ce qu'il a fallu corriger.

01

La règle d'or est une interdiction

Trois couleurs cœur, deux polices, quatre motifs. Ajouter une couleur ou une police casse le système — c'est écrit en tête du kit, avant la liste des composants. Une charte tient par ce qu'elle refuse, pas par ce qu'elle propose : le même arbitrage que sur mes sites vitrines, où deux familles de caractères et aucun dégradé font qu'un site ajouté deux mois plus tard ressemble encore au précédent.

02

Un accent sur fond sombre passe par une fonction, pas par un jeton

Le violet de la marque tombe à 1,41 pour 1 de contraste sur le fond sombre du système — illisible, et invisible tant qu'on regarde la palette plutôt que la page. La correction n'est pas de bannir le violet : c'est de faire passer toute couleur d'accent par un helper qui la remonte au seuil requis, et de réserver le gris de légende clair au fond clair. Un jeton, seul, ne sait pas sur quoi il est posé.

Votre projet

Un besoin proche
du vôtre ?

Trente minutes suffisent pour cadrer un chantier et dire franchement ce qui est faisable, à quel coût, et dans quel ordre.

Prendre contact