Black Belt Design Library
Le design system publié de l’app iOS Black Belt : une grille, trois rayons, sept rôles typographiques et une même anatomie de carte, dessinés en clair et en sombre avec la feuille de style qui affiche les écrans de l’app.
Black Belt est une app d’entraînement au jiu-jitsu brésilien. Voici sa bibliothèque de design : le système lui-même, rendu à l’écran, plutôt qu’un document qui le décrit.
Ce qu’elle contient
- Fondations — une grille en base 8 avec un demi-pas de 4 pt, trois rayons, sept rôles typographiques répartis sur cinq tailles et trois graisses, et une palette neutre avec un accent et une seule teinte de graphique par écran
- La carte — toutes les cartes partagent la même anatomie : surtitre, titre, ligne de contexte, corps, légende, action. Seul le contenu du corps change
- Composants — chacun est dessiné selon les quatre couches de la méthode pixel-grid : grille, marges intérieures et zones, structure, typographie
- Surfaces — écrans complets et exemples de graphiques, tous présentés en clair et en sombre
- À ne jamais publier — les règles qui écartent un design avant son intégration
Pourquoi elle montre plutôt que de décrire
La bibliothèque tient dans une page autonome, sans import. Chaque exemple est dessiné par la feuille de style qui affiche le canvas des écrans de l’app : le composant ne peut donc pas diverger de sa documentation, puisque la documentation est le composant. Cette approche a obligé chaque règle à passer l’épreuve du rendu : aucune valeur d’espacement sans exemple concret n’a trouvé sa place sur la page.
Les contraintes qu’elle formalise
Ni gras ni demi-gras : l’accent passe par une graisse de 500 ou la couleur secondaire, jamais par une taille supérieure. Les cartes de contenu passif restent opaques et accessibles, tandis que la navigation et les interfaces temporaires adoptent le traitement de verre natif. Les graphiques utilisent une teinte par écran, chaque marque étant un dégradé de cette teinte.