Charte graphique

Identité visuelle officielle du site des formations du lycée Louis-Bascan. Ce document définit les règles de design appliquées à l'ensemble du site.

Version 1.0 — Août 2026
02

Palette de couleurs

Palette verrouillée. Aucune couleur en dehors de cette palette n'est autorisée sur le site.

Vert Bascan
HEX #309E31
CTA, liens, accents, badges
Vert Dark
HEX #1F7A20
Hover states, pressed states
Vert Light
HEX #4AB84B
Dégradés, accents secondaires
Cool Grey
HEX #F5F7FA
Fonds de sections alternées
Bleu Marine
HEX #1A2A3A
Header, footer, sections sombres
Bleu Marine Light
HEX #2C3E50
Cards sur fond sombre
Text
HEX #3D3D4A
Texte principal du corps
Text Mid
HEX #6B6B7A
Texte secondaire, méta-informations
Blanc Cassé
HEX #FAFAFA
Fonds subtils, dégradés
Gris Bordure
HEX #E8ECF1
Bordures, séparateurs
03

Typographie

Deux familles typographiques exclusives, chargées via Google Fonts.

Titres — Roboto Slab

Aa Bb Cc

1234567890

Weights : 700 (Bold), 800 (ExtraBold), 900 (Black)

Corps — Open Sans

Aa Bb Cc

abcdefghijklmnopqrstuvwxyz

Weights : 400 (Regular), 600 (SemiBold), 700 (Bold)

ÉlémentPoliceGraisseTailleDétails
H1Roboto Slab900 (Black)clamp(2.5rem, 5vw, 4.5rem)letter-spacing: -0.035em
H2Roboto Slab800 (ExtraBold)clamp(1.8rem, 3.5vw, 2.8rem)letter-spacing: -0.035em
H3Roboto Slab700 (Bold)clamp(1.2rem, 2vw, 1.5rem)—
CorpsOpen Sans400 (Regular)17pxline-height: 1.65
NavigationOpen Sans600 (SemiBold)0.9rem—
LabelsRoboto Slab700 (Bold)0.75remuppercase, letter-spacing: 0.08em
BoutonsOpen Sans700 (Bold)0.85–0.95remborder-radius: 40px
04

Éléments UI

Composants réutilisables du design system du Lycée Louis Bascan.

Boutons
Primary Secondary Bandeau

Border-radius: 40px • Font: Open Sans 700 • Padding: 12px 28px

Badges
Populaire Nouveau Guide Bac Pro

Badges éditoriaux, catégories, statuts

Cards

Card sur fond clair

Border-radius 16px, hover avec élévation

Card sur fond sombre

Background ink-card, hover border vert

Espacements & Grille

Container

  • • Max-width : 1200px
  • • Padding : clamp(20px, 4vw, 56px)
  • • Sections : 80-100px padding vertical

Border-radius

  • • Cards : 16px
  • • Petits éléments : 12px
  • • Boutons pill : 40px
05

Rythme des sections

L'alternance des fonds sombres et clairs crée du contraste et de la hiérarchie visuelle.

Header
Section claire
Bandeau / CTA
Footer

Pattern standard : Hero (fond sombre) → Section claire → Section alternée → Bandeau (vert) → Section claire → Footer (fond sombre)

06

Anti-patterns

Ce qui est strictement interdit dans le design du site.

✕

Couleurs hors palette

Aucune couleur en dehors des 10 tokens définis. Pas de bleu clair, pas de jaune, pas de rouge.

✕

Polices non autorisées

Exclusivement Roboto Slab (titres) et Open Sans (corps). Arial, Times, system-ui sont interdits.

✕

Accents manquants

Le site est en français. Tous les accents sont obligatoires : é, è, ê, à, ù, ô, î, etc.

✕

Images floues ou déformées

Toujours utiliser des images de qualité. Ne jamais étirer ou déformer une image.

✕

Overlays trop denses

Les overlays sur les images ne doivent pas dépasser 60% d'opacité. Privilégier la lisibilité.

✕

Lightbox sans fond

Les lightboxes doivent toujours avoir un fond semi-transparent (opacité 0.3 à 0.7).

07

Informations pratiques

Accessibilité

  • Structure sémantique HTML5
  • Focus visible (outline 3px vert)
  • Respect de prefers-reduced-motion
  • Attributs ARIA sur les éléments interactifs
  • Contraste WCAG AA minimum

Responsive

  • 1024px : Navigation hamburger, grilles 2 colonnes
  • 768px : Tout en 1 colonne, titres réduits
  • 480px : Padding minimal, tailles compactes
  • Images responsives (srcset / max-width)

Technique

  • CSS variables pour les couleurs et espacements
  • Classes utilitaires pour les espacements
  • Lightboxes conservées (Mobirise)
  • Google Fonts : Roboto Slab + Open Sans

Rédaction

  • Style direct, accessible
  • Phrases courtes, aérées
  • Hiérarchie claire (H1 → H2 → H3)
  • Accents : é, è, ê, à, ù, ô, î