Brand Guide
Guidelines for maintaining a consistent, confident, and refined brand across all materials — from presentations to the website.
01 Our Brand Identity Philosophy & principles
This guide is for everyone at ISJ. It provides clear guidelines on how to use our logo, colours, typography, and messaging to maintain a consistent and professional brand across all materials. Whether you're creating a presentation, a newsletter, a school event poster, or social media content, this guide ensures that everything we produce reflects ISJ's identity in a clear and unified way.
Our brand reflects who we are. Consistent usage strengthens our brand.
Design Philosophy
ISJ's visual identity draws from the tradition of understated luxury — warm, confident, and restrained. Our materials should feel like a well-lit reading room, not a brochure. We communicate quiet authority through generous spacing, warm tones, considered typography, and the absence of visual noise.
Core Principles
Warmth over coldness. No cool greys, no sterile whites. Every neutral is warm — cream, stone, sand. Our palette creates an inviting, approachable feel that reflects the school community.
Restraint over decoration. Each element earns its place. We don't add ornament for its own sake. Clean layouts, purposeful whitespace, and quiet confidence are more powerful than visual clutter.
Confidence over persuasion. ISJ doesn't need to shout. Our quality speaks through the way we present ourselves — measured, thoughtful, and assured.
Authenticity over stock imagery. ISJ materials gain visual interest through photography of school life and artwork created by pupils — maintaining an authentic and engaging presentation across all media.
02 Voice & Tone How we sound
If our brand were a person, this is what they would sound like. Our voice is authentic, thoughtful and confident. We shouldn't sound pretentious. We want to speak clearly, simply, and see the world through our audiences' eyes, not ours.
Language & Terminology
Consistency in language helps reinforce our brand identity and ensures clarity in all communications.
| Rule | Detail | Example |
|---|---|---|
| British English | All written materials use British English spelling | colour, behaviour, programme |
| Pupils, not students | When referring to children, use pupils | "Our pupils thrive…" |
| Capitalise subjects | Always capitalise academic subject names | Mathematics, Science, English |
| School name | Full name first, then ISJ | "The Independent School of Jakarta (ISJ)…" |
| The Schools Trust | Always include the article "The" | "Part of The Schools Trust" |
03 Why ISJ Brand pillars
"ISJ builds on the best traditions of British independent schools. These are a commitment to character development, academic excellence, and holistic education. They emphasise moral integrity, leadership, and self-discipline, balanced with vibrant arts, sports, and extracurricular opportunities. These traditions cultivate well-rounded, confident individuals prepared for success in a globalised world."
ISJ is a happy and nurturing school where every child feels known, valued, and supported. Our community is warm, inclusive, and built on trust and care, creating a sense of belonging for pupils and families alike. We believe that happiness is not only a measure of success but also a foundation for achievement — children who feel safe and confident are free to explore, take risks, and reach their full potential.
We are committed to academic excellence rooted in the individual attention each pupil receives. The Head and teachers know every child personally, understanding their strengths, interests, and aspirations. Our dedicated teaching team delivers internationally recognised curricula that encourage curiosity, rigour, and independent thought, ensuring every pupil achieves their best and develops a lifelong love of learning.
At ISJ, learning goes far beyond the classroom. Our holistic approach balances academic study with a rich programme of sports, music, the arts, and outdoor learning. Through these experiences, pupils develop creativity, confidence, and resilience. We aim to inspire curiosity about the world and to nurture the character, teamwork, and leadership skills that prepare children for life.
Character education is central to everything we do. Our values and expectations around respect, kindness, and good behaviour are woven into daily school life. Pupils are encouraged to act with integrity, show empathy, and take responsibility for themselves and others. These habits form the moral compass that will guide them throughout their education and beyond.
Situated in the leafy, family-friendly neighbourhood of Pondok Indah, ISJ offers a safe and convenient location within South Jakarta. The modern campus provides open, green spaces that create a calm, inspiring environment for learning and play — a rare setting in the heart of the city where children can flourish both academically and personally.
An ISJ education opens doors to the world. With an internationally recognised curriculum and a diverse community representing more than forty nationalities, pupils gain a global perspective and the confidence to thrive anywhere. Our approach equips them with the knowledge, skills, and character needed to progress to leading schools and universities worldwide, and to contribute meaningfully in an interconnected world.
04 The Colour Palette Brand & web colours
Our colour palette ensures a clean, professional, and consistent brand identity. ISJ Blue is our primary colour, representing trust, stability, and academic excellence. Red should be used very sparingly. Gold may appear more frequently but with restraint.
Primary Brand Colours
| Colour | HEX | CMYK |
|---|---|---|
| ISJ Blue | #182B55 | 71.76%, 49.41%, 0%, 66.67% |
| Powder Blue | #B0D0E8 | 28%, 10%, 0%, 9% |
| ISJ Gold | #E79819 | 0%, 34.2%, 89.18%, 9.41% |
| ISJ Grey | #C0C0C0 | 0%, 0%, 0%, 24.71% |
| ISJ Red | #E30513 | 0%, 97.8%, 91.63%, 10.98% |
Preferred Text Colours
| Usage | Colour |
|---|---|
| Body and Headings | #333333 |
| Borders and Secondary Accents | #666666 |
Web-Specific: Extended Colour System
Website Background Tones
On the website, we replace standard grey backgrounds with warm, inviting tones. Sections rotate through these to create visual rhythm.
Background Rotation
| Background | When | ~Frequency |
|---|---|---|
| Cream | Default content | 40% |
| White | Alternating, photo-adjacent | 20% |
| Powder Tint | Key info, stats, "at a glance" | 15% |
| Navy | CTAs, quotes, high-impact | 10% |
| Gold | Emphasis statements | 5% |
Navy Usage Guide
| Context | Value | Notes |
|---|---|---|
| Full backgrounds | #182B55 | Rich at scale |
| Card accents (3px) | #182B55 | Top or left borders |
| Navy as body text | #1d3461 | Lighter — avoids reading too dark |
| Large headings | #182B55 | 2rem+ only |
05 Our Logos Master, sports & houses
The Master Logo
The primary visual representation of our brand. It serves as the cornerstone of all brand communications across all platforms. The logo should always be used in its original form, maintaining clear space, proportions, and color integrity.
Two primary versions: navy on white (light backgrounds, website header) and white or gold on navy (dark backgrounds, footer).
The Exclusion Zone
Give the logo its space. The safe zone unit is the height of the mark, on all four sides of the logo. Do not impose on this space. It allows the logo to stand out on the page.
Sports Logo — Lions
The "LIONS" shield badge is used for sports and team contexts. Gold lion rampant on a navy shield. Wordmark uses Regan Slab Ultra.
| Element | CMYK | RGB |
|---|---|---|
| Gold | C=3.65 M=40.6 Y=99.96 K=0.27 | 245, 149, 2 |
| Navy | C=95.88 M=72.06 Y=40.51 K=45.47 | 11, 24, 50 |
House System
Four houses, each with its own crest, mascot, and colour palette. All house wordmarks use Celtic Garamond the 2nd.
06 Typography Fonts & type scale
ISJ uses a two-font system: a serif for headings and a clean sans-serif for body text. This pairing balances authority with readability.
| Role | Font | Notes |
|---|---|---|
| Headings | Libre Baskerville | Serif. All heading levels and display text. |
| Body text | Roboto | Sans-serif. Paragraphs, captions, labels. |
| Miscellaneous | Almarai | Navigation and UI elements. |
Type Scale
Web-Specific: Typography Rules
font-family when requiring the serif for headings in custom code.| Level | Size (Desktop) | Weight | Usage |
|---|---|---|---|
| Display | 2.8–3.5rem | 400 | Hero statements |
| H1 | 2–2.4rem | 400 | Page titles |
| H2 | 1.6–1.8rem | 400 | Section headings |
| Eyebrow | 0.72rem | 700 | Uppercase labels · 1.8px spacing |
Eyebrow Pattern
07 Images & Photography Guidelines
Images are probably the most impactful communication tool we use. The best images show happy, engaged pupils in genuine moments of curiosity, joy, or focus. They highlight special, interesting moments that tell a story and evoke emotion.
Strong photos are also clear and uncluttered, drawing attention to what matters most to the students and their experiences. When done right, these images create an authentic and compelling reflection of school life, making a lasting impression on parents and prospective families.
| Do | Don't |
|---|---|
| Capture genuine, unposed moments | Stage artificial group poses |
| Focus on engagement — curiosity, concentration, joy | Use generic stock-style imagery |
| Keep backgrounds clean and uncluttered | Include distracting signage or clutter |
| Show the diversity of our community | Only photograph one type of activity |
| Highlight green spaces and modern facilities | Overuse indoor-only shots |
| Natural light preferred | Heavily filtered or oversaturated images |
08 Web Design System Components & code
Component library, spacing rules, and code patterns for the ISJ website on Squarespace.
Layout
| Context | Max Width |
|---|---|
| Article / prose | 700px |
| Wide content (tables) | 900px |
| Full-width (footer, hero) | 1200px |
| Context | Desktop | Mobile |
|---|---|---|
| Section padding | 60px 40px | 40px 20px |
| Card padding | 24–28px | 18–20px |
| CTA blocks | 60px 40px | 48px 24px |
Components
Trust Grid
Stats Row
Cards & Panels
CTA Section & Buttons
Quotes & Notes
Navigation (Breadcrumbs & Sidebar)
Tables
Footer
Hover States
| Element | Behaviour |
|---|---|
| Text links | Colour → #E79819 |
| Cards | translateY(-2px) + shadow |
| Card borders | → #B0D0E8 |
| Gold buttons | → #d08a15 |
| Table rows | rgba(176,208,232,0.06) |
Breakpoints
| px | Changes |
|---|---|
900 | 4-col → 2-col |
768 | 3-col → 1-col; sidebar stacks |
640 | Footer collapses |
480 | Buttons full-width |
Common Mistakes
| Don't | Do Instead |
|---|---|
| Default every section to cream | Rotate backgrounds |
Use #182B55 for small text | Use #1d3461 or #333 |
| Ignore powder blue | Use for borders, info panels |
| Override Squarespace fonts | Inherit; only declare serif for headings |
| Embed images in code | Break into blocks; use image blocks |
| Round corners on everything | Only buttons (50px) and CTAs (12px) |
| Write "students" | Write "pupils" |
Quick Reference
