Après avoir défini les bases colorimétriques et la voix typographique d’UniCore, il est temps d’aborder un autre pilier discret mais essentiel : les tailles.
Derrière chaque élément d’interface – bouton, image, carte, icône – se cache un système millimétré qui garantit cohérence et harmonie visuelle.
Voyons ensemble comment UniCore décompose ce pilier important en deux couches.
Les primitives : l’échelle de référence
Les tailles d’UniCore ne sont pas arbitraires : elles forment une échelle continue allant de 0px à 384px, incluant des incréments très fins pour les micro-ajustements (0,5px, 1,5px, 2,5px, 3,5px…).
Exemple d’échelle :
0px – 0,5px – 1px – 1,5px – 2px – 2,5px – 3px – 3,5px – 4px – 5px – 6px – 7px – 8px – 10px – … – 384px
Cette granularité permet :
• Une grande précision pour les micro-détails (bordures, icônes, ombres internes).
• Une cohérence visuelle sur tout le produit.
• Une facilité d’évolution en cas de refonte.
Les variables sémantiques : donner du sens aux tailles
Plutôt que d’utiliser directement “16px” ou “48px” dans un design, UniCore les encapsule dans des noms sémantiques qui traduisent leur usage.
Par exemple, w-0 correspond à 0px pour l’ensemble des équipements. w-1 correspond à 12px.
Tableau des valeurs de tailles sémantiques – UniCore V1.0
Les variables sémantiques sont utilisées pour les propriétés width et height.
Ce système garantit que, si une taille doit évoluer, il suffit de modifier la primitive associée sans passer au crible chaque élément du design.
Aparté : les tailles ≠ les espaces
Il est important de différencier les tailles (width/height) des espaces (margins/paddings).
Chez UniCore, les espaces représentent une collection à part entière, avec leurs propres primitives et règles.
Pourquoi ? Parce que la gestion du responsive ne s’applique pas de la même façon, les espaces s’adaptant plus dynamiquement que les tailles d’éléments fixes.
Aussi, les espacements influencent le rythme visuel, tandis que les tailles fixent la structure.
La gestion des tailles dans UniCore n’est pas seulement une affaire de pixels : c’est un langage visuel structuré.
Les primitives définissent la matière brute, les variables sémantiques en font un outil pratique et évolutif, et la séparation claire avec les espacements assure une flexibilité optimale.
En travaillant ainsi, vous garantissez que votre design reste cohérent, clair et facile à maintenir, quelle que soit la complexité de votre interface.
