Design System Sloan

Gaïa

La source de vérité de la marque Sloan. Le kit de marque ci-dessous suffit pour un slide, un document ou un email : couleurs à copier, polices, logos et ton de voix. Les sections suivantes — tokens et composants CSS — s'adressent à l'intégration technique (Ariane/TLF, conception, Claude Design), chaque élément rendu en live avec son code.

Pour vos présentations et vos documents

Vous préparez un slide, une note, un email ? Trois choses suffisent à rester dans la charte. Pas besoin de lire le reste de cette page.

1 · Les couleurs — cliquez pour copier le code

Collez le code hexadécimal dans le sélecteur de couleur de Google Slides, PowerPoint, Canva ou Figma (champ « code hex » ou « personnalisé »).

Les deux règles qui suffisent

  • Le wasabi est un accent, jamais un fond. Une seule chose en wasabi par slide — le chiffre-clé, le mot important, le bouton. Deux, et l'œil ne sait plus où aller.
  • Le reste vit en noir, blanc et crème. Le contraste fait le travail ; la couleur ne sert qu'à pointer.

Ce qui casse la charte

  • Un fond entièrement wasabi.
  • Du texte noir sur fond sombre, ou du texte posé sur un dégradé clair.
  • Une couleur prise ailleurs — un bleu, un rouge d'alerte improvisé.
  • Des angles carrés sur les boutons et les pastilles : ils sont toujours arrondis.

2 · Les polices — à installer sur votre ordinateur

Installez les deux polices sur votre poste avant de commencer. Sans elles, PowerPoint et Google Slides remplacent Brockmann en silence par une police approchante : votre document sort de la charte sans que vous le voyiez, et il s'affiche différemment chez vos interlocuteurs.

Brockmann pour les titres, Inter pour le corps de texte. Rien d'autre.

Comment installer : téléchargez les fichiers, sélectionnez-les tous, double-cliquez — sur macOS « Installer la police », sur Windows clic droit → « Installer ». Redémarrez PowerPoint ensuite, sinon il ne les verra pas.

3 · Le modèle de présentation

Un fichier PowerPoint de base, couleurs et polices déjà réglées : vous le dupliquez et vous êtes dans la charte sans y penser. Les couleurs Sloan apparaissent directement dans le sélecteur de couleurs — plus besoin de coller un hex.

Onze slides d'exemple : couverture, sommaire, séparateur de section, titre + contenu, comparaison en deux colonnes, chiffre-clé, citation, prochaines étapes, rappel de charte, mentions obligatoires, page de fin. Dupliquez celle qui correspond à ce que vous voulez dire, plutôt que de partir d'une page blanche.

Le fichier s'ouvre aussi dans Google Slides (Fichier → Importer des diapositives, ou dépôt sur le Drive puis ouverture avec Slides) : le thème et les couleurs sont conservés.

4 · Le prompt à donner à Claude

Collez ce texte au début d'une nouvelle conversation Claude, remplacez les passages entre chevrons, et laissez-le travailler. Il ira lire la charte, dupliquera le modèle sur le Drive et vous rendra votre propre copie modifiable — le modèle d'origine n'est jamais touché.

Tu m'aides à préparer une présentation Sloan.

Avant de rédiger quoi que ce soit, dans cet ordre :

1. Lis la charte de marque Sloan : https://brand.sloan-finance.com/BRAND.md Elle contient le positionnement, le ton, le vocabulaire à employer et celui à proscrire, et les règles de conformité. Tu t'y tiens sans exception.

2. Dans le Drive partagé Sloan, trouve le fichier « TEMPLATE - Présentation Gaïa Sloan.pptx » (03. MARKETING & COMMUNICATION → Branding → Présentations). Duplique-le sous le nom « <titre de ma présentation> — <date du jour> », place la copie dans mon dossier de travail, puis donne-moi son lien : je veux partir d'un exemplaire modifiable qui m'appartient, sans jamais modifier le modèle d'origine.

3. Dis-moi quelles slides du modèle servent mon propos et lesquelles je peux supprimer.

Puis aide-moi à écrire le contenu, en respectant :

- Vouvoiement, phrases courtes, aucun jargon bancaire, aucun ton corporate.
- Une seule chose en wasabi (#CEFF47) par slide — le reste en noir, blanc, crème.
- Aucune promesse d'emploi, de salaire ou de réussite, même implicite.
- Aucun chiffre inventé : si tu n'as pas la source, demande-la-moi.
- Si le sujet touche l'ACPR, la conformité ou le droit du crédit, signale-le plutôt que d'affirmer.
- Rappelle-moi à la fin que toute diffusion publique passe par la conformité.

Mon sujet : <en deux lignes, ce que je veux présenter et à qui>

L'étape 2 suppose que le connecteur Google Drive est activé dans Claude. Sans lui, dupliquez le modèle à la main sur le Drive et laissez Claude reprendre à l'étape 3.

Logos

Deux versions seulement : noire pour les fonds clairs, blanche pour les fonds sombres. Le SVG pour tout usage vectoriel (slides, print), le PNG en dépannage.

Le symbole

  • Sloan vient de student loan : le nom dit exactement ce que nous faisons.
  • Le « a » du logotype reprend l'alpha grec. En mathématiques, α est une inconnue : ce que l'étudiant peut devenir, pas ce que sa famille peut garantir.

Ne pas faire

  • Le déformer, l'étirer, le pencher.
  • Le recolorer — il n'existe qu'en noir et en blanc.
  • L'enfermer dans une forme, lui ajouter une ombre ou un contour.
  • Le coller au bord : laissez au moins la hauteur du « S » tout autour.

Ton & vocabulaire

Sloan parle de sujets sérieux — l'argent, les études, l'avenir — mais jamais sur un ton bancaire, institutionnel ou paternalisant. Clair et direct, responsable, accessible, sérieux mais humain, rassurant.

Écrire comme Sloan

À privilégier

  • Des phrases simples, un vocabulaire accessible
  • Le vouvoiement, toujours, côté lecteur
  • Un ton naturel et conversationnel
  • Une projection vers l'avenir, mais réaliste
  • Expliquer plutôt que vendre, rassurer plutôt que dramatiser, guider sans infantiliser

À éviter

  • Le jargon bancaire, les phrases longues ou floues
  • Les promesses irréalistes
  • Le ton militant ou moralisateur
  • Le marketing agressif « start-up cool » comme le ton austère de banque
  • Présenter le « sans garant » comme un manque ou une stigmatisation sociale

Les mots

À privilégier — prêt étudiant sans garant · financement basé sur l'employabilité de la formation · décision fondée sur la donnée · formations menant à l'emploi · mobilité sociale · égalité des chances · autonomie · indépendance · investir dans son avenir · responsable · transparent · rigoureux · pédagogique · décision éclairée · complémentaire des banques.

À exclure — garantie d'emploi · sans risque · argent facile · réussite garantie · avenir assuré · moins cher · employabilité de l'étudiant (c'est la formation qu'on évalue, jamais l'étudiant) · rêve · destin · sauver · changer des vies · révolution · anti-système · lutte · combat · méritocratie · élites · classes défavorisées · banque · banque digitale · fintech révolutionnaire · finance disruptive.

À manier avec précision — dette · endettement · finance à impact · sélectif · ambition · reproduction sociale · fierté · solidarité · militant.

⚠️ Avant toute diffusion publique

Sloan est une société de financement en cours d'agrément auprès de l'ACPR et de la Banque de France. La publicité pour le crédit est réglementée : certaines formulations sont encadrées, d'autres interdites.

  • Aucune promesse d'argent facile, d'emploi, de salaire ou de réussite — même implicite.
  • Des mentions obligatoires dès qu'un crédit, un taux, un montant ou une durée sont mentionnés.
  • Ne jamais inventer un chiffre, un taux ou une obligation réglementaire.

Toute formulation destinée à une diffusion publique passe par la conformité avant publication. En cas de doute, demandez plutôt que d'affirmer.

Couleurs

Palette de marque + neutres + statuts. Toujours via les tokens --sln-*, jamais de hex codé en dur.

Marque

--sln-ink#121212
--sln-paper#ffffff
--sln-linen#fbfaf6
--sln-wasabi#ceff47 · accent
--sln-wasabi-deep#b8e83a · hover
--sln-pink#f74ea8

Neutres

--sln-gray-700#4b5563
--sln-gray-600#637381 · texte 2re
--sln-gray-400#9ca3af
--sln-gray-200#dfe4ea · bordures
--sln-gray-100#f3f4f6
--sln-gray-25#f9fafb

Statuts

--sln-greensuccès
--sln-invaliderreur
--sln-yellowalerte
--sln-cyaninfo

Typographie

Trois familles : Brockmann (titres), Inter (corps), JetBrains Mono (eyebrows, tags, labels techniques). Brockmann & JetBrains Mono sont auto-hébergées (aucun appel Google Fonts).

Familles

Display — Brockmann

Aa Gg Éé · ABCDEFGHIJKLM · 0123456789

Corps — Inter

Aa Gg Éé · ABCDEFGHIJKLM · 0123456789

Mono — JetBrains Mono

Aa Gg Éé · ABCDEFGHIJKLM · 0123456789 · {} () => ;

Regular 400 · Medium 500 · SemiBold 600 · Bold 700

Échelle & classes

Titre H1

Titre H2

Titre H3

Corps large (.body-lg) — l'intro, claire et rassurante.

Corps secondaire (.body-sm).

Code
<h1 class="h1">Titre H1</h1>
<h2 class="h2">Titre H2</h2>
<h3 class="h3">Titre H3</h3>
<p class="body-lg">Corps large</p>
<p class="body-sm">Corps secondaire</p>

Espacements

Échelle 4px. Tokens --sln-space-*.

1·4
2·8
4·16
6·24
8·32
12·48
16·64

Rayons

Cartes → lg. Boutons/pills → pill. Champs → sm.

sm · 8
md · 12
lg · 16
xl · 24
2xl · 32
pill

Ombres

Tokens --sln-shadow-*. Les CTA ont une ombre dédiée alignée sur l'ink.

sm
md
lg
cta

Mouvement

Courbe signature --sln-ease + durées quick / base / slow. Survolez les tuiles.

quick
base
slow

Dégradés & verre

Recettes de marque : mesh clair / sombre et surface verre. Le wasabi & le pink restent des halos, jamais des aplats.

--sln-mesh-light

--sln-mesh-dark

Boutons

Toujours via .btn. Rayon pill systématique.

Code
<button class="btn btn--primary">Faire ma simulation</button>
<button class="btn btn--ink">Créer mon compte</button>
<button class="btn btn--ghost">En savoir plus</button>
<button class="sln-sec-btn">↩ Retour</button>

Tags & eyebrows

Eyebrow = label capitales mono au-dessus d'un titre. Tag = étiquette de catégorie. Tous deux en JetBrains Mono.

Conseils Bourses Étape 1 Nouveau
Code
<span class="tag">Conseils</span>
<span class="eyebrow">Étape 1</span>
<span class="eyebrow eyebrow--pink">Nouveau</span>

Cartes

Récapitulatif

Contenu de carte standard, rayon lg, fond paper.

Code
<div class="sln-card">
  <p class="sln-section-title">Récapitulatif</p>
  <p class="body-sm">Contenu de carte…</p>
</div>

Lignes de détail

Montant12 000 €
%Taux2,9 %
Code
<div class="sln-det-row">
  <span class="sln-det-ic">€</span>
  <span class="sln-det-l">Montant</span>
  <span class="sln-det-v">12 000 €</span>
</div>
<div class="sln-det-sep"></div>

Réassurance

Sans garant

Votre éligibilité dépend de votre école, pas de vos parents.

Code
<div class="sln-rea">
  <span class="sln-rea-icon">✓</span>
  <div>
    <p class="sln-rea-title">Sans garant</p>
    <p class="sln-rea-body">Votre éligibilité…</p>
  </div>
</div>

Tooltips

Indice .sln-tip avec attribut data-tip. Survolez le point.

Taux fixe
Code
Taux fixe <span class="sln-tip" data-tip="Le taux ne change pas…"></span>

Champs & inputs

Icône Lucide à gauche, toujours. Variante verre sur fond clair ou sombre.

Code
<div class="sln-field">
  <span class="sln-field__icon"><svg>…</svg></span>
  <input class="sln-input--glass" placeholder="Mon école…" />
</div>

Modale

Glassmorphism : backdrop blur(32px) sur voile ink, panel verre qui porte le contenu.

Éligibilité

Vérifions votre école

Le fond du site est flouté derrière un voile ink ; le panel reste lisible.

Mesh gradient

Mesh clair : aucun contenu posé directement dessus (le contenu vit dans une carte verre). Mesh sombre : texte clair autorisé, jamais noir.

Section sombre

Fond mesh noir

Halos wasabi/pink sur ink — texte clair uniquement.

Cartes verre

Glassmorphism / liquid glass — le fond reste visible flouté à travers le verre.

Sans garant

Verre sur mesh clair

Le fond mesh reste visible, flouté à travers le verre.

Page école

Verre sur mesh sombre

Voile ink translucide, texte clair — jamais de noir.

Objets de marque

Illustrations assets/objects/ — à doser, jamais en surcharge.

lunettes stylo rose stylo bille carnet noir carnet spirale café post-it macbook trombone