Bell UI rules

Cette page documente le design system Bell tel qu'implémenté dans apps/web/src/styles/bell.css et maintenu en synchronisation avec le fichier Figma « Bell — Parcours client (VALIDÉ) » (frame 3346:1826).

Les valeurs marquées /* TO VERIFY */ dans bell.css sont des estimations visuelles à confirmer via get_design_context Figma. Une fois la frame vérifiée, on retire le tag et on met à jour cette doc.

Identité visuelle

Bell, c'est un concierge digital de luxe. L'ambiance visuelle tourne autour de trois éléments :

• Un background photo fullscreen (falaise orangée, coucher de soleil) qui donne la profondeur et la chaleur
• Des cards glassmorphism translucides qui flottent au-dessus
• Des accents orange vifs — boutons CTA + pills décoratives inclinées qui signent la marque

Le design est mobile-first (PWA 430px max) avec une esthétique premium qui contraste avec les PMS traditionnels austères.

Palette (Figma-validated)

⚠️ Deux oranges distincts : #F2930D (CTA primary, plus profond) vs #FF9E18 (AddItemButton, plus vif saturé). Ne pas interchanger — les Figma Components imposent chacun son contexte. Réserver orange-accent aux composants menu/panier uniquement.

⚠️ Point clé Figma : le fond des cards est un gris 15% (pas un noir chaud comme on pourrait l'imaginer). Les couleurs texte sont en #F7F5F2 (crème), pas #FFFFFF. Cette subtilité donne la chaleur visuelle Bell.

Glassmorphism — la recette (Figma-validated)

Les cards Bell combinent :

1. Background : rgba(128, 128, 128, 0.15) — gris translucide warm
2. Backdrop blur : blur(24px) (Figma rend natif, web a besoin d'explicite)
3. Border : 1px solid rgba(255, 255, 255, 0.08)
4. Shadow : 0 10px 40px rgba(0, 0, 0, 0.20)
5. Radius : 40px (très arrondi, signature Bell — pas 20px !)
6. Padding : 25px
7. ::before highlight top pour renforcer la 3D

.bell-glass-card {
  border-radius: 40px;
  background: rgba(128, 128, 128, 0.15);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.20);
  color: #F7F5F2;
  padding: 25px;
}

⚠️ Piège évité : j'avais initialement estimé un gradient noir diagonal. C'est faux — Figma utilise un aplat gris 15% qui laisse la photo floutée derrière donner la chaleur. Un gradient noir écraserait cette chaleur.

Inputs à l'intérieur d'une card

Les inputs ne doublent pas le backdrop-filter (la card parent le porte déjà). Ils utilisent un fond encore plus sombre pour créer un creusement visuel :

.bell-glass-input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
}
.bell-glass-input:focus {
  border-color: var(--bell-orange);
  background: rgba(0, 0, 0, 0.35);
}

Typographie

Deux familles, usage exclusif :

Jubilat (serif) — headings hero + titres cards

Utilisée exclusivement pour les titres forts : Your personal Concierge., Create Password, Forgot your Password ?. Souvent en italique sur les titres hero.

Poids disponibles : Light (300), Regular (400). Pas de bold dans la lib.

Acumin (sans-serif) — body, boutons, inputs, micro-copy

Tout ce qui n'est pas un titre hero. Aliases pour Medium et Light mappent sur Acumin-RPro.otf (héritage de l'ancien projet, à nettoyer si besoin).

Tailles (Figma-validated)

Attention : le tracking négatif -0.32px sur les 16px est la signature Acumin Bell — sans ça, le texte paraît "lâche". À appliquer sur boutons, inputs et body.

Boutons

Bell a deux familles de boutons avec des radius différents :

CTA pilule (radius 100px) — flow check-in

Continue, Validate, Log In, Reset Password… Hauteur 51px, orange plein.

.bell-button-primary {
  background: #F2930D;
  border-radius: 100px;
  padding: 17px 24px;
  height: 51px;
  color: #F7F5F2;
  font-size: 16px;
  letter-spacing: -0.32px;
  box-shadow: 0 6px 18px rgba(242, 147, 13, 0.28);
}

Social/SSO (radius 20px) — flow sign-in

Sign in with Apple/Google/Email. Radius 20px (pas full pill !), hauteur ~51px via py-17 px-10, gap 7px entre icône et label.

.bell-sso-button {
  border-radius: 20px;
  padding: 17px 10px;
  gap: 7px;
}
/* Variantes */
.sso-apple  { background: #000; color: #F7F5F2; }
.sso-google { background: #F7F5F2; color: #000; }
.sso-email  { background: rgba(128,128,128,0.15); color: #F7F5F2;
              /* opacité 60% + mix-blend-plus-lighter sur le texte */ }

États (tous boutons)

• hover : couleur plus claire (--bell-orange-soft pour CTA)
• active : translateY(1px) pour feedback tactile
• disabled : opacity: 0.5 + cursor: not-allowed
• focus-visible : ring 2px orange 40%

Variantes vues

• Stripe button (écran Règlement) : pilule noire plein, texte crème
• Apple Pay button (écran Règlement) : pilule crème, texte noir
• Ghost text (Forgot password?, ← Back to Log In) : texte seul orange

Layouts PWA

Shell

La PWA est contrainte à 430px max-width (iPhone 14 Pro Max, une version "desktop view" viendra peut-être plus tard) :

.bell-pwa-shell {
  margin-inline: auto;
  max-width: 430px;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

Background auth

Toutes les pages auth (check-in, sign-in, password) partagent la même image background (/design-refs/auth/backdrop.jpg — à télécharger depuis Figma). Fullscreen, couverture totale, derrière la card glass qui flotte.

Pills décoratives

Petites capsules orange inclinées (-18deg ~) positionnées en absolute autour de la card. Elles sont la signature visuelle Bell, issues du logo.

Components library

Tous les composants Bell sont dans packages/ui/src/components/bell/ et exportés via @bell/ui/components/bell. Ne jamais mélanger avec les primitives shadcn de @bell/ui/components/* dans un écran guest.

Structure & shell

Atoms inputs

Boutons spécialisés

Chat / services

Menu / bookings

Fichiers source

Workflow designer → dev

1. Designer update Figma → ping dev dans le PR comment
2. Dev fait get_design_context sur le node modifié (MCP Figma)
3. Dev met à jour bell.css et cette page MDX dans le même commit
4. Les TO VERIFY en CSS disparaissent au fur et à mesure que les valeurs Figma sont consolidées

Skills Figma disponibles (MCP)

Pour travailler avec les frames Bell depuis Claude Code :

get_design_context fileKey=cHDoETwcWn4cifkBrIkWE1 nodeId=XXXX:YYYY
get_screenshot     fileKey=cHDoETwcWn4cifkBrIkWE1 nodeId=XXXX:YYYY
get_variable_defs  fileKey=cHDoETwcWn4cifkBrIkWE1 nodeId=XXXX:YYYY

NodeIds clés

Frame "Parcours client VALIDÉ" (3346:1826) :

• 4543:5947 Log In (email + password)
• 4543:5985 Forgot Password
• 4543:6006 Check your email
• 4543:6027 Password Reset success
• 4543:6050 New Password

Frame "Login Page WIP" (1719:1982) :

• 4543:5716 Landing SSO (Apple / Google / Email)
• 4543:5794 Email input
• 4543:5845 Verify email sent
• 4543:5878 Code manual input

Frame "Check-in WIP" (1719:1927) : metadata à récupérer.