01 Unsere Markenidentität Philosophie und Grundsätze

Dieser Leitfaden richtet sich an alle Mitarbeiter der ISJ. Er enthält klare Richtlinien zur Verwendung unseres Logos, unserer Farben, unserer Typografie und unserer Botschaften, um eine einheitliche und professionelle Markenpräsenz in allen Materialien zu gewährleisten. Ganz gleich, ob Sie eine Präsentation, einen Newsletter, ein Plakat für eine Schulveranstaltung oder Inhalte für soziale Medien erstellen – dieser Leitfaden stellt sicher, dass alles, was wir produzieren, die Identität der ISJ auf klare und einheitliche Weise widerspiegelt.

Unsere Marke spiegelt wider, wer wir sind. Eine einheitliche Verwendung stärkt unsere Marke.

Designphilosophie

Die visuelle Identität von ISJ basiert auf der Tradition des zurückhaltenden Luxus – warm, selbstbewusst und maßvoll. Unsere Materialien sollen wie ein gut beleuchteter Lesesaal wirken, nicht wie eine Broschüre. Wir vermitteln ruhige Autorität durch großzügige Abstände, warme Farbtöne, durchdachte Typografie und das Fehlen visueller Störfaktoren.

Grundprinzipien

Wärme statt Kälte. Keine kühlen Grautöne, kein steriles Weiß. Alle neutralen Farben sind warm – Creme, Stein, Sand. Unsere Farbpalette schafft eine einladende, zugängliche Atmosphäre, die die Schulgemeinschaft widerspiegelt.

Zurückhaltung statt Überladenheit. Jedes Element hat seinen Platz. Wir fügen keine Verzierungen um ihrer selbst willen hinzu. Klare Layouts, sinnvolle Leerräume und ruhige Selbstsicherheit sind wirkungsvoller als visuelle Unordnung.

Vertrauen statt Überzeugungskraft. ISJ muss nicht laut sein. Unsere Qualität spricht für sich selbst – durch unsere Art, uns zu präsentieren: besonnen, überlegt und selbstbewusst.

Authentizität statt Stockfotografie. ISJ-Materialien gewinnen durch Fotos aus dem Schulalltag und Kunstwerke von Schülern an visueller Attraktivität – so wird eine authentische und ansprechende Präsentation in allen Medien gewährleistet.

02 Stimme und Tonfall Wie wir klingen

Wenn unsere Marke eine Person wäre, würde sie so klingen. Unsere Stimme ist authentisch, nachdenklich und selbstbewusst. Wir sollten nicht prätentiös klingen. Wir möchten klar und einfach sprechen und die Welt mit den Augen unseres Publikums sehen, nicht mit unseren eigenen.

Sprache und Terminologie

Eine einheitliche Sprache trägt dazu bei, unsere Markenidentität zu stärken und sorgt für Klarheit in der gesamten Kommunikation.

Regel	Detail	Beispiel
britisches Englisch	Alle schriftlichen Materialien verwenden die britische Schreibweise.	Farbe, Verhalten, Programm
Schüler, keine Studenten	Wenn Sie sich auf Kinder beziehen, verwenden Sie „Schüler”.	„Unsere Schüler gedeihen …“
Themen groß schreiben	Bezeichnungen von akademischen Fächern immer groß schreiben	Mathematik, Naturwissenschaften, Englisch
Name der Schule	Zuerst der vollständige Name, dann ISJ	„Die Independent School of Jakarta (ISJ) …“
Der Schulverbund	Fügen Sie immer den Artikel „The“ hinzu.	„Teil des Schulverbands“

03 Warum ISJ Markensäulen

„Die ISJ baut auf den besten Traditionen britischer Privatschulen auf. Dazu gehören das Engagement für die Persönlichkeitsentwicklung, akademische Exzellenz und eine ganzheitliche Bildung. Sie legen Wert auf moralische Integrität, Führungsqualitäten und Selbstdisziplin, ergänzt durch ein vielfältiges Angebot an Kunst, Sport und außerschulischen Aktivitäten. Diese Traditionen fördern die Entwicklung vielseitiger, selbstbewusster Persönlichkeiten, die für den Erfolg in einer globalisierten Welt gerüstet sind.“

Fröhlich, warm, sicher und einladend

ISJ ist eine fröhliche und fördernde Schule, in der sich jedes Kind anerkannt, geschätzt und unterstützt fühlt. Unsere Gemeinschaft ist herzlich, inklusiv und basiert auf Vertrauen und Fürsorge, wodurch ein Gefühl der Zugehörigkeit für Schüler und Familien gleichermaßen entsteht. Wir glauben, dass Glück nicht nur ein Maßstab für Erfolg ist, sondern auch eine Grundlage für Leistungen – Kinder, die sich sicher und selbstbewusst fühlen, können frei entdecken, Risiken eingehen und ihr volles Potenzial entfalten.

Akademische Exzellenz

Wir haben uns akademischer Exzellenz verschrieben, die auf der individuellen Betreuung jedes einzelnen Schülers basiert. Der Schulleiter und die Lehrer kennen jedes Kind persönlich und verstehen seine Stärken, Interessen und Ziele. Unser engagiertes Lehrerteam vermittelt international anerkannte Lehrpläne, die Neugier, Genauigkeit und unabhängiges Denken fördern und sicherstellen, dass jeder Schüler sein Bestes gibt und eine lebenslange Liebe zum Lernen entwickelt.

Ganzheitliche Bildung

An der ISJ geht das Lernen weit über den Unterricht hinaus. Unser ganzheitlicher Ansatz verbindet akademisches Lernen mit einem reichhaltigen Programm aus Sport, Musik, Kunst und Outdoor-Aktivitäten. Durch diese Erfahrungen entwickeln die Schüler Kreativität, Selbstvertrauen und Belastbarkeit. Wir möchten ihre Neugier auf die Welt wecken und ihren Charakter, ihre Teamfähigkeit und ihre Führungsqualitäten fördern, um sie auf das Leben vorzubereiten.

Charakter

Die Charakterbildung steht im Mittelpunkt unseres Handelns. Unsere Werte und Erwartungen in Bezug auf Respekt, Freundlichkeit und gutes Benehmen sind fest in den Schulalltag integriert. Die Schüler werden dazu ermutigt, integer zu handeln, Empathie zu zeigen und Verantwortung für sich selbst und andere zu übernehmen. Diese Gewohnheiten bilden den moralischen Kompass, der sie während ihrer gesamten Ausbildung und darüber hinaus leiten wird.

Standort

Die ISJ liegt im grünen, familienfreundlichen Viertel Pondok Indah und bietet eine sichere und verkehrsgünstige Lage im Süden Jakartas. Der moderne Campus verfügt über offene Grünflächen, die eine ruhige, inspirierende Umgebung zum Lernen und Spielen schaffen – eine seltene Kulisse im Herzen der Stadt, in der Kinder sowohl akademisch als auch persönlich aufblühen können.

Globaler Pass

Eine ISJ-Ausbildung öffnet Türen zur Welt. Mit einem international anerkannten Lehrplan und einer vielfältigen Gemeinschaft aus mehr als vierzig Nationalitäten erwerben die Schüler eine globale Perspektive und das Selbstvertrauen, sich überall zurechtzufinden. Unser Ansatz vermittelt ihnen das Wissen, die Fähigkeiten und den Charakter, die sie benötigen, um an führenden Schulen und Universitäten weltweit zu studieren und in einer vernetzten Welt einen sinnvollen Beitrag zu leisten.

04 Die Farbpalette Marken- und Webfarben

Unsere Farbpalette sorgt für eine klare, professionelle und einheitliche Markenidentität. ISJ-Blau ist unsere Hauptfarbe und steht für Vertrauen, Stabilität und akademische Exzellenz. Rot sollte sehr sparsam eingesetzt werden. Gold kann häufiger verwendet werden, jedoch mit Zurückhaltung.

Primäre Markenfarben

ISJ Blau

#182B55

ISJ Gold

#E79819

Hellblau

#B0D0E8

ISJ Grau

#C0C0C0

ISJ Weiß

#FFFFFF

ISJ Rot

#E30513

Nur Warnmeldungen

Farbe	HEX	CMYK
ISJ Blau	`#182B55`	71,76 %, 49,41 %, 0 %, 66,67 %
Hellblau	`#B0D0E8`	28 %, 10 %, 0 %, 9 %
ISJ Gold	`#E79819`	0 %, 34,2 %, 89,18 %, 9,41 %
ISJ Grau	`#C0C0C0`	0 %, 0 %, 0 %, 24,71 %
ISJ Rot	`#E30513`	0 %, 97,8 %, 91,63 %, 10,98 %

Bevorzugte Textfarben

Verwendung	Farbe
Körper und Überschriften	`#333333`
Grenzen und sekundäre Akzente	`#666666`

Webspezifisch: Erweitertes Farbsystem

Website-Hintergrundfarben

Auf der Website ersetzen wir den üblichen grauen Hintergrund durch warme, einladende Farbtöne. Diese wechseln sich in den einzelnen Abschnitten ab und sorgen so für einen visuellen Rhythmus.

Sahne

#faf9f7

Standardabschnitte

Warme Creme

#f8f6f1

Karten, Seitenleisten

Tiefenwirksame Creme

#f3efe8

Starker Kontrast

Pulverfarbe

#EAF2F8

Wichtige Informationsfelder

Hintergrundrotation

Hintergrund	Wenn	~Frequenz
Sahne	Standardinhalt	40%
Weiß	Abwechselnd, neben dem Foto	20%
Pulverfarbe	Wichtige Informationen, Statistiken, „auf einen Blick“	15%
Marine	CTAs, Zitate, wirkungsvoll	10%
Gold	Hervorhebungen	5%

Regel: Es dürfen niemals mehr als zwei aufeinanderfolgende Abschnitte denselben Hintergrund haben.

Leitfaden zur Verwendung der Marine

Kontext	Wert	Anmerkungen
Vollständige Hintergründe	`#182B55`	Reich in großem Maßstab
Kartenakzente (3px)	`#182B55`	Oberer oder linker Rand
Marineblau als Fließtext	`#1d3461`	Leichter – vermeidet zu dunkles Lesen
Große Überschriften	`#182B55`	Nur 2rem+

05 Unsere Logos Meister, Sport & Häuser

Das Master-Logo

Die primäre visuelle Darstellung unserer Marke. Es dient als Grundpfeiler aller Markenkommunikation auf allen Plattformen. Das Logo sollte immer in seiner ursprünglichen Form verwendet werden, wobei Freiraum, Proportionen und Farbintegrität beibehalten werden sollten.

Zwei Hauptversionen: Marineblau auf Weiß (helle Hintergründe, Kopfzeile der Website) und Weiß oder Gold auf Marineblau (dunkle Hintergründe, Fußzeile).

Master-Logo-Bilder – über Squarespace-Bildblöcke hinzufügen

Die Sperrzone

Geben Sie dem Logo seinen Platz. Die Sicherheitszone entspricht der Höhe des Zeichens an allen vier Seiten des Logos. Überschreiten Sie diesen Bereich nicht. So kommt das Logo auf der Seite besser zur Geltung.

Diagramm der Sperrzone – über Squarespace-Bildblock hinzufügen

Sportlogo – Lions

Das „LIONS“-Wappenschild wird im Sport- und Teamkontext verwendet. Goldener Löwe auf einem marineblauen Schild. Die Wortmarke verwendet die Schriftart Regan Slab Ultra.

Lions-Sportlogo – über Squarespace-Bildblock hinzufügen

Element	CMYK	RGB
Gold	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

Haus-System

Vier Häuser, jedes mit eigenem Wappen, Maskottchen und Farbpalette. Alle Haus-Wortmarken verwenden die Schriftart Celtic Garamond the 2nd.

Lewis

Maus · Grün

Töpfer

Kaninchen · Gold

Rowling

Hirsch · Rot

Tolkien

Zauberer · Blau

Hauswappen-Bilder – über Squarespace-Bildblöcke hinzufügen

06 Typografie Schriftarten und Schriftgrößen

ISJ verwendet ein System mit zwei Schriftarten: eine Serifenschrift für Überschriften und eine klare Sans-Serif-Schrift für den Fließtext. Diese Kombination sorgt für ein ausgewogenes Verhältnis zwischen Autorität und Lesbarkeit.

Rolle	Schriftart	Anmerkungen
Überschriften	Libre Baskerville	Serif. Alle Überschriftenebenen und Anzeigetext.
Fließtext	Roboto	Sans-Serif. Absätze, Bildunterschriften, Beschriftungen.
Verschiedenes	Almarai	Navigation und UI-Elemente.

Typ Skala

H1 · Hauptüberschrift

Die unabhängige Schule von Jakarta

Libre Baskerville Bold · 20pt · #333333

H2 · Abschnittsüberschrift

Eine Lehrerschaft von Weltklasse

Libre Baskerville Bold · 17pt · #333333

H3 · Unterüberschrift

Seelsorge & Wohlbefinden

Libre Baskerville Bold · 15pt · #333333

H4 · Unterüberschrift

Lernen durch Spielen

Libre Baskerville Bold · 13,5 pt · #333333

P1 · Fließtext

Unser engagiertes Lehrerteam vermittelt international anerkannte Lehrpläne, die Neugier, Genauigkeit und unabhängiges Denken fördern.

Roboto · 11,5 pt · #333333

Callout / Zitat

„Callouts werden in Roboto Italic mit einem 2–3 pt breiten linken Rand in Dunkelgrau gesetzt.“

Roboto Italic · 12pt · #333333 · Linker Rand #666666

Webspezifisch: Typografie-Regeln

Wichtig: Überschreiben Sie die Schriftartangaben von Squarespace in benutzerdefinierten Code-Blöcken nicht. Libre Baskerville und Roboto sind global festgelegt. Verwenden Sie nur explizite Schriftartfamilie wenn die Serifenschrift für Überschriften in benutzerdefiniertem Code erforderlich ist.

Stufe	Größe (Desktop)	Gewicht	Verwendung
Anzeige	2,8–3,5 cm	400	Heldenaussagen
H1	2–2,4 cm	400	Seitentitel
H2	1,6–1,8 rem	400	Abschnittsüberschriften
Augenbraue	0,72rem	700	Großbuchstaben-Beschriftungen · 1,8 px Abstand

Augenbrauenmuster

Schriftgröße: 0,72 rem; Schriftstärke: 700; Textumwandlung: Großbuchstaben; Buchstabenabstand: 1,8 px; Farbe: #E79819;

07 Bilder & Fotografie Richtlinien

Bilder sind wahrscheinlich das wirkungsvollste Kommunikationsmittel, das wir verwenden. Die besten Bilder zeigen glückliche, engagierte Schüler in authentischen Momenten der Neugier, Freude oder Konzentration. Sie heben besondere, interessante Momente hervor, die eine Geschichte erzählen und Emotionen wecken.

Ausdrucksstarke Fotos sind außerdem klar und übersichtlich und lenken die Aufmerksamkeit auf das, was für die Schüler und ihre Erfahrungen am wichtigsten ist. Wenn sie richtig eingesetzt werden, vermitteln diese Bilder ein authentisches und überzeugendes Bild des Schullebens und hinterlassen einen bleibenden Eindruck bei Eltern und potenziellen Familien.

Tun	Nicht
Echte, ungekünstelte Momente einfangen	Künstliche Gruppenposen inszenieren
Fokus auf Engagement – Neugier, Konzentration, Freude	Verwenden Sie generische Bilder im Stil von Stockfotos.
Hintergründe sauber und übersichtlich halten	Ablenkende Beschilderung oder Unordnung einbeziehen
Zeigen Sie die Vielfalt unserer Gemeinschaft	Fotografieren Sie nur eine Art von Aktivität.
Grünflächen und moderne Einrichtungen hervorheben	Übermäßiger Einsatz von ausschließlich in Innenräumen verwendeten Impfstoffen
Natürliches Licht bevorzugt	Stark gefilterte oder übersättigte Bilder

Beispielfotografie – über Squarespace-Bildblöcke hinzufügen

08 Webdesign-System Komponenten & Code

Komponentenbibliothek, Abstandsregeln und Codemuster für die ISJ-Website auf Squarespace.

Layout

Kontext	Maximale Breite
Artikel / Prosa	`700 Pixel`
Breite Inhalte (Tabellen)	`900 Pixel`
Vollbreite (Fußzeile, Hero)	`1200 Pixel`

Kontext	Desktop	Mobil
Abschnitt-Auffüllung	`60px 40px`	`40px 20px`
Kartenauffüllung	`24–28 px`	`18–20 px`
CTA-Blöcke	`60px 40px`	`48px 24px`

Komponenten

Vertrauensnetzwerk

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; } .trust-item { background: #f8f6f1; padding: 28px 20px; text-align: center; } @media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .trust-grid { grid-template-columns: 1fr; } }

Statistikzeile

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; padding: 32px 0; } .stat-number { font-family: 'Libre Baskerville', Georgia, serif; font-size: 2.4rem; color: #182B55; } .stat-label { font-size: 0.85rem; color: #4a4a4a; margin-top: 4px; }

Karten & Tafeln

.card { background: #faf9f7; border: 1px solid #e8e6e3; border-top: 3px solid #182B55; padding: 28px 24px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .card:hover { box-shadow: 0 8px 24px rgba(24,43,85,0.07); transform: translateY(-2px); } .card--gold { border-top-color: #E79819; } .card--blue { border-top-color: #B0D0E8; } .info-panel { background: #EAF2F8; border: 1px solid rgba(176,208,232,0.4); border-left: 3px solid #B0D0E8; padding: 24px 28px; }

CTA-Abschnitt und Schaltflächen

.cta-section { background: #182B55; padding: 60px 40px; text-align: center; color: white; border-radius: 12px; } .cta-section h2 { font-family: 'Libre Baskerville', Georgia, serif; font-size: 2.2rem; color: white; } .btn-primary { padding: 14px 36px; background: #E79819; color: white; border-radius: 50px; border: 2px solid #E79819; } .btn-primary:hover { background: #d08a15; } .btn-secondary { padding: 14px 36px; background: transparent; color: #E79819; border-radius: 50px; border: 2px solid #E79819; } .btn-secondary:hover { background: rgba(231,152,25,0.1); }

Zitate & Notizen

.quote-block-navy { background: #182B55; padding: 60px 40px; text-align: center; } .quote-block-navy p { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.8rem; color: #E79819; } .note-box { border-left: 3px solid #E79819; padding: 16px 20px; background: rgba(231,152,25,0.05); } .note-box--blue { border-left-color: #B0D0E8; background: #EAF2F8; } .note-box--navy { border-left-color: #182B55; background: rgba(24,43,85,0.03); }

Navigation (Breadcrumbs & Seitenleiste)

.breadcrumb { font-size: 0.82rem; color: #666; } .breadcrumb a { color: #666; text-decoration: none; } .breadcrumb a:hover { color: #E79819; } .sidebar-nav { background: #f8f6f1; padding: 28px 24px; border: 1px solid #e8e6e3; } .sidebar-nav__title { font-family: 'Libre Baskerville', Georgia, serif; font-style: italic; font-size: 1.1rem; } .sidebar-nav__link { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.2px; color: #333; } .sidebar-nav__link:hover, .sidebar-nav__link--active { color: #E79819; }

Tabellen

.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .data-table thead th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #182B55; padding: 12px 16px; border-bottom: 2px solid #182B55; background: #faf9f7; } .data-table tbody td { padding: 12px 16px; border-bottom: 1px solid #e8e6e3; } .data-table tbody tr:hover { background: rgba(176,208,232,0.06); }

Fußzeile

.footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .footer-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #E79819; } .footer-link { color: rgba(255,255,255,0.7); font-size: 0.92rem; } .footer-link:hover { color: #E79819; } @media (max-width: 640px) { .footer-columns { grid-template-columns: 1fr; } }

Hover-Zustände

Element	Verhalten
Textlinks	Farbe → `#E79819`
Karten	`translateY(-2px)` + Schatten
Kartenränder	→ `#B0D0E8`
Goldknöpfe	→ `#d08a15`
Tabellenzeilen	`rgba(176,208,232,0,06)`

Haltepunkte

px	Änderungen
`900`	4-farbig → 2-farbig
`768`	3-spaltig → 1-spaltig; Seitenleistenstapel
`640`	Fußzeile wird ausgeblendet
`480`	Schaltflächen in voller Breite

Häufige Fehler

Nicht	Stattdessen tun
Alle Abschnitte standardmäßig auf Creme setzen	Hintergründe drehen
Verwendung `#182B55` für kleinen Text	Verwendung `#1d3461` oder `#333`
Hellblau ignorieren	Verwendung für Rahmen, Infotafeln
Squarespace-Schriftarten überschreiben	Vererben; Serif nur für Überschriften deklarieren
Bilder in Code einbetten	In Blöcke unterteilen; Bildblöcke verwenden
Alle Ecken abrunden	Nur Schaltflächen (50 px) und CTAs (12 px)
Schreiben Sie „Studenten“	Schreiben Sie „Schüler“

Schnellübersicht

/* ISJ FARBREFERENZ Marineblau: #182B55 Marineblauer Text: #1d3461 Gold: #E79819 Goldfarbener Hover: #d08a15 Puderblau: #B0D0E8 Rot: #E30513 BG Creme: #faf9f7 BG Warm: #f8f6f1 BG Tief: #f3efe8 BG Puder: #EAF2F8 Text: #333333 Sekundär: #4a4a4a Tertiär: #666666 Gedämpft: #888888 Rahmen: #e8e6e3 Rahmen hell: #f0eeeb Inhalt: 700px Breite: 900px Voll: 1200px */