Docs menu

Staff — Design system (identité VERTE)#

L'app démo du client est verte. On garde la même logique et les mêmes couleurs, mais mieux dessiné et meilleure UX. Direction : Apple / Airbnb / Linear — blanc dominant, vert de marque confiant, dégradés subtils, coins arrondis généreux, glassmorphism léger, animations calmes.

Principe#

Source unique de vérité : apps/mobile/src/lib/theme.ts (tokens sémantiques) et son équivalent CSS pour le web apps/web/src/app/globals.css (@theme Tailwind v4 + variables).
Réutiliser l'ARCHITECTURE de ze-rencontre (apps/mobile/src/lib/theme.ts) : rôles sémantiques (text, textSecondary, surface, action, border, glass, elevation, motion, radii, spacing, typography) — mais reskiné en vert. Ne pas copier le bleu.

Palette de marque (vert émeraude — premium, confiance B2B)#

primary        #059669   (emerald 600)   — actions, marque
primaryLight   #10B981   (emerald 500)   — dégradés, états hover
primaryDark    #047857   (emerald 700)   — pressed
primaryDeep    #065F46   (emerald 800)   — héros / fonds profonds
primarySoft    #ECFDF5   (emerald 50)    — fonds teintés, puces
primaryTint    #D1FAE5   (emerald 100)
accent         #0D9488   (teal 600)      — accent secondaire ponctuel

Récompenses : Or #D4A017 / Platine #64748B (argent) / Diamant #0EA5E9 (à traiter comme des accents nobles avec dégradés dédiés). Neutres = échelle slate (comme ze-rencontre).

Rôles sémantiques (mobile & web, mêmes valeurs)#

background      #F6FBF8   (blanc très légèrement teinté vert)
surface         #FFFFFF
surfaceSubtle   #F1F5F4
surfaceTint     #ECFDF5
text            #0F1F17   (encre verte-slate très foncée)
textSecondary   #47605A
textTertiary    #6B837C
textInverse     #FFFFFF
action          #059669
actionPressed   #047857
actionSoft      #ECFDF5
border          rgba(148,163,159,0.32)
success         #047857
warning         #B45309
danger          #DC2626

Contraste : jamais de texte clair sur fond clair. Sur fond vert/dégradé → texte blanc. Sur surface blanche → text/textSecondary. Vérifier chaque écran au screenshot.

Dégradés#

hero      ["#065F46", "#059669", "#10B981"]   diagonal
splash    ["#F0FDF7", "#FFFFFF", "#E7FBF1"]
action    ["#059669", "#10B981"]
card      ["#E7FBF1", "#F5FDF9", "#FFFFFF"]
gold      ["#B8860B", "#D4A017", "#F0C43F"]   (badge Or)

Web (Tailwind v4) : les dégradés en variable CSS DOIVENT être posés en background-image. Utiliser bg-[image:var(--gradient-hero)], jamais bg-[var(--gradient-hero)] (ce dernier compile en background-color: linear-gradient(...) → invalide → fond absent → texte invisible). C'est le bug exact rencontré sur ze-rencontre ; ne pas le reproduire.
Mobile : expo-linear-gradient avec des tuples as const (start/end points).

Typographie#

Rampe SF-like (police système). Reprendre l'échelle de ze-rencontre : display 36/800, title 28/700, titleSmall 22/700, headline 17/600, body 15/400, callout 14/500, subhead 13/500, label 12/600, caption 11/500, overline 10/700 uppercase. Chiffres tabular-nums pour montants, distances, chronos, heures.

Espacement, rayons, élévation, motion#

Reprendre les échelles de ze-rencontre (grille 4/8 pt ; radii xs→3xl + full ; elevation hairline/soft/card/floating/action ; motion fast 160 / standard 240 / entrance 420, pressScale 0.98). Ombres larges et peu opaques, teintées vert sur les éléments d'action.

Composants clés à soigner#

Bouton primaire : dégradé action, texte blanc, ombre action verte, press-scale.
Carte mission : surface blanche, coin 2xl, badge secteur (picto), ligne rému/durée/distance en tabular-nums, chevron. État « urgent » = liseré/puce ambre.
Scanner QR (héros) : plein écran sombre-vert, cadre de visée animé, halo, pastille GPS « Position confirmée », gros CTA. Deux états : démarrer / terminer (chrono live).
Jauge de niveau (Récompenses) : progression vers Or/Platine/Diamant, badge dégradé noble, « il vous manque X missions ».
Tab bar (mobile) : glass, 4–5 onglets par mode (Missions, Carte, Mes missions, Gains, Profil pour prestataire ; Missions, Publier, Suivi, Profil pour établissement).
Header : glass translucide, titre + action contextuelle.
Web shell : sidebar (Admin) / topbar, cartes KPI, tableaux denses lisibles, matrice de toggles.

À éviter absolument (leçons ze-rencontre)#

bg-[var(--gradient-*)] sur le web → toujours bg-[image:var(--gradient-*)].
Texte blanc sur surface blanche (boutons, monogrammes, cartes héros vidées de leur fond).
Écrans « à moitié faits » : chaque écran listé P0/P1 doit être visuellement complet et peuplé de données mockées crédibles.
Se fier au seul « build passe » : auditer au screenshot chaque écran avant de livrer.