Design system · v2.9

Design system

Ce site applique ce que je vends : il repose sur son propre design system. Trois niveaux de tokens, des composants nommés en BEM, une règle d’angles simple. Les valeurs de cette page sont lues en direct dans les feuilles de style du site.

Générer les tokens de votre marque

Trois niveaux de tokens

Une valeur brute ne sert jamais directement. Elle reçoit un rôle, puis un composant lit ce rôle. Pour changer le bleu partout, on touche un seul token.

--ds-ref-*

–

Référence · déclarés

Les valeurs brutes : palette, échelle d’espacement, rayons, polices, durées.

--ds-sys-*

–

Système · déclarés

Le rôle d’une valeur : fond discret, texte secondaire, rayon d’un média. Le seul niveau qui change avec le thème.

--ds-comp-*

–

Composant · déclarés

Les réglages d’un composant, branchés sur des rôles : le fond du bouton principal au survol.

Une couleur, du token brut au composant

--ds-ref-color-blue-600
--ds-sys-color-brand
--ds-comp-badge-color-text-brand

Couleurs

Une couleur de marque, une encre, des neutres. Basculez le thème : seuls les rôles changent de valeur.

Palette (référence)

ref-color-blue-600
ref-color-ink-950
ref-color-neutral-0
ref-color-neutral-100
ref-color-neutral-200
ref-color-neutral-500
ref-color-neutral-850
ref-color-rainbow-1
ref-color-rainbow-5
ref-color-rainbow-3
ref-color-rainbow-4
ref-color-rainbow-2

Rôles (système)

sys-color-bg-default
sys-color-bg-subtle
sys-color-bg-surface
sys-color-bg-inverse
sys-color-text-default
sys-color-text-muted
sys-color-brand
sys-color-border-default

Typographie

Deux rôles, pas un de plus : Ancizar Serif pour les titres, Syne pour tout le reste.

Titres · font.display · Ancizar Serif

Aa Bb 128

Texte · font.body · Syne

Je suis le designer qui lit les tableaux Excel et le marketeur qui se soucie de la typographie.

Échelle

font-size-12Brand design, design system
font-size-14Brand design, design system
font-size-16Brand design, design system
font-size-18Brand design, design system
font-size-20Brand design, design system
font-size-24Brand design, design system
font-size-30Brand design
font-size-36Brand design
font-size-48Brand design
font-size-60Brand design
font-size-72Brand design
font-size-96Brand design

Espacement

Une base de 4 px, nommée par multiple de 4 : space-8 vaut 32 px. Les sections respirent sur deux valeurs, 96 et 128 px.

space-14 px
space-28 px
space-312 px
space-416 px
space-624 px
space-832 px
space-1040 px
space-1248 px
space-1664 px
space-2496 px
space-32128 px

La règle des angles

Ce qui se clique est carré, ce qui se regarde est arrondi.

control · 0Boutons, badges, menus, liens
surface · 0Cartes de texte, étapes, témoignages
media · 8 pxVignettes, vidéos, photos
media-lg · 16 pxGrandes pièces de vitrine
MB
roundPastilles, avatars, interrupteurs

Composants

Nommés en BEM : un bloc, ses éléments, ses variantes. Chacun ne lit que ses propres tokens.

.ds-button --primary · --secondary · --rainbow · --sm --md --lg
.ds-button--inverse
.ds-badge · --brand --caps · --shimmer
En coursPhase 1Recommandé-20%
.ds-card · --featured --interactive

Brand Partner™

Une carte de texte : carrée, parce qu’on la clique.

Découvrir

Card

.ds-card__body · __icon · __title · __text · __cta

.ds-media · --lg
.ds-link--underline · .ds-kbd
Un lien qui se souligne au survol⌘KS
Outils · .ds-palette · .ds-system

Comment il est maintenu

Le site est livré comme un produit : chaque évolution suit le même circuit, et peut être annulée.

  1. 1

    Une branche par version

    Chaque évolution part de la production, isolée.

  2. 2

    Une preview

    Vercel publie une version de test à chaque modification.

  3. 3

    Une validation

    Rien n’est fusionné sans accord explicite.

  4. 4

    Un tag et une note

    Chaque version est numérotée et décrite.

Règles

  • Aucune couleur écrite à la main dans un composant.
  • Un composant ne lit que ses tokens comp.
  • Les classes utilitaires servent à la mise en page, pas à l’identité.
  • Chaque version garde la même hauteur de page, sauf changement voulu.

Journal des versions

  • v2.9Cette page : le design system documenté et en libre accès.
  • v2.8Navigation : projet suivant, tous les projets, palette ⌘K.
  • v2.7Tokens en trois niveaux, composants BEM, règle des angles, mode système.
  • v2.6.2La photo du survol de « Maxime » suit le curseur.
  • v2.6.1Langue du navigateur, agenda sur tous les appels à l’action.
  • v2.6Mesure sans cookie ni bannière, positionnement recentré.
  • v2.5Français indexable, images de partage, performance.
  • v2.4Mentions légales, hero sans JavaScript, accessibilité.
  • v2.0Migration de Figma Make vers Next.js, design inchangé.

Votre marque mérite le même socle.

Un design system, c’est ce qui fait durer une identité : chaque nouvelle page, chaque nouveau support part des mêmes règles. Parlons du vôtre.

Réserver un appel