Le Style Guide UI

Pourquoi c'est important

Un style guide UI rassemble toutes les regles visuelles de votre produit en un seul document. C'est ce qui garantit la cohérence entre designers, devs et pages. Sans lui, chaque ecran est une reinvention, et votre produit perd en crédibilité (NN/g, 2023).

Le framework

1. 01

   1. Palette de couleurs

   Primaire, secondaire, neutres, etats (succes, erreur, warning). Documentez les codes hex, les ratios de contraste et les usages autorises.

2. 02

   2. Typographie

   Famille, graisses, tailles pour chaque niveau (H1 a body). Definissez le line-height et le letter-spacing. Pas de freestyle.

3. 03

   3. Grille & Espacement

   Base unit (4px ou 8px), marges, paddings, gutters. Un système spatial coherent rend les layouts previsibles et harmonieux.

4. 04

   4. Boutons & Inputs

   Chaque état documente : default, hover, focus, disabled, loading. Couleurs, padding, radius, taille du texte, tout est fixe.

5. 05

   Style Guide vs Design System

   Le style guide est un enfant du design system. Le design system inclut aussi la component library, les patterns, la gouvernance et les principes. Commencez par le style guide, le reste viendra naturellement.

Pour aller plus loin