Style guide

Dentalbridge — style guide

Tous les jetons du kit en situation : couleurs globales, typographie fluide, boutons, champs de formulaire, surfaces et bande CTA. Source de vérité : Réglages du site Elementor.

Section 01

Couleurs

Couleurs système

Primary . Brand — blue-600
#2563EB

Secondary . Titres — slate-900
#0F172A

Text . Corps — slate-700
#334155

Accent . Hover/liens — blue-700
#1D4ED8

Échelle blue — interactif

Blue 50
#EFF6FF

Blue 100
#DBEAFE

Blue 200
#BFDBFE

Blue 500
#3B82F6

Blue 800
#1E40AF

Blue 950
#172554

Échelle slate — structure

Slate 50
#F8FAFC

Slate 100
#F1F5F9

Slate 200
#E2E8F0

Slate 300
#CBD5E1

Slate 400
#94A3B8

Slate 500
#64748B

Blanc
#FFFFFF

Statuts — états uniquement, jamais décoratif

Succès clair
#ECFDF5

Succès 500
#10B981

Succès 700
#047857

Alerte claire
#FFFBEB

Alerte 500
#F59E0B

Alerte 700
#B45309

Erreur claire
#FEF2F2

Erreur 500
#EF4444

Erreur 700
#B91C1C

Section 02

Typographie

Lufga partout, fallback « Helvetica Neue », Arial, sans-serif. Les tailles fluides se recalculent en continu de 320 à 1920 px.

Display (hero) — 700 . clamp(2.75rem → 4.5rem) . 1.05 . −0.03em

Le cabinet, le labo et vos logiciels, enfin connectés.

H1 — 700 . clamp(2.125rem → 3rem) . 1.18 . −0.02em

Une plateforme unique pour le flux cabinet–labo.

H2 — 700 . clamp(1.75rem → 2.25rem) . 1.25 . −0.02em

Comment ça marche

H3 — 600 . clamp(1.375rem → 1.75rem) . 1.25 . −0.01em

Étape 01 — le cabinet envoie le cas

H4 — 600 . clamp(1.125rem → 1.375rem) . 1.25

Traçabilité réglementaire

Lead (chapeau) — 400 . clamp(1.0625rem → 1.25rem) . 1.6

Le chapeau introduit la section en une ou deux phrases calmes et factuelles.

Corps — 400 . 1rem . 1.6

Le corps de texte reste lisible sur tous les écrans. Il ne descend jamais sous 16 px, l’interligne est de 1.6 et la famille est Lufga partout.

Small (petit corps) — 400 . 0.875rem . 1.6

Petit corps pour les mentions secondaires et les détails.

Caption (légende) — 400 . 0.8125rem . 1.6

Légende sous une image ou un tableau.

Overline (eyebrow) — 700 . 0.75rem . 1.4 . 0.12em . majuscules

Comment ça marche

Section 03

Boutons

Primaire — fond #2563EB . survol #1D4ED8 . actif #1E40AF . rayon 10

Secondaire — fond blanc . texte slate-700 . bordure #CBD5E1 . survol bordure #94A3B8

Pill 999 px — réservé aux CTA marketing, jamais aux formulaires

Section 04

Champs de formulaire

Email professionnel *

Je suis…

Point de friction (optionnel)

Numéro invalide — vérifiez le format.

Hauteur 44 px . rayon 10 . bordure #CBD5E1 . focus #3B82F6 . placeholder #94A3B8 . erreur #B91C1C (problème puis solution)

Section 05

Statuts en contexte

Succès — commande confirmée, le labo a reçu le cas.

Alerte — pièce jointe manquante, la fiche reste modifiable.

Erreur — envoi impossible, vérifiez la connexion.

Section 06

Surfaces, rayons et ombres

Contrôle — rayon 10, bordure #CBD5E1

Carte — rayon 14 . ombre sm

Surface — rayon 20 . ombre md

Modale — rayon 28 . ombre xl

Ombres teintées slate rgb(15 23 42 / …), jamais noires. Ombre brand : lueur bleue au survol du bouton primaire uniquement.

Bêta ouverte — laboratoires prioritaires

Une seule bande CTA par page

Dégradé blue-600 → blue-800 à 135°, texte blanc, bouton pill à fond blanc.

Style guide généré depuis le document source Dentalbridge — les valeurs vivent dans Réglages du site, ne pas les modifier à la main ici.