Design system · v1
Un seul objet par écran.
Un accent bleu, jamais plus de 5 % de la surface visible. Une seule famille typographique, des tailles très contrastées, un interlettrage négatif sur les gros titres. Le vide est un matériau : 96 px entre deux sections en desktop, 56 px en mobile.
01 · Couleurs
Jetons
Les valeurs basculent automatiquement selon prefers-color-scheme, ou manuellement via la bascule en en-tête.
--bg
#FAFAF8 · #0A0A0B
Fond
--surface
#FFFFFF · #141417
Cartes
--ink
#0E0E10 · #F5F5F7
Texte principal
--ink-2
#6B6B75 · #9A9AA5
Texte secondaire
--line
#E6E6E1 · #232327
Bordures 1 px
--accent
#0B5FFF · #4D8DFF
CTA, liens (≤ 5 % de la surface)
--gold
#B8963F · #D4AF61
Excellence uniquement
--success
#0E9F6E · #34D399
Stock, livraison
--alert
#D9372B · #F87171
Promo, rupture
02 · Typographie
Inter, une seule famille
Chiffres tabulaires obligatoires pour tous les prix, espace fine insécable comme séparateur de milliers.
display
Titanium.
title-xl
Les six essentiels du moment.
title-l
Comment il se compare
body 16
Le téléphone, sans compromis. Prix affiché TVA incluse, garantie 12 mois locale.
caption 13.5
Livré aujourd’hui entre 18 h et 20 h.
eyebrow
Sélection éditoriale
03 · Composants
Primitives
Boutons, prix, badges, notes, sélecteurs. Tout est accessible au clavier avec un anneau de focus de 2 px.
Boutons
Prix
Rendu : 1 250 000 FCFA — espace fine insécable, jamais de décimales.
Badges & notes
Champs
Labels visibles, jamais de placeholder en guise de label.
04 · Iconographie
Sprite maison, trait 1,5 px
39 icônes dessinées pour le projet, ~3 Ko au total. Aucune librairie d’icônes.
- arrow
- arrowLeft
- chevronDown
- chevronRight
- search
- bag
- heart
- compare
- check
- close
- menu
- sun
- moon
- truck
- shield
- phone
- refresh
- camera
- battery
- chip
- sparkle
- pin
- chat
- lock
- sliders
- grid
- list
- star
- clock
- invoice
- user
- plus
- minus
- zoom
- rotate
- ar
- bolt
- wifi
05 · Rendu produit
Dessiné, pas photographié
Les appareils sont des SVG générés : 5 Ko, nets sur tous les écrans, coloris piloté par le token du produit, zéro requête réseau, zéro CLS.
06 · Mouvement
Un chuchotement
200 à 600 ms, courbe cubic-bezier(0.22, 1, 0.36, 1). Jamais de rebond. prefers-reduced-motion ramène tout à un fondu court.
Survol de carte
500 ms · élévation + bascule de face
Changement de stockage
300 ms · count-up du prix
Ouverture du panier
420 ms · glissement depuis la droite