--- version: alpha name: Kiosque (proposition) description: Charte graphique from scratch pour un POS destiné aux petits commerçants — marchés ouverts, forte lumière, usage à une main, faible littératie numérique. Priorité absolue à la lisibilité des montants, à la vitesse d'encaissement et à la confiance. colors: # ─── Marque ────────────────────────────────────────────── primary: "#0E7A5F" # Vert-émeraude profond — confiance + argent + croissance, sans être le bleu bancaire primary-dark: "#0A5C47" # Hover / états actifs primary-soft: "#E3F4EE" # Surfaces accentuées légères (light) accent: "#E4572E" # Terracotta vif — énergie, chaleur humaine, CTA secondaire, pin marque accent-soft: "#FDEAE3" # Fonds d'accent légers # ─── Fonctionnelles (sémantiques) ─────────────────────── success: "#12805C" # Vert — encaissement réussi (= argent qui entre). Distinct du primary. danger: "#C0392B" # Rouge brique — erreurs / annulations. RÉSERVÉ à l'erreur. warning: "#B7791F" # Ocre — alertes stock / sync en attente. Lisible en plein soleil. info: "#2563EB" # Bleu — infos, liens. Usage rare. # ─── Neutres (haute lisibilité) ───────────────────────── ink: "#1B2A26" # Texte principal — presque noir tirant sur le vert ink-soft: "#51635C" # Texte secondaire paper: "#FBFAF7" # Fond light — blanc cassé chaud (moins d'éblouissement que #FFF) surface: "#FFFFFF" # Cards light line: "#E3E0D9" # Bordures light night: "#12211C" # Fond dark — vert très sombre (pas noir pur) night-surface: "#1B322A" # Cards dark night-line: "#2A453B" # Bordures dark night-ink: "#F2F5F3" # Texte principal dark night-ink-soft: "#9DB4AB" # Texte secondaire dark typography: display: # Montant à l'écran de caisse (le plus lu) fontFamily: Inter fontSize: 2.5rem fontWeight: 700 lineHeight: 1.1 letterSpacing: "-0.02em" fontFeature: "'tnum' 1, 'lnum' 1" headline: fontFamily: Inter fontSize: 1.375rem fontWeight: 700 lineHeight: 1.25 letterSpacing: "-0.01em" title: fontFamily: Inter fontSize: 1.0625rem fontWeight: 600 lineHeight: 1.3 body: fontFamily: Inter fontSize: 1rem fontWeight: 400 lineHeight: 1.5 amount: # Prix dans les listes — chiffres tabulaires fontFamily: Inter fontSize: 1.125rem fontWeight: 600 lineHeight: 1.2 fontFeature: "'tnum' 1, 'lnum' 1" label: fontFamily: Inter fontSize: 0.8125rem fontWeight: 600 lineHeight: 1.3 letterSpacing: "0.02em" rounded: sm: 8px md: 14px lg: 24px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px components: button-primary: backgroundColor: "{colors.primary}" textColor: "#FFFFFF" rounded: "{rounded.md}" padding: 16px button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "#FFFFFF" button-accent: backgroundColor: "{colors.accent}" textColor: "#FFFFFF" rounded: "{rounded.md}" padding: 16px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: 16px key: # Touche du pavé numérique (min 60px) backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.md}" badge-success: backgroundColor: "{colors.success}" textColor: "#FFFFFF" rounded: "{rounded.sm}" badge-danger: backgroundColor: "{colors.danger}" textColor: "#FFFFFF" rounded: "{rounded.sm}" --- ## Overview **Kiosque** est une proposition de charte *from scratch* pour un POS destiné aux petits commerçants — boutiques de quartier, marchés, kiosques — en priorité en Afrique de l'Ouest. Trois réalités guident chaque choix : 1. **Le montant est le héros.** Ce que le commerçant lit le plus, c'est un prix ou un total. La lisibilité des chiffres (plein soleil, téléphone bas de gamme, vue fatiguée) prime sur l'esthétique. 2. **La vente doit être rapide.** Encaisser se fait souvent à une main, l'article dans l'autre, un client qui attend. Chaque fraction de seconde et chaque erreur de frappe comptent. 3. **La confiance se gagne sans jargon.** Beaucoup d'utilisateurs ont une faible littératie numérique. L'interface doit rassurer par la clarté, pas par des mots compliqués. Le ton : **un voisin fiable.** Professionnel mais chaleureux, jamais corporate-froid, jamais gadget. ## Colors ### Pourquoi ce vert et non le bleu bancaire Le bleu (« trust ») est la convention fintech occidentale — mais il est partout (banques, opérateurs MoMo), froid, et se dégrade mal en plein soleil. Pour un petit commerçant, l'argent qui entre c'est de la **croissance**, pas de la finance : le **vert-émeraude profond `#0E7A5F`** dit à la fois confiance, argent et vitalité, tout en se distinguant du bleu des banques et du vert flashy des apps crypto. Le **terracotta `#E4572E`** apporte la chaleur humaine et l'énergie du marché — réservé aux accents et à la marque, jamais aux erreurs. ### Hiérarchie (règle 60-30-10) - **60 % — Neutres chauds** (`paper`, `surface`, `ink`) : la donnée respire, zéro bruit visuel. - **30 % — Vert primaire** : navigation, sélections, structure. - **10 % — Terracotta + sémantiques** : CTA clés et statuts. ### Règles d'usage strictes - **Rouge `#C0392B` = erreur/annulation UNIQUEMENT.** Jamais décoratif, jamais pour un prix en promotion. - **Vert success `#12805C` = argent encaissé.** Distinct du primaire pour que « vente réussie » saute aux yeux. - **Warning ocre `#B7791F`** choisi pour rester lisible sur fond clair en plein soleil (l'ambre vif classique s'y efface). - **Fond `paper` blanc cassé** au lieu de blanc pur : réduit l'éblouissement sur écran en extérieur. - **Dark = vert très sombre `#12211C`**, pas noir pur : moins de halo, plus chaleureux. ### Contraste & plein soleil Toutes les paires texte/fond visent **WCAG AA minimum (4,5:1)**, AAA pour les montants. Les couleurs sémantiques sont toujours accompagnées d'un libellé texte (jamais la couleur seule). ## Typography ### Inter, une seule famille Une seule police variable — **Inter** — pour toute l'interface : lisible à petite taille sur écrans bas de gamme, open source, et surtout dotée de **chiffres tabulaires (`tnum`) + chiffres alignés (`lnum`)** natifs. Pour un POS, c'est non négociable : les montants doivent s'aligner verticalement dans les listes et ne pas « sauter » quand la valeur change. ### Le montant avant tout - **Display (écran de caisse)** : Inter 700, 40 px, `tnum`+`lnum`. Le total est la chose la plus lisible de tout l'appareil. - **Amount (listes)** : 18 px, 600, chiffres tabulaires — colonnes de prix parfaitement alignées. - **Body** : 16 px / 1.5 — jamais en dessous de 16 px pour le contenu courant (littératie + plein soleil). - **Label** : 13 px, 600, léger letter-spacing — pour les libellés de boutons et statuts. ### Règles - Toujours activer `font-variant-numeric: tabular-nums` pour tout chiffre (prix, quantités, totaux). - Jamais de corps en italique, en majuscules prolongées, ou centré. - Microcopy en langage simple et chaleureux : « C'est encaissé ! » plutôt que « Transaction validée ». ## Iconography **Style : icônes pleines et arrondies** (type Material Symbols Rounded, graisse 500). - Coins arrondis = chaleur ; pleines = lisibilité rapide même à petite taille / mauvais écran. - **Toujours un libellé texte** sous les icônes de navigation et pour toute action critique (Encaisser, Rembourser, Supprimer). Jamais d'icône seule dans la navigation principale. - Taille : 24 px dans les barres, 20 px dans les listes ; zone tactile réelle ≥ 48 px. ## Components ### Pavé numérique (cœur du POS) - **Disposition téléphone** (1-2-3 en haut), saisie plus rapide que la disposition calculatrice. - **Touches ≥ 60 px**, gouttière visuelle 2–4 px, retour haptique + changement d'état à chaque frappe. - **Pas de touche décimale** : saisie décalée droite→gauche (taper 5 → 0,05 ; 2 → 0,52 ; 0 → 5,20). - **Touche rapide `00`** à côté du 0 (la plupart des prix ronds). - **Pavé dans les 40 % inférieurs** de l'écran (zone du pouce) ; CTA « Encaisser » en bas à droite (réglable gauche/droite). - **30 % supérieurs réservés à la lecture** (total, articles) — jamais d'action à atteindre en haut. ### Boutons - Hauteur 56 px, pleine largeur sur mobile, radius 14 px, Inter 600 16 px. - Primaire : vert + texte blanc. Accent : terracotta + texte blanc (un seul CTA accent par écran). - Confirmation d'encaissement : **glisser pour confirmer** (swipe) plutôt qu'un simple tap — évite les déclenchements accidentels quand on tend l'appareil au client. ### Cartes & listes - Radius 14 px, padding 16 px, **bordure 1 px, pas d'ombre**. - Produit : nom (16 px 600) + prix en chiffres tabulaires + badge stock sémantique. ### Badges / statuts - Toujours icône + texte (ex. « ✓ Payé », « ⚠ Stock faible », « ✕ Échec »). - Fond sémantique plein, texte blanc, radius 8 px. ## Layout & Spacing - Grille d'espacement 4-8-16-24-40. - Zone tactile minimale **48 × 48 px** (60 px pour le pavé). - Marges d'écran 16 px ; contenu max en colonne pour garder la zone du pouce libre. - Navigation principale en **barre du bas** (4 destinations max), à portée de pouce. ## Elevation & Depth Pas d'ombres portées. La hiérarchie se fait par la couleur de surface et les bordures 1 px — plus lisible en plein soleil et plus léger sur GPU bas de gamme. Un seul niveau de surélévation (modales / panneaux) avec scrim à 40 %. ## Shapes Radius généreux (8-14-24) pour un rendu chaleureux et « à portée de doigt ». Boutons et cartes à 14 px ; badges à 8 px ; conteneurs plein écran (sheets, pavé) à 24 px en haut. ## Do's and Don'ts ### ✅ À faire - Mettre le total/montant en Display très grand, chiffres tabulaires. - Réserver le rouge aux erreurs et le vert-success aux encaissements. - Accompagner chaque statut coloré d'un libellé texte. - Placer les actions dans la zone du pouce (bas d'écran). - Utiliser un langage simple et rassurant. ### ❌ À éviter - Pas de bleu bancaire générique ni de palette arc-en-ciel. - Pas de texte courant sous 16 px, pas de chiffres proportionnels pour les montants. - Pas de dégradés, pas d'ombres portées multiples, pas de verre/flou. - Jamais d'icône seule pour une action d'argent. - Pas de tap simple pour confirmer un encaissement (préférer le swipe). ## Sources & critères (recherche) Synthèse issue de conventions POS/fintech pour petits commerçants : - **Couleurs** : hiérarchie primaire/secondaire/accent claire, contraste WCAG, éviter le trop-plein — Patrick Huijs, *Fintech brand colors guide*. - **Trust & patterns** : accessibilité comme signal de confiance, cibles ≥ 44 px, microcopy transparente, ne pas coder par la couleur seule — Eleken, *Modern Fintech Design Guide 2026*. - **Typographie** : Inter / IBM Plex Sans / Public Sans en tête pour la donnée financière ; `tnum`+`lnum` obligatoires — fontalternatives.com, *Best fonts for fintech*. - **Pavé POS** : disposition téléphone, touches ≥ 60 px, pas de touche décimale, zone du pouce 40 % bas, swipe-to-confirm — Corefy / Final POS / Dribbble mPOS.