Глубина,
которую видно.

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

Эталон — assets/approved-reference.png, исходный макет без изменений. В assets/hero-water.png сохранена та же сцена с водой, очищенная image_gen от надписей для вёрстки. Это техническая производная эталона, не новое направление. При споре о форме, свете и композиции сравниваем с исходным макетом. Новый вариант внутреннего айсберга и четыре альтернативные метафоры не применяются.

Единственный мастер — logos/avat-master.svg. Он векторный, не набран шрифтом. Четыре знака: А без перекладины, V, А без перекладины, T. Не вводим кириллический вариант и не перепечатываем его текстом.

• ViewBox 332 × 78. Масштабирование только пропорциональное.
• Толщина штриха 5,4 в координатах мастера. Не редактировать для меню или footer.
• Геометрия мастер-файла: M12 66 40 10 68 66 M96 10 124 66 152 10 M181 66 209 10 237 66 M264 10H320 M292 10V66.
• avat-ink.svg и avat-light.svg — тот же мастер, меняется только цвет. Это не разные логотипы.
• На светлом фоне Ink #20282C; на тёмном Ice White #F6F7F7.
• В меню ширина 135 px на desktop, 105 px на телефоне. Рекомендованный минимум полного слова — 104 px. Если места меньше, меняем компоновку меню, а не сжимаем знак.
• Охранное поле — не менее ¼ высоты всей SVG-области со всех сторон. В тесном меню соблюдать минимум 12 px.
• Не растягивать, не скруглять углы, не утолщать, не добавлять перекладины А, градиент, тени или объём.
• Большой полупрозрачный знак может быть частью фоновой композиции с непрозрачностью 4–6%; он не заменяет основной логотип.
• Кристалл в форме арки — иллюстрация, не второй знак и не favicon. Новый самостоятельный символ не утверждён.
• Редакционное название в тексте — AVAT или AVAT Studio, набранное основным текстовым шрифтом. Это упоминание компании, не замена логотипа.

Утверждённая пара — Geologica + Inter

Выбор команды: Geologica 400/500 для заголовков и Inter 400/500/600 для текста и интерфейса. Основные начертания заголовков — Regular и Medium. Geologica 600 допускается только для короткого акцента, не для всей страницы.

• Geologica 400 — первый экран, крупная фраза, крупные цифры.
• Geologica 500 — H2/H3, названия услуг и кейсов.
• Geologica 600 — короткое выделение, когда одного контраста недостаточно. Не набирать им длинный SEO-заголовок.
• Оси зафиксированы: SHRP 50, CRSV 0, slnt 0; насыщенность меняется через font-weight.
• Заголовки всегда прямые. Наклонные оси Geologica не используются в фирменной системе. Не включать искусственный italic, transform-skew или шрифт с засечками для одного слова.
• Локальные мастер-файлы — fonts/geologica.woff2 и fonts/Geologica[CRSV,SHRP,slnt,wght].ttf. Лицензия — fonts/Geologica-OFL.txt.

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

Onest, Unbounded, Exo 2 и прежний Manrope остаются в сравнительном разделе и истории. На новых страницах их не подключаем. Рабочая страница загружает только Geologica, Inter и отдельный настоящий Inter Italic. Кириллица и символы проверены в font-options/VERIFICATION.json и fonts/VERIFICATION.json.

Текст и интерфейс — Inter

Inter 400 — абзацы, описания и формы. Inter 500 — навигация, кнопки, подписи полей. Inter 600 — короткое выделение, имя автора, ключевой факт. Для абзацев запрещён сплошной 600/700.

Inter Italic 400 — настоящий курсив для короткой цитаты или редакционного выделения внутри основного текста. При необходимости имя/акцент в такой цитате допускает Inter Italic 500. Курсив не используется в меню, кнопках, таблицах, цифрах KPI и крупных заголовках.

Сочетания:

Обязательны font-synthesis: none и реальные файлы начертаний. При ошибке загрузки сначала восстанавливаем файлы, а не разрешаем браузеру рисовать наклон или жирность.

Проверены русские прописные и строчные буквы, Ё/ё, Й/й, ₽, №, тире и кавычки. Результаты: fonts/VERIFICATION.json. В визуальном брендбуке есть живые строки с разными весами и курсивом. На Windows и Android возможны отличия сглаживания — геометрия и начертания остаются теми же.

Размеры и набор

Строчные абзацы — максимум 65–75 символов в строке. Не разрежать кириллические абзацы. Капитель допускается только в коротких служебных подписях. Не разрывать слова искусственно. На широком экране H1 не должен заходить на объект. Длинный SEO-заголовок адаптируем переносами и размером, не сокращением содержания.

Основной объём сайта — светлый. Тёмные поверхности объединяют связанные блоки в главы; не чередовать механически чёрное/белое после каждого раздела. Сам айсберг получает контраст за счёт материалов и света, без цветных неоновых свечений.

Depth — цвет тёмного блока со скриншота команды. Это #111C23, не Ink #20282C. Paper — прохладный почти белый #F6F7F7. Эта пара принята как основа. Визуализация реальных проектов, фото людей и видео сохраняют свои цвета. Не перекрашивать работу клиента ради монохромности.

Тёплый акцент из «Дюны»: Oxide

Референс — архивный концепт «Вы управляете. Система работает», файл assets/dune-reference.png. Его красно-коричневые стены дали направление оттенка. Oxide — адаптация материала для интерфейса, не точная пипетка с освещённой стены. Архитектурный зал не заменяет выбранный айсберг.

Контраст Oxide / Paper — 7,48:1, Oxide / White — 8,03:1, Ink / Oxide Mist — 11,73:1. Эти пары подходят для обычного текста по порогу 4,5:1. Не переносить Oxide на Depth для мелких надписей: там нужен светлый текст.

Латунь: материал, а не один HEX

По референсу команды выбран сатинированный латунный материал с медным подтоном: базовый тон #A07436, тёмная тень и мягкий светлый блик. Он сочетается с Depth и оживляет холодные поверхности. Полный диапазон отражений и позиции градиента сохранены в design-tokens.json. Прежняя бронза остаётся архивной альтернативой. Не использовать два металла на одном экране.

Латунь подходит для одной узкой кромки, небольшой детали объекта или разделителя. Она не используется в логотипе, основном тексте, всей навигации и каждой кнопке. Градиентный блик меняет контраст, поэтому мелкий текст располагается на плоской поверхности. Браузерные образцы в брендбуке — CSS-пробы отражений и фактуры, не фотография и не готовая 3D-модель. Шрифт с засечками и варианты логотипа на цветовой картинке не заменяют утверждённые Geologica и мастер SVG.

Рекомендованный стартовый баланс: примерно 80–85% нейтральных поверхностей, 10–15% тёплого акцента и до 5% металлических деталей. Это композиционный ориентир, не квота. Не красить все разделы по очереди. Тёплый фон должен совпадать со смысловой паузой; насыщенный цвет — с действием или коротким акцентом. Айсберг, воду и кристаллы не перекрашивать в бронзу.

Ошибка формы может использовать #8B3530 только как функциональный статус с явным текстовым пояснением. Oxide не обозначает ошибку автоматически. Успешное действие объясняется текстом; цвет не единственный носитель смысла. Контрасты ключевых пар рассчитаны в CONTRAST.json.

Основной мотив — кристаллический минерал и оптическая глубина. Прозрачные природные грани, серебристое преломление, плотный графит в основании, вода и мягкая светлая атмосфера эталона.

Можно: тонкие прямые линии 1 px, аккуратные выноски с точкой 3–4 px, номер слоя, осмысленный разрез, фрагмент кристалла, спокойная тень реального объекта.

Не используем: случайные кольца и орбиты, шестерёнки, шарики, звёздочки, эмодзи-декор, цветные провода, псевдо-CRM, матричный дождь, галактики, пластик, 3D-буквы и разные материалы на каждой странице. Круг допустим для фотографии человека, служебной точки или элемента настоящего интерфейса; он не становится отдельным декоративным мотивом.

На одном экране один главный арт-объект. Не собирать коллаж из всех кристаллов. Кристалл не заменяет иконку каждой услуги и не повторяется около каждого абзаца. Для длинной статьи достаточно одного небольшого акцента у начала или конца.

Библиотека объектов

1. crystal-spire — вытянутый одиночный кристалл. Боковой акцент первого экрана услуги или заключительного CTA.
2. crystal-cluster — связанная группа из трёх форм. Команда, комплексная услуга, несколько связанных направлений.
3. crystal-section — прозрачный срез над минеральным основанием. Архитектура, инженерия, объяснение подхода.
4. crystal-arch — кристаллическая арка. Обложка кейса или переход между главами; не новый логотип.

Исходники PNG с альфа-каналом и WebP находятся в assets/. Файлы не заменяют оригинальный айсберг на главной. Перед применением проверять объект на светлом и тёмном фоне: полупрозрачные края и отражения дают разные впечатления. Не добавлять поверх растрового блика второй CSS glow. Исходные промпты и инструмент — PROMPTS.json; генерация выполнена встроенным image_gen.

• Desktop: поля 5,3vw, максимум 136 px; контент до 1940 px, крупная сцена до 2200 px. Поля планшета 32 px, телефона 22 px.
• Базовый шаг интервалов 4 px; основные значения 8, 12, 16, 24, 32, 48, 64, 96. Между большими разделами обычно 80–120 px, на телефоне 56–72 px.
• Кнопка: прямоугольная, радиус 2 px, минимум 48 px высотой, в главном CTA 56 px. Один основной CTA в локальном контексте.
• Форма: понятный label над полем, тонкая граница, явный фокус. Placeholder не заменяет label.
• Карточки: прямоугольные либо радиус 2–4 px. Не закруглять каждый блок в капсулу. Большая капсула допустима как единичный композиционный контейнер, а не универсальная сетка.
• Кейс: реальный скриншот → задача → результат → ссылка. Сохранить цвета интерфейса проекта; без выдуманных данных и генеративных скриншотов.
• Отзыв: точная цитата, имя/роль, реальное фото или честные инициалы при отсутствии фото. Видео только настоящее, без автозвука. Не подставлять случайные или сгенерированные лица.
• Телефон допустим для работающего демо бота. Подписать демонстрационный сценарий; он не должен выдавать себя за реального клиента или рабочий бот.
• В таблицах важнее читаемость, чем декоративность: тонкие горизонтальные линии, минимум заливок, цифры ровными колонками.

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

Фокус и hover: 180–240 ms; переход выбранного слоя до 400 ms. Без постоянного вращения главного объекта, большого параллакса, захвата скролла и второго курсора. Управление одинаково доступно мышью, клавиатурой и касанием. При prefers-reduced-motion отключить необязательное движение.

• Главная: эталонный айсберг с водой; ясный оффер; одна типографическая фраза; реальные кейсы; команда и отзывы; объяснение подхода; квиз.
• Услуга: тот же header, шрифты, цвета, кнопки; один небольшой кристалл вместо повторения горы. Содержание и польза услуги важнее арта.
• Кейс: реальная работа на первом плане; кристалл необязателен. Метрики и отзыв связаны с этим же проектом.
• Статья: читабельная колонка, Geologica в заголовках и Inter в тексте. Курсив только настоящий. Декор не повторяется между абзацами.
• Каталог услуг/кейсов: одинаковая логика карточек и ссылок. Не вводить новую цветовую тему для каждой категории.

Не менять URL, H1, исходную иерархию заголовков, значимые тексты, canonical, hreflang, микроразметку и перелинковку ради внешнего вида. Дополнительные смыслы и блоки маркируются отдельно. Квиз — согласованное функциональное изменение; не выдавать новую логику за неизменившийся калькулятор.

Текст остаётся HTML, не частью картинки. Изображения получают размеры и alt; вторичные изображения загружаются лениво. Демо — noindex. Production не наследует noindex и локальные обработчики форм. Сохранение структуры не является гарантией поисковых позиций.

1. Прочитать этот файл и проверить последнюю версию design-tokens.json.
2. Брать логотип только из logos/avat-master.svg; светлую/тёмную версию строить заменой цвета.
3. Подключать утверждённые локальные Geologica + Inter и отдельный Inter Italic. Для Geologica сохранять SHRP 50 / CRSV 0 / slnt 0 и основные веса 400/500. Не возвращать Manrope и не подключать остальные шрифты сравнения на новых страницах.
4. Начинать новый экран с сетки, типографики и реального содержания. Затем добавлять один уместный объект из библиотеки.
5. Не менять форму айсберга, воду или метафору без отдельного решения команды.
6. Проверить 1920 и 2560 px, обычный desktop и телефон: переносы, контраст, загрузку кириллицы, настоящий курсив, отсутствие наложений.
7. Если нужна новая роль цвета или компонента — сначала обновить брендбук и токены, затем страницы. Не делать локальное исключение молча.

Единая веб-версия брендбука для просмотра и будущей публикации: outputs/avat-depth-home/dist/about/brand/index.html. Кодовые токены: tokens.css и design-tokens.json. Эталон и ассеты: assets/. Проверка шрифтов: fonts/VERIFICATION.json. Это обязательная основа новых страниц, исторический архив концептов сохраняется как архив.