Actions et états
Repos et survol ; navigation au clavier pour voir le focus.
Exemple activé. Aucune tenue ajoutée au panier.
Système de marque / Version 1
Trouvez
votre ligne.
Des surfaces franches, un signal rouge et une typographie qui donne le rythme. La tenue reste au centre de l’expérience.
La palette.
Une seule couleur de signal. Le texte, les états et les lignes organisent la page. Le plateau reçoit la silhouette.
Papier froid#F2F4F1
Encre#202624
Signal#B82E1B
Plateau#D5DCD5
Secondaire #5B645FFilet #BBC4BCErreur #A52318Succès #2B5B3C
Le rythme.
Tanker pour les titres et le nom. Switzer pour les descriptions, les tailles et les actions. Deux familles, servies localement.
Chaque pièce compte.TANKER 400 / TITRE PRINCIPAL
Votre tenue, pièce par pièce.TANKER 400 / SECTION
Choisissez votre silhouette, puis les pièces qui composent votre tenue. Vérifiez la taille de chaque article avant de l’ajouter au panier.
SWITZER 400 / 16 PXCasque · Masque · Veste · Combinaison · Pantalon · Gants · ChaussuresSWITZER 500 / INTERFACE
Les gestes.
Cibles tactiles de 44 px au minimum. Sélection pleine, focus visible et libellés explicites. La couleur n’explique jamais seule un état.
Taille
XL indisponible dans cet exemple.
La sélection met à jour ce champ.
Champ en erreur
Choisissez une pointure avant d’ajouter cette pièce.
Composition
Une combinaison remplace la veste et le pantalon. Le casque et le masque peuvent se porter ensemble.
La boutique demandera confirmation avant de remplacer des pièces.
Les repères.
Tabler Icons, licence MIT. Un seul jeu, peu d’icônes. Les actions gardent leur texte.
Le nom.
Mot-symbole typographique droit. Slash rouge dans les compositions larges ; version monochrome ou compacte selon le support.
Principal
AERVIK/
Sur fond encre
AERVIK/
La grille.
Douze colonnes sur ordinateur, quatre sur téléphone. Marges 40 / 28 / 18 px ; gouttière 24 / 16 px. Le fond reste un aplat.
01
02
03
04
05
06
07
08
09
10
11
12
Le mouvement.
Un déplacement bref, sans rebond. Le contenu garde sa place. Avec le réglage de mouvement réduit, l’état final apparaît immédiatement.
La tenue
prend forme.
prend forme.