Основной контейнер, внешние поля 24 px. Большие композиции — до 12 колонок.
Инструкция к дизайн-коду
Дизайн-система
Не каталог одинаковых карточек, а система сборки содержательных страниц: смысл определяет композицию, композиция — ритм, текст и визуальный акцент. Версия 1.6.
01
Основа
Токены используются вместо случайных значений.
Режим палитры
Активна фирменная палитра. Выбор сохранится после обновления страницы.
Цвета
Ink
#292631Lavender
#8A75A4Mustard
#F6B85AWarm
#F7F3EAVanilla
#F5EED3Paper
#FFFEFBРазделяем цвет поверхности и цвет текста. Пастельные Lavender, Mustard, Warm и Vanilla сохраняются для фирменной атмосферы. Для чтения используются более тёмные Muted #5C5663, Lavender dark #654D7F и Mustard dark #7B602B.
Шаг и геометрия
Шаг: 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 56 / 72 / 88 / 120 pxКонтейнер: 1240 pxРадиусы: 14 / 20 / 28 / 38 px
02
Сетка и пространственный ритм
Размеры выбираются по смысловой близости элементов, а не подгоняются для отдельной страницы.
Поля 16 px. Сложные композиции перестраиваются в одну или две колонки.
Поля 12 px. Один основной поток без горизонтальной прокрутки.
Шкала отступов
48121624324048567288120
120 / 88 / 72самостоятельные смысловые секции: desktop / tablet / mobile
56 / 40заголовок секции → содержимое
24–32элементы внутри одного компонента
8–16тесно связанные строки, метки и подписи
Контракт отступов компонентов
| Уровень | Интервал | Что разделяет | Правило |
|---|---|---|---|
| Страница | 120 / 88 / 72 | Самостоятельные смысловые главы | При общем фоне интервал не удваивается |
| Секция | 56 / 40 | Заголовочную группу и основной блок | Один интервал для всей композиции |
| Крупный блок | 32–48 | Колонки, части manifesto, фото и текст | Чем сильнее различаются роли, тем больше интервал |
| Карточка | 24–32 | Внутренние группы карточки | Не имитирует отступ самостоятельной секции |
| Текстовая группа | 12–16 | Заголовок, абзац и ссылку | Связанные элементы читаются одним фрагментом |
| Микрогруппа | 4–8 | Метка, дата, подпись, единица измерения | Не используется между самостоятельными абзацами |
| CTA + footer | Отдельная композиция | Завершение всей страницы | Утверждённое исключение: простор и общий фон сохраняются |
Стыки секций: один интервал вместо двух
| Ситуация | Правило | Desktop / tablet / mobile |
|---|---|---|
| Одинаковый фон | Один общий интервал между содержимым соседних секций | 120 / 88 / 72 px суммарно |
| Смена фона | Каждая секция сохраняет внутренние поля у границы цвета | 120 / 88 / 72 px с каждой стороны границы |
| CTA перед футером — исключение | Сохраняем просторную композицию и общий фон с футером; правило уплотнения не применяется | Исходные внешние и внутренние отступы сохранены |
Общий фон — единый поток
Содержание первой главы
Заголовок следующей главы
В образце уменьшен масштаб. Нижнее поле первой секции и верхнее второй не складываются.
Смена фона — новая глава
Содержание первой главы
Заголовок следующей главы
Цветовая граница разделяет секции; внутренние отступы сохраняются с обеих сторон.
Оцениваем фон всей секции. Цвет карточки внутри блока не считается сменой фона страницы. У соседних секций с одинаковым data-surface верхний отступ второй равен нулю: расстояние уже задано нижним отступом первой. Hero и навигационная полоса имеют собственный ритм. CTA перед футером — обязательное исключение: его прежние отступы сохраняются, общий фон связывает его с футером.
03
Типографика
Prata — только смысловые заголовки; Manrope — всё чтение и управление. Размеры заданы fluid-шкалой через clamp(): плавно меняются вместе с экраном, но не выходят за безопасные границы.
Display / H1 · Prata · 1.08
Знания становятся частью жизни
H2 раздела · Prata · 1.12
Жизнь нашего центра
H3 компонента · Prata · 23 px / 1.20
Забота о каждом ребёнке
Eyebrow
Образовательная программа
Lead · Manrope · 18–20 px / 1.50
Крупный вводный абзац объясняет смысл раздела и не повторяет заголовок.
| Роль | Fluid-токен | Межстрочный |
|---|---|---|
| H1 главной | --type-display-home | 1.08 |
| H1 страницы | --type-display-page | 1.08 |
| H2 секции | --type-display-section | 1.12 |
| H3 карточки | --type-display-card | 1.20 |
| H4 / вопрос | --type-subheading | 1.25 |
| Вводный абзац | --text-lead | 1.50 |
| Основной текст | --text-body | 1.65 |
| Подпись / метаданные | --text-caption | 1.45 |
Внимание к каждому ребёнку
В узкой карточке заголовок остаётся собранным, а основной текст сохраняет удобный ритм чтения.
На узком экране ширина ограничена доступным местом. Заголовок 23 px × 1.20 = 27.6 px между базовыми линиями вместо 37.9 px при 1.65.
Переносы: заголовки переносятся автоматически по словам. Не фиксируем высоту, не обрезаем строки и не расставляем <br> под один экран. Если заголовок слишком длинный, сначала отделяем пояснение и выбираем подходящую ширину блока. 1.65 относится к абзацам, а не к заголовкам.
Иерархия: один H1 в hero; H2 открывает самостоятельную секцию; H3 называет карточку или вложенный смысловой блок. Заголовок не заканчивается точкой или двоеточием.
04
Цветовые режимы и контраст
Текст и служебные элементы выбираются по фону секции, а не сохраняют один цвет во всех режимах.
Светлый фон
Paper
Ink для текста, Mustard dark для eyebrow, Lavender для ссылок и акцентов.
Пример ссылки →Тёплый фон
Warm / Vanilla
Те же текстовые роли, но соседние поверхности разделяются линией или сменой тона.
Пример ссылки →Тёмный фон
Ink
Светлый текст и тёплый eyebrow. Тёмный eyebrow на тёмной секции запрещён.
Пример ссылки →Для каждой контрастной секции проверяются eyebrow, H2/H3, основной текст, ссылки, линии, кнопки и состояние focus. Нельзя исправлять контраст только у заголовка.
05
Ссылки и кнопки
Один главный призыв на визуальную область.
Состояния: обычное — Ink; hover — Lavender; active/current — Mustard dark; press — тёмно-лавандовый; focus — видимый контур.
07
Текст, цитаты и списки
Основной текст — 16–18 px, длина строки до 72 знаков.
Текст помогает семье понять подход центра, выбрать программу и подготовиться к следующему шагу.
Одна мысль — один абзац
Заголовок называет тему. Вводный абзац объясняет, кому и зачем она нужна. Основной текст раскрывает детали, а условия и ограничения вынесены в отдельную заметку.
Полужирное выделение отмечает ключевой факт, а не целый абзац. Ссылки встроены в контекст: посмотреть образовательные программы. Важные условия остаются видимыми, без сокращения до нескольких строк.
Ритм чтения
- Текстовая колонка — до 68ch; вводный абзац — до 54ch. ch — ориентир ширины, а не точное число русских букв.
- Между абзацами — 16 px. Перед новым подзаголовком — 40 px, после него — 12 px.
- Заголовок карточки и пояснение разделяют 12–16 px. Отступ между блоками задаётся отдельно от межстрочного интервала.
- Выключка по левому краю. Короткие подписи и цифры не заменяют полноценное объяснение.
Однородные пункты
- Каждый пункт отвечает на один вопрос
- У всех пунктов одинаковая грамматическая форма
- Длинный список делится на смысловые группы
Последовательность действий
- Определить вопрос семьи
- Подобрать информацию
- Дать понятный следующий шаг
Цитата и важное условие — разные блоки
Цитата сохраняет точные слова автора и содержит подпись. Условие программы оформляется заметкой. Не придумываем отзывы и не выдаём редакционную формулировку за слова родителей.
Здесь размещается согласованный текст отзыва без изменения смысла.
Образец оформления · имя автора, связь с центром и дата — только при наличии данных и согласия
08
Карточки
Тип карточки выбирается по содержанию, а не ради разнообразия. В карточке с каллиграфикой действует потоковая структура: изображение → H3 → текст; H3 — Prata 27 px с межстрочным 1.2.
Спокойный смысловой блок
Для преимуществ, объяснений и коротких направлений без изображения.
Подробнее →
09
Новостные блоки
На главной — три материала без карточечной подложки; в архиве — та же структура данных. Все изображения в одной сетке обязательно имеют одинаковую высоту.
Новый учебный год
Анонс ограничивается шестью строками и ведёт к полному материалу.
Читать →
Тематические недели
Все материалы имеют одинаковый порядок метаданных.
Читать →Подготовка к экзаменам
Изображение имеет единое соотношение сторон 16:9.
Читать →Единый размер фотографий: колонки равной ширины, рамка 16:9, изображение заполняет её с object-fit: cover. Вертикальные и горизонтальные оригиналы кадрируются внутри рамки. Разделители находятся в промежутках и не сужают среднюю карточку. До загрузки фото место уже зарезервировано; длина заголовка не меняет высоту изображения.
10
Цифры и таблицы
Таблица сохраняет полноту сравнения. Фирменная подача не должна убирать важные столбцы или превращать точные данные в рекламные карточки.
12учеников максимум в классе
1–11семейные классы
2019год начала работы
| Направление | Ступень | Задача | Содержание | Действие |
|---|---|---|---|---|
| Начальная школа | 1–4 классы | Сформировать прочную учебную основу | Предметы, методика и образовательная среда | О программе → |
| Старшая школа | 10–11 классы | Выбрать профиль и подготовиться к поступлению | Профилизация, экзамены и профориентация | О программе → |
| Развивающие занятия | После уроков | Раскрывать интересы и способности | Наука, творчество, языки, культура и движение | Все занятия → |
Когда нужна таблица: если читатель сравнивает три и более одинаковых характеристики. Не заменяем её набором карточек, когда из-за этого приходится повторять подписи или скрывать часть данных. На телефоне таблица остаётся таблицей и прокручивается внутри контейнера.
11
Фотографии и каллиграфика
Фото показывает реальную жизнь, графика передаёт идею.
Фото + текст
Внимание к семье
Соотношение 4:3 или 16:9, мягкий естественный свет, тёплая Kodak/editorial-коррекция. Люди не смотрят прямо в камеру без сюжетной необходимости.
Каллиграфика: прозрачный PNG 1:1, цвет #8A75A4, выразительный штрих с вариативной толщиной, без текста, рамок, заливок и теней. В карточке используется один сюжет.
12
Формы и обратная связь
Подпись всегда видна; ошибка объясняет, как исправить поле.
Образец полей: форма на этой странице не отправляет данные. Рабочая форма должна показывать обязательность полей, ошибку рядом с полем, процесс отправки и подтверждение только после успешной отправки.
13
Составные блоки
Разрешённые паттерны страниц.
Hero
Две равные колонки: компактная текстовая группа имеет выключку по левому краю, непрозрачная каллиграфика шириной 100% центрирована справа. Цитата идёт сразу после лида и отделяется тонкой линией.
Section head
Eyebrow, H2 и пояснение; затем один тип сетки.
CTA
Сетка 2fr / 1fr: текст занимает две трети, вертикальная колонка действий — одну треть. Внутренние и внешние отступы симметричны. Завершающий CTA — намеренно просторная часть футера и исключение из правила уплотнения.
Footer
Полное меню сайта, единая структура на всех страницах. CTA и footer образуют одну завершающую зону с тонким разделителем.
FAQ / accordion
Один вопрос в строке, ответ раскрывается без перехода.
Breadcrumbs
Используются на глубоких внутренних страницах.
Empty state
Объясняет отсутствие данных и предлагает действие.
Photo-ready
Фотографию можно добавить без изменения текста, сетки и адаптивного поведения блока.
14
Карта смысловых блоков
Полная матрица выбора: какой вопрос семьи закрывает блок, из какого содержания состоит, какую композицию использует и где уже встречается.
| Блок | Вопрос семьи | Обязательное содержание | Композиция | Где использовать |
|---|---|---|---|---|
| Обзор направлений | Что нам подходит? | Кому, возраст или ступень, короткое отличие, переход | Асимметричная маршрутная сетка | Программы, Образовательные программы |
| Паспорт программы | Подходит ли формат нашей семье? | Возраст, формат, график, группа, адрес, стоимость или честный переход | Лид + полоса фактов | Подготовка к школе, страницы ступеней |
| Содержание обучения | Чем занимается ребёнок? | Предметы, темы, виды деятельности, глубина программы | Редакционные главы или предметная сетка | Начальная школа, Занятия |
| Результаты | Что ребёнок сможет? | Наблюдаемые знания, умения и навыки без гарантированных обещаний | Контрастная панель результатов | Подготовка к школе, Профориентация |
| Методика и ценности | Почему обучение устроено так? | Принцип, объяснение, проявление в учебном процессе | Манифест, три опоры, графика + текст | Методика, О центре |
| Последовательность | Что будет происходить по шагам? | Этап, действие семьи или ребёнка, результат этапа | Вертикальный маршрут или крупные главы | Поступление, Проекты |
| Режим и расписание | Как встроить программу в неделю? | Дни, время, длительность, место и примечание | Полноценная таблица или расписание | Продлёнка; после подтверждения данных |
| Команда | Кто будет рядом с ребёнком? | Фото, имя, роль, короткое профессиональное пояснение | Фотокарточки и профиль руководителя | Команда |
| Доказательства | Почему этому можно доверять? | Факт с контекстом, реальный отзыв, результат или поступление | Цифры, цитата, логотипы, кейс | Отзывы, Выпускники |
| Стоимость и условия | Сколько стоит и что входит? | Цена, период, состав, исключения, следующий шаг | Сравнительная таблица или тарифный блок | Стоимость; после подтверждения данных |
| История и атмосфера | Какая это школа в жизни? | Событие, люди, контекст, живое фото или авторский рассказ | Фото + редакционный текст, мозаика | История, Школьная жизнь |
| Новости и события | Чем центр живёт сейчас? | Единое фото 16:9, дата, заголовок, анонс, переход | Редакционная лента без тяжёлой подложки | Главная, Новости |
| FAQ и сомнения | Что важно уточнить? | Один конкретный вопрос и прямой ответ | Аккордеон; критичные условия остаются открытыми | Вопросы, Мифы |
| Документы | На каком основании работает центр? | Название, статус, файл или источник, формат и размер | Документальная карточка или реестр | Лицензия |
| Обращение | Как сделать следующий шаг? | Один главный CTA, альтернативный канал, понятное ожидание ответа | Форма или завершающий CTA + footer | Контакты, финал каждой страницы |
Таблицу не сокращаем. Это рабочий указатель для редактора и разработчика. На узком экране она прокручивается внутри своей области, сохраняя заголовки и все пять смысловых колонок.
15
Конструктор смысловых страниц
Ниже не абстрактные карточки, а готовые композиционные роли. Выбираем блок по задаче текста; не собираем страницу из одинаковых плиток.
Для разделов с несколькими направлениями: программы, школьная жизнь, онлайн.
Для ступеней школы, подготовки, экзаменов и кружков.
Для центра, методики, команды, отзывов и выпускников.
Три опоры центра
Фундаментальное образование, воспитание и семья как союзник
Крупный смысловой тезис получает собственную сцену. Пояснение остаётся коротким и конкретным.
Пример программы
Начальная школа
Факты отделены от эмоционального описания и читаются одним взглядом.
- Ступень
- 1–4 классы
- Подход
- Методика РКШ
- Содержание
- Предметы и принципы
- Условия
- Уточнить стоимость
- 01
Знакомство
Семья узнаёт о формате и задаёт вопросы.
- 02
Диагностика
Определяется подходящий образовательный маршрут.
- 03
Адаптация
Ребёнок входит в новый учебный ритм.
Что происходит
Наблюдаем, читаем, обсуждаем и применяем
Здесь раскрываются предметы, темы и деятельность ребёнка.
Что развивается
Внимание, речь и самостоятельность
Здесь описываются наблюдаемые навыки без гарантированного результата.
12учеников максимум в классе
Цитата сохраняет точные слова семьи и получает подпись.
Имя и связь с центром — только с согласия
Школа в жизни
Тематическая неделя объединяет разные предметы
Фото показывает событие, а текст объясняет, почему оно важно для образовательной среды.
Тематические недели →Как выбрать подходящую программу?
Сначала сопоставьте возраст и задачу ребёнка на странице программ, затем перейдите к подробному описанию ступени и договоритесь о знакомстве.
Личное знакомство
О школе лучше всего судить, побывав внутри
Главное действие связано с содержанием страницы, второе предлагает альтернативный канал.
CTA и footer образуют одну просторную завершающую зону. Это утверждённое исключение из правила уплотнения одноцветных секций.
Как выбрать блок без перегруза
- 1
Назвать вопрос. Если блок не отвечает на отдельный вопрос семьи, его не добавляем.
- 2
Выбрать одну роль. Маршрут не превращаем в доказательство, отзыв — в рекламный тезис, результат — в описание процесса.
- 3
Сменить композицию по смыслу. Карточки — для равноправных пунктов; глава — для аргумента; маршрут — для порядка; таблица — для точного сравнения.
- 4
Проверить ритм. Внутри блока 8–32 px, заголовок → содержимое 40–56 px, между самостоятельными главами 72–120 px. Одинаковый фон не удваивает интервал.
- 5
Остановиться. Одна секция — одна задача и один доминирующий приём. Декор не должен создавать второй смысловой центр.
Следующие редакционные задачи: согласовать деление средней и старшей школы, размеры групп, расписание и состав оплаты. Дизайн не должен маскировать расхождения или заполнять отсутствующие факты предположениями.
16
Адаптивность и контроль
Компонент считается готовым только после проверки всех смысловых перестроений.
≥ 1181широкая навигация и полные многоколоночные композиции
921–1180промежуточная шапка и упрощение сложных сеток
641–920tablet: одна или две колонки, уменьшенные интервалы
≤ 640mobile: один поток, последовательность «текст → визуал»
≤ 480узкий mobile: только точечное уплотнение без уменьшения читаемости
Контент
Нет обрезанных заголовков, случайных переносов и строк длиннее комфортной меры.
Сетка
Нет горизонтальной прокрутки; порядок блоков сохраняет смысл.
Управление
Кликабельная область около 44 px, focus виден, меню доступно с клавиатуры.
Графика
Каллиграфика остаётся привязана к своему блоку и не перекрывает текст.
17
Обязательные правила
Контроль качества перед публикацией.
- Не создавать новый цвет, размер, радиус или отступ, если есть подходящий токен.
- В новостной сетке изображения имеют одинаковую высоту; разделители не меняют ширину карточек.
- Между соседними секциями одного фона используется один общий вертикальный интервал. CTA перед футером — исключение: сохраняем исходные отступы и воспринимаем его как часть футера.
- На одном уровне страницы использовать один визуальный тип карточек.
- H1 — один на страницу; уровни заголовков не пропускаются.
- Текстовая ссылка описывает назначение, а не называется «нажмите здесь».
- У всех интерактивных элементов есть hover, focus, active и disabled.
- Фото содержит осмысленный alt; декоративная графика имеет пустой alt.
- Минимальный основной текст — 16 px, интерактивная область — около 44 px.
- На мобильном простые таблицы остаются читаемыми; сложные сравнения сохраняют заголовки и допускают прокрутку только внутри таблицы.
- На тёмной поверхности все текстовые роли переключаются в контрастный режим.
- Упрощённое и полноэкранное меню сохраняются как две отдельные версии; композиция полноэкранной версии сохраняется, переключатель демонстрации подключает её целиком.