Ce document est la spécification de référence pour Claude Code (dev technique). Il liste les tokens design, atomes, composants et leur comportement. Chaque composant est documenté avec ses props, variants et états. Les patterns produits (onboarding, paywall, présence Camille) sont décrits en fin de document.
L'app principale est iOS (consultation, cuisine, courses en magasin). Le web sert 3 cas seulement : la home marketing, l'URL famille publique, l'impression A4. Pas de version desktop pour l'onboarding ni pour le mode cuisine.
L'IA n'est pas le produit, c'est l'opérateur. Une fois la semaine validée, elle disparaît dans un FAB. Elle revient si on l'appelle. Pas de chat omniprésent, pas de notifications agressives.
Tout part d'un fond #fbf7ee crème. Pas de dark mode v1. Les contrastes sont obtenus par --ink (presque noir) sur --paper. Joyeux, pas saturé.
Fraunces italique pour les titres et le manuscrit, Inter pour le corps, JetBrains Mono pour les eyebrows et données chiffrées. Caveat pour les notes manuscrites de Camille. Pas d'autre fonte.
Les tampons (rouges/olive/bleu encre) servent à classer (régime, batch, rapide). Le surligneur jaune souligne les mots-clés du discours produit. Les icônes sont fonctionnelles uniquement (line, 1.6px stroke). Pas d'emojis sauf 1-2 dans les messages de Camille (🌿 🥖 🥧).
Tous les tokens vivent dans variant-d/tokens-d.css sous :root. La règle .bouch-d applique le fond, la fonte et le smoothing à tout sous-arbre. Les tweaks runtime (teinte de marque, ton du papier) overrident ces variables via document.documentElement.style.setProperty().
| Token | Famille | Usage | Échelle |
|---|---|---|---|
--font-display | Fraunces (variable) | Titres H1–H4, valeurs chiffrées en italique (qty, prix, durée) | 14 → 64px · italique souvent |
--font-body | Inter | Corps de texte, boutons, labels | 11 → 18px |
--font-mono | JetBrains Mono | Eyebrows, dates, métadonnées, données techniques | 9 → 12px · letter-spacing 0.06–0.16em · UPPERCASE |
--font-script | Caveat | Notes manuscrites de Camille (« le mot du dimanche ») — réservé | 14 → 19px |
--stamp = signal critique (today, action, alerte) + tampon "rouge"--olive = succès, validation, tag végétarien--ink-blue = signature manuscrite Camille + tag sans lactose--brand / --brand-deep = highlight discret de marque (ambre), titres italiques alt, jamais comme signal--highlight = surligneur jaune uniquement sur les mots-clés du discours (ex. "vos prochains menus")| Token | Px | Usage |
|---|---|---|
--s-1 | 4 | gap interne icônes |
--s-2 | 8 | gap entre éléments inline |
--s-3 | 12 | padding cards compactes |
--s-4 | 16 | padding card standard |
--s-5 | 24 | padding écran mobile L/R |
--s-6 | 32 | séparation sections |
--s-7 | 48 | section hero |
--s-8 | 64 | marge desktop large |
| Token | Px | Usage |
|---|---|---|
--r-xs | 4 | tampons, checkboxes papier |
--r-sm | 8 | thumbnails, inputs interne |
--r-md | 12 | cards principales |
--r-lg | 18 | card hero pricing |
--r-pill | 999 | boutons primary, chips, FAB |
--shadow-card · cards, meal cards--shadow-pop · FAB, pricing, modauxsize: number · default 22 · taille en px du nom.ee est toujours en --stampvariant: "red" | "olive" | "blue" · default "red"tilt: bool · rotation -1.5° style tampon de marchésize: number · default 32name: string · default "Camille" — la première lettre s'afficheglow: bool · halo ambré, à utiliser pour la première rencontre, mode actif#f6c879 → #c87a3c → #9a5a26background: --ink, color: --paper · 1 par écran maxborder: --line-strong, color: --ink-soft · actions secondairescolor: --brand-deep, weight: 600 · liens d'affinage, footer--r-pill sur tous les boutons (cohérence)active: bool · default falsesize: number · hauteur en px, default 28active est true (l'utilisateur parle vraiment).from: "user" | "assistant" · default "assistant"animateIn: bool · animation d'entrée (translate Y + fade)name: string · prénom de l'IA pour l'avatar (assistant uniquement)--ink bg, paper text, radius asymétrique 16/16/4/16--paper-card bg, ink text, border --line, radius 16/16/16/4.dhighlightrgba(244,211,94,0.55)meal: { id, day, date, title, photo, time, badges[] }delay: number · pour stagger l'animation d'entrée--stamp + label rouge + script "aujourd'hui"qty: string · "300g", "1 botte", "—" si non chiffréitem: stringchecked: boolnote?: string · note famille (ex. "Tom · sans lactose ✓")checked--olive1px dashed --line-soft (effet liste papier)dfade 0.35s à l'apparitionposition: absolute, right: 16, bottom: 86 (au-dessus du tab bar)active: "home" | "list" | "fam" | "set"--stamp, weight 600, stroke 1.9--ink-faint, stroke 1.5--line-strong, bg --paper-card| Étape | Objectif | Composant | Validation |
|---|---|---|---|
| 1/6 Bienvenue | Pitch en 2 phrases · "2 min" · CTA Commencer | D_Onb1_Welcome | — |
| 2/6 Vous | Prénom de l'utilisateur | D_Onb2_You | Champ requis |
| 3/6 Nommer l'IA ⭐ | Choisir le prénom de l'assistant — moment d'adoption critique | D_Onb3_NameIA | Suggestions cliquables (Camille, Paul, Joséphine, Jacques…) + champ libre |
| 4/6 Foyer | Membres + régimes/allergies | D_Onb4_Foyer | ≥ 1 membre |
| 5/6 Goûts (chat) | Conversation libre avec l'IA fraichement nommée — ce qu'on aime, ce qu'on fuit | D_Onb5_Tastes | ≥ 2 messages échangés |
| 6/6 Voilà ta semaine | Génération + reveal de la 1ère semaine | D_Onb6_Done | — |
Une URL canonique bouch.ee/foyer-{slug} est partageable sans compte. Les invités peuvent voir + commenter mais pas modifier. Banner "Vue partagée par {prénom}" en haut. CTA discret "Découvrir Bouch.ee" en haut à droite.
L'écran M11 s'affiche au lancement de l'app le 7e jour. Pas avant. Pas de fenêtres modales pendant les 6 jours d'essai.
La liste de courses doit pouvoir s'imprimer telle quelle pour les seniors / le frigo. Format 794×1123. Lignes horizontales discrètes (effet papier ligné). Tampon "32 produits · ≈ 84 €" en haut à droite, rotation -6°. Notes manuscrites Camille en bas en Caveat.
Le panneau Tweaks (toggle dans la barre du host) expose les variables suivantes. Modifications persistées via __edit_mode_set_keys dans le bloc EDITMODE-BEGIN/END de index-d.html.
| Clé | Type | Default | Effet |
|---|---|---|---|
botName | string | "Camille" | Renomme l'IA partout (avatar initial, FAB, header chat, dialogues onboarding) |
brandHue | 0–360 | 28 | Ré-écrit --brand/--brand-deep en oklch |
paperTone | "warm" | "cool" | "white" | "warm" | Change le fond papier (3 nuances) |
showFAB | bool | true | Affiche/masque le FAB Camille sur M2 |
showStamps | bool | true | Cache tous les .dstamp (test densité visuelle) |
italicTitles | bool | true | Désactive l'italique Fraunces sur titres |
| Fichier | Rôle | Lignes |
|---|---|---|
tokens-d.css | Variables CSS (couleurs, type, spacing, ombres) + classes utilitaires (.dstamp, .dscript, .dhighlight, .dwave) | ~110 |
components-d.jsx | Atoms : DIcon, DLogo, DCamilleAvatar, DStamp, DBubble, DVoiceWave, DPhone, DTabBar, DCamilleFAB + données mock D_PHOTOS, D_WEEK | ~210 |
onboarding-d.jsx | 6 écrans onboarding (D_Onb1_Welcome → D_Onb6_Done) + OnbShell | ~410 |
screens-mobile-d.jsx | 8 écrans mobile principaux (M1–M8) | ~915 |
screens-desktop-d.jsx | Homepage W1 + Famille publique W2 + Liste imprimable W3 + HomepageChat + DNameRoll | ~525 |
screens-extra-d.jsx | M9 mobile homepage + M10 mobile famille + M11 paywall + W4 desktop semaine | ~430 |
index-d.html | Shell + DesignCanvas + TweaksPanel | ~140 |
D (Camille avatar, Bubble, etc.)D_M{n}, D_W{n}, D_Onb{n}D_WEEK (7 plats) et D_PHOTOS (URLs Unsplash). À remplacer par appels API réels en prod.name) descend en prop dans tous les écrans depuis l'App. Toujours le passer en prop, jamais hardcoder "Camille".