Fondations visuelles
de la marque ISPA.
Ce document réunit les fondations du futur site ispa.fr : palette, typographie, grille, espacements et bibliothèque de composants de base. Il sert de langage commun entre l'agence, les équipes de développement et le client avant la conception des maquettes de pages.
Ton & positionnement
ISPA s'adresse à deux publics en même temps sur un même écran : le futur participant, qu'on tutoie pour le faire rêver, et sa famille, qu'on vouvoie pour la rassurer. La frontière doit rester nette et volontaire, jamais accidentelle.
Contenus adressés aux jeunes
Pages programmes, quiz d'orientation, témoignages d'étudiants, réseaux sociaux, CTA de découverte. Ton énergique, direct, complice.
Contenus adressés aux familles
Accompagnement, garanties, tarifs, formulaires de devis, contact, mentions légales, à propos. Ton chaleureux, professionnel, sans jargon.
| Composant | Cible jeune (tutoiement) | Cible parent (vouvoiement) |
|---|---|---|
| Titre héros accueil | « Ton aventure commence ici. » | « Offrez à votre enfant une expérience qui le transformera. » |
| CTA principal | « Trouve ton séjour » | « Parler à un conseiller » |
| Sous-titre page programme | « Vis ta vie de campus américain. » | « Un encadrement complet, de l'inscription au retour. » |
| Formulaire | « Quel est ton niveau scolaire ? » (quiz) | « Décrivez-nous votre projet, nous vous rappelons sous 24h. » (devis) |
| Newsletter | « Reçois nos meilleurs plans et témoignages. » | « Recevez nos conseils d'experts pour préparer le séjour de votre enfant. » |
Règle : en cas de doute, vouvoiement. Les contenus liés à la sécurité, aux tarifs et aux engagements (garanties, mentions légales, messages d'erreur) restent toujours en vouvoiement, même sur une page à dominante jeune.
Palette
Un bleu électrique qui porte la confiance, un corail réservé aux accents qui porte l'énergie. Proportion recommandée : environ 60 % neutres · 30 % bleu · 10 % corail. Le bleu structure les interfaces (fonds, boutons, liens) ; le corail signale et donne envie (CTA clés, tags, surlignages) — il ne doit jamais devenir une couleur de fond dominante.
Primaire — Bleu électrique
Accent — Corail
Neutres chauds
Bleu nuit — fonds sombres / footer
Contrastes validés (WCAG 2.1)
Ratios calculés selon la formule de luminance relative WCAG. Le seuil AA « texte normal » est 4,5:1, celui du « texte large / UI » est 3:1.
Le corail 500 (#FF6B4A) ne passe pas les contrastes AA en texte sur fond blanc, ni en texte blanc sur fond corail — c'est attendu, il est réservé aux surfaces (boutons avec texte foncé, badges, illustrations) ou à un usage décoratif à grande échelle. Pour un bouton corail à texte blanc, utiliser le corail 700.
Overlay sur photo
Système typographique
Poppins (titres, boutons, labels) pour la personnalité — ronde, moderne, chaleureuse
— et Nunito Sans (corps de texte) pour la lisibilité sur de longs contenus.
Deux polices Google Fonts gratuites, chargées en display=swap pour la performance.
Grille & espacements
Grille Bootstrap standard à 12 colonnes, conteneur .container-xxl, gouttière par défaut
1,5rem. Le bouton « Grille » en bas à droite de l'écran superpose ces 12 colonnes en
rose translucide sur toute la page — pratique pour vérifier l'alignement de chaque section pendant
l'intégration, exactement comme sur les pages de documentation de Bootstrap.
Essayez maintenant : cliquez sur le bouton Grille en bas à droite pour afficher/masquer l'overlay de colonnes sur cette page.
Points de rupture
| Breakpoint | Préfixe | Largeur min. | Usage |
|---|---|---|---|
| Extra small | — | <576px | Mobile portrait (référence de conception) |
| Small | sm | ≥576px | Mobile paysage |
| Medium | md | ≥768px | Tablette |
| Large | lg | ≥992px | Desktop |
| Extra large | xl | ≥1200px | Desktop large |
| XXL | xxl | ≥1400px | Grand écran |
Échelle d'espacements (base 4px)
Cette échelle fixe toutes les valeurs de marges, de
paddings et d'espaces entre éléments (gap) de l'interface. Utiliser exclusivement ces
valeurs — jamais de chiffres « au hasard » — garantit un rythme visuel régulier sur tout le site. Chaque
palier est un multiple de 4px : les petits paliers (sp-1 à sp-3) espacent des éléments proches au
sein d'un même composant (icône/texte, champs de formulaire) ; les grands paliers (sp-6 à sp-9) séparent
les blocs et les sections de page.
Rayons & ombres
Des formes douces et des ombres chaudes et discrètes, jamais grises ni dures — cohérent avec un ton humain et accueillant.
Style d'icônes
Set recommandé : Phosphor Icons (licence libre), pour ses terminaisons arrondies et sa graisse « Regular » amicale, cohérente avec Poppins. La graisse « Duotone » (bleu + corail) est réservée aux illustrations et aux blocs de réassurance ; « Regular » pour toute l'UI courante.
Boutons
Hiérarchie à trois niveaux. Le corail (accent) est réservé au bouton primaire des écrans à forte intention (héros, CTA de conversion) — jamais plus d'un bouton corail visible à la fois dans un même bloc.
| Variante | Défaut | Hover |
|---|---|---|
| Primaire (bleu) | ||
| Accent (corail) | ||
| Secondaire (outline) | ||
| Tertiaire (ghost) |
Tailles
Zone de touche : 44×44px est la taille de bouton « confortable » recommandée sur mobile pour un doigt (référence Apple/Google, reprise en WCAG 2.5.5). Nos boutons Normal (~48px de haut) et Large (~59px) l'atteignent largement. Le bouton Small (~36px) reste au-dessus du minimum strict exigé par le WCAG 2.5.8 (24×24px) mais doit être réservé aux actions secondaires ou aux zones denses (filtres, tableaux) — jamais à un CTA principal sur mobile.
Badges & tags
Utilisés pour qualifier rapidement un programme (âge, durée, type) ou une destination sur les cartes. Deux tailles disponibles.
Taille normale
Taille large
Cards destination & programme
Photo pleine card avec titre (et sous-titre optionnel) en surimpression. Au survol : le texte et
le voile sombre s'effacent pour révéler la photo en entier — l'effet ne se déclenche qu'au survol
souris (hover:hover) pour que le texte reste toujours visible au clavier et au tactile.
Formulaires
Simples, rassurants, avec mention claire de l'usage des données — toujours en vouvoiement, y compris sur les pages jeunes.
Demande de devis
Règle de confiance
Chaque formulaire affiche, à proximité immédiate du bouton d'envoi, une phrase claire sur l'usage des données (jamais uniquement en pied de page). Les champs obligatoires sont signalés, les erreurs s'affichent au plus près du champ concerné, en vouvoiement neutre.
Bloc réassurance
Présent en soutien immédiat de chaque promesse émotionnelle : les chiffres qui prouvent l'expérience, puis les labels qui garantissent le sérieux. Les chiffres s'animent en comptant jusqu'à leur valeur finale au moment où le bloc entre dans l'écran.
Logos officiels à intégrer dès réception des fichiers vectoriels des organismes partenaires.
Témoignages
La preuve la plus puissante : de vrais étudiants, jamais des portraits de banque d'images. Tutoiement dans les citations, cohérent avec la voix des étudiants eux-mêmes.
« Ma famille d'accueil est devenue ma deuxième famille. ISPA a toujours répondu présent, même à 3h du matin la première semaine ! »
« Mon conseiller avait fait le même parcours que moi cinq ans plus tôt. Il savait exactement quoi me dire pour me rassurer avant le départ. »
« En tant que parent, j'ai été rassurée à chaque étape : dossier, visa, hébergement. Toujours une vraie personne au téléphone. »