La charte graphique de Bascan Alumni
Ce document rassemble les règles de design appliquées sur l'ensemble de la plateforme : couleurs, typographie, composants et bonnes pratiques, pour garder une expérience cohérente d'une page à l'autre.
Charte graphique Bascan Alumni — Version 1.0
Logo & marque
Le badge « LB » (Lycée Louis-Bascan) sert de marque courte dans la navigation. Il s'accompagne toujours du nom complet « Bascan Alumni ».
Règles d'utilisation
- Zone d'exclusion minimale autour du badge : 12px.
- Taille minimale du badge seul : 32 × 32 px.
- Le badge est toujours un cercle plein ; ne jamais l'étirer, l'incliner ou changer ses proportions.
- Sur fond bleu ou sombre, le badge s'inverse (fond blanc, texte bleu) — jamais de badge bleu sur bleu.
- Le nom complet « Bascan Alumni » n'est jamais abrégé autrement que par le badge « LB ».
Couleurs
Palette verrouillée, reprise à l'identique dans home.php, faq.php et inscription.php. Toute nouvelle page doit puiser exclusivement dans ces teintes.
Couleur de marque, liens, boutons primaires, titres en italique.
États hover/focus des éléments bleus.
Accent éditorial : numéros de section, libellés « e-mail envoyé », détails discrets.
Soulignements discrets, jamais en aplat large.
Texte principal, titres.
Texte secondaire, descriptions, méta-informations.
Fond de page général.
Sections alternées, fonds de blocs discrets.
Pastille de l'eyebrow, alertes, refus dans les diagrammes de process.
Validation réussie dans les diagrammes de process.
Extension fonctionnelleTypographie
Deux familles exclusives, chargées via Google Fonts. Aucune autre police n'est utilisée sur la plateforme.
| Élément | Police | Taille | Détails |
|---|---|---|---|
| H1 (hero) | Fraunces 600 | clamp(30px,4.4vw,50px) | letter-spacing -0.01em, mot-clé en italique bleu |
| H2 (section) | Fraunces 600 | 24–26px | toujours précédé d'un .section-tag |
| H3 / H4 (carte, question) | Fraunces 600 | 15–18px | utilisé pour tout titre de composant |
| Corps | Public Sans 400 | 14–17px | line-height 1.6–1.7, couleur Slate |
| Étiquette (section-tag, eyebrow) | Public Sans 700 | 12–12.5px | uppercase, letter-spacing .08em |
| Boutons | Public Sans 600 | 14px | padding 11px 20px, coins nets |
Composants UI
Les composants ci-dessous existent déjà en production (accueil, FAQ, processus d'inscription) et doivent être réemployés tels quels plutôt que réinventés.
Boutons
Coins nets (2px, jamais arrondis) · padding 11px 20px · une seule variante primaire pleine par section.
Étiquettes
L'eyebrow est la seule utilisation de coins arrondis en pilule (100px) — tout le reste de l'interface reste anguleux.
Carte
Titre de la carte
Bordure fine, coins nets, la bordure passe au bleu au survol. Jamais d'ombre portée forte sur les cartes de contenu.
Accordéon (FAQ)
Exemple de question
<details>/<summary> native — aucune dépendance JS externe, accessible par défaut.Étape numérotée (timeline de process)
Titre de l'étape
Pastille cerclée bleue, ligne de connexion verticale entre les étapes.
Sommaire collant (catégories / sections)
Le composant utilisé juste au-dessus de cette page (barre « 01 · Logo… 07 · Infos ») est le même que
celui de la FAQ : défilement horizontal sur mobile, fondus de bord conditionnels, et un décalage
top:77px pour se coller juste sous header.site (76px + 1px de bordure,
z-index:9999 en mode visiteur) sans jamais passer dessous.
Espacements & grille
Conteneur
Largeur maximale 1180px · padding horizontal 28px (16px sous 560px) · sections verticales 64–76px de padding.
Rayon des coins
Échelle d'espacement
Anti-patterns
Coins arrondis génériques
Pas de border-radius en pilule hors de l'eyebrow. Le reste de l'interface reste anguleux (2px).
Polices hors charte
Exclusivement Fraunces (titres) et Public Sans (corps). Pas de police système par défaut.
Couleurs hors palette
Aucune teinte en dehors des tokens définis en section 02, sauf extension clairement documentée (ex. vert de validation).
Navbar/footer dupliqués
Une page de contenu ne recrée jamais le header ou le footer : ils vivent exclusivement dans navigations.php.
Élément sticky mal calé
Tout élément position:sticky ajouté doit tenir compte des 77px du header réel, sous peine de chevauchement.
Accents manquants
Le site est en français : tous les accents sont obligatoires (é, è, ê, à, ù, ô, î…).
Informations pratiques
Accessibilité
- Contraste minimum AA sur tous les textes.
- Accordéon FAQ en
<details>/<summary>natif, navigable au clavier. - Cibles tactiles (chips, boutons) ≥ 40px de hauteur.
Responsive
900px— grilles à 2 colonnes (glossaire, workflow).700px— embranchements de diagrammes empilés en 1 colonne.560px— padding réduit à 16px, sections resserrées.
Charte graphique Bascan Alumni — Version 1.0. Pour toute question, contactez l'équipe.