Charte graphique — v2

Identité validée · « Apprendre, voler plus loin » · اليمامتين
Document de référence pour Claude, Claude Code, WordPress / Elementor et toute personne intervenant sur le site. À appliquer à toutes les pages.
ADN de marque

L'envol comme promesse

Première école tunisienne 100% en ligne pour la diaspora, les futurs expatriés et les non-arabophones. Cursus tunisien, arabe, Coran, ateliers & clubs.

Symbolique

LYAMAMATAYN = « les deux colombes ». La colombe : envol, sérénité, transmission, lien aux racines.

Ton

Chaleureux, humain, inspirant, rassurant, moderne, premium. Jamais froid, administratif ou enfantin.

Concept

« Donner des ailes aux enfants » — exprimé avec subtilité, jamais en aile géante.

Logo

Le vrai logo, agrandi et net

Logo officiel (wordmark tricolore + اليمامتين + deux colombes). Détouré sur fond transparent : il fonctionne sur fond clair et sur le bleu nuit. Slogan « Apprendre, voler plus loin » placé sous le logo dans le header.

Palette officielle

Couleurs

#102A43 (bleu nuit) est réservé au footer. Le corps alterne blanc, bleu très clair et crème. Le CTA est toujours jaune.

#3B89BF
Bleu principalTitres secondaires, icônes, liens, éléments de confiance
#C1DCED
Bleu clairFonds doux, cards, séparateurs
#EAF5FC
Bleu très clairFonds de sections alternées
#D5604A
CorailAccents émotionnels, badges, points d'attention
#FFBD59
Jaune CTABoutons principaux, appels à l'action
#FFF8EC
CrèmeFonds de sections chaleureuses
#25364A
Texte principalCorps de texte
#102A43
Bleu nuit — FOOTER UNIQUEMENTFooter & mentions légales seulement
Typographie

Poppins + Nunito

Titres ronds et lisibles (esprit Pazapa). Tailles généreuses : 18px minimum desktop, 16px mobile.

Titre H1 · Poppins 700 · clamp 36–60px
L'école qui donne des ailes à votre enfant
Titre H2 · Poppins 700 · clamp 30–46px
Des programmes complets
Sous-titre · Poppins 500 · 20–24px
Un accompagnement humain et structuré
Corps · Nunito 400/600 · 18px
Un accompagnement humain, structuré et rassurant pour les familles tunisiennes partout dans le monde.
Système Yamamah

Trois piliers d'identité

L'équivalent des « pas » de Pazapa, version envol — toujours subtil, jamais dominant.

1 · Colombe-signature

Footer, bouts de trajectoires, bloc « signification », animation.

2 · Forme d'aile des blocs

Coins opposés arrondis en diagonale sur toutes les cartes.

3 · Trajectoire de vol

Fine ligne pointillée terminée par une colombe.

Forme des blocs

La signature « aile » partout

Tous les blocs partagent la même forme via variables CSS. Version réduite pour les petites lignes ; courbe adoucie sur mobile.

Cartes

--wing: 24px 66px 24px 66px

Lignes courtes

--wing-row: 16px 42px 16px 42px

Composants

Boutons, formulaires & footer

Boutons

Je m'inscris →Découvrir

CTA jaune, coin en pointe d'aile (14/14/14/22).

Champ de formulaire

Fond bleu très clair, focus bleu, coins doux.

Footer — seule zone bleu nuit, bord en forme d'aile

Animation

Mouvement subtil & utile

Reveal au scroll

Fondu + légère montée, rejoué dans les deux sens (haut et bas).

Colombe qui amène le bloc

Une colombe Yamamah se pose au-dessus de chaque titre de section.

Accessibilité

prefers-reduced-motion respecté. Vanilla JS, zéro librairie.

Do & Don't

Les règles à tenir

À faire

  • Colombe discrète dans les détails
  • Courbes inspirées de l'aile (forme des blocs)
  • Sections claires et aérées, mais utiles
  • CTA jaune visible
  • Footer bleu nuit premium + bord en aile
  • Typo grande et lisible (Pazapa-like)
  • Animations subtiles qui rejouent au scroll

À éviter

  • Aile géante / watermark
  • Cercles ou blobs décoratifs
  • Grands blocs bleu nuit dans le corps
  • CTA bleu générique ou trop discret
  • Texte trop petit
  • Dégradés agressifs, effets cartoon
  • Trop de blanc vide sur les côtés
Structure

Page d'accueil — 18 sections

Ordre validé, à conserver intégralement.