Guide de marque
Directives pour maintenir une image de marque cohérente, confiante et raffinée dans tous les supports, des présentations au site Web.
01 Notre identité de marque Philosophie et principes
Ce guide s'adresse à tous les membres de l'ISJ. Il fournit des directives claires sur la manière d'utiliser notre logo, nos couleurs, notre typographie et nos messages afin de maintenir une image de marque cohérente et professionnelle dans tous nos supports. Que vous créiez une présentation, une newsletter, une affiche pour un événement scolaire ou du contenu pour les réseaux sociaux, ce guide vous permet de vous assurer que tout ce que nous produisons reflète l'identité de l'ISJ de manière claire et uniforme.
Notre marque reflète qui nous sommes. Une utilisation cohérente renforce notre marque.
Philosophie du design
L'identité visuelle d'ISJ s'inspire de la tradition du luxe discret : chaleureux, confiant et sobre. Nos supports doivent donner l'impression d'une salle de lecture bien éclairée, et non d'une brochure. Nous communiquons une autorité discrète grâce à un espacement généreux, des tons chauds, une typographie réfléchie et l'absence de bruit visuel.
Principes fondamentaux
La chaleur plutôt que la froideur. Pas de gris froids, pas de blancs stériles. Toutes les couleurs neutres sont chaudes : crème, pierre, sable. Notre palette crée une atmosphère accueillante et accessible qui reflète la communauté scolaire.
La sobriété plutôt que la décoration. Chaque élément a sa place. Nous n'ajoutons pas d'ornements pour le simple plaisir. Des mises en page épurées, des espaces blancs judicieux et une confiance discrète sont plus efficaces qu'un encombrement visuel.
La confiance plutôt que la persuasion. ISJ n'a pas besoin de crier. Notre qualité transparaît dans notre manière de nous présenter : mesurée, réfléchie et assurée.
L'authenticité plutôt que les images d'archives. Les supports ISJ suscitent l'intérêt visuel grâce à des photographies de la vie scolaire et à des œuvres d'art réalisées par les élèves, ce qui permet de conserver une présentation authentique et attrayante dans tous les médias.
02 Voix et ton Notre ton
Si notre marque était une personne, voici comment elle s'exprimerait. Notre voix est authentique, réfléchie et confiante. Nous ne devons pas paraître prétentieux. Nous voulons nous exprimer clairement, simplement, et voir le monde à travers les yeux de notre public, et non à travers les nôtres.
Langue et terminologie
La cohérence linguistique contribue à renforcer l'identité de notre marque et garantit la clarté de toutes nos communications.
| Règle | Détail | Exemple |
|---|---|---|
| anglais britannique | Tous les documents écrits utilisent l'orthographe britannique. | couleur, comportement, programme |
| Élèves, pas étudiants | Lorsque vous faites référence à des enfants, utilisez le terme « élèves ». | « Nos élèves s'épanouissent… » |
| Mettre les sujets en majuscules | Toujours mettre une majuscule aux noms des matières scolaires | Mathématiques, sciences, anglais |
| Nom de l'école | Nom complet d'abord, puis ISJ | « L'École indépendante de Jakarta (ISJ) … » |
| Le Fonds pour les écoles | Toujours inclure l'article « The » | « Membre du Schools Trust » |
03 Pourquoi ISJ Les piliers de la marque
« L'ISJ s'appuie sur les meilleures traditions des écoles indépendantes britanniques. Celles-ci sont axées sur le développement de la personnalité, l'excellence académique et l'éducation holistique. Elles mettent l'accent sur l'intégrité morale, le leadership et l'autodiscipline, tout en offrant un équilibre avec des activités artistiques, sportives et parascolaires dynamiques. Ces traditions forment des individus équilibrés et confiants, prêts à réussir dans un monde globalisé. »
ISJ est une école heureuse et stimulante où chaque enfant se sent connu, apprécié et soutenu. Notre communauté est chaleureuse, inclusive et fondée sur la confiance et l'attention, créant un sentiment d'appartenance tant pour les élèves que pour leurs familles. Nous croyons que le bonheur n'est pas seulement une mesure du succès, mais aussi le fondement de la réussite : les enfants qui se sentent en sécurité et en confiance sont libres d'explorer, de prendre des risques et de réaliser leur plein potentiel.
Nous nous engageons à offrir un enseignement d'excellence fondé sur l'attention individuelle accordée à chaque élève. Le directeur et les enseignants connaissent personnellement chaque enfant, comprennent leurs points forts, leurs centres d'intérêt et leurs aspirations. Notre équipe pédagogique dévouée dispense des programmes reconnus à l'échelle internationale qui encouragent la curiosité, la rigueur et la pensée indépendante, afin que chaque élève donne le meilleur de lui-même et développe un amour de l'apprentissage qui durera toute sa vie.
À l'ISJ, l'apprentissage va bien au-delà de la salle de classe. Notre approche holistique équilibre les études académiques avec un programme riche en sports, musique, arts et apprentissage en plein air. Grâce à ces expériences, les élèves développent leur créativité, leur confiance et leur résilience. Nous visons à inspirer la curiosité pour le monde et à cultiver le caractère, le travail d'équipe et les compétences en leadership qui préparent les enfants à la vie.
L'éducation du caractère est au cœur de toutes nos activités. Nos valeurs et nos attentes en matière de respect, de gentillesse et de bonne conduite sont intégrées dans la vie scolaire quotidienne. Les élèves sont encouragés à agir avec intégrité, à faire preuve d'empathie et à assumer leurs responsabilités envers eux-mêmes et les autres. Ces habitudes constituent la boussole morale qui les guidera tout au long de leur scolarité et au-delà.
Situé dans le quartier verdoyant et familial de Pondok Indah, l'ISJ bénéficie d'un emplacement sûr et pratique dans le sud de Jakarta. Le campus moderne offre des espaces verts ouverts qui créent un environnement calme et inspirant pour l'apprentissage et les loisirs — un cadre rare au cœur de la ville où les enfants peuvent s'épanouir tant sur le plan scolaire que personnel.
Une éducation ISJ ouvre les portes du monde. Grâce à un programme d'études reconnu internationalement et à une communauté diversifiée représentant plus de quarante nationalités, les élèves acquièrent une perspective mondiale et la confiance nécessaire pour s'épanouir partout dans le monde. Notre approche leur apporte les connaissances, les compétences et le caractère nécessaires pour intégrer les meilleures écoles et universités du monde entier et apporter une contribution significative dans un monde interconnecté.
04 La palette de couleurs Couleurs de la marque et du site web
Notre palette de couleurs garantit une identité de marque claire, professionnelle et cohérente. Le bleu ISJ est notre couleur principale, symbolisant la confiance, la stabilité et l'excellence académique. Le rouge doit être utilisé avec parcimonie. Le doré peut apparaître plus fréquemment, mais avec modération.
Couleurs principales de la marque
| Couleur | HEX | CMJN |
|---|---|---|
| ISJ Bleu | #182B55 | 71,76 %, 49,41 %, 0 %, 66,67 % |
| Bleu poudre | #B0D0E8 | 28 %, 10 %, 0 %, 9 % |
| ISJ Or | #E79819 | 0 %, 34,2 %, 89,18 %, 9,41 % |
| ISJ Gris | #C0C0C0 | 0 %, 0 %, 0 %, 24,71 % |
| ISJ Rouge | #E30513 | 0 %, 97,8 %, 91,63 %, 10,98 % |
Couleurs de texte préférées
| Utilisation | Couleur |
|---|---|
| Corps et titres | #333333 |
| Frontières et accents secondaires | #666666 |
Spécifique au Web : système de couleurs étendu
Arrière-plans du site Web
Sur le site Web, nous remplaçons les arrière-plans gris standard par des tons chauds et accueillants. Les sections alternent entre ces tons pour créer un rythme visuel.
Rotation de l'arrière-plan
| Contexte | Quand | ~Fréquence |
|---|---|---|
| Crème | Contenu par défaut | 40% |
| Blanc | Alternant, adjacent à la photo | 20% |
| Teinte en poudre | Informations clés, statistiques, « en un coup d'œil » | 15% |
| Marine | CTA, citations, fort impact | 10% |
| Or | Déclarations d'accentuation | 5% |
Guide d'utilisation de la marine
| Contexte | Valeur | Remarques |
|---|---|---|
| Contexte complet | #182B55 | Riche à grande échelle |
| Accents de carte (3px) | #182B55 | Bordures supérieures ou gauches |
| Bleu marine comme couleur du corps du texte | #1d3461 | Plus clair — évite une lecture trop sombre |
| Grands titres | #182B55 | 2rem+ uniquement |
05 Nos logos Maître, sports et maisons
Le logo principal
La représentation visuelle principale de notre marque. Il sert de pierre angulaire à toutes les communications de la marque sur toutes les plateformes. Le logo doit toujours être utilisé dans sa forme originale, en conservant un espace clair, des proportions et une intégrité des couleurs.
Deux versions principales : bleu marine sur fond blanc (fonds clairs, en-tête du site web) et blanc ou doré sur fond bleu marine (fonds sombres, pied de page).
La zone d'exclusion
Laissez de l'espace au logo. La zone de sécurité correspond à la hauteur du logo, sur ses quatre côtés. N'empiétez pas sur cet espace. Il permet au logo de ressortir sur la page.
Logo sportif — Lions
L'écusson « LIONS » est utilisé dans le contexte sportif et pour les équipes. Lion d'or rampant sur un bouclier bleu marine. Le mot-symbole utilise la police Regan Slab Ultra.
| Élément | CMJN | RVB |
|---|---|---|
| Or | C = 3,65 M = 40,6 Y = 99,96 K = 0,27 | 245, 149, 2 |
| Marine | C = 95,88 M = 72,06 Y = 40,51 K = 45,47 | 11, 24, 50 |
Système de maisons
Quatre maisons, chacune avec son propre blason, sa mascotte et sa palette de couleurs. Tous les logos des maisons utilisent la police Celtic Garamond the 2nd.
06 Typographie Polices et échelle typographique
ISJ utilise un système à deux polices : une police à empattement pour les titres et une police sans empattement épurée pour le corps du texte. Cette combinaison allie autorité et lisibilité.
| Rôle | Police | Remarques |
|---|---|---|
| Titres | Libre Baskerville | Serif. Tous les niveaux de titre et le texte d'affichage. |
| Corps du texte | Roboto | Sans empattement. Paragraphes, légendes, étiquettes. |
| Divers | Almarai | Éléments de navigation et d'interface utilisateur. |
Type Échelle
Spécifique au Web : règles typographiques
famille de polices lorsque vous avez besoin de la police à empattement pour les titres dans le code personnalisé.| Niveau | Taille (ordinateur de bureau) | Poids | Utilisation |
|---|---|---|---|
| Affichage | 2,8–3,5 rem | 400 | Déclarations des héros |
| H1 | 2–2,4 rem | 400 | Titres des pages |
| H2 | 1,6–1,8 rem | 400 | Titres des sections |
| Sourcil | 0,72 rem | 700 | Étiquettes en majuscules · Espacement de 1,8 px |
Modèle de sourcils
07 Images et photographie Directives
Les images sont probablement l'outil de communication le plus efficace que nous utilisons. Les meilleures images montrent des élèves heureux et impliqués dans des moments authentiques de curiosité, de joie ou de concentration. Elles mettent en évidence des moments spéciaux et intéressants qui racontent une histoire et suscitent des émotions.
Les photos percutantes sont également claires et épurées, attirant l'attention sur ce qui importe le plus aux élèves et à leurs expériences. Lorsqu'elles sont bien réalisées, ces images reflètent de manière authentique et convaincante la vie scolaire, laissant une impression durable aux parents et aux familles potentielles.
| Faire | Ne pas |
|---|---|
| Capturez des moments authentiques et naturels | Positions artificielles de groupe sur scène |
| Mettre l'accent sur l'engagement — curiosité, concentration, joie | Utilisez des images génériques de type stock |
| Veillez à ce que l'arrière-plan soit propre et dégagé. | Inclure des panneaux distrayants ou encombrants |
| Montrer la diversité de notre communauté | Ne photographiez qu'un seul type d'activité. |
| Mettre en valeur les espaces verts et les installations modernes | Utilisation excessive des tirs uniquement en salle |
| Lumière naturelle préférée | Images fortement filtrées ou saturées |
08 Système de conception Web Composants et code
Bibliothèque de composants, règles d'espacement et modèles de code pour le site Web ISJ sur Squarespace.
Mise en page
| Contexte | Largeur maximale |
|---|---|
| Article / prose | 700 px |
| Contenu large (tableaux) | 900 px |
| Pleine largeur (pied de page, héros) | 1200 px |
| Contexte | Ordinateur de bureau | Mobile |
|---|---|---|
| Remplissage de section | 60px 40px | 40px 20px |
| Rembourrage de carte | 24–28 px | 18–20 px |
| Blocs CTA | 60px 40px | 48 px 24 px |
Composants
Grille de confiance
Ligne des statistiques
Cartes et panneaux
Section CTA et boutons
Citations et notes
Navigation (fil d'Ariane et barre latérale)
Tables
Pied de page
États au survol
| Élément | Comportement |
|---|---|
| Liens textuels | Couleur → #E79819 |
| Cartes | translateY(-2px) + ombre |
| Bordures de carte | → #B0D0E8 |
| Boutons dorés | → #d08a15 |
| Lignes du tableau | rgba(176,208,232,0,06) |
Points d'arrêt
| px | Changements |
|---|---|
900 | 4 couleurs → 2 couleurs |
768 | 3 colonnes → 1 colonne ; piles dans la barre latérale |
640 | Le pied de page s'effondre |
480 | Boutons pleine largeur |
Erreurs courantes
| Ne pas | Faites plutôt |
|---|---|
| Définir toutes les sections par défaut sur crème | Faire pivoter les arrière-plans |
Utilisation #182B55 pour les petits textes | Utilisation #1d3461 ou #333 |
| Ignorer bleu poudre | À utiliser pour les bordures, les panneaux d'information |
| Remplacer les polices Squarespace | Hériter ; déclarer serif uniquement pour les titres |
| Intégrer des images dans le code | Divisez en blocs ; utilisez des blocs d'images |
| Arrondir les angles partout | Uniquement les boutons (50 px) et les CTA (12 px) |
| Écrivez « étudiants ». | Écrivez « élèves ». |
Référence rapide
