Брендбук

1. 01Сетка решаетКаждый элемент стоит на колонке. Выключка влево.
2. 02Одна громкая детальНа носитель — одно из трёх: геометрия, заголовок Oswald или главная цифра.
3. 03Три цвета на равныхКрасный, мятный, голубой. Держат страницу бумага и тушь.
4. 04Пять кеглейИерархию строят размер, начертание и цвет — но размеров всего пять.
5. 05Факт вместо эпитетаЦифра с источником и датой сильнее прилагательного.
6. 06Ничего не дёргаетсяДвижение следует за человеком и останавливается вместе с ним.

Мятная строка — пример выделения из главы «Компоненты».

Выразительный момент один, и он в начале: первый экран сайта, обложка презентации, первый кадр поста. Дальше — журнальная вёрстка: бумага, тушь, тонкие линейки, воздух. Цвет ниже первого экрана работает точечно: мятная строка, голубой блок формы, красная кнопка.

• Геометрия на странице сайта — один раз, в hero. В контактном блоке допускается повтор одной плоскостью.
• Кегль 144 — один на носитель: заголовок первого экрана или главная цифра.
• Эта страница — тоже носитель. Громкая деталь у неё одна — обложка.

Знак «С■» — для аватаров, иконки приложения и мест, где слово меньше минимального размера. Точка без буквы — только фавиконка и маркер в интерфейсе, как подпись она не работает.

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

* CMYK — стартовые значения для мелованной бумаги (FOGRA39). Утверждаются по цветопробе в типографии, Pantone подбирается по вееру там же.

● — фирменный цвет. Остальные тона сами по себе в графике не используются.

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

Oswald и так узкий. Сжатие ломает контраст штрихов, и шрифт выглядит «съеденным». Если заголовок не помещается — перенос строки или ступень ниже, а не сжатие.

Розовые полосы — колонки.

• Внутри компонента — 4–24. Между элементами блока — 24–48. Между секциями — section-y: 48 на телефоне, 120 на десктопе.
• Секции разделяет линейка 1 px, а не цветной фон и не огромный отступ.
• Высоту секции задаёт содержание. Никаких принудительных 100vh ниже первого экрана.

На лендинге у красной плоскости был радиус 15 px. В системе плоскости тоже с острыми углами: так они продолжают квадрат логотипа.

Если в системе включено уменьшение движения (prefers-reduced-motion), движения нет совсем. Наведите на эту ссылку

• Плоскость — прямоугольник, который выходит за край носителя. Внутри кадра видно не больше двух её краёв.
• Максимум три плоскости, по одной каждого цвета. Тушь — только в печати в одну краску.
• Текст стоит на одном цвете и не пересекает край плоскости. Белый текст — только на красном и кеглем от 40.
• Никаких градиентов, прозрачности, теней и скруглений у плоскостей.
• В коде: .sc-geo и .sc-geo__plane--along (−27°) или --steep (−63°). Позиция — переменные --x --y --w --h.

Файлы: icons/*.svg. Новая иконка рисуется по тем же правилам и добавляется в tools/build-sprite.py.

• Фон — тёмная плашка 900 или один цвет триады.
• Объект продукта (телефон, лист, карта) — единственный наклонённый элемент, до 12°. Он не перекрывает текст обложки.
• Метка «Продукт / Отрасль» сверху слева, «Концепция продукта» снизу — обязательно.
• Название и описание — под обложкой, не поверх неё.

• Подпись над полем, а не внутри. Плейсхолдер — пример ввода.
• Ошибка — красной рамкой и словами, что исправить. Не «Неверный формат».
• Текст про обработку данных — мелко и нейтрально. Крупное «Мы никому не передаём ваши данные!» напоминает о риске.
• Срок перезвона не обещаем.

.sc-rows · a.sc-row (наведение — mint-100) · .sc-row.is-active (мятный) · details.sc-disclosure

Смета фиксируется после этапа проектирования и не меняется.

.sc-table в .sc-table-wrap · .sc-quote

Образцы — в главе «Графика → Обложки кейсов». Класс .sc-case: вся карточка — одна ссылка, при наведении подчёркивается название и сдвигается стрелка. Страница кейса: что было и чем мешало → что сделали → результат с источником и датой → кто заказчик.

1. 01На «вы»Со строчной. Без фамильярности и уменьшительных.
2. 02Словами клиента«Мобильное приложение», а не «цифровое решение».
3. 03Факт с источникомТочное число, откуда оно и за какой период.
4. 04Обязательство вместо похвалыТолько то, что реально выполняем.
5. 05Свобода выбора«Ни к чему не обязывает», «документ остаётся у вас».
6. 06КороткоОдна мысль — одно предложение. Что легко читать, кажется правдивее.

Смета фиксируется после этапа проектирования и не меняется.

Результат записываем в ТЗ до старта. Не увидели его через месяц — вернём деньги за этап.

Один ответственный за проект и демо каждые две недели.

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

<!-- шрифты подтягиваются из fonts/ через components.css -->
<link rel="stylesheet" href="brandbook/tokens.css">
<link rel="stylesheet" href="brandbook/components.css">

<body class="sc-base">
  <h1 class="sc-display">Результат</h1>
  <p class="sc-body">Один созвон на 15 минут.</p>
  <a class="sc-button" href="#form">Обсудить проект
    <svg class="sc-icon sc-icon--m sc-icon--arrow"><use href="#sc-arrow"/></svg>
  </a>

/* 1. Палитра и шкала — сырые значения. Прямо в компонентах не используем */
--sc-color-red-600: #D62D20;
--sc-size-m: clamp(1.75rem, …, 2.5rem);   /* 28 → 40 */

/* 2. Роли — что значение делает. Их и используем */
--sc-action: var(--sc-color-red-600);
--sc-typography-heading-size: var(--sc-size-m);

/* 3. Компонент — ссылается на роль */
.sc-button  { background: var(--sc-action); }
.sc-heading { font-size: var(--sc-typography-heading-size); }

• tokens.jsonИсточник правды, W3C DTCG
• tokens.cssCSS-переменные, собирается скриптом
• components.cssШрифты, база, компоненты .sc-*
• logo/Логотип, знак, аватары, фавиконка — SVG в кривых
• icons/Иконки 24×24
• sprite.svgЛоготип и иконки символами для <use>
• fonts/Oswald Bold, Manrope (вариативный), лицензии OFL
• templates/Презентация, соцсети, визитка, бланк, подпись
• tools/Сборка и проверка

# после правки tokens.json или логотипа — из папки brandbook/
python3 tools/build-logo.py          # logo/*.svg из Oswald Bold (нужен fontTools)
python3 tools/build-tokens.py        # tokens.json → tokens.css
python3 tools/build-sprite.py        # icons/, sprite.svg, спрайт в index.html
python3 tools/typograf.py index.html # неразрывные пробелы
bash templates/shot.sh               # превью шаблонов (нужен Chrome)
python3 tools/check.py               # исходники: только токены и классы системы
python3 tools/audit.py               # отрисовка: кегли, контраст, плоскости, тон — в Chrome

• Брендовый домен и почта на домене — сейчас в шаблонах плейсхолдер.
• Реквизиты для подвала и бланка — договорились ставить ИП, данные не внесены.
• Цветопроба в типографии: утвердить CMYK и подобрать Pantone.
• Точные цифры кейсов с источником и датой — от заказчиков.
• Три обязательства перед публикацией подтверждает руководитель.