🛍️
DjassaLink
Design System
← Retour
Vue d'ensemble

Marché, mais moderne

Un système pensé pour les marchandes d'Abidjan : chaleureux, lisible en plein soleil, taillé pour le pouce. Pas de bleu corporate. Pas de tableau de bord lourd. Juste l'essentiel, bien posé.

Mobile-first

Conçu pour le pouce, en 3G.

Lisible au soleil

Contrastes élevés, ombres douces.

Identité wax

Terracotta + vert + doré, sans cliché.

Couleurs

Palette

Tokens sémantiques. N'utilise jamais une valeur brute en composant — toujours via Tailwind (ex. bg-primary).

Terracotta
--primary
CTA principal, marque
Terracotta clair
--primary-glow
Dégradé chaleureux
Vert wax
--accent
Identité africaine, accents
Doré
--gold
Récompenses, premium, étoiles
Succès
--success
Payé, livré, validé
Attention
--warning
En attente, à relancer
Erreur
--destructive
Annulé, refusé, danger
Crème (fond)
--background
Fond global, chaleureux
Carte
--card
Surfaces, cartes
Secondaire
--secondary
Boutons doux, fonds neutres
Atténué
--muted
Texte secondaire, placeholders
Dégradé chaud
Dégradé hero
Pattern wax
Typographie

DM Sans — échelle sémantique

Une seule famille (DM Sans) du PDF au mobile en passant par l'admin. Utiliser les classes sémantiques .text-h1, .text-body, .text-amount… plutôt que des tailles ad hoc.

Familles
DM Sans — Akwaba Abidjan--font-sans
61 500 FCFA--font-mono

DM Sans est aussi embarquée dans les reçus PDF — cohérence pixel-perfect entre l'app et l'impression.

Échelle sémantique
98 500 FCFA.text-display
Tableau de bord.text-h1
Mes commandes.text-h2
Pagne wax 6 yards.text-h3
Livraison à Yopougon Niangon ce soir..text-body
Mise à jour il y a 2 min.text-small
Statut paiement.text-caption
Montants (tabular-nums)
61 500 FCFA
124 000 FCFA
2 500 FCFA

Les chiffres s'alignent verticalement grâce à .text-amount.

Poids
Regular 400 — corps long
Medium 500 — étiquettes
Semibold 600 — boutons & titres
Bold 700 — H1/H2 & totaux
Boutons

CTA visibles, pouces heureux

Hauteur minimum 44 px. Le primaire est dégradé chaud. Coins arrondis (rounded-full ou rounded-xl).

Primaire
Secondaire
Succès (encaisser)
Discret
Danger
Icône flottante (FAB)
Cartes

Surfaces propres

Toujours rounded-2xl, ombre douce, bordure discrète. Le contenu respire.

🧵
Pagne wax 6 yards
12 en stock
30 000 FCFA
Ventes du jour
98 500 FCFA
7 ventes · +24% vs hier
Commande #1042
Fatou — Yopougon
En attente
Total61 500 FCFA
Formulaires

Champs lisibles, gros doigts

Hauteur 48 px, label au-dessus, focus sur l'anneau primaire.

Visible par tes clientes
+225
Adresse email invalide
Badges

Étiquettes courtes

Toujours en MAJUSCULES légères, padding serré, fond doux + texte fort.

NouveauTop vente⭐ PremiumEn stockStock faibleRuptureBrouillon
Statuts commande

Chips d'état

Couleur = signal immédiat. Icône = lecture en un clin d'œil.

Nouvelle En attente Confirmée En préparation En livraison Livrée Annulée
Statuts paiement

Chips paiement

Mobile money + cash + dépôt. Toujours visibles dans la liste de commandes.

✓ Payé (Mobile Money)PartielEn attenteCash à la livraisonÉchec paiement
Espacements

Échelle 4 px

Tout est multiple de 4. Padding par défaut : 16 px (p-4). Sections : 32–48 px.

p-0.5
2 pxHairlines
p-1
4 pxIcônes serrées
p-2
8 pxGap interne
p-3
12 pxPadding compact
p-4
16 pxPadding par défaut
p-6
24 pxSections compactes
p-8
32 pxSections
p-12
48 pxBlocs majeurs
Iconographie

Lucide, taille 16–24

Stroke 2 px, monoline. Une icône = une action. Jamais décorative seule.

Navigation mobile

Bottom nav, 4–5 entrées

Toujours visible, pouces accessibles. Active = couleur primaire + label visible.

Tableau de bord
Aperçu de l'app…

Variante : FAB central pour « Nouvelle vente ».

Selects

Sélecteurs & onglets

Préférer les tabs aux selects pour 2–4 choix visibles. Select pour listes longues.

Select (chevron, hauteur 48)
Tabs (segmented)
Recherche

Barres de recherche

Toujours avec icône loupe à gauche, raccourci clavier ⌘K sur desktop.

Dates

Sélecteur de date

Champ + popover calendrier. Plages rapides : aujourd'hui, 7j, 30j.

Champ date
Plages rapides
Quantité

Stepper +/−

Tactile, ≥44 px, valeur en tabular-nums au centre.

3
Pagne wax · 30 000 FCFA × 3
KPI

Cartes de mesure

Une métrique = une carte. Toujours un delta vs période comparée.

Ventes du jour
98 500FCFA
+24% vs hier
Commandes
12
+3 vs hier
Panier moyen
8 200FCFA
-5% vs hier
Produits

Cartes produit

Image carrée 1:1, prix proéminent, stock visible.

🧵
Pagne wax 6 yards
30 000 FCFA12 en stock
👗
Robe bazin brodée
45 000 FCFA3 restant
👜
Sac raphia
18 500 FCFARupture
Timeline

Suivi de commande

Étapes claires, l'étape courante est mise en valeur, les passées sont validées.

  1. Commande reçue
    10:24
  2. Confirmée par la boutique
    10:31
  3. 3
    En préparation
    11:05
  4. 4
    En livraison
    —
  5. 5
    Livrée
    —
Paiement

Cartes mode de paiement

Logo coloré + nom + délai. Sélection = bordure primaire + check.

Conversations

Bulles de messagerie

Boutique à droite (primaire), cliente à gauche (carte). Heure discrète.

Bonjour, le pagne wax est encore dispo ?
10:24
Oui, 30 000 FCFA. Je peux livrer ce soir à Yopougon.
10:25 ✓✓
Parfait, je prends 🙏
10:26
Caisse

Pavé numérique

Touches généreuses (h-14), retour arrière en bas-droite, valider en accent.

12 500 FCFA
Filtres

Chips filtres

Filtres actifs visibles, croix pour retirer, bouton « Effacer tout ».

Statut : En attente Période : 7 jours Livraison : Yopougon
Tableaux

Tables denses (desktop)

Lignes hover, header sticky, montants alignés à droite en tabular-nums.

ClienteStatutTotal
#1042Fatou K. En attente61 500 FCFA
#1041Awa D. Livrée30 000 FCFA
#1040Mariam B. En préparation18 500 FCFA
Desktop

Sidebar & topbar

Backoffice : sidebar 240 px, topbar 56 px, contenu max 1200 px.

Recherche…
AK
Zone de contenu (max 1200 px)
Drawers

Panneau latéral

Détail rapide sans quitter la liste. Largeur 420 px, fermeture par overlay.

Liste des commandes (en arrière-plan)
Commande
#1042
Fatou Koné
+225 07 12 34 56 78
Yopougon Niangon
En attente
Primitives

Composants réutilisables

Importer depuis @/components/states et @/components/data plutôt que recoder.

KPICard
Ventes du jour
124 500 FCFA
+12.4%vs hier
Commandes
37
-3.2%vs hier
Panier moyen
3 365 FCFA
0.0%stable
OrderTimeline

  1. Commande reçue

    Via vitrine WhatsApp

  2. Paiement confirmé

    Orange Money — 61 500 FCFA

  3. En préparation

    Kadi prépare le colis

  4. En livraison

  5. Livrée

ChatBubble
Conversation démarrée — 14:01
Awa
Bonjour, je voudrais 2 pagnes wax taille L 🙏
14:02
Bonjour Awa ! Disponibles, 12 000 FCFA pièce. Livraison Cocody ?
14:03
Awa
EmptyState / LoadingState / ErrorState

Aucune commande pour l'instant

Partage ta vitrine pour recevoir tes premières commandes.

spinner
Chargement…
list-skeleton
Inventaire

Couverture des 20 familles

Statut de chaque famille du brief unifié DjassaLink.

Boutons✓ Couvert
Inputs✓ Couvert
Selects✓ Couvert
Recherche✓ Couvert
Date pickers✓ Couvert
Quantity steppers✓ Couvert
Status badges✓ Couvert
KPI cards✓ Couvert
Product cards✓ Couvert
Order timeline✓ Couvert
Payment method cards✓ Couvert
Chat bubbles✓ Couvert
Cashier keypad✓ Couvert
Tables✓ Couvert
Filters✓ Couvert
Tabs✓ Couvert
Sidebars✓ Couvert
Topbars✓ Couvert
Drawer panels✓ Couvert
Bottom nav (mobile)✓ Couvert
Principes

À faire / à éviter

À faire
  • Cibles tactiles ≥ 44 px
  • Montants en tabular-nums
  • Couleurs sémantiques (success / warning / destructive)
  • Coins arrondis 2xl partout
  • Une seule action primaire par écran
À éviter
  • Bleu corporate / look banque
  • Tableaux denses style ERP
  • Couleurs en dur dans les composants
  • Plus de 2 polices
  • Ombres lourdes ou néons