Livraison offerte dès 25 €
Design system
Une identité chaleureuse côté client, dense et rapide côté back-office. Palette Paprika & Basilic : l’épice pour l’appétit, l’herbe fraîche pour la confiance. Tout est déclinable en clair et en sombre, et rien ne repose sur la couleur seule.
01
Palette
Contrastes vérifiés en AA sur les paires texte / fond utilisées dans le produit. Les statuts combinent toujours couleur + icône + texte.
02
Typographie
Newsreader · titres & noms de plats
Display 52
Titre 34 — Bavette d’aloyau
Titre 24 — Le Comptoir de Marie
Nom de plat 19 — Tarte tatin, crème crue
Instrument Sans · interface & données
Corps 17 — Commander prend moins d’une minute, sans créer de compte.
Corps 15 — Description de plat, texte secondaire, aide contextuelle.
Légende 13 — 4,7 ★ (312 avis) · 400 m · 25–35 min
Bouton 15 semi-gras · 19,00 € tabulaire
Étiquette 11 · capitales
03
Espacement & rayons
Échelle de 4
4
8
12
16
24
32
48
Rayons
8
12
16
24
Élévation
xs
sm
md
lg
Transitions
fast 120 msbase 180 msslow 260 ms
· courbe cubic-bezier(.2, 0, 0, 1) · respect de
prefers-reduced-motion
04
Boutons
Primaire
CTA safran
Secondaire
Destructif
Chips
05
Champs de formulaire
Sélections tactiles (44 px minimum)
Interrupteur & segments
Quantité
2
06
Badges & statuts
Statuts
Ouvert
✕ Fermé
! En rupture
● En livraison
⏳ En attente
Nouveau
−20 % sur la 2e pizza
Progression
Onglets
07
Cartes
Carte simple
Fond surface, rayon 16, ombre chaude et discrète. Pas de bordure dure.
- Formule
- Signature
- Statut
- Actif
Napoli Segreta
tampons
✓✓✓
✓✓✓
✓
Encore 3 pizzas pour une pizza offerte
08
Tableaux (back-office)
| Restaurant | Formule | Statut | Paiement | Commandes |
|---|---|---|---|---|
| Le Comptoir de Marie Bistrot moderne | Signature | ✓ actif | ✕ impayé | 1 284 |
| Napoli Segreta Pizzeria napolitaine | Signature | ✓ actif | ✓ à jour | 2 410 |
| Sushi Hanabi Japonais | Essentiel | ⏳ en attente | ✓ à jour | 0 |
09
Modales, toasts & bandeaux
Feuilles
Bottom-sheet sur mobile, modale centrée sur desktop.
Toasts
10
États vides & chargement
🧺
Votre panier est vide
Ajoutez un plat depuis la carte d’un restaurant — commander prend moins d’une minute.
Découvrir les restaurants11
Suivi de commande
✓
Commande reçue
Le restaurant a été prévenu
✓
Acceptée
Marie a confirmé votre commande
🔥
En préparation
Ça chauffe en cuisine
🛵
En livraison
À venir
12
Jeu d’icônes
Trait de 1,7 px, 24 × 24, héritant de currentColor. Aucune information portée par l’icône seule.
13
Règles transverses
Accessibilité
- ▸ Contraste AA minimum sur tous les textes et icônes porteuses de sens.
- ▸ Focus visible : contour safran de 3 px, décalé de 2 px.
- ▸ Cibles tactiles de 44 px minimum, actions principales atteignables au pouce.
- ▸ Jamais la couleur seule : chaque statut combine couleur, icône et texte.
- ▸
prefers-reduced-motiondésactive animations et défilement animé. - ▸ Lien d’évitement vers le contenu principal sur chaque page.
Responsive
- ▸ Mobile d’abord : navigation basse fixe, barres d’action au pouce.
- ▸ Les modales deviennent des bottom-sheets sous 768 px.
- ▸ Le back-office passe de la colonne latérale (≥ 900 px) à la navigation basse.
- ▸ Tableaux et Kanban défilent horizontalement dans leur propre conteneur.
- ▸ Aucun défilement horizontal de page, quelle que soit la largeur.