Best-seller
Yoane Market — Design system v1.0
Fondations et composants de la marketplace de produits digitaux : interface en français, prix en FCFA, paiement MTN MoMo / Orange Money au numéro, sans email obligatoire. CSS vanilla (variables), JS progressif de 4 Ko, thème clair & sombre, accessible (WCAG 2.2 AA), mobile-first.
Mobile d’abordTesté à 390, 834 et 1440 px. Cibles tactiles ≥ 44 px.
LégerZéro framework, polices auto-hébergées, images WebP.
AccessibleContrastes AA, focus visibles, ARIA, mouvement réduit.
Thème
Le choix est mémorisé ; par défaut, on suit le réglage du téléphone.
Couleurs
Violet profond pour la marque et les actions, soleil pour les accents promo. Les couleurs opérateurs (MTN, Orange) sont réservées au paiement. Les tokens sémantiques changent en thème sombre ; les composants n’utilisent jamais les couleurs primitives directement.
Violet (marque)
50
100
200
300
400
500
600
700
800
900
950
Encre (neutres)
0
50
100
200
300
400
500
600
700
800
950
Sémantiques
Contrastes vérifiés (AA)
| Paire | Ratio clair | Ratio sombre |
|---|---|---|
| --text / --bg | 17,9 : 1 | 17,1 : 1 |
| --text-2 / --surface | 7,4 : 1 | 10,1 : 1 |
| --text-3 / --surface | 5,1 : 1 | 7,0 : 1 |
| blanc / --primary | 6,6 : 1 | 5,0 : 1 |
| --primary-text / --primary-soft | 7,9 : 1 | 7,6 : 1 |
Typographie
Space Grotesk pour les titres (caractère, chiffres larges pour les prix), Inter pour le texte, JetBrains Mono pour les numéros, références et clés. Échelle fluide (clamp) entre mobile et desktop.
Échelle
Vends en 1 minute
Catalogue
Les plus vendus
Pack ISO Linux
Récapitulatif
Paie avec ton téléphone, télécharge tout de suite.
Les fichiers sont livrés par un lien sécurisé, valable 15 minutes, après confirmation du paiement.
Commande #YM-24F8 · 11 nov. 2026
Nouveautés
+237 677 12 34 56 · prd_k7x2m9qa4d
Espacements & rayons
Grille de 4 px. Les sections respirent (48–96 px), les composants sont compacts. Rayons généreux pour un rendu doux et moderne.
Espacements
--sp-14 px
--sp-28 px
--sp-312 px
--sp-416 px
--sp-624 px
--sp-832 px
--sp-1248 px
--sp-1664 px
--sp-2496 px
Rayons
--r-xs
--r-sm
--r-md
--r-lg
--r-xl
--r-2xl
--r-full
Ombres & mouvement
Ombres douces et teintées. Animations courtes, avec ressort léger sur les micro-interactions ; tout est coupé si l’utilisateur préfère réduire les animations.
Élévation
--sh-xs
--sh-sm
--sh-md
--sh-lg
--sh-xl
--sh-primary
Durées & courbes
| --dur-fast | 120 ms — survols, pressions |
| --dur-base | 200 ms — toggles, menus |
| --dur-slow | 360 ms — modales, drawers, toasts |
| --ease-out | cubic-bezier(.16,1,.3,1) — entrées |
| --ease-spring | cubic-bezier(.34,1.56,.64,1) — cases, radios |
Icônes
Jeu maison au trait 2 px sur grille 24 px, inline SVG (aucune requête). Décoratives par défaut (aria-hidden), libellées quand elles sont seules dans un bouton.
Bibliothèque
Boutons
Un seul bouton primaire par zone. Hauteurs 34 / 44 / 54 px. États : survol, pression, focus clavier, désactivé, chargement.
Variantes
Tailles, icônes, états
Formulaires
Libellés toujours visibles, aide sous le champ, erreurs explicites en français avec icône (pas seulement la couleur). Hauteur 46 px, police 16 px pour éviter le zoom iOS.
Champs
FCFA
Ce code a expiré le 31 déc. 2025.
Markdown simple accepté.
Choix
Paiement Mobile Money
Le cœur du parcours : choisir l’opérateur, puis saisir le numéro (formaté automatiquement 6XX XX XX XX, indicatif +237 fixe). Aucun email requis. Le bouton reprend le nom de l’opérateur choisi.
Sélecteur + téléphone
Erreur de saisie
+237
Le numéro doit contenir 9 chiffres.
Prix & statuts
Prix toujours en FCFA entiers, espace fine insécable pour les milliers, devise en plus petit. Statuts de commande avec pastille + texte (lisible sans la couleur).
Prix
1 000FCFA5 000FCFAau lieu de 7 500 FCFA15 000FCFAGratuit250 000FCFA
Statuts de paiement
En attentePayéÉchouéExpiréRemboursé
En ligneBrouillon
Badges & tags
NeutreNouveau-40 %Best-sellerEbook
Alertes
Information
Ton accès est gardé 7 jours sur ce navigateur.
Paiement confirmé
Tes produits sont prêts.
En attente
Valide sur ton téléphone.
Échec
Solde insuffisant. Rien n’a été débité.
Cartes
La carte produit est cliquable en entier (lien étendu), garde un favori indépendant, et affiche type, créateur, prix et note.
Cartes produit
Nouveau
-40 %
Formation vidéo
Formation développeur web : de zéro à ton premier site
Doc4Geeks
15 000FCFAau lieu de 25 000 FCFA
Recherche & filtres
Recherche avec raccourci « / » et suggestions. Filtres en colonne sur desktop, en tiroir sur tablette/mobile, puces défilantes pour les catégories.
Recherche
Puces de filtre
Modales, drawers, toasts
Basés sur <dialog> natif : focus piégé, Échap pour fermer, retour du focus. La modale devient une feuille basse sur mobile. Les toasts sont annoncés aux lecteurs d’écran.
Démos
Paiement confirmé
1 000 FCFA reçus via MTN MoMo.
Paiement refusé
Solde insuffisant.
États vides, chargement, erreur
Chaque liste a ses 3 états. Le squelette reprend la forme du contenu pour éviter les sauts de mise en page.
États
Vérification du paiement…
Ça prend quelques secondes.
Erreur réseau
Vérifie ta connexion et réessaie.
Squelette & progression
Tableaux & KPI
Les tableaux deviennent des cartes empilées sous 640 px (libellés via data-label). Chiffres tabulaires alignés à droite.
Cartes KPI
Chiffre d’affaires
1 165 000 FCFA
↑ 24 %vs période préc.
Commandes
214
↑ 18 %vs période préc.
Réussite paiement
86,4 %
↓ 2,1 ptsvs période préc.
Panier moyen
5 444 FCFA
↑ 6 %vs période préc.
Tableau
| Commande | Client | Montant | Statut |
|---|---|---|---|
| #YM-24F8 | +237 6•• •• •• 29 | 1 000 FCFA | Payé |
| #YM-24F7 | +237 6•• •• •• 14 | 5 000 FCFA | En attente |
| #YM-24F6 | +237 6•• •• •• 70 | 8 000 FCFA | Échoué |
Graphique (placeholder SVG)
Courbe CA + période précédente en SVG pur, sans librairie : voir le tableau de bord.
Upload & livrables
Cinq types de livrables par produit : fichier (R2), lien externe, média (vidéo/audio/image, R2), texte d’instructions, clés de licence. Glisser-déposer avec progression ; les fichiers partent directement vers R2 en multipart.
Uploader
Types de livrables
Fichier
PDF, ZIP, APK — R2 privé, lien signé 15 min
Lien externe
URL cachée avant paiement, redirection contrôlée
Média
Vidéo / audio / image — lecture en ligne ou téléchargement
Texte
Instructions, lien de groupe, mot de passe
Licence
Une clé unique par achat, stock de clés
YMKT-8F2Q-ZP4L-77XAMaquettes
Pages clés construites uniquement avec ce design system.