# Platypus Coaching — Style Guide Design system partagé entre tous les projets : site, flow, journal, memento, roue-émotions, valeurs, white papers. --- ## 1. Architecture des fichiers ``` _base/ ├── design-tokens.css ← Variables CSS — importer en premier ├── components.js ← Injection automatique nav + footer ├── nav-site.html ← Snippet nav site (référence) ├── nav-app.html ← Snippet nav PWA (référence) ├── footer.html ← Snippet footer (référence) └── STYLE-GUIDE.md ← Ce fichier ``` ### Intégration dans un projet ```html ``` --- ## 2. Couleurs ### Palette principale | Variable CSS | Valeur | Rôle | |---|---|---| | `--cream` | `#F7F2EA` | Fond principal, backgrounds | | `--beige` | `#EDE4D4` | Fond secondaire, cards | | `--sand` | `#D9CCBA` | Bordures subtiles, séparateurs | | `--white` | `#FEFCF8` | Blanc chaud | ### Accent terracotta (primaire) | Variable CSS | Valeur | Rôle | |---|---|---| | `--terracotta` | `#C4714A` | CTA, liens actifs, icônes accent | | `--terracotta-light` | `#D4855E` | Hover states, footer links | | `--terracotta-dark` | `#a35a38` | Pressed states, hover CTA | ### Accent sauge (secondaire) | Variable CSS | Valeur | Rôle | |---|---|---| | `--sage` | `#7A9B7F` | Accents verts, badges | | `--sage-light` | `#A8C4AC` | Backgrounds verts doux | | `--sage-dark` | `#5A7A5F` | Texte sur fond clair, bordures | ### Neutres sombres | Variable CSS | Valeur | Rôle | |---|---|---| | `--brown` | `#4A3728` | Titres, footer background | | `--brown-mid` | `#6B4F3A` | Corps de texte secondaire | | `--text` | `#2E2318` | Corps de texte principal | | `--text-muted` | `#7A6A58` | Texte secondaire, placeholders | | `--dark` | `#1A120A` | Très sombre, overlays | ### Accents spéciaux | Variable CSS | Valeur | Rôle | |---|---|---| | `--lab-accent` | `#3D6B5C` | Couleur spécifique au Lab | ### Overlays prédéfinis ```css --overlay-cream: rgba(247, 242, 234, 0.92) /* nav backdrop */ --overlay-brown: rgba(74, 55, 40, 0.85) /* dark overlay */ --border-subtle: rgba(196, 113, 74, 0.15) /* bordure terracotta légère */ --border-sand: rgba(74, 55, 40, 0.12) /* bordure neutre légère */ ``` --- ## 3. Typographie ### Familles de polices | Variable CSS | Police | Chargée via | |---|---|---| | `--font-display` | `'Cormorant Garamond', Georgia, serif` | Google Fonts (design-tokens.css) | | `--font-body` | `'DM Sans', system-ui, sans-serif` | Google Fonts (design-tokens.css) | | `--font-cinzel` | `'Cinzel', Georgia, serif` | Google Fonts — journal uniquement | **Règle d'usage :** - `--font-display` → tous les titres (h1–h4), logos, éléments éditoriaux - `--font-body` → corps de texte, navigation, labels, boutons - `--font-cinzel` → déclinaison classique (journal, white papers seulement) ### Échelle des tailles #### Titres fluides (clamp) | Variable CSS | Valeur | Contexte | |---|---|---| | `--text-hero` | `clamp(3rem, 7vw, 6rem)` | Hero h1 | | `--text-h1` | `clamp(2.5rem, 5vw, 4.5rem)` | H1 de section | | `--text-h2` | `clamp(2rem, 4vw, 3.2rem)` | H2 | | `--text-h3` | `clamp(1.4rem, 2.5vw, 2rem)` | H3 | | `--text-h4` | `clamp(1.1rem, 1.8vw, 1.4rem)` | H4 | #### Corps de texte (fixe) | Variable CSS | Valeur | Contexte | |---|---|---| | `--text-lg` | `1.15rem` | Lead paragraph | | `--text-md` | `1rem` | Corps standard | | `--text-sm` | `0.875rem` | Secondaire, footer | | `--text-xs` | `0.75rem` | Labels, nav, badges | | `--text-2xs` | `0.65rem` | Super-labels, légendes | ### Graisses | Variable CSS | Valeur | Usage | |---|---|---| | `--weight-light` | `300` | Titres display, subtitles | | `--weight-regular` | `400` | Corps, liens | | `--weight-medium` | `500` | Nav labels, boutons | | `--weight-semibold` | `600` | Emphase, headings column | ### Hauteurs de ligne | Variable CSS | Valeur | Usage | |---|---|---| | `--leading-tight` | `1.2` | Grands titres | | `--leading-snug` | `1.4` | Sous-titres | | `--leading-normal` | `1.6` | Corps compact | | `--leading-relaxed` | `1.75` | Corps principal | | `--leading-loose` | `1.9` | Articles longs | ### Espacement de lettres ```css --tracking-tight: -0.02em /* titres larges */ --tracking-normal: 0em /* corps de texte */ --tracking-wide: 0.04em /* logos, nav links */ --tracking-wider: 0.08em /* boutons, accents */ --tracking-widest: 0.2em /* labels uppercase */ ``` ### Patterns typographiques communs ```css /* Label de section */ .section-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--terracotta); } /* Titre display */ h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--brown); } /* Italic accent (mot en terracotta) */ h1 em, h2 em { font-style: italic; color: var(--terracotta); } ``` --- ## 4. Navigation ### Deux patterns de navigation #### `data-nav="site"` — Nav principale du site Utilisée pour : `site/`, `White papers/` ```html ``` **Structure injectée :** - Logo gauche : "Platypus *Coaching*" - Liens centre : Pourquoi, Accompagnements, Votre coach, Le Lab, La Théorie, Blog - CTA droite : "Prendre RDV" (fond terracotta) - Burger mobile (< 900px) → overlay plein écran **Comportements automatiques :** - Ombre au scroll (class `.scrolled` sur `#pc-navbar`) - Lien actif basé sur l'URL courante - Smooth scroll sur les ancres `#` - Fermeture du menu mobile au clic sur un lien - `padding-top` automatique sur `body` (classe `.has-nav-site`) #### `data-nav="app"` — Header minimal PWA Utilisée pour : `flow/`, `memento/`, `roue-emotions/` ```html ``` **Structure injectée :** - Logo marque gauche (SVG + "Platypus*Coaching*") - Titre app centré (dernier mot en italique terracotta) - Lien retour droit (pill border, hover terracotta) - Backdrop blur / effet verre **Data attributes disponibles :** | Attribut | Défaut | Description | |---|---|---| | `data-app-title` | `"Platypus App"` | Titre de l'app | | `data-app-subtitle` | *(vide)* | Sous-titre (tagline) | | `data-back-label` | `"← Le Lab"` | Texte du lien retour | | `data-back-href` | URL Lab | URL du lien retour | #### `data-nav="none"` — Désactiver l'injection ```html ``` --- ## 5. Footer ### Injection automatique Ajouter `` dans le HTML. Le script injecte le footer automatiquement. ```html ``` ### Structure (4 colonnes) ``` ┌─────────────────────────┬──────────────┬──────────────┬──────────────┐ │ Brand │ Navigation │ Le Lab │ Contact │ │ Logo + tagline + badge │ 5 liens │ 6 liens apps │ Email + RS │ └─────────────────────────┴──────────────┴──────────────┴──────────────┘ │ © 2025 Platypus Coaching │ Instagram · Facebook · LinkedIn │ └─────────────────────────────────┴─────────────────────────────────────┘ ``` ### Responsive | Breakpoint | Colonnes | |---|---| | > 1024px | `2fr 1fr 1fr 1fr` | | 600px – 1024px | `1fr 1fr` (brand full-width) | | < 600px | `1fr` (empilé) | --- ## 6. Espacement & Layout ```css /* Echelle d'espacement */ --space-1: 0.25rem --space-8: 2rem --space-2: 0.5rem --space-10: 2.5rem --space-3: 0.75rem --space-12: 3rem --space-4: 1rem --space-16: 4rem --space-5: 1.25rem --space-20: 5rem --space-6: 1.5rem --space-24: 6rem /* Layout global */ --max-width: 1200px --nav-height: 62px --section-pad-y: clamp(4rem, 8vw, 8rem) --section-pad-x: clamp(1.2rem, 4vw, 2.5rem) ``` --- ## 7. Bordures & Ombres ```css /* Rayons */ --radius-sm: 2px /* boutons CTA */ --radius-md: 4px /* cards légères */ --radius-lg: 8px /* cards */ --radius-xl: 16px /* modales */ --radius-full: 9999px /* pills, badges, burger links */ /* Ombres */ --shadow-xs: 0 1px 3px rgba(44, 31, 20, 0.06) --shadow-sm: 0 2px 8px rgba(44, 31, 20, 0.08) --shadow-md: 0 4px 18px rgba(44, 31, 20, 0.10) --shadow-lg: 0 8px 32px rgba(44, 31, 20, 0.14) --shadow-xl: 0 16px 56px rgba(44, 31, 20, 0.18) ``` --- ## 8. Animations ### Fonctions d'easing ```css --ease-silk: cubic-bezier(0.25, 0.46, 0.45, 0.94) /* transitions fluides */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1) /* rebond (boutons) */ --ease-in: cubic-bezier(0.4, 0, 1, 1) --ease-out: cubic-bezier(0, 0, 0.2, 1) --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1) ``` ### Durées ```css --duration-fast: 150ms /* hover micro-interactions */ --duration-normal: 300ms /* transitions standards */ --duration-slow: 500ms /* ouverture menus */ --duration-slower: 700ms /* animations de page */ --duration-slowest: 1000ms /* respiration, ambiance */ ``` ### Pattern fade-up (entrée de section) ```css @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .reveal { animation: fade-up var(--duration-slower) var(--ease-silk) both; } .reveal:nth-child(2) { animation-delay: 100ms; } .reveal:nth-child(3) { animation-delay: 200ms; } ``` --- ## 9. Breakpoints de référence | Nom | Valeur | Usage | |---|---|---| | `--bp-sm` | `480px` | Mobile large | | `--bp-md` | `768px` | Tablette | | `--bp-nav` | `900px` | Burger menu (tous projets) | | `--bp-lg` | `1024px` | Desktop | | `--bp-xl` | `1280px` | Grand écran | | `--bp-2xl` | `1440px` | Très grand écran | ```css /* Exemple d'usage */ @media (max-width: 900px) { /* mobile / burger */ } @media (max-width: 768px) { /* tablette */ } ``` --- ## 10. Z-Index ```css --z-below: -1 /* backgrounds, textures */ --z-base: 0 /* flux normal */ --z-raised: 10 /* cards, tooltips légers */ --z-dropdown: 50 /* dropdowns */ --z-sticky: 100 /* nav, headers fixes */ --z-overlay: 200 /* menus mobiles, sidebars */ --z-modal: 300 /* modales */ --z-toast: 400 /* notifications */ ``` --- ## 11. Déclinaisons par projet | Projet | Nav | Footer | Police accent | Couleur accent | |---|---|---|---|---| | `site/` | `site` | ✓ | — | terracotta | | `White papers/` | `site` | ✓ | Cinzel | gold → terracotta | | `flow/` | `app` | ✗ | — | terracotta + sage | | `memento/` | `app` | ✗ | — | terracotta | | `roue-emotions/` | `app` | ✗ | — | terracotta | | `journal/` | `custom` | ✗ | Cinzel | gold / moss | | `valeurs/` | À définir | À définir | — | — | --- ## 12. Checklist nouvelle page - [ ] `` en premier - [ ] `` ou `data-nav="app"` selon le contexte - [ ] `` si page de site - [ ] `` avant `` - [ ] Utiliser `var(--token)` plutôt que des valeurs en dur - [ ] Tester le burger menu sur mobile (< 900px) - [ ] Vérifier le lien actif dans la nav