Le système
de design de COTON.
Une bibliothèque vivante — couleurs, typographie, composants — partagée entre design et engineering. Ancrée dans nos couleurs : marine, or, crème.
COTON · Design System
Design tokens · v1.0.0
Trois convictions qui guident le système.
Confiance par défaut
Chaque token, chaque composant a été éprouvé en production. La cohérence visuelle inspire la confiance — autant en interne qu'auprès de nos clients.
Sur-mesure, jamais en série
Le système est composable, pas monolithique. Il sert l'éditorial autant que la donnée, le marketing autant que le tooling interne — sans jamais imposer sa forme.
Vivant, pas figé
Versionné, documenté, ouvert. Les composants évoluent au rythme de nos produits — chaque release inclut migrations, deprecations et exemples concrets.
Highlights de la v1.
Cette refonte introduit la palette signature (marine + or), la typographie éditoriale Fraunces, et un nouveau set de composants éditoriaux pour nos pages marketing.
Voir tout le changelogPalette — marine, or, crème
Refonte complète de la palette autour de trois couleurs identitaires. L'ancienne palette indigo est dépréciée et migrée automatiquement.
Typographie éditoriale — Fraunces + Inter Tight
Nouveau couple typographique : un serif optique pour les titres, un sans pour le corps. Les italiques de Fraunces sont utilisés comme accent narratif.
8 composants éditoriaux
Pull-quote, drop-cap, footnote, byline, gallery, marginalia, lead… Pour porter la voix COTON sur le marketing et l'éditorial.
Focus rings unifiés
Tous les composants interactifs partagent désormais le même focus ring (4px, accent à 18% d'opacité) — conforme WCAG AA.
Commencez par là où vous êtes.
Que vous soyez designer, dev front, ou product owner — le système a une porte d'entrée pour vous.