Notre Design System
Les fondations visuelles qui rendent cohérents tous nos projets. Tokens, palettes, typographie, espacements — ouverts et documentés.
Palette de couleurs
--primary: 16 71% 42%LA couleur d'action : CTA, liens. 5,3:1 sur blanc
--accent: 214 52% 25%Titres, structure. 11,3:1 sur blanc
--navy-deep: 213 56% 17%Fonds de bandeaux et pied de page
--gold-bright: 41 88% 62%Chiffres sur fonds navy uniquement
--foreground: 215 28% 17%Corps de texte. 14,7:1 sur blanc
--muted-foreground: 215 14% 40%Notes, légendes. 6,0:1 sur blanc
--rose: 14 62% 40%Palette étendue, rabattue sur la gamme
--violet: 214 52% 32%Palette étendue, rabattue sur la gamme
--cyan: 205 48% 33%Palette étendue, rabattue sur la gamme
--gold: 40 90% 30%Avis, distinctions. ≥ 4,5:1 sur blanc
--indigo: 213 56% 25%Palette étendue, rabattue sur la gamme
--destructive: 0 72% 42%Erreurs, suppression
Typographie
Élégance typographique lyonnaise
Titres, CTA, accents. 100–900.
Lisibilité optimale pour les paragraphes longs, avec un rythme éditorial soigné.
Body, navigation, labels. 200–800.
| Élément | Taille (fluide) | Interligne | Usage |
|---|---|---|---|
h1 | clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem) | 1.06 | Titre de page, premier écran |
h2 | clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem) | 1.14 | Titre de section |
h3 | clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem) | 1.25 | Sous-titre, carte |
h4 | 1.125rem | 1.35 | Intertitre |
h5, h6 | 1rem | 1.4 | Titres mineurs |
body | 1rem | 1.65 | Corps de texte (Plus Jakarta Sans) |
text-sm | 0.875rem | 1.25rem | Body secondaire, notes |
text-xs | 0.75rem | 1rem | Meta, badges, légendes |
Espacement (échelle Tailwind)
0.52px14px28px312px416px624px832px1248px1664px2496pxOmbres
shadow-e1Filet à peine perceptible — champs, puces
shadow-e2Cartes au repos
shadow-e3Cartes survolées, boutons flottants
shadow-e4Dialogues, panneaux
Utilitaires CSS custom
.glassCarte blanche, filet fin, ombre douce — cartes, champs
.glass-strongMême surface, ombre plus marquée — dialogues, en-têtes
.glass-premiumSurface mise en avant — premier écran, portfolio
.surface-sunkenSection alternée gris froid, bords fondus sur 40 px
.section-yRythme vertical de section (--section-y)
.measureLongueur de ligne bornée à 68 caractères
.text-gradient-warmAplat terracotta sur un mot de titre
.text-gradient-coolAplat navy sur un mot de titre
.cta-gradientAplat terracotta + libellé --primary-foreground
.section-dividerFilet 1 px, fondu aux deux extrémités
.card-img-frameCadre d'image 16/10, zéro CLS, zoom au survol
.spot-cardLueur et liseré qui suivent le curseur
.btn-glow-fillBouton plein : reflet + halo terracotta au survol
.btn-glow-ringBouton contour : liseré lumineux au survol
.link-growSoulignement qui s'étire depuis la gauche
.skip-linkLien d'évitement, visible au focus
Aperçu de composants
Boutons
Badges
Dégradés
Kayzen Premium
Ingénierie moderne
Glass Strong
Exemple de carte utilisant la classe .glass-strong.
Un design system réutilisable
Vos projets bénéficient de ce design system éprouvé. Cohérence visuelle, accessibilité et performance sont garanties par construction.