Cluster C4 : CSS et design
Guide visuel CSS : border-radius et formes
Le rayon et les formes influencent directement la hiérarchie visuelle, la sensation de clic et le ton de la marque. Une logique de système tient mieux que des valeurs improvisées.
Définir les rayons comme des tokens
Si cartes, champs, boutons et modales utilisent chacun leurs propres valeurs, l'interface perd rapidement sa cohérence.
Une petite échelle de rayons reliée à des rôles de composants simplifie à la fois la production et la revue.
Utiliser les formes pour porter du sens
- Triangles, encoches et clip-path servent bien les callouts et les indices directionnels.
- Réserver les clip-path complexes aux surfaces contrôlées avec un fallback rectangulaire.
- Gérer formes, motifs et variations d'angles comme un même langage visuel.
Exemple pratique entrée/sortie
Entrée
Composant : carte promo Besoin : coins doux en 16px + encoche en haut à droite
Sortie
border-radius: 16px clip-path: polygon(...) fallback : carte à coins arrondis uniquement