# Design System IMPORTANT Version 1.0 · 24.09.2026 Source qui fait foi : https://www.important.club/ (feuille de style du site relevée le 24.09.2026). La palette de la charte (Coolors) et le Doc charte ne font que compléter. Page humaine : https://design-system-important.pages.dev/ Logos : https://design-system-important.pages.dev/logo-noir.svg et https://design-system-important.pages.dev/logo-blanc.svg Favicon : https://academy.jodycavalie.com/wp-content/uploads/2024/09/cropped-DS_CFl_LogoBiF_DS-192x192.png ## En une phrase Club privé haut de gamme : beaucoup de blanc, un seul vert profond, des titres de magazine en Times très serrés avec des mots en gras italique, et des blocs aux coins doux posés côte à côte. ## Couleurs (valeurs exactes) | Nom | Valeur | Usage | |---|---|---| | surface | #ffffff | Fond de page, cartes posées dans une tuile ou un panneau | | surface-tile | #f6f6f6 | Fond des tuiles (sur le site : rgba(98,98,98,0.06) sur blanc) | | ink | #0d0d0d | Texte courant, bordure 1px des boutons | | ink-heading | rgba(28,28,28,0.9) | Titres et paragraphes | | ink-muted | #535862 | Navigation, légendes, texte secondaire | | green | #004d1f | LA couleur de marque : boutons, panneau vert, icônes, flèches | | green-deep | #003a17 | Survol des boutons, bas du dégradé du panneau (vient de la palette Coolors) | | green-mid | #4a8567 | Halos du panneau, séries secondaires des graphiques. Jamais en texte courant | | green-tint | #eaefea | Fonds de pastilles, pistes de barres, ligne Total | | on-green | #ffffff | Texte sur green | | hairline | rgba(0,0,0,0.1) | Filets et bordures de tableau (pas d'ombres) | | warning | #8a5a00 | Ajout tableaux de bord : « à surveiller », toujours avec un mot | | danger | #a3261b | Ajout tableaux de bord : « en retard / en baisse », toujours avec un mot | Une seule couleur d'accent (le vert). Pas de bleu, violet, or ni 2e accent. Thème clair uniquement : peindre #ffffff sur body même si le lecteur est en mode sombre. ## Typographie - Titres et gros chiffres : "Times New Roman", TimesNewRoman, Times, Baskerville, Georgia, serif (police système, pas de chargement). - Tout le reste : Poppins (Google Fonts, 400/500/600/700) : `https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap` | Style | Police | Taille / interlignage | Graisse | Interlettrage | |---|---|---|---|---| | display (h1, h2) | Times | 70px / 0.85 | 400 | -0.07em | | display-accent (mots forts dans un display) | Times | 70px / 0.85 | 700 italique | -0.07em | | title (titre de section) | Times | 40px / 0.9 | 700 italique | -0.058em | | card-title | Times | 34px / 1 | 700 italique | -0.05em | | numeral (chiffre clé) | Times | 56px / 1 | 400 | -0.05em, tabular-nums | | lead | Poppins | 24px / 1.5 | 400 | -0.25px | | body | Poppins | 16px / 24px | 400 | normal | | nav | Poppins | 16px / 24px | 500 | normal | | button | Poppins | 14.77px / 1.2 | 600 | -0.16px | | caption | Poppins | 13px / 18px | 500 | normal | Règles : les titres Times sont TOUJOURS très serrés (sans l'interlettrage négatif, ce n'est pas IMPORTANT). Dans un display, 1 ou 2 groupes de mots en gras italique (« deals », « IMPORTANT », « Taylor Chiche »). Pas de capitales forcées sur les libellés. Mobile : display à 46px. ## Formes et espacements | Nom | Valeur | Usage | |---|---|---| | gap | 16px | Entre tuiles, entre cartes, marge extérieure | | pad-card | 24px | Intérieur des cartes blanches | | pad-tile | 60px (24px sous 860px) | Intérieur des tuiles grises | | pad-panel | 56 à 80px (24px sous 860px) | Intérieur du panneau vert | | page-max | 1296px | Largeur maximale, centrée | | radius-tile | 16px | Tuiles, panneau, photos, cartes, barre de navigation | | radius-card | 12px | Petites cartes, ligne Total d'un tableau | | radius-sm | 8px | Champs de formulaire | | radius-pill | 99px | Boutons et pastilles | Pas d'ombres. Les objets se détachent par le fond (blanc sur gris, blanc sur vert) ou un filet hairline. ## Composants - Barre de navigation : tuile surface-tile arrondie, padding 22px 24px, logo noir 24px de haut à gauche, texte nav ink-muted à droite. - Bouton : pilule radius-pill, padding 14px 18px, bordure 1px ink, fond green, texte on-green style button, suivi d'une flèche « → ». Survol : fond green-deep, flèche décalée de 3px. Sur panneau vert : fond blanc, texte green. Focus : anneau 2px green décalé de 2px. - Tuile : fond surface-tile, radius-tile, padding pad-tile ; contient des cartes blanches (radius-tile, pad-card) avec titre card-title. - Panneau vert (1 seul par écran, pour le temps fort) : `radial-gradient(45% 60% at 12% 0%, rgba(74,133,103,.6), transparent 70%), radial-gradient(40% 55% at 90% 100%, rgba(74,133,103,.35), transparent 70%), linear-gradient(180deg, #004d1f, #003a17)`, texte on-green. - Carte d'indicateur : carte blanche, libellé caption ink-muted, chiffre numeral, pastille (green-tint + green ; warning sur #fbf3e4 ; danger sur #fbeceb). - Liste d'avantages : flèche ↗ en green devant un intertitre lead. - Tableau : dans une carte blanche, filets hairline, en-têtes 13px 600, chiffres alignés à droite en tabular-nums, ligne Total sur green-tint arrondie. - Graphiques : série principale green, secondaires green-mid puis ink-muted, pistes green-tint, grille hairline, barres aux bouts arrondis. ## Composition - Page = grille de tuiles séparées de 16px : barre de navigation, puis hero (tuile grise avec display + panneau vert avec le chiffre ou message clé), puis une tuile par section. - Densité aérée : 2 ou 3 colonnes, au plus 4 à 5 indicateurs par ligne, tout sur 1 colonne sous 860px. - Photos (événements, lieux) en pleine tuile avec radius-tile, sans cadre ni filtre. ## Ton Vouvoiement, phrases courtes et assurées, vocabulaire d'investisseur (deal flow, club-deal, off-market, cash-flow). Exemples : « IMPORTANT® source les deals. », « Aucun frais caché », « En toute liberté ». Le nom s'écrit IMPORTANT, suivi de ® à sa 1re mention. Chiffres en chiffres. Pas d'émojis. ## Logo - logo-noir.svg sur fond clair ; logo-blanc.svg sur green ou photo sombre. Hauteur minimale 20px. Zone de protection : la hauteur d'une lettre tout autour. - Interdits : modifier l'opacité, incliner, ajouter un dégradé ou un effet, enfermer dans une forme, rogner, changer la couleur, le redessiner en texte. ## Publication Toute page IMPORTANT se publie sur Cloudflare Pages (jamais d'artifact visible par le client), avec le favicon ci-dessus et ``.