Phase 01 · Fondations
Le design system NavairShop
Une bibliothèque restreinte, cohérente et accessible : tokens de couleur et de typographie, composants réutilisables, micro-interactions mesurées. Aucune donnée métier à ce stade.
Couleurs
Blanc dominant, noir profond, gris très clair, et une seule couleur d'accent modifiable via la variable --brand. Tous les couples respectent WCAG AA.
background
Blanc dominant
surface
Fond secondaire
foreground
Noir profond · 15.9:1
muted-foreground
Texte secondaire · 4.7:1
brand
Accent unique · 5.4:1
brand-subtle
Accent atténué
border
Séparateurs
destructive
Erreur · 7.1:1
Typographie
Instrument Serif pour les titres, Work Sans pour le texte courant. Hiérarchie fixée par des utilitaires (text-h1 … text-caption).
Display · Objets qui durent
H1 · Collection Atelier
H2 · Matériaux et gestes
H3 · Enceinte Naviar 01
H4 · Détails de fabrication
H5 · Livraison et retours
H6 · Référence produit
Body · Chaque objet est produit en série limitée, dans des ateliers sélectionnés pour leur maîtrise d'un seul matériau. Nous préférons la retenue à la démonstration.
Caption · Dimensions et poids indiqués hors emballage.
Overline · Nouveautés
Élévation & rayons
Trois niveaux d'ombre maximum, un rayon de base discret.
e1 · repos
e2 · hover / carte
e3 · overlay
Boutons
Primaire, secondaire, ghost et icône, avec états hover, focus clavier, désactivé et chargement.
Variantes
Tailles
Icône
États
Champs de saisie
Chaque champ est associé à son label, son aide et son message d'erreur via les attributs ARIA.
Utilisée pour le suivi de commande.
Ce code postal n'est pas desservi.
Livraison disponible en 48 h.
Optionnel, 200 caractères maximum.
Badges
Trois usages produit, sans surcharge visuelle.
Promo −20 %NouveautéRupture de stockÉdition limitéeFait main
Cartes
Carte produit, carte collection et carte blog en variante placeholder, avec hover léger.
Collection Atelier
12 objets
Collection Nuit
8 objets
· 6 min
Pourquoi nous fabriquons moins, mieux
Une conversation avec nos ateliers sur la matière, la patience et la valeur du geste répété.
· 4 min
Le son, sans démonstration
Comment nous accordons nos enceintes dans des pièces réelles plutôt qu'en chambre sourde.
· 7 min
Trois ateliers, une exigence
Portraits des maisons avec lesquelles nous travaillons depuis nos premières séries.
Skeleton loaders
Un squelette par type de carte, aligné sur la géométrie du contenu final.
Chargement du produit
Chargement du produit
Chargement du produit
Chargement du produit
Chargement de la collection
Chargement de la collection
Chargement de l'article
Chargement de l'article
Chargement de l'article
Tables
Structure sobre destinée à l'administration.
| Commande | Client | Statut | Total |
|---|---|---|---|
| NAV-10482 | A. Lindqvist | Expédiée | 1 770 € |
| NAV-10481 | M. Tanaka | En préparation | 480 € |
| NAV-10480 | C. Moreau | Remboursée | 290 € |
Modales & drawers
Modale centrée, panier latéral et filtres mobiles : focus piégé, fermeture au clavier.
Notifications
Messages courts, non bloquants, annoncés aux lecteurs d'écran.
Micro-interactions
Trois transitions standard : révélation au scroll, hover léger sur les cartes, transition de page douce. Toutes respectent prefers-reduced-motion.
Reveal au scroll
opacity 0 → 1, y 14 → 0, 450 ms
Hover carte
y 0 → −4, 200 ms
Transition de page
fade + 8 px, 450 ms / 200 ms
Courbe unique : cubic-bezier(0.22, 1, 0.36, 1). Aucune animation décorative.