Référence interne

Charte graphique Aurlom Éducation

Ce document décrit le design system tel qu'il est réellement appliqué sur le site : couleurs, typographie, composants, pictogrammes, traitement des images et ton éditorial. Il sert de référence pour toute nouvelle page, tout visuel confié à un graphiste et tout support imprimé.

Voir le catalogue de composants

Palette

Couleurs et tokens

Rose signature

--primary · #FF2994

Labels de contexte, liens éditoriaux, CTA signature, accents. Jamais en aplat de fond large.

Navy

--navy · #1E2943

Logo, pied de page, fonds sombres de hero. Couleur d'autorité.

Ambre BTS

--bts · #F59F0A

Signalétique BTS uniquement (boutons initiaux des mega-menus, badges filière).

Jaune CTA

--yellow-cta · #FFD400

Alertes et bandeaux d'exception (mode aperçu). Usage rare.

Succès

--success · #21C45D

Validations, réponses correctes des tests, états conformes.

Fond

--background · #FAF8FB

Fond général du site, très légèrement violacé.

Texte

--foreground · #261736

Titres et corps de texte. Jamais de noir pur.

Muted

--muted · #F0ECF4

Cartes et blocs d'appui, généralement en bg-muted/30 ou /40.

Muted foreground

--muted-foreground · #736284

Textes secondaires, légendes, métadonnées.

Bordure

--border · #E6E0EB

Traits discrets, souvent en border-border/60 ou /40.

Hover neutre

--accent · #F2F2F2

État de survol global des menus et listes déroulantes.

Erreur

--destructive · #EF4343

Erreurs de formulaire et suppressions.

Les couleurs ne sont jamais écrites en dur dans le code : elles sont définies en HSL dans src/index.css et consommées via les classes sémantiques Tailwind. Les valeurs hexadécimales ci-dessus servent uniquement aux supports hors web (print, réseaux sociaux, slides).

Typographie

Poppins pour les titres, Inter pour le texte

Poppins ExtraBold (800) - text-3xl à text-5xl - tracking serré

Le choix du succès.

Poppins ExtraBold - text-2xl à text-3xl

Nos formations d'excellence

Poppins Medium / Bold - text-lg à text-xl

BTS Commerce International

Label de contexte

Inter 11px, uppercase, tracking 0.22em, rose

ESPACE FAMILLE

Corps

Inter Regular 15-16px, leading-relaxed, largeur max 70 caractères

Aurlom forme chaque année plusieurs milliers d'étudiants dans ses campus.

Secondaire

Inter 13-14px, muted-foreground

Texte d'appui, légendes et métadonnées.

CTA signature

Poppins ExtraBold Italic, majuscules, rose, souligné animé

JE CANDIDATE

Principes

Règles d'application

Mise en page

Deux colonnes en desktop : sidebar sticky (240-280px) + colonne principale large.
Container max-w-6xl, padding horizontal px-6, rythme vertical py-12 à py-20.
Un seul H1 par page, précédé d'un label de contexte rose en majuscules.
Le contenu de conversion en haut de page, le contenu exploratoire en bas sous « Ressources ».

Composants

Cartes : bg-muted/30, rounded-xl, border-border/60, pas d'ombre portée marquée.
Boutons : rounded-full, hauteur 40-48px, libellé court sans emoji.
Formulaires : fond bg-muted/40, champs rounded-md, bouton d'envoi rounded-full.
Tableaux et diagrammes : HTML/Flexbox, traits simples, bordures colorées, jamais de SVG complexe ni de flèches.

Pictogrammes

lucide-react uniquement, trait fin, taille discrète (w-3.5 à w-5).
Aucune icône pleine, colorée façon emoji ou décorative.
Passer par le registre src/lib/icons.ts pour les icônes sémantiques.

Images

Photographies réelles d'étudiants et de campus, cadrage serré, lumière naturelle.
Ratios normés : 1:1 (mosaïque hero), 4:5 (portrait), 16:9 (éditorial et vidéos).
Format WebP, tuiles 600x600 (≤150 Ko), visuels uniques 1200x1200, loading lazy hors hero.
Rendu object-cover par défaut, object-contain réservé aux visuels documentaires.

Ton éditorial

Registre de boussole : affirmatif, utile, sans survente ni superlatifs creux.
Vocabulaire RH officiel : « Chargé(e) d'Admission », « Gouvernance ».
Aucun emoji, aucun tiret cadratin ni demi-cadratin : uniquement le trait d'union.
Contenus concours et annales : extraits réels, jamais d'exemples inventés.

Garde-fous

À faire et à ne pas faire

À faire

Utiliser les tokens sémantiques (bg-background, text-foreground, border-border).
Réserver le rose aux accents et aux actions de conversion.
Garder les bordures et les fonds discrets, laisser respirer le blanc.
Uniformiser les survols sur le gris neutre hsl(0 0% 95%).

À éviter

Écrire des couleurs en dur (text-white, bg-black, bg-[#...]).
Empiler des dégradés violets ou des ombres colorées sur les cartes.
Multiplier les tailles de titres différentes dans une même page.
Ajouter des emojis, des icônes pleines ou des flèches décoratives dans les schémas.

Formats

Gabarits pour les créations graphiques

Support	Dimensions source	Contraintes
Tuile mosaïque hero	600 x 600 px	WebP, ≤ 150 Ko, sujet centré, fond uni
Visuel unique hero	1200 x 1200 px	WebP, ≤ 400 Ko, ratio 1:1, 4:5 ou 16:9
Vidéo / animation hero	1200 x 1200 px	MP4 ou WebM, ≤ 3 Mo, boucle 6-10 s, muet, poster obligatoire
Image éditoriale	1600 / 1200 / 800 px de large	16:9, WebP, srcSet à 3 tailles
Aperçu social (OG)	1200 x 630 px	Titre lisible, logo navy, marge de sécurité 80 px
Logo	SVG	Version navy sur fond clair, hauteur d'affichage h-12 dans le header