B Buzzle CRM Design System · v0.1
A.00 — Design system

Le langage visuel de Buzzle CRM,
construit sur Twenty.

Cette page est la référence produit : palette Schemata, typographie, composants, écrans-clés du cockpit agence, du workspace client, et de la création workspace. Ce que tu vois ici doit être ce que tu vois dans le CRM.

Voir les écrans Ouvrir le CRM live ↗
A.01

Foundation

Les tokens de base que tout le reste consomme.

Palette
#14141cink
#ffffffsurface
#efede6paper
#5b4bffaccent
#d6d2c7hairline
Typographie
Inter Tight
Inter — texte courant, formulaires, tables, boutons. Le corps de la lecture business quotidienne.
JetBrains Mono · labels catégoriels, numéros de section, badges statut
Espacements & radius
  • radius4px · 8px max
  • border1px solid hairline
  • shadowzero — hairlines only
  • grid8px base
  • card padding14–24px
  • section gap32–48px
A.02

Composants

Réutilisables partout dans l'app. Zero shadow, hairlines, radius max 8px.

Boutons
Badges de statut
Nouveau À rappeler Devis envoyé Signé Perdu
Champs de formulaire
Cartes de metric
Leads 30j128+22 vs. précédent
Qualifiés4736,7 % du volume
CA généré42 300 €11 signés
OCT pushed58Google 41 · Meta 17
A.03

Écrans clés

Les 4 vues qui définissent l'expérience Buzzle CRM.

1. Cockpit agence
A.01 · Cockpit / Mes workspaces
Rechercher…
Nom Sous-domaine Statut Users Leads 30j Dernière activité
BF Menuiseries bf-menuiseries Active 2 42 Il y a 12 min
Galaxy Glass galaxy-glass Active 1 0 Il y a 3h
Saficard saficard Active 3 78 Il y a 1j
2. Workspace client (vue prospects)
A.01 · Prospects / Pipeline
Nouveau 12
Nicolas Roux
G · Ads
Sophie Amar
M · Meta
À rappeler 8
Julien Bernard
3 200 €
Devis envoyé 6
Marc Delattre
5 800 €
OCT pushed · Ads
Signé 3
Élise Fontaine
9 200 €
Won pushed · Ads
3. Création workspace
← Cockpit · Agence Buzzle

Nouveau workspace client

4. Impersonation banner (admin dans un workspace client)
Vous naviguez en tant qu'admin dans BF Menuiseries. Les modifications sont journalisées.
Le reste de l'écran = l'interface normale BF Menuiseries (workspace client). Le bandeau reste sticky en haut.
A.04

Flows

Les 3 chemins critiques utilisateur.

  1. 01
    Onboarding client — Clément clique "+ Nouveau workspace" · form (nom, subdomain, template) · backend crée le workspace + applique template · workspace prêt en 3 sec.
  2. 02
    Ingestion lead — Google Ads → LP UTMRX → form submit → n8n webhook capture gclid/fbclid/utm · crée Prospect dans workspace client via API Twenty · statut = Nouveau.
  3. 03
    Push OCT — Client change statut du prospect · webhook Twenty → n8n · route par status : quoted = QualifiedLead / won = Purchase · upload API Google Ads + Meta CAPI · marque octPushedAt.
A.05

Roadmap

Où on en est, où on va.

V1 — En prod
  • Cockpit /buzzle-admin
  • Theme Schemata violet
  • Landing super admin
  • Masquage objets Twenty
  • Form création (validation)
  • i18n Buzzle
  • n8n workflow OCT (placeholder)
V1.5 — En cours
  • Impersonation workspace (switch sans re-login)
  • Création workspace end-to-end (S4 stage 2)
  • Template applier réel
V2 — À venir
  • Metabase reporting cross-workspace
  • Sync Zoho Invoice
  • Branchement OCT réel par client
  • Rôle "Buzzle Client" avec permissions strictes
  • Alertes churn