Design system

Charte graphique Koality Academy

Les éléments visuels à réutiliser sur tous les supports de communication : flyers, emails, slides, documents.

LOGO

Le logo Koality Academy

Pictogramme koala géométrique inspiré du cube 3D, accompagné du lettrage Academy.

Règles d’usage

N

Zone de sécurité

Conserver autour du logo une marge équivalente à la hauteur du pictogramme koala.
N

Taille minimale

Ne pas descendre sous 120 px de largeur à l’écran, 30 mm en impression.
N

Fonds autorisés

Blanc, beige chaud (#F0EFED) ou navy (version inversée à prévoir). Pas de photo en fond direct.

PALETTE

Les couleurs qui comptent

Cinq tokens, pas plus. Le vert est un accent, pas une couleur de fond.

Navy

#1B2A4A

Titres, boutons, CTA, blocs sombres

Vert

#22C55E

Accent : liens, icônes, badges, CTA

Beige

#F0EFED

Fonds chauds : hero, zones CTA

Blanc

#FFFFFF

Fond des cards, zones aérées

Gris texte

#45464E

Texte courant, descriptions, labels

TYPOGRAPHIE

Deux polices, deux usages

Plus Jakarta Sans pour peser, Manrope pour lire.

Plus Jakarta Sans

700 / 800 — TITRES & CHIFFRES

Tout ce qui doit « peser » : titres de page, titres de section, chiffres clés, prix, numéros d’étape. Toujours en bold ou extra-bold.

Manrope

400 / 700 — CORPS & LABELS

Le reste : paragraphes, descriptions, labels de section, navigation, méta-informations. Regular pour le corps, bold pour les labels uppercase.

MOTIF SIGNATURE

Le cube & les sparkles

Inspiré du logo Koality, à réutiliser tel quel sur les supports.

Quand l’utiliser

N

Avant un titre de section

Inline avec le label (ex: motif + « CATALOGUE »), centré au-dessus du titre.
N

Comme séparateur de zone

Centré entre deux blocs, encadré de deux lignes horizontales discrètes.
N

Au fil conducteur visuel

À saupoudrer sur flyers, slides, emails pour marquer l’identité.

COMPOSANTS

Boutons & badges

Les éléments d’action et de signalement à piocher dans les supports.

BOUTON PRIMAIRE

Découvrir nos formations

Fond navy, texte blanc, coins 12px. L’action principale d’une page.

CTA VERT

Réserver un appel

Fond vert, pill full round, ombre verte diffuse. Pour les conversions clés.

LIEN SOULIGNÉ

Voir le programme

Texte navy, soulignement vert épais. Pour les liens de lecture secondaires.

BADGES

Qualiopi Découverte La plus demandée

Pill vert clair pour les certifications et catégories, pill vert plein pour la mise en avant sur fond sombre.