01 Наша идентичность бренда Философия и принципы

Это руководство предназначено для всех сотрудников ISJ. В нем содержатся четкие рекомендации по использованию нашего логотипа, цветов, шрифтов и сообщений для поддержания единого и профессионального имиджа бренда во всех материалах. Независимо от того, создаете ли вы презентацию, информационный бюллетень, плакат о школьном мероприятии или контент для социальных сетей, это руководство гарантирует, что все, что мы производим, будет четко и единообразно отражать идентичность ISJ.

Наш бренд отражает то, кто мы есть. Последовательное использование укрепляет наш бренд.

Философия дизайна

Визуальная идентичность ISJ основана на традициях сдержанной роскоши — теплой, уверенной и сдержанной. Наши материалы должны вызывать ощущение хорошо освещенного читального зала, а не брошюры. Мы передаем спокойную авторитетность с помощью просторного макета, теплых тонов, продуманной типографики и отсутствия визуального шума.

Основные принципы

Теплота вместо холодности. Никаких холодных серых оттенков, никаких стерильных белых тонов. Все нейтральные цвета теплые — кремовый, каменный, песочный. Наша палитра создает уютную, доступную атмосферу, которая отражает школьное сообщество.

Сдержанность в декоре. Каждый элемент занимает свое место. Мы не добавляем украшения просто для красоты. Четкая компоновка, целенаправленное использование белого пространства и спокойная уверенность более эффективны, чем визуальный беспорядок.

Уверенность вместо убеждения. ISJ не нужно кричать. Наше качество говорит само за себя — мы ведем себя сдержанно, вдумчиво и уверенно.

Аутентичность вместо стоковых изображений. Материалы ISJ привлекают внимание благодаря фотографиям школьной жизни и художественным работам учеников, что позволяет сохранить аутентичность и увлекательность презентации во всех средствах массовой информации.

02 Голос и тон Как мы звучим

Если бы наш бренд был человеком, он бы так звучал. Наш голос аутентичен, вдумчив и уверен. Мы не должны звучать претенциозно. Мы хотим говорить ясно, просто и смотреть на мир глазами нашей аудитории, а не своими.

Язык и терминология

Последовательность в использовании языка помогает укрепить идентичность нашего бренда и обеспечивает ясность во всех коммуникациях.

Правило	Деталь	Пример
британский английский	Во всех письменных материалах используется британское правописание.	цвет, поведение, программа
Ученики, а не студенты	Когда речь идет о детях, используйте слово «ученики».	«Наши ученики процветают…»
Писать заглавными буквами	Названия академических предметов всегда пишутся с заглавной буквы.	Математика, естественные науки, английский язык
Название школы	Сначала полное имя, затем ISJ	«Независимая школа Джакарты (ISJ)…»
Школьный траст	Всегда включайте артикль «The»	«Часть The Schools Trust»

03 Почему ISJ Основа бренда

«ISJ опирается на лучшие традиции британских независимых школ. Это приверженность развитию личности, академическому совершенству и целостному образованию. Они уделяют особое внимание нравственной целостности, лидерским качествам и самодисциплине, уравновешивая их яркими занятиями искусством, спортом и внеклассными мероприятиями. Эти традиции воспитывают всесторонне развитых, уверенных в себе личностей, готовых к успеху в глобализированном мире».

Счастливый, теплый, безопасный и гостеприимный

ISJ — это счастливая и заботливая школа, где каждый ребенок чувствует себя узнаваемым, ценным и поддерживаемым. Наше сообщество теплое, инклюзивное и основано на доверии и заботе, что создает чувство принадлежности как для учеников, так и для их семей. Мы верим, что счастье — это не только мерило успеха, но и основа для достижений: дети, которые чувствуют себя в безопасности и уверены в себе, могут свободно исследовать, рисковать и полностью раскрыть свой потенциал.

Академическое превосходство

Мы стремимся к академическому совершенству, основанному на индивидуальном подходе к каждому ученику. Директор и учителя знают каждого ребенка лично, понимают его сильные стороны, интересы и стремления. Наша преданная своему делу команда преподавателей реализует международно признанные учебные программы, которые поощряют любознательность, строгость и независимое мышление, обеспечивая каждому ученику достижение наилучших результатов и развитие любви к обучению на всю жизнь.

Целостное образование

В ISJ обучение выходит далеко за пределы классной комнаты. Наш комплексный подход сочетает академические занятия с насыщенной программой по спорту, музыке, искусству и обучению на свежем воздухе. Благодаря этим занятиям ученики развивают творческие способности, уверенность в себе и стойкость. Мы стремимся пробудить в детях любопытство к миру и воспитать в них характер, навыки командной работы и лидерские качества, которые подготовят их к жизни.

Характер

Воспитание характера занимает центральное место во всем, что мы делаем. Наши ценности и ожидания в отношении уважения, доброты и хорошего поведения являются неотъемлемой частью повседневной школьной жизни. Учащихся поощряют действовать честно, проявлять сочувствие и брать на себя ответственность за себя и других. Эти привычки формируют моральный компас, который будет направлять их на протяжении всего обучения и в дальнейшей жизни.

Местоположение

Расположенная в зеленом, семейном районе Пондок Индах, ISJ предлагает безопасное и удобное место в южной части Джакарты. Современный кампус располагает открытыми зелеными пространствами, которые создают спокойную, вдохновляющую атмосферу для обучения и игр — редкое явление в центре города, где дети могут развиваться как в академическом, так и в личностном плане.

Глобальный паспорт

Образование в ISJ открывает двери в мир. Благодаря международно признанной учебной программе и разнообразному сообществу, представляющему более сорока национальностей, ученики приобретают глобальное мировоззрение и уверенность в себе, необходимую для успешной карьеры в любой стране. Наш подход вооружает их знаниями, навыками и характером, необходимыми для поступления в ведущие школы и университеты по всему миру и для внесения значимого вклада в взаимосвязанный мир.

04 Цветовая палитра Цвета бренда и веб-сайта

Наша цветовая палитра обеспечивает чистый, профессиональный и последовательный имидж бренда. Синий цвет ISJ является нашим основным цветом, символизирующим доверие, стабильность и академическое превосходство. Красный цвет следует использовать очень сдержанно. Золотой цвет может использоваться чаще, но с умеренностью.

Основные цвета бренда

ISJ Синий

#182B55

ISJ Gold

#E79819

Голубой

#B0D0E8

ISJ Серый

#C0C0C0

ISJ Белый

#FFFFFF

ISJ Красный

#E30513

Только оповещения

Цвет	HEX	CMYK
ISJ Синий	`#182B55`	71,76 %, 49,41 %, 0 %, 66,67 %
Голубой	`#B0D0E8`	28 %, 10 %, 0 %, 9 %
ISJ Gold	`#E79819`	0%, 34,2%, 89,18%, 9,41%
ISJ Серый	`#C0C0C0`	0 %, 0 %, 0 %, 24,71 %
ISJ Красный	`#E30513`	0%, 97,8%, 91,63%, 10,98%

Предпочтительные цвета текста

Использование	Цвет
Тело и заголовки	`#333333`
Границы и второстепенные акценты	`#666666`

Специфично для веб: расширенная цветовая система

Фоновые тона веб-сайта

На веб-сайте мы заменяем стандартный серый фон теплыми, привлекательными тонами. Разделы чередуются, создавая визуальный ритм.

Крем

#faf9f7

Разделы по умолчанию

Теплый крем

#f8f6f1

Карты, боковые панели

Глубокий крем

#f3efe8

Сильный контраст

Порошковый краситель

#EAF2F8

Панели с ключевой информацией

Вращение фона

Предпосылки	Когда	~Частота
Крем	Содержание по умолчанию	40%
Белый	Чередующиеся, соседствующие по фотографии	20%
Порошковый краситель	Ключевая информация, статистика, «с первого взгляда»	15%
военно-морской флот	CTA, цитаты, высокоэффективные	10%
Золото	Акцентированные утверждения	5%

Правило: Никогда не используйте более двух последовательных разделов с одинаковым фоном.

Руководство по использованию в военно-морском флоте

Контекст	Ценность	Примечания
Полная информация	`#182B55`	Богатство в масштабе
Акценты на карточках (3px)	`#182B55`	Верхняя или левая границы
Синий цвет для основного текста	`#1d3461`	Зажигалка — позволяет избежать слишком темного чтения
Крупные заголовки	`#182B55`	Только 2rem+

05 Наши логотипы Мастер, спорт и дома

Логотип Master

Основное визуальное представление нашего бренда. Оно служит основой всех коммуникаций бренда на всех платформах. Логотип всегда должен использоваться в его первоначальном виде, с сохранением свободного пространства, пропорций и цветовой целостности.

Две основные версии: темно-синий на белом (светлый фон, заголовок веб-сайта) и белый или золотой на темно-синем (темный фон, нижний колонтитул).

Изображения главного логотипа — добавьте через блоки изображений Squarespace

Зона отчуждения

Оставьте логотипу достаточно места. Безопасная зона — это высота знака по всем четырем сторонам логотипа. Не занимайте это пространство. Оно позволяет логотипу выделяться на странице.

Схема зоны отчуждения — добавить через блок изображений Squarespace

Спортивный логотип — Львы

Эмблема «LIONS» используется в спортивных и командных контекстах. Золотой лев на темно-синем щите. В словесном знаке используется шрифт Regan Slab Ultra.

Логотип Lions Sports — добавьте через блок изображений Squarespace

Элемент	CMYK	RGB
Золото	C=3,65 M=40,6 Y=99,96 K=0,27	245, 149, 2
военно-морской флот	C=95,88 M=72,06 Y=40,51 K=45,47	11, 24, 50

Система домов

Четыре дома, каждый со своим гербом, талисманом и цветовой палитрой. Все логотипы домов используют шрифт Celtic Garamond the 2nd.

Льюис

Мышь · Зеленый

Гончар

Кролик · Золото

Роулинг

Олень · Красный

Толкин

Волшебник · Синий

Изображения гербов домов — добавьте с помощью блоков изображений Squarespace

06 Типографика Шрифты и шрифтовая шкала

ISJ использует систему из двух шрифтов: шрифт с засечками для заголовков и чистый шрифт без засечек для основного текста. Такое сочетание обеспечивает баланс между авторитетностью и читаемостью.

Роль	Шрифт	Примечания
Заголовки	Либре Баскервиль	Serif. Все уровни заголовков и отображаемый текст.
Основной текст	Робото	Без засечек. Абзацы, подписи, метки.
Разное	Альмарай	Элементы навигации и пользовательского интерфейса.

Тип Шкала

H1 · Основной заголовок

Независимая школа Джакарты

Libre Baskerville Bold · 20pt · #333333

H2 · Заголовок раздела

Преподавательский состав мирового уровня

Libre Baskerville Bold · 17pt · #333333

H3 · Подзаголовок

Духовная опека и благополучие

Libre Baskerville Bold · 15pt · #333333

H4 · Незначительный заголовок

Обучение через игру

Libre Baskerville Bold · 13,5 пт · #333333

P1 · Основной текст

Наша преданная своему делу команда преподавателей реализует международно признанные учебные программы, которые стимулируют любознательность, строгость и независимое мышление.

Roboto · 11,5 пт · #333333

Выделение / Цитата

«Выноски набраны шрифтом Roboto Italic с левым полем 2–3 пт темно-серого цвета».

Roboto Italic · 12pt · #333333 · Левая граница #666666

Специфика веб-дизайна: правила типографики

Важно: Не переопределяйте декларации шрифтов тела Squarespace в блоках пользовательского кода. Libre Baskerville и Roboto установлены глобально. Используйте только явные семейство шрифтов когда требуется шрифт с засечками для заголовков в пользовательском коде.

Уровень	Размер (настольный компьютер)	Вес	Использование
Дисплей	2,8–3,5 рема	400	Заявления героев
H1	2–2,4 рем	400	Заголовки страниц
H2	1,6–1,8 рема	400	Заголовки разделов
Брови	0,72 рема	700	Заглавные метки · интервал 1,8 пикселя

Форма бровей

font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: #E79819;

07 Изображения и фотографии Руководство

Изображения, пожалуй, являются самым эффективным средством коммуникации, которое мы используем. Лучшие изображения показывают счастливых, увлеченных учеников в моменты искреннего любопытства, радости или сосредоточенности. Они подчеркивают особые, интересные моменты, которые рассказывают историю и вызывают эмоции.

Сильные фотографии также четкие и лаконичные, привлекая внимание к тому, что наиболее важно для учеников и их опыта. При правильном подходе эти изображения создают аутентичное и убедительное отражение школьной жизни, производя неизгладимое впечатление на родителей и потенциальных учеников.

Делать	Не
Запечатлейте настоящие, не постановочные моменты	Позы искусственной группы на сцене
Сосредоточьтесь на вовлеченности — любопытстве, концентрации, радости	Используйте общие стоковые изображения
Держите фон чистым и незагроможденным	Включить отвлекающие внимание вывески или беспорядок
Покажите разнообразие нашего сообщества	Фотографируйте только один вид деятельности
Выделите зеленые зоны и современные удобства	Чрезмерное использование только внутренних уколов
Предпочтительно естественное освещение	Сильно отфильтрованные или перенасыщенные изображения

Пример фотографии — добавьте через блоки изображений Squarespace

08 Система веб-дизайна Компоненты и код

Библиотека компонентов, правила расстояний и шаблоны кода для веб-сайта ISJ на Squarespace.

Макет

Контекст	Максимальная ширина
Статья / проза	`700 пикселей`
Широкий контент (таблицы)	`900 пикселей`
Полная ширина (нижний колонтитул, заголовок)	`1200 пикселей`

Контекст	Рабочий стол	Мобильный
Раздел «Паддинг»	`60px 40px`	`40px 20px`
Набивка карточек	`24–28 пикселей`	`18–20 пикселей`
блоки CTA	`60px 40px`	`48px 24px`

Компоненты

Сеть доверия

.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; } }

Строка статистики

.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; }

Карты и панели

.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 и кнопки

.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); }

Цитаты и заметки

.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); }

Навигация (хлебные крошки и боковая панель)

.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; }

Таблицы

.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); }

Нижний колонтитул

.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; } }

Состояния при наведении курсора

Элемент	Поведение
Текстовые ссылки	Цвет → `#E79819`
Карты	`перевестиY(-2px)` + тень
Границы карточек	→ `#B0D0E8`
Золотые пуговицы	→ `#d08a15`
Строки таблицы	`rgba(176,208,232,0,06)`

Точки останова

px	Изменения
`900`	4-цвет → 2-цвет
`768`	3-колонка → 1-колонка; боковые панели
`640`	Свертывание нижнего колонтитула
`480`	Кнопки полной ширины

Распространенные ошибки

Не	Сделайте вместо этого
По умолчанию каждый раздел должен быть кремового цвета	Поворот фонов
Использование `#182B55` для мелкого текста	Использование `#1d3461` или `#333`
Игнорировать голубой цвет	Использовать для рамок, информационных панелей
Переопределение шрифтов Squarespace	Наследуйте; объявляйте serif только для заголовков
Вставка изображений в код	Разбивайте на блоки; используйте блоки изображений
Скруглить углы на всем	Только кнопки (50 пикселей) и призывы к действию (12 пикселей)
Напишите «студенты»	Напишите «ученики»

Краткий справочник

/* Справочник цветов ISJ Темно-синий: #182B55 Темно-синий текст: #1d3461 Золотой: #E79819 Золотой при наведении курсора: #d08a15 Голубой: #B0D0E8 Красный: #E30513 Кремовый фон: #faf9f7 Теплый фон: #f8f6f1 Глубокий фон: #f3efe8 Пудровый фон: #EAF2F8 Текст: #333333 Вторичный: #4a4a4a Третичный: #666666 Приглушенный: #888888 Граница: #e8e6e3 Граница Lt: #f0eeeb Содержимое: 700px Широкий: 900px Полный: 1200px */