🛍️
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

Système typographique

Une seule famille système, ronde et lisible. La hiérarchie vient de la taille et du poids — pas de la fantaisie.

98 500 FCFAtext-4xl / bold
Mes commandestext-2xl / bold — H2
Pagne wax 6 yardstext-base / semibold — titre carte
Livraison à Yopougon Niangon ce soir.text-sm — corps
Mise à jour il y a 2 mintext-xs / muted — meta
61 500 FCFAtabular-nums pour montants
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 ».

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