Accueil
Blog
Design SystemAstroFrontendi18n

Comment j'ai construit un design system trilingue en une soirée

PUBLIÉ LE 23 avril 2026 · 5 MIN DE LECTURE

LAUSANNE, Suisse —

Une nuit, un module backporté, trois marques. Voilà le récit.

Le point de départ

22 avril, 18h. Je reçois une capture d’écran — un classeur bien rangé avec 25 pages HTML (couleurs, boutons, cartes, formulaires…) accompagnées d’un colors_and_type.css de 468 lignes, de 52 polices .woff2 self-hostées et d’un manifeste SKILL.md pour les agents IA.

C’est le design system d’ACiD Studio, extrait du code de production. Un classeur de marque destiné aux designers, développeurs et IA qui travailleront sur le projet.

Un fichier technique, pas une vitrine. Question : et si on le mettait en ligne ?

Le pari

Un design system public, c’est un signal de sérieux. Stripe, Vercel, Shopify publient les leurs — parce que ça fait partie de leur argumentaire commercial. “Regardez, on a un vrai système, pas un thème recopié.”

Pour une agence one-man à CHF 2’999 de ticket d’entrée, afficher acidstudio.ch/design-system/ change la perception immédiate : “ils sont structurés comme une vraie boîte.”

Contrainte : le faire en une soirée, sans casser la page d’accueil, sans alourdir le site, avec les trois langues (FR / EN / ES) du site.

L’architecture

Phase 1 — Publication statique

Plutôt qu’un sous-domaine séparé ou un repo dédié, j’ai copié le dossier du design system directement dans frontend/public/design-system/. Astro sert automatiquement public/ à la racine → acidstudio.ch/design-system/buttons.html fonctionne sans config.

Gain : zéro DNS, zéro SSL, zéro pipeline de déploiement additionnel.

Phase 2 — Page d’accueil Astro

Une page Astro src/pages/design-system.astro qui :

  • Reprend le Layout du site (navbar + footer inchangés)
  • Affiche un hero géant “CODE & AUDACE” dans la typographie de la marque
  • Présente les 25 previews en grille, chacune dans un iframe scaled 50%
  • Termine sur un CTA sombre avec l’orb radial acid signature du site

Pas de screenshot statique, pas de build image — les previews HTML originales sont chargées telles quelles, juste miniaturisées. Une modification dans un preview apparaît automatiquement dans la grille.

Phase 3 — Internationalisation

Trois versions : /design-system/ (FR), /en/design-system/ (EN), /es/design-system/ (ES).

Pattern utilisé — le même que pour BlogListing.astro du projet :

  1. Un composant partagé DesignSystemPage.astro avec prop lang
  2. Trois wrappers de 10 lignes dans src/pages/, src/pages/en/, src/pages/es/
  3. Toutes les chaînes traduites dans un objet labels keyed par langue

Hero traduit : CODE & AUDACE (FR) / CODE & BOLDNESS (EN) / CODE & AUDACIA (ES).

Les petits enfers techniques

Le TOC illisible

Premier rendu : fond noir, texte blanc en Outfit 14px, poids 600. Sur macOS Retina, les lettres apparaissent floues et déformées — un halo anti-aliasing crée un effet script bizarre.

Diagnostic : Outfit (police display) est optimisée pour les grandes tailles. À 14px, elle est moins lisible qu’Inter (police UI) avec le même poids.

Fix : swap de police + text-rendering: optimizeLegibility + letter-spacing généreux (0.02em) + padding horizontal pompé à 22px.

Les tokens CSS en conflit

Le projet utilise shadcn/ui qui définit --color-accent en HSL. Mon composant aussi utilisait --color-accent, mais avec la valeur acid #c8f135. Conflit silencieux — shadcn gagnait.

Fix : namespace propre au module. Tous mes tokens deviennent --ds-* avec fallbacks chainés :

background: var(--ds-accent, var(--acid, #c8f135));

Trois niveaux de fallback : override projet, token natif ACiD, hardcode. Le projet peut override à chaque niveau sans toucher au composant.

Le backport — du one-shot au module réutilisable

Quand une feature mérite d’être dans 2+ projets, on la sort dans acid-starter — le repo template qui centralise tous les modules réutilisables.

J’ai créé modules/design-system/v1.0.0 avec :

  • Le composant partagé DesignSystemPage.astro
  • Les trois wrappers Astro [lang]/design-system.astro
  • Un design-system.config.json avec tous les champs paramétrables
  • Un README expliquant l’installation et la configuration

Paramétrable : le nom de la marque, le texte accentué (AUDACE vs BOLDNESS vs AUDACIA), les langues actives (mono-FR ou trilingue), les CTA href, la liste des previews, le logo.

Générique par design : zéro couleur hardcodée, tout passe par des variables CSS. L’accent devient automatiquement amber pour un restaurant, magenta pour une thérapie, acid pour l’agence mère.

Le résultat

En 4 heures :

  • acidstudio.ch/design-system/ → trilingue, 25 composants, stats, CTA commercial
  • Module design-system v1.0.0 dans acid-starter
  • Installations déployées sur 2 projets clients adaptés à leur marque : alaclasse-restaurant.ch/design-system/ (or + Playfair/Cormorant) et magnetismetherapeutique.ch/design-system/ (violet + DM Serif/Raleway en dark theme)

Livrable commercial : chaque futur client ACiD Studio aura son design system public à partager. Pas “comme Stripe”. Ton système, avec tes couleurs et ton vocabulaire.

Ce que j’en retire

  1. Publier une vitrine technique reste l’outil marketing le plus économique pour une agence : le travail est déjà fait, il faut juste l’emballer.
  2. Les conventions existantes du projet (pattern BlogListing.astro, tokens CSS, alias d’import) m’ont fait gagner 50% du temps. Moins je décide, plus je code vite.
  3. Le moment où un one-shot devient réutilisable est précis — si 2+ projets vont le vouloir, direction acid-starter dès la v1.0.

Le design system d’ACiD Studio est à cette URL : acidstudio.ch/design-system.

Si tu lances un projet web et que tu veux le tien, écris-moi.

FR EN ES