Formes et espacements
Les rayons d'arrondi et l'échelle d'espacement. Deux grilles courtes dont tout le reste du kit dérive.
Rayons
Huit valeurs, montrées sur un carré constant : c'est le rapport entre le rayon et la surface qui se lit, pas le rayon seul.
Espacements
L'échelle va de 0 à 160 px, par pas de 4 puis de 8, et finit sur 120 et 160. Chaque barre est rendue à sa vraie largeur.
Quel rayon pour quoi
Le rayon ne se choisit pas au jugé : Monstera l'attribue par famille de composants, et quatre valeurs suffisent à couvrir l'interface.
| Famille | Rayon |
|---|---|
| Boutons | full, en pilule |
| Liste, menu, élément interne | sm, 8 px |
| Carte et menu déroulant | lg, 16 px |
| Feuille et modale | xl, 24 px |
La logique est celle de la profondeur : plus une surface est proche du lecteur et couvre l'écran, plus son rayon est grand. Une feuille qui remonte du bas s'arrondit plus qu'une carte posée dans le flux, qui s'arrondit elle-même plus qu'une rangée de liste.
xs (4 px) ne figure pas dans ce tableau : il est réservé aux éléments minuscules dont le rayon des familles écraserait la forme, au premier rang desquels le Badge. Et md (12 px) n'appartient à aucune famille : un composant qui l'emploie sur son cadre est presque toujours une carte qui s'ignore. 2xl (32 px) et 3xl (40 px) n'en ont pas non plus : aucun composant du kit ne les emploie.
Couleurs
Les rampes du kit. Chaque rôle décline cinq niveaux, du plus discret au plus contrasté, et les composants ne piochent jamais ailleurs.
Grille
Les trois grilles de Monstera : une mobile à 4 colonnes, deux desktop à 12. Elles ne gouvernent que l'axe horizontal, le rythme vertical relève des espacements.