Référencement SEO santé
Top 3 Google sur vos requêtes locales en 6 mois, mesuré dans SeePerform.
DécouvrirStyleguide SeeSmile
Bibliothèque vivante des composants atomiques. Référence unique pour le dev et le design.
v0.1.1 · composants atomiques
1. Couleurs
Palette de marque et tokens sémantiques exposés en variables CSS custom.
blue-900
#203559
blue-600
#3e62ac
gradient-hero
135° blue-900 → blue-600
text
#1a1a1a
text-muted
#555555
bg-soft
#f6f8fc
border
#e3e8f0
2. Typographie — Outfit
9 graisses (100–900), tailles fluides en clamp(), text-wrap pour des retours à la ligne élégants.
h1
L'agence qui fait briller les sourires.
h2
Votre cabinet, la référence de sa zone
h3
Méthode SeeSmile 360°
h4
Audit · Autorité · Acquisition · Agenda
body
La communication santé qui respecte votre Ordre, votre temps et vos patients. Un positionnement unique sur le marché français.
small
Mesuré en direct dans votre espace client SeePerform.
Graisses
100
Thin — Les sourires de demain
200
ExtraLight — Les sourires de demain
300
Light — Les sourires de demain
400
Regular — Les sourires de demain
500
Medium — Les sourires de demain
600
SemiBold — Les sourires de demain
700
Bold — Les sourires de demain
800
ExtraBold — Les sourires de demain
900
Black — Les sourires de demain
3. Eyebrow
Sur-titre uppercase qui précède un H2. Variante --accent avec trait décoratif.
.eyebrow
Notre méthode
.eyebrow.eyebrow--accent
Notre méthode
.eyebrow--accent.eyebrow--light
SeePerform
4. Boutons
4 variantes × 3 tailles. focus-visible accessible, disabled géré, icônes en .btn__icon.
Primary · gradient
Secondary · bleu 900
Ghost · bordure bleu 900
Outline · neutre
5. Badges
Labels utilitaires — mise en avant, statut, catégorie.
WordPress
60s · gratuit
Nouveau
SEO médical
Disponible
En cours
6. Cards
Brique récurrente — services, secteurs, cas clients, articles.
Par défaut
E-réputation médicale
Avis Google, modération, prévention : maîtrisez votre image en ligne.
DécouvrirIdentité visuelle santé
Logo, charte, branding : une image qui inspire confiance.
Découvrir--gradient (mise en avant SeePerform)
SeePerform Audit
Votre audit SEO santé complet en 60 secondes, gratuit et sans engagement.
Tester maintenant--bordered (discrète)
Maintenance WordPress
Sécurité, backups quotidiens, mises à jour : votre site tranquille.
En savoir plusChatbot IA santé
Votre cabinet répond à vos patients 24h/24, conforme RGPD.
En savoir plus7. Icônes
SVG inline, fill: currentColor, tailles relatives en em.
Tailles (.icon--lg / --xl / --2xl)
8. Container
Padding responsive : 1rem mobile · 1.5rem tablet · 2rem desktop. Max 1280px.
<div class="container"> ... max 1280px
<div class="container container--narrow"> ... max 800px (éditorial)
<div class="container container--wide"> ... max 1440px
<div class="container container--fluid"> ... 100 %
Section
.section--soft — fond bleu très clair
Padding-block fluide (3rem → 6rem), header centré max 720px.
Section
.section--dark — fond bleu 900
Idéal pour les sections d'autorité et d'expertise.
Section
.section--gradient — gradient hero
Pour les CTA finaux et les sections SeePerform.