Mon design system turquoise : palette, Inter et dark mode
- design
- tailwind
- accessibilité
- adr
Après la stack et l'organisation du code, il restait la question que beaucoup de devs repoussent : à quoi ça ressemble — et est-ce que c'est cohérent partout ?
J'ai documenté mes choix dans un ADR dédié. Voici la version blog.
Le contexte
Je voulais :
- contrôler le design sans dépendre d'une lib UI générique ;
- une identité distincte mais pas criarde ;
- du dark mode natif (pas de toggle light/dark en V1 — un scope de moins) ;
- des contrastes accessibles sans audit manuel à chaque composant.
Trouver la palette : Coolors + Realtime Colors
Plutôt qu'inventer des hex au feeling, j'ai parcouru les palettes populaires sur Coolors, puis testé chaque direction sur Realtime Colors.
La famille turquoise monochrome (HSL ~173–174) s'est imposée : primary, secondary et accent s'harmonisent sans combinaisons bancales.
Les tokens de base
--text: #e4f1ee;
--background: #060e0d;
--primary: #2ec2b3;
--secondary: #228c81;
--accent: #4ce1d2;
Dérivés pour l'UI : --text-secondary, --surface, --border, --hover.
Règle 60-30-10
Pour éviter le « tout turquoise » illisible :
| Rôle | Couleur | Usage |
|---|---|---|
| 60 % — Primary | #2ec2b3 | H1/H2, sections clés, CTAs |
| 30 % — Secondary | #228c81 | H3, bordures, cartes |
| 10 % — Accent | #4ce1d2 | Liens, badges, hovers |
Le --hover utilise l'accent volontairement : une interaction doit attirer l'œil, pas se fondre dans le primary.
Typographie : Inter
Inter est optimisée pour les interfaces — variable font, licence permissive, rendu propre à toutes tailles. GitHub, Linear, Vercel l'utilisent ; c'est un choix safe sans être générique au point de passer inaperçu.
Échelle typographique centralisée dans globals.css : --text-xs à --text-5xl, --leading-*, --tracking-*. Les pages référencent ces tokens via Tailwind v4 (text-ocean-500, etc.).
Accessibilité : contrastes WCAG AAA
Ratios mesurés sur la combinaison texte / fond :
- Text sur background : ~15.8:1 (AAA)
- Accent sur background : ~12.1:1 (AAA)
- Primary sur background : ~9.8:1 (AAA)
Le dark mode n'est pas une excuse pour griser le texte jusqu'à l'illisibilité. Les --text-secondary restent à 70 % d'opacité — lisible pour le corps, distinct des titres.
Implémentation : Tailwind + shadcn/ui
- Tailwind v4 pour les utilitaires, tokens dans
@theme inline; - shadcn/ui pour les composants Radix copiés dans le repo — je possède le code, pas de breaking change npm surprise ;
- Pas de CSS-in-JS runtime — perf et simplicité SSR.
Les composants MDX du blog (mdx-components.tsx) réutilisent les mêmes classes ocean-* pour garder une cohérence article / site.
Ce que j'ai volontairement reporté
- Light mode — double maintenance pour un portfolio perso ;
- Tokens sémantiques partout — définis dans CSS, migration progressive depuis
text-ocean-*; - Storybook — overkill à ce stade ; le site est sa propre vitrine.
Conclusion
Un design system pour un portfolio solo, ce n'est pas un Figma exhaustif. C'est un contrat visuel minimal : palette, typo, spacing, états hover/focus — documenté pour que chaque nouvelle page ne reparte pas de zéro.
La série ADR publique s'arrête ici côté fondations. Prochain focus : contenu — projets, articles techniques, démos.