Charte couleurs Retour au site

UI Kit

Composants et règles typographiques

1 — Buttons
Tailles
Sur fond clair (base / cream)
Sur fond dark (deep / rich / violet)
2 — Trust bar
Prescrit par des médecins formés à la dermatologie
Formulations magistrales préparées en pharmacie
Suivi continu et ajustement mensuel
3 — Label + titre de section
Sur fond clair
Comment ça marche
Un parcours médical simple et personnalisé
Sur fond deep
Le problème
15 millions de Français souffrent de maladies de peau. La plupart abandonnent.
Sur fond violet
Notre approche médicale
De la dermatologie de qualité, accessible à tous
4 — Tabs (pill solid)
L'acné n'est pas qu'un problème d'adolescent. Hormonale, inflammatoire ou kystique, chaque acné nécessite une approche différente.
5 — Cards (lift hover)
Sur fond clair
Protocoles dermatologiques
Conçus avec des dermatologues, validés médicalement.
Formulations magistrales
Préparées sur-mesure en pharmacie.
Suivi par IA
Analyse l'évolution mois après mois.
Sur fond deep
Protocoles
Validés par des dermatologues.
Formulations
Sur-mesure en pharmacie.
Suivi IA
Ajustement continu.
Sur fond violet
Protocoles dermatologiques
Conçus avec des dermatologues, appliqués par des médecins formés.
Formulations magistrales
Préparées sur-mesure en pharmacie, avec des principes actifs dosés.
Suivi augmenté par l'IA
Analyse l'évolution de votre peau et aide le médecin à ajuster.
6 — Tags pathologies
7 — Photo cards
↗
Pathologie
Acné hormonale
↗
Pathologie
Rosacée & rougeurs
8 — Brand statement
Sur fond warm (aplat)
mixt

Le traitement le plus efficace est celui qui est fait pour vous.

Sur fond deep

Prêt à prendre soin de votre peau ?

9 — Réassurance & formulaire
Vos données de santé sont protégées et soumises au secret médical En savoir plus →
Formulaire — fond clair
Formulaire — fond dark
10 — Logos presse
Ils parlent de nous
Le Monde
Forbes
Vogue
TechCrunch
11 — Surfaces & règles typographiques
Base · #FFF8F2
Label → text-2 + accent line (default)
Label → text + warm line (pricing, comité)
Label → violet + violet line (pathologies)
Titre h2 en text primary
Body text en text-2. Descriptions et paragraphes.
Métadonnées en text-3.
Cream · #F5E6DA
Label → text + accent line (steps, identify, proof)
Label → text-2 + warm line (founder)
Titre h2 en text primary
Body text en text-2.
Warm · #B07460 — Aplat statement uniquement
Titre h2 en blanc 100%
Surface réservée au statement (h2 blanc, pas de body text).
Deep · #361822
Label → blush + blush line
Titre h2 en blanc 100%
Body text en blanc 55%. Sub, pillar desc, how step desc, footer links.
Stat descriptions en blanc 50%.
Footer copyright en blanc 30%.
Footer mention tiny en blanc 20%.
Rich gradient · #6B3D32 → #522A20
Label → blanc 50% + blanc 30% line
Titre h2 en blanc 100%
Sous-titre en blanc 55%.
Violet gradient · #5E3A6E → #462858
Label → blush + blush line
Titre h2 en blanc 100%
Pillar descriptions en blanc 55%.
Violet-bg · #F0EAF4 — Alerte / info
Texte bandeau en violet 100%. Séparateur en violet-light.
12 — Alert banner (bandeau construction)
Bandeau d'information
Site en cours de développement · Les contenus sont fictifs et utilisés à titre illustratif
13 — Correspondance noms de boutons
.btn-primary = .btn-dark (homepage)
.btn-secondary = .btn-ghost (homepage)