# Design System JCA (Jody Cavalie Academy)

Version 1.2 · 24.09.2026
Source qui fait foi : https://academy.jodycavalie.com/ (choix de Francisco, 24.09.2026). Le site a été relevé le 24.09.2026 : réglages Elementor, styles calculés et captures. Les guidelines 2024 de Paul Brändli (Drive `BRANDING JCA/BRANDING 2024 VALIDÉ/Paul Brändli_JODY CAVALIE_GUIDELINES_01.pdf`) servent d'historique. On garde d'elles ce que le site a conservé, et rien de ce qui a été recalé.
Page humaine : https://design-system-jca.pages.dev/
Page test : https://design-system-jca.pages.dev/test
Logos (SVG officiels, Drive `BRANDING 2024 VALIDÉ/TOOLBOX/LOGOTYPE/RVB/SVG`) : https://design-system-jca.pages.dev/logo-large-bleu.svg, logo-large-or.svg, logo-large-blanc.svg, et les mêmes en `medium` et `small`
Favicon : https://design-system-jca.pages.dev/favicon-jca.png (monogramme or sur blanc, repris du site)
Polices : https://design-system-jca.pages.dev/fonts/Jokker-Light.ttf, Jokker-Bold.ttf, Jokker-Heavy.ttf
Éléments graphiques : https://design-system-jca.pages.dev/img/fleche-dessinee.png (flèche blanche à main levée, 155 × 200px), icônes de la méthode `img/methode-*.png` et des chiffres `img/icone-*.png`

## En une phrase

Une académie d'investissement sérieuse et chaleureuse : des grands aplats bleu nuit, des boutons or, un bleu vif réservé à la méthode, des titres Jokker très gras, et des photos de Jody en situation réelle.

## Décisions de Francisco

| Date | Décision |
|---|---|
| 24.09.2026 | Le site academy.jodycavalie.com fait foi. |
| 24.09.2026 | Les 18 versions du logo sont valides : 3 compositions (Large, Medium, Small) × 3 couleurs (bleu, or, blanc), sur fond blanc, bleu nuit ou or. On choisit selon le contexte. |
| 24.09.2026 | Pour les couleurs, on garde ce que le site a conservé du travail de Paul Brändli (Francisco a délégué le comparatif puis l’a validé) : le bleu nuit, l'or et le bleu vif du site, et la police Jokker. Sont recalés : le rouge « Énergie » #FF1700, les neutres ébène #2E2824, gris chaud #7D736E et ivoire #F7F2ED, et les illustrations façon BD. |
| 24.09.2026 | Favicon : le monogramme or du site. |
| 24.09.2026 | Newsletter : le design des e-mails HubSpot, conçu par Francisco, fait foi pour les e-mails, avec ses propres valeurs (or #AA8C50, lien #0244DC, serif). |
| 24.09.2026 | Boutons : on reproduit exactement le site, sans variante. Bouton or, bleu vif au survol. Par extension de cette règle, le ton suit aussi le site : titres et appels au vouvoiement, texte courant au tutoiement. |

## Couleurs (valeurs exactes)

| Nom | Valeur | Usage |
|---|---|---|
| navy | #041426 | LA couleur de fond sombre : sections Méthode et Newsletter, bandeau presse, pied de page. Texte blanc dessus (18,5:1) |
| gold | #A48C58 | Boutons d'action, pilule « Se connecter », titres du pied de page, mots forts sur bleu nuit (5,7:1) |
| blue | #1848D4 | Réservé à la méthode et à l'information : cercle « Liberté », bouton de la section Méthode, icônes, liens. Texte blanc dessus (7,2:1). Jamais sur bleu nuit en texte (2,6:1) |
| white | #FFFFFF | Fond de page, texte sur bleu nuit, bleu vif ou photo |
| black | #000000 | Titres et texte courant sur blanc (le site écrit en noir, pas en bleu nuit) |
| ink-nav | #2A2A2A | Liens de navigation |
| grey | #727272 | Texte secondaire, légendes (4,8:1 sur blanc) |
| paper | #F8F8F8 | Bandeau des chiffres clés, fonds de cartes discrets |
| gold-text | #7D6A40 | Ajout : l'or lisible en petit texte sur blanc (5,2:1). L'or #A48C58 sur blanc n'atteint que 3,3:1 |
| danger | #B42318 | Ajout tableaux de bord : « en retard / en baisse », toujours avec un mot |

Couleurs du logo : les fichiers SVG du Drive gardent leurs valeurs d'origine, Bleu Confiance #12162D et Or Ambitieux #AA8C50. On ne les retouche pas. Partout ailleurs, on utilise les valeurs du site ci-dessus.

Contraste à connaître : le bouton or du site porte un texte blanc à 3,3:1. C'est suffisant pour un grand texte gras (20px sur ordinateur), mais le site descend à 14px sur mobile, sous le seuil. On garde les valeurs du site (règle de Francisco : reproduire le site), l'écart est seulement signalé.

Dosage : blanc et bleu nuit font les fonds (environ 80 %), l'or signale l'action, le bleu vif reste dans la méthode et les icônes. Pas de dégradé, sauf le halo bleu du cercle « Liberté ».

## Typographie

Une seule famille : Jokker (celle des guidelines de Paul Brändli, conservée par le site), auto-hébergée. Repli : "Helvetica Neue", Arial, sans-serif.

```css
@font-face{font-family:"Jokker";src:url(https://design-system-jca.pages.dev/fonts/Jokker-Light.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Jokker";src:url(https://design-system-jca.pages.dev/fonts/Jokker-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Jokker";src:url(https://design-system-jca.pages.dev/fonts/Jokker-Heavy.ttf) format("truetype");font-weight:800;font-display:swap}
```

Le site n'a que ces 3 fichiers. Ses graisses 500 et 600 s'affichent donc en Light et en Bold. On écrit directement 300, 700 ou 800.

| Style | Graisse | Taille / interlignage | Interlettrage | Usage |
|---|---|---|---|---|
| hero | Bold 700 | 42px / 50px (20/24 mobile) | 0.3px | Titre sur photo, blanc, aligné à gauche |
| h2 | Heavy 800 | 42px / 42px (20/20 mobile) | 0 | Titre de section, centré, noir sur blanc ou blanc sur bleu nuit |
| h3 | Bold 700 | 22px / 28px | 0 | Titre de carte |
| kicker | Light 300 | 18px / 20px (16/22 mobile) | 0 | Ligne au-dessus du hero (« Particuliers, investisseurs et entrepreneurs ») |
| body | Light 300 | 18px / 27px (16/24 mobile) | 0 | Texte courant, noir |
| stat | Bold 700 (chiffre) + Light 300 | 18px / 22px | 0 | Bandeau des chiffres : chiffre en gras dans la phrase (« **6000 élèves** formés ») |
| button | Bold 700 | 20px / 20px (16px tablette, 14px mobile) | 0 | Boutons |
| nav | Light 300 | 14px / 21px | 0 | Menu, couleur ink-nav |
| footer-title | Bold 700 | 18px | 0 | Titres de colonnes du pied de page, en or |
| small | Light 300 | 14px / 21px (12/18 mobile) | 0 | Mentions, légendes |

Règles : pas de capitales forcées, pas d'italique dans les titres. Les mots forts d'un paragraphe passent en gras. Les titres de section sont centrés.

## Formes et espacements

| Nom | Valeur | Usage |
|---|---|---|
| radius-btn | 5px | Boutons |
| radius-card | 10px | Cartes (cartes de la méthode, témoignages) |
| radius-pill | 50px | Pilule « Se connecter », pastilles |
| radius-photo | 0 | Photos à angles droits |
| shadow | aucune | Les cartes se détachent par le fond (blanc sur bleu nuit, blanc sur gris). Filet 1px #E6E6E6 au besoin |
| container | 1140px | Contenu centré (1300px pour l'en-tête) |
| section | 55px vertical (Méthode, témoignages), 85px (présentation), 15px (bandeau des chiffres) | Marge intérieure des sections pleine largeur |
| gap | 24px | Entre cartes |
| btn-pad | 15px 30px (15px tablette, 12px 15px mobile) | Intérieur des boutons |

## Éléments graphiques du site

- **La flèche dessinée** (`img/fleche-dessinee.png`, affichée en 50 × 65px) : un trait blanc à main levée qui descend en courbe vers le bouton. Toujours sur un fond sombre (photo voilée ou bleu nuit), posée à droite du texte, pointe vers le bouton or. 1 par bloc au plus.
- **Le cercle « Liberté »** : disque bleu vif #1848D4, mot « Liberté » blanc en Bold, halo bleu flou autour (`box-shadow:0 0 80px 20px rgba(24,72,212,.55)`), au centre de la section Méthode sur bleu nuit.
- **Les cartes de la méthode** : cartes blanches de 150px, radius 10px, icône bicolore bleu vif et or au-dessus, libellé bleu vif en Bold (Argent, Développement des revenus, Investissement, Santé, Mindset, Biohacking), disposées autour du cercle.
- **Les icônes** : pictogrammes pleins en 2 tons, bleu vif #1848D4 et or #A48C58, sans contour (`img/methode-*.png`, `img/icone-*.png`). Une nouvelle icône suit le même principe.
- **Le bandeau presse** : bande bleu nuit pleine largeur, logos des médias en blanc ou gris clair, alignés sur une ligne.
- **Le bandeau des chiffres** : bande #F8F8F8, marge 15px, 4 colonnes séparées par un filet vertical, une icône bicolore de 56px au-dessus de chaque phrase.
- **Le hero en 3 colonnes** (738px de haut) : 3 photos côte à côte, chacune voilée de noir (≈ 55 %), avec kicker, titre, texte, flèche dessinée et bouton or.

## Composants

- En-tête : fond blanc, 80px de haut, logo Large bleu 200 × 28px à gauche, liens nav à droite, puis pilule or « Se connecter » (texte blanc Light 14px/21px, radius 50px, padding 0 10px, 29px de haut).
- Bouton principal : fond gold, texte blanc Bold 20px, padding 15px 30px, radius 5px, sans bordure ni ombre. Survol (comme partout sur le site) : fond blue #1848D4, texte blanc, transition 0,4 s. Pas de flèche dans le bouton : c'est la flèche dessinée qui pointe vers lui.
- Bouton de la méthode : même forme, fond blue, texte blanc ; au survol, fond gold.
- Carte : fond blanc, radius 10px, padding 24px, sans ombre.
- Témoignage : carte blanche, étoiles, titre en Bold, texte Light, nom et date en small grey.
- Carte d'indicateur (ajout tableaux de bord) : carte blanche filet #E6E6E6, libellé small grey, chiffre Heavy 48px, pastille radius 50px (or = OK, bleu vif = info, danger = en retard), toujours avec un mot.
- Graphiques : série principale bleu nuit, 2e or, 3e bleu vif ; grille #E6E6E6.
- Formulaire : champ blanc radius 5px, filet #CFCFCF, texte 16px ; bouton or pleine largeur.

## Composition

- 3 fonds : blanc, bleu nuit, et le gris #F8F8F8 pour le seul bandeau des chiffres. Photo voilée pour le hero.
- Ordre type du site : en-tête blanc · hero photo · bandeau des chiffres gris · bandeau presse bleu nuit · présentation (photo à gauche, texte à droite, bouton or) · Méthode sur bleu nuit · témoignages sur blanc · appel newsletter sur bleu nuit · pied de page bleu nuit.
- Titres de section centrés, contenu dans 1140px.
- Photos : Jody en situation réelle (scène, costume, rue), en couleur. Pas d'illustration façon BD (recalée).

## Newsletter

Source qui fait foi : les newsletters « Finances & Liberté » envoyées depuis HubSpot (relevé du 24.09.2026 sur `[NLJCA] 21.09.2026 - CLIENTS`, un CDS), elles-mêmes issues du design de Francisco. Francisco le juge abouti : on le reproduit, on ne le redessine pas. Le détail du montage bloc par bloc est dans la skill `/hsjca` (`references/corps.md`).

L'e-mail a ses propres valeurs, plus chaudes que le site : son or est #AA8C50 et #B8935A, son lien est le bleu #0244DC des guidelines 2024, sa police est un serif. Dans un e-mail, on prend ces valeurs-ci, pas celles du site.

Exemple réel intégré à la page : https://design-system-jca.pages.dev/nl-exemple.html (le CDS du 21.09.2026 tel que HubSpot l'envoie). En cas de doute, c'est lui qui tranche, pas ce tableau.

| Élément | Valeur (mesurée sur le rendu réel) |
|---|---|
| Largeur | 600px, colonne unique, filet de corps 1px #E7E4DF, fond de page blanc |
| Retrait du texte | 40px à gauche et à droite du corps (texte large de 520px) |
| Police du corps | Merriweather (web font), repli Georgia, serif · 15px · interlignage 30px · #041426 · aligné à gauche |
| Police des bandes, du sondage et du bouton | Arial, sans-serif |
| Intertitres | Merriweather gras 18px/36px, #041426, seuls sur leur ligne |
| Lien d'appel | Merriweather 15px normal (pas de gras), #0244DC, **souligné**, aligné à gauche, terminé par ➜ |
| Séparateurs | filet 1px **en pointillés** #E7E4DF, en retrait (pas pleine largeur) |

Les blocs, de haut en bas :

1. **Bandeau d'en-tête** : image 598 × 138px (https://design-system-jca.pages.dev/img/nl-entete-jca.png) : fond ardoise #2C313A, logo Large blanc centré, filet or, « FINANCES & LIBERTÉ » en capitales or espacées, monogramme géant en filigrane à droite.
2. **Bande de date** : fond crème #F6F2EA, Arial 12px gras capitales #8A6E3E, centré : `JOUR · FORMAT · JJ.MM.AAAA` (« LUNDI · CONSEIL DES SAGES · 21.09.2026 »).
3. **Citation d'ouverture** (CDS), centrée : guillemet géant “ #E4D3B3, citation en Georgia italique 18px #2C313A entre guillemets droits "…", auteur en capitales Merriweather 15px #B8935A précédé de « – ». Puis un filet.
4. **Corps**, aligné à gauche : « Salut {prénom}, », paragraphes séparés par une ligne vide, intertitres gras, listes à puces sans ligne vide autour, exposants ¹ ² pour le jargon.
5. **Bloc question** (ASK) : « QUESTION 1 » Arial gras #B8935A, titre h2 Arial gras #2C313A, citation de l'abonné en italique #6A6F79, prénom en capitales gras #B8935A (détail dans `/hsjca`).
6. **Image** : environ 545px de large, bord gris clair, légende centrée « Source : lien » en italique.
7. **Signature, alignée à gauche** : image « Signature Jody et photo » (https://design-system-jca.pages.dev/img/nl-signature-jody.jpg), 200px de large, puis « Fondateur de la Jody Cavalie Academy » Merriweather 12px #8A8F98, à gauche. Puis un séparateur.
8. **Le jargon en clair** : titre Merriweather gras 18px #B8935A à gauche, notes « ¹ **Terme** : définition » à la suite, sans ligne vide entre elles.
9. **Sondage**, centré : « Que penses-tu de la newsletter ? » Arial gras 20px #001528, 5 émojis, puis le bouton.
10. **Bouton**, centré : fond #AA8C50, texte blanc Arial gras 18px, arrondi 5px, padding 18px 45px, sans bordure (« Donner mon avis »). Puis un séparateur.
11. **Réseaux**, centré : « Suis-moi sur les réseaux sociaux : » Arial gras 20px #001528, puis 6 icônes rondes en couleur (Instagram, YouTube, LinkedIn, TikTok, X, site).
12. **Pied** : fond bleu nuit #041426, logo Large blanc 150px centré, mention légale obligatoire Merriweather 12px blanc centrée (« Contenu informatif, pas un conseil en investissement ni une recommandation personnalisée… »), adresse de JCA Institute et liens de désabonnement en blanc.

## Ton

La voix de Jody (voir les fiches Identité JCA) : direct, oral, pédagogue, rassurant, sans promesse de gain. Comme sur le site (règle de Francisco du 24.09.2026, appliquée au ton par extension) : vouvoiement dans les titres de hero et les appels (« Libérez votre potentiel », « Recevez la newsletter »), tutoiement dans le texte courant. Le nom s'écrit « Jody Cavalié » dans les textes, « JODY CAVALIE » dans le logo, « la JCA » pour l'académie. Chiffres en chiffres. Émojis de visage seulement, 3 au plus.

## Logo

- 3 compositions : **Large** (monogramme + JODY CAVALIE sur 1 ligne) pour les en-têtes et les bandeaux ; **Medium** (monogramme au-dessus, JODY / CAVALIE sur 2 lignes) pour les pieds de page, couvertures et formats carrés ; **Small** (monogramme seul) pour le favicon, les avatars et les petits formats.
- 3 couleurs : bleu #12162D sur blanc ou or, or #AA8C50 sur blanc ou bleu nuit, blanc sur bleu nuit, or ou photo sombre. Les 18 combinaisons sont valides (Francisco, 24.09.2026).
- Hauteur minimale : 20px pour le Large, 24px pour le Small. Zone de protection : la hauteur de la barre supérieure du monogramme tout autour.
- Interdits : modifier l'opacité, incliner, ajouter une ombre ou un effet, enfermer dans une forme, rogner, changer la couleur hors des 3 valeurs, recomposer en texte.

## Publication

Toute page JCA se publie sur Cloudflare Pages (jamais d'artifact visible), avec le favicon ci-dessus et `<meta name="robots" content="noindex">` pour les pages internes.