Design System
Camille Chat — Identité visuelle, composants et tokens
V4.0.1 — Fév 2026
01 Palette
Primaires
Aa
Restart Red
#B31D00
Bouton envoi, bulle user, CTA
Aa
Shell Dark
rgba(7,7,14,.88)
Fond chat, modales
Aa
Glass Light
rgba(255,255,255,.10)
Bulle Camille
Aa
Base Black
#08060e
Body background
Secondaires
Aa
Progress Violet
#6B21A8
Barre progression début
Aa
Progress End
#FF1A1A
Barre progression fin
Aa
Input Surface
rgba(255,255,255,.06)
Champs de saisie
Aa
Header Blur
rgba(0,0,0,.35) + blur(24)
Header fixe
Texte & opacités
| Usage | Token | Valeur | Rendu |
|---|
| Bulles bot | --r-text-primary | white .88 | Salut, moi c'est Camille |
| Bulles user | — | #fff | #fff sur rouge |
| Labels | --r-text-secondary | white .5 | Sous-titre |
| Liens discrets | --r-text-muted | white .35 | Terminer le chat |
| Placeholders | --r-text-ghost | white .18 | votre@email.com |
| Messages syst. | --r-text-muted | white .35 | Camille écrit… |
02 Typographie
| Élément | Font | Weight | Size |
|---|
| Body / Chat | DM Sans | 400 | 14px / 13px mobile |
| Logo | DM Sans | 700 | 15px / 14px mobile |
| Header buttons | DM Sans | 500 | 12px |
| Compteur msg | DM Sans | 500 | 10px |
| Modale titre | DM Sans | 700 | 20px |
| Splash titre | DM Sans | 400 | clamp(24px, 5vw, 48px) |
| Labels form | DM Sans | 700 | 10px uppercase |
03 Composants
Bulles de chat
Salut, on se connaît ? Moi c'est Camille, de chez Restart avec Pierre.
On cherche à restructurer notre équipe tech
OK. Combien de personnes dans l'équipe actuellement ?
Camille écrit…
Bot : glass + bordure subtile, coin bas-gauche carré. User : rouge + ombre, coin bas-droit carré. Système : sans bulle, centré.
Boutons
R
Send : cercle 40px. Primary : pill rouge + ombre. Secondary : outline. Ghost : texte seul.
Barre de progression
12/15
Début — violet discret
5/15
Mi-parcours — transition
2/15
Fin — rouge vif, pleine opacité
Champs de saisie
Chat input : pill 20px. Form : radius 12px. Fond 6%/4%, bordure 10%, focus 22%.
04 Architecture écrans
Écran 1 — Splash
CTA ou auto-transition
Logo R + titre centré
Bouton "Re[Start] Now"
Fond cosmique
Prefetch prospect
Fade → header + chat
Écran 2 — Chat
Cœur de l'app
Header : R + ☰ (mobile) / liens (desktop)
Chat = 100% espace
Compteur + toolbar (share, PDF)
Barre progression 2px
"Terminer" discret
Input + micro + R
Écran 3 — Fin
Modale recap
Trigger : 15 msg / Terminer / Alt+F
Récap scrollable
Email → récap + 3 bonus
RDV → lien externe
Continuer → ferme
05 Tokens CSS
| Token | Valeur | Usage |
|---|
--r-red | #B31D00 | Accent primaire |
--r-red-glow | rgba(179,29,0,.35) | Ombres CTA/envoi |
--r-shell | rgba(7,7,14,.88) | Fond chat |
--r-glass | rgba(255,255,255,.10) | Bulle bot |
--r-glass-border | rgba(255,255,255,.06) | Bordure bulle bot |
--r-input-bg | rgba(255,255,255,.06) | Fond input |
--r-input-border | rgba(255,255,255,.1) | Bordure input |
--r-text-primary | rgba(255,255,255,.88) | Texte bot |
--r-text-secondary | rgba(255,255,255,.5) | Labels |
--r-text-muted | rgba(255,255,255,.35) | Liens discrets |
--r-text-ghost | rgba(255,255,255,.18) | Placeholders |
--r-progress-start | #6B21A8 | Barre début |
--r-progress-end | #FF1A1A | Barre fin |
--r-header-bg | rgba(0,0,0,.35) | Header |
--r-divider | rgba(255,255,255,.06) | Bordures |
--r-radius-pill | 100px | Boutons, chat input |
--r-radius-card | 16px | Bulles, cartes |
--r-radius-modal | 20px | Modales |
--r-radius-input | 12px | Champs form |
06 Responsive
| Breakpoint | Comportement |
|---|
> 580px | Desktop : chat max-width 860px centré, radius 18px, header liens texte, footer visible |
≤ 580px | Mobile : chat full-bleed, header 3 icônes, footer masqué, bulles 88% |
07 Changelog
- 25/02/26CHANGEMicro déplacé à l'intérieur du champ input (style iOS)
- 25/02/26CHANGEBottom bar unifiée : toolbar + progress + input en un bloc
- 25/02/26NEWGalaxy tint sur le fond du chat (radial-gradient subtil)
- 25/02/26CHANGEHeader mobile 44px (vs 48), compteur sticky dans chat-log
- 25/02/26FIXEspacement mobile WhatsApp-level : bulles 14px, gap 6px, padding 8px
- 25/02/26NEWV4.0 — Architecture 3 écrans : Splash → Chat → Fin
- 25/02/26NEWCSS tokens (:root) pour toutes les valeurs design
- 25/02/26NEWPage design system intégrée au site (/ressources/design)
- 25/02/26CHANGEBulles Camille : violet sombre → glass clair
- 25/02/26CHANGEFont : Inter → DM Sans
- 25/02/26CHANGEHeader mobile : texte → 3 icônes
- 25/02/26CHANGECompteur déplacé dans toolbar
- 25/02/26FIXChat mobile full-bleed (position:fixed)
- 25/02/26FIXCamille non-genré
Re[Start]