La vue Système

La quatrième vue dérive le « tout le reste » d’un design system — rayon de coin, largeur de bordure, élévation et mouvement — à partir de la même base et du même ratio que votre typographie et vos couleurs.

Comment les effets sont dérivés

• Rayon — les paliers suivent base × ratio^(k/notes), arrondis à des valeurs de pixel nettes, de xs à 4xl plus full. Les surfaces imbriquées suivent la règle concentrique : rayon intérieur = rayon extérieur − padding, jamais égaux.
• Bordures — hairline, default, strong, heavy : quatre épaisseurs qui suivent l’échelle, plus la largeur et le décalage de l’anneau de focus.
• Élévation — une échelle d’ombres (2xs–2xl) dont la couleur dérive du neutre le plus sombre, de sorte que les ombres appartiennent à la palette au lieu d’être un noir générique.
• Mouvement — les durées sont des valeurs d’échelle en millisecondes (base × ratio^n : 150 · 200 · 267 · 355 …) et quatre courbes d’accélération par profil, dont une courbe accentuée pour les moments phares. Les démos du canevas sont en direct — appuyez sur lecture et comparez.

Édition

Chaque section a ses contrôles de départ dans sa propre carte — la base du rayon, le profil d’élévation, la largeur de bordure, le profil de mouvement — juste à côté de ce qu’ils affectent. La sélection et le déplacement pas à pas avec les flèches fonctionnent exactement comme dans les autres vues : les valeurs parcourent l’échelle.

Pourquoi les effets sont aussi sur l’échelle

Les rayons et les durées sont généralement les premiers tokens à pourrir : quelqu’un tape border-radius: 7px ou transition: 180ms et rien ne le signale. Quand les valeurs autorisées sont des paliers d’échelle, l’intrus se voit — et les exports couvrent l’intégralité de l’espace de noms de la cible (chaque nom de rayon et d’ombre Tailwind, chaque courbe d’accélération), de sorte qu’aucun utilitaire ne retombe silencieusement sur une valeur par défaut hors marque. Ce principe de complétude s’applique à chaque format d’export que l’outil livre.