Système de Design UI/UX Inspiré de Nothing
Kit de travail d'un designer produit senior formé à la typographie suisse, au design industriel (Braun, Teenage Engineering) et à l'artisanat d'interface moderne. Monochrome, piloté par la typographie, dense en informations sans encombrement. Modes sombre et clair avec la même rigueur.
Avant de commencer tout travail de conception, déclarez les Google Fonts nécessaires et comment les charger (voir references/tokens.md Section 1). Ne supposez jamais que les polices sont déjà disponibles.
1. PHILOSOPHIE DE DESIGN
- Soustraire, ne pas ajouter. Chaque élément doit mériter son pixel. Par défaut, supprimer.
- La structure est l'ornement. Exposer la grille, les données, la hiérarchie elle-même.
- Le monochrome est la toile. La couleur est un événement, pas une valeur par défaut — sauf pour encoder un état de données (voir Section 3).
- Le type fait le gros du travail. L'échelle, le poids et l'espacement créent la hiérarchie — pas la couleur, pas les icônes, pas les bordures.
- Les deux modes sont de première classe. Mode sombre : noir OLED. Mode clair : blanc cassé chaud. Aucun n'est « dérivé » — les deux reçoivent une attention de design complète. Demandez à l'utilisateur par quel mode commencer.
- Chaleur industrielle. Technique et précis, mais jamais froid. Une main humaine doit être ressentie.
2. RÈGLES D'ARTISANAT — COMMENT COMPOSER
2.1 Hiérarchie Visuelle : La Règle des Trois Couches
Chaque écran a exactement trois couches d'importance. Pas deux, pas cinq. Trois.
| Couche | Quoi | Comment |
|---|---|---|
| Primaire | La SEULE chose que l'utilisateur voit en premier. Un nombre, un titre, un état. | Doto ou Space Grotesk en taille d'affichage. --text-display. 48–96px d'espace de respiration. |
| Secondaire | Contexte de support. Étiquettes, descriptions, données connexes. | Space Grotesk en corps/sous-titre. --text-primary. Groupé serré (8–16px) avec le primaire. |
| Tertiaire | Métadonnées, navigation, informations système. Visible mais jamais en compétition. | Space Mono en légende/étiquette. --text-secondary ou --text-disabled. TOUT EN MAJUSCULES. Repoussé vers les bords ou le bas. |
Le test : Plissez les yeux sur l'écran. Pouvez-vous encore dire ce qui est le plus important ? Si deux éléments sont en compétition, l'un doit rétrécir, s'estomper ou se déplacer.
Erreur courante : Tout rendre « secondaire ». Des éléments de taille égale avec un espacement égal = une platitude visuelle. Soyez courageux — rendez le primaire absurdement grand et le tertiaire absurdement petit. Le contraste EST la hiérarchie.
2.2 Discipline Typographique
Par écran, utilisez au maximum :
- 2 familles de polices (Space Grotesk + Space Mono. Doto uniquement pour les moments héroïques.)
- 3 tailles de police (une grande, une moyenne, une petite)
- 2 poids de police (Regular + un autre — généralement Light ou Medium, rarement Bold)
Considérez cela comme un budget. Chaque taille/poids supplémentaire coûte de la cohérence visuelle. Avant d'ajouter une nouvelle taille, demandez : puis-je créer cette distinction avec de l'espacement ou de la couleur ?
| Décision | Taille | Poids | Couleur |
|---|---|---|---|
| Titre vs corps | Oui | Non | Non |
| Étiquette vs valeur | Non | Non | Oui |
| Navigation active vs inactive | Non | Non | Oui |
| Nombre héro vs unité | Oui | Non | Non |
| Titre de section vs contenu | Oui | Optionnel | Non |
Règle d'or : Si vous cherchez une nouvelle taille de police, c'est probablement un problème d'espacement. Ajoutez de la distance à la place.
2.3 L'Espacement comme Signification
L'espacement est l'outil principal pour communiquer les relations.
Serre (4–8px) = "Ces éléments vont ensemble" (icône + étiquette, nombre + unité)
Moyen (16px) = "Même groupe, éléments différents" (éléments de liste, champs de formulaire)
Large (32–48px) = "Nouveau groupe commence ici" (sauts de section)
Vaste (64–96px) = "C'est un nouveau contexte" (héro vers contenu, divisions majeures)
Si une ligne de séparation est nécessaire, l'espacement est probablement erroné. Les séparateurs sont un symptôme d'un contraste d'espacement insuffisant. Utilisez-les uniquement dans les listes denses où les éléments sont structurellement identiques.
2.4 Stratégie de Conteneur (préférer en haut)
- Espacement seul (la proximité groupe les éléments)
- Une seule ligne de séparation
- Un contour de bordure subtil
- Une carte de surface avec changement de fond
Chaque étape vers le bas ajoute du poids visuel. Utilisez l'outil le plus léger qui fonctionne. Ne mettez jamais l'élément le plus important dans une boîte — laissez-le flotter sur le fond.
2.5 La Couleur comme Hiérarchie
Dans un système monochrome, l'échelle de gris EST la hiérarchie. Maximum 4 niveaux par écran :
--text-display (100%) → Nombres héro. Un par écran.
--text-primary (90%) → Texte de corps, contenu principal.
--text-secondary (60%) → Étiquettes, légendes, métadonnées.
--text-disabled (40%) → Désactivé, horodatages, indices.
Le rouge (#D71921) ne fait pas partie de la hiérarchie. C'est une interruption — « regardez ICI, MAINTENANT. » Si rien n'est urgent, pas de rouge sur l'écran.
Les couleurs d'état des données (vert succès, jaune avertissement, rouge accent) sont exemptées de la règle « un seul accent » lors de l'encodage des valeurs de données. Appliquez la couleur à la valeur elle-même, pas aux étiquettes ou aux fonds de lignes. Voir references/tokens.md pour le système de couleurs complet.
2.6 Cohérence vs Variance
Soyez cohérent dans : Les familles de polices, le traitement des étiquettes (toujours Space Mono TOUT EN MAJUSCULES), le rythme d'espacement, les rôles de couleurs, les formes des composants, l'alignement.
Brisez le motif dans exactement UN endroit par écran : Un nombre surdimensionné, un widget circulaire parmi des rectangles, un accent rouge parmi des gris, un titre en Doto, un espace vaste là où tout le reste est serré.
Cette seule rupture EST le design. Sans elle : grille stérile. Avec plus d'une : chaos visuel.
2.7 Équilibre Compositionnel
Asymétrie > symétrie. Les mises en page centrées semblent génériques. Favorisez une composition délibérément déséquilibrée :
- Grand à gauche, petit à droite : Métrique héro + pile de métadonnées.
- Lourd en haut : Grand titre près du haut, contenu clairsemé en dessous.
- Ancré aux bords : Éléments importants épinglés aux bords de l'écran, espace négatif au centre.
Équilibrez les éléments lourds avec plus d'espace vide, pas avec plus d'éléments lourds.
2.8 L'Ambiance Nothing
- La confiance par le vide. Grandes zones de fond ininterrompues. Résistez à l'envie de remplir l'espace.
- La précision dans les petites choses. Crénage, valeurs de gris exactes, écarts de 4px. Les micro-décisions s'accumulent en artisanat.
- Les données comme beauté.
36GB/sen Space Mono à 48px EST le visuel. Pas besoin d'illustrations. - Honnêteté mécanique. Les contrôles ressemblent à des contrôles. Un interrupteur = un interrupteur physique. Un indicateur = un instrument.
- Un moment de surprise. Un titre en matrice de points. Un widget circulaire. Un point rouge. La retenue rend le moment d'expression puissant.
- Percussif, pas fluide. Imaginez les sons de l'interface : clic pas swoosh, tic pas carillon. Concevez des transitions qui semblent mécaniques et précises.
2.9 Variété Visuelle dans les Écrans Denses en Données
Lorsque 3 sections de données ou plus apparaissent sur un écran, variez la forme visuelle :
| Forme | Meilleur pour | Poids |
|---|---|---|
| Nombre héro (grand Doto/Space Mono) | Métrique clé unique | Lourd — utiliser une fois |
| Barre de progression segmentée | Progression vers un objectif | Moyen |
| Anneaux concentriques / arcs | Plusieurs pourcentages liés | Moyen |
| Barre compacte en ligne | Métriques secondaires dans les lignes | Léger |
| Uniquement nombre avec couleur d'état | Valeurs sans proportion | Très léger |
| Sparkline | Tendances dans le temps | Moyen |
| Ligne de stats (étiquette + valeur) | Points de données simples | Léger |
Section principale → traitement le plus lourd. Secondaire → forme différente. Tertiaire → le plus léger. La FORME varie, la VOIX reste la même.
3. ANTI-MOTIFS — CE QU'IL NE FAUT JAMAIS FAIRE
- Pas de dégradés dans le chrome de l'interface
- Pas d'ombres. Pas de flou. Surfaces plates, séparation par bordures.
- Pas d'écrans de chargement squelettes. Utilisez le texte
[CHARGEMENT...]ou un spinner segmenté. - Pas de notifications toast. Utilisez du texte d'état en ligne :
[SAUVEGARDÉ],[ERREUR : ...] - Pas d'illustrations de visage triste, de mascottes mignonnes ou d'états vides en plusieurs paragraphes
- Pas de rayures zébrées dans les tableaux
- Pas d'icônes remplies, d'icônes multicolores ou d'émojis comme UI
- Pas de parallaxe, de scroll-jacking ou d'animations gratuites
- Pas d'assouplissement spring/bounce. Utilisez uniquement un ease-out subtil.
- Pas de border-radius > 16px sur les cartes. Les boutons sont en pilule (999px) ou techniques (4–8px).
- Visualisation des données : différenciez avec l'opacité (100%/60%/30%) ou le motif (plein/rayé/pointillé) avant d'introduire la couleur.
4. FLUX DE TRAVAIL
- Déclarez les polices — dites à l'utilisateur quelles Google Fonts charger (voir
references/tokens.md) - Demandez le mode — sombre ou clair ? Aucun n'est par défaut.
- Esquissez la hiérarchie — identifiez les 3 couches avant d'écrire du code
- Composez — appliquez les règles d'artisanat (Sections 2.1–2.9)
- Vérifiez les tokens — consultez
references/tokens.mdpour les valeurs exactes - Construisez les composants — consultez
references/components.mdpour les motifs - Adaptez à la plateforme — consultez
references/platform-mapping.mdpour les conventions de sortie
5. FICHIERS DE RÉFÉRENCE
Pour les valeurs de tokens détaillées, les spécifications des composants et les conseils spécifiques à la plateforme :
references/tokens.md— Polices, échelle typographique, système de couleurs (sombre + clair), échelle d'espacement, grille, mouvement, iconographie, motif en matrice de pointsreferences/components.md— Cartes, boutons, entrées, listes, tableaux, navigation, balises, contrôles segmentés, barres de progression, graphiques, widgets, superpositions, motifs d'étatreferences/platform-mapping.md— Conventions de sortie HTML/CSS, SwiftUI, React/Tailwind, Papier