Identité visuelle officielle du lycée Louis-Bascan. Ce document définit les règles de design appliquées sur l’ensemble du site.
Logo & Identité
Logo officiel
Le logo du lycée Louis-Bascan représente l’institution avec une identité forte.
Règles d’utilisation
- ✅ Zone d’exclusion minimale : 20px autour du logo
- ✅ Taille minimale : 40px pour l’icône seule
- ✅ Ne jamais déformer, incliner ou modifier les couleurs du logo
- ✅ Version blanche obligatoire pour les fonds sombres
- ❌ Ne pas utiliser le logo sur un fond de couleur incompatible
Palette de couleurs
Palette officielle du Lycée Louis-Bascan. Aucune couleur en dehors de cette palette n’est autorisée sur le site.
Couleurs principales
Fonds & textes
Couleurs complémentaires
Typographie
Deux familles typographiques exclusives, chargées via Google Fonts.
Roboto Slab
Titres — 700
Sous-titres — 400
font-family: 'Roboto Slab', serif;
Open Sans
Corps — 700
SemiBold — 600
Regular — 400
font-family: 'Open Sans', sans-serif;
Hiérarchie typographique
| Élément | Police | Graisse | Taille |
|---|---|---|---|
| H1 | Roboto Slab | 700 | 2.5rem |
| H2 | Open Sans | 600 | 1.60em |
| H3 | Open Sans | 600 | 1.40em |
| Corps | Open Sans | 400 | 1.15em |
| Navigation | Open Sans | Bold | 1rem |
| Boutons | Open Sans | 700 | 1rem |
Polices interdites
❌ Arial · Times New Roman · Comic Sans · system-ui
Éléments UI
Composants réutilisables du design system du Lycée Louis-Bascan.
Boutons
Caractéristiques : Border-radius 6px · Font Open Sans 700 · Padding 12px 28px
Badges
Cartes
Titres « Strate »
Menu off-canvas
Indicateur de succès
Article « À la une »
Rythme des sections
L’alternance des fonds clairs et blancs crée du contraste et de la hiérarchie visuelle.
Règles & Anti-patterns
✅ Ce qui est autorisé
- ✅ Couleurs de la palette
- ✅ Roboto Slab & Open Sans
- ✅ Effet Ken Burns au survol
- ✅ Titres « strate » avec flèche
- ✅ Logo sur fond clair ou sombre
❌ Ce qui est interdit
- ❌ Couleurs hors palette
- ❌ Polices non autorisées
- ❌ Déformation du logo
- ❌ Logo sans version blanche sur fond sombre
- ❌ Accents manquants (é, è, à…)
Accessibilité & Responsive
Accessibilité
- ✅ Liens avec texte clair et significatif
- ✅ Focus visible sur tous les éléments interactifs
- ✅ Respect de
prefers-reduced-motion - ✅ Contraste WCAG AA minimum
- ✅ Attributs ARIA sur les éléments interactifs
Responsive
| Breakpoint | Comportement |
|---|---|
| 1200px+ | Grille 4 colonnes |
| 992–1199px | Grille 3 colonnes |
| 768–991px | Grille 2 colonnes |
| 480–767px | Grille 1 colonne, padding compact |
| < 480px | Logo réduit, menu hamburger |
Informations pratiques
Fichier CSS principal : style.css (thème OceanWP Child)
Polices : Google Fonts — Roboto Slab, Open Sans
Icônes : Font Awesome 6
Logo : Fichiers disponibles dans la médiathèque WordPress
Version : 1.0
Dernière mise à jour : août 2026
