Логотип

Варианты

Файлы всех вариантов в цветном, белом и одноцветном исполнении лежат в папке ассетов code6.

Фоны

Допустимые подложки: белая, светлое полотно, --c6ColorBlack и --c6ColorBlue. На --c6ColorRed логотип не размещается: красный означает ошибку, и на нём логотип читается как сбой системы.

Логотип на изображениях

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

Форматы и встраивание

Логотип встраивается как SVG и перекрашивается токенами вместе со схемой. PNG используется только там, где мы не управляем разметкой, например — письма и сторонние площадки.

Одноцветное исполнение

Монохром нужен там, где цвет задаётся внешними условиями или фирменная палитра мешает читаемости.

Охранное поле и размеры

Что с логотипом не делают

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

Движение бренда

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

Полоса

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

Пара точек

Компактный вариант для строки статуса, к которой нужно особое внимание: идёт ивент, трансляция в эфире. Рядом обязателен текст — сами по себе точки значения не несут.

Бегущий отблеск

Брендовый индикатор первой загрузки поверхности, заставки или перехода между крупными разделами.

Фоновое свечение

Два размытых пятна по краям с анимацией-дыханием. Для первого экрана и пустых состояний. Под текстом допустимо только в таком виде: мягкое размытие и умеренная непрозрачность не мешают читать.

Появление логотипа

Логотип поднимается на восемь пикселей и проявляется, следом под ним включаются огни. Порядок важен: сначала знак, потом мигалка — иначе внимание уходит на движение, а не на бренд.

Знак в движении

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

Размер

Движение

В строке

Знак в строке ставится размером 20 px: это совпадает с межстрочным интервалом основного текста, и строка не увеличивается в высоте.

Правила

Где применяется

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

Где не применяется

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

Маскот

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

Спокойное парение

Ускоренное парение

Пример состояния

Страница не найдена

Даже нюх Кодика не помог её отыскать. Вернуться на главную?

Правила

Цвет

Бренд

Четыре цвета. Чёрный и белый являются основными, синий отвечает за действия, красный — за акцент и предупреждение.

Действия и статусы

Синий связан с действием, переходом или активным процессом. Статусы описывают результат или состояние: единая палитра имеет единый смысл на всех поверхностях.

Поверхности и текст

Департаменты

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

Три ступени на каждый департамент: Dark, основная и Light. Оттенок и цветность взяты из набора максимально различимых цветов.

Ранги

Ранг — порядковая ось рядом с департаментами и ролями. Департамент отвечает на вопрос «где человек состоит», ранг отвечает на вопрос «насколько высоко поднялся». Поэтому ранг не получает собственный оттенок: вся шкала идёт одной рампой от нейтрали к золоту.

Соседние ранги похожи намеренно. Чип ранга всегда содержит название, а цвет только усиливает положение на шкале.

Правила рангов

Правила палитры департаментов

Типографика

Inter Variable — единственный интерфейсный шрифт на всех поверхностях. Переменное начертание даёт весь диапазон толщин одним файлом и оптический размер, за счёт которого мелкий текст остаётся читаемым, а крупный выглядит уместным. Atlantis International — только логотип и вордмарк.

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

Шкала размеров

Девять ступеней. Крупные адаптивны через clamp() и не требуют брейкпоинтов, мелкие фиксированы: уменьшать их на мобильном нельзя. Micro совпадает по размеру с Caption и отличается весом и разрядкой.

Обязательная адаптивность

Иконки

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

Спейсинг и сетка

Базой берётся шкала Bootstrap. Она покрывает почти все случаи утилитами и избавляет от самодельных отступов, которые расходятся между страницами. Расстояния задаются в разметке: p-4, px-lg-5, g-3, gap-2, mt-3. Токены --c6Space* нужны там, где утилита неприменима — внутри компонента.

Закругления

Радиус — часть плотности интерфейса, а не украшение. В продукте используются четыре токена, и новый радиус не заводится под отдельную карточку или кнопку.

Компоненты

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

Кнопки

Статусы

Карточки и прогресс

Переносы и усечение

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

Три правила контейнера

Утилиты

Мини-пример

Чего не делать

Уведомления

Уведомление — временное сообщение о том, что только что произошло поверх содержимого. Оно не описывает состояние объекта и не заменяет его: если сообщение нужно перечитать позже, это запись в списке или строка в карточке.

Тоны

Живые области

<div class="c6AlertRegion" id="c6AlertRegionPolite" role="status" aria-live="polite" aria-atomic="false"></div>
<div class="c6AlertRegion" id="c6AlertRegionAssertive" role="alert" aria-live="assertive" aria-atomic="false"></div>

Вызов

c6AlertStack.show({
  tone: 'success',
  title: 'Steam привязан',
  text: 'Аккаунт готов к подаче заявки.'
});

c6AlertStack.show({
  tone: 'danger',
  title: 'Не удалось сохранить',
  text: 'Проверьте соединение и повторите.',
  action: { label: 'Повторить', onSelect: () => saveApplication() }
});

Правила

Загрузка

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

Скелет карточки

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

Скелет строки таблицы

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

Спиннер

Три размера. Кольцо берёт цвет границы, дуга — currentColor, поэтому спиннер одинаково работает на карточке, в кнопке и на тёмной плашке без переопределений.

Кнопка

Подпись не удаляется, а скрывается: ширина кнопки не меняется, соседние элементы не сдвигаются. Повторное нажатие блокируется через disabled, pointer-events остаётся визуальным дополнением.

Индикатор страницы

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

Изображение

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

До загрузки

После загрузки

Живые значения

Числа, которые обновляются сами: свободные места, позиция в очереди, счётчик людей на сервере. Их нельзя заменять скелетом при каждом опросе — значение подсвечивается ровно в момент изменения.

Устаревшие данные

Если ответ не пришёл, значение не прячется и не обнуляется. Блок приглушается, рядом появляется отметка времени последнего успешного обновления.

Правила

Сгенерированный блок

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

Готовый ответ

Во время генерации

До первого токена

Правила

Где применяется

• Ответы ассистента на страницах.
• Автоматическая суммаризация.
• Реплики и подсказки NPC, вынесенные в интерфейс.
• Черновики документов и протоколов до правки человеком.

Поверхности

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

Именование

Federal — имя дизайн-системы, но не технический namespace. В коде всё живёт под единым префиксом c6: базовые значения, семантические токены и компоненты.

:root {
  --c6ColorBlue: #1B6FE0;                  /* базовое значение */
  --c6ActionFill: var(--c6ColorBlue);      /* семантический токен */
}

.c6ButtonPrimary {                         /* компонент читает семантику */
  background: var(--c6ActionFill);
}

Как применять

Новый проект

1. Подключить c6-tokens.css и Bootstrap.
2. Подключить Inter Variable и Lucide.
3. Выбрать основную схему поверхности: светлая или тёмная.
4. Собирать интерфейс на компонентах c6, отступы задавать утилитами Bootstrap.
5. Свои классы заводить только там, где утилит не хватает, и с префиксом c6.

Существующий проект

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

:root {
  --oldBrandPrimary: var(--c6ActionFill);
  --oldTextMuted:    var(--c6TextSecondary);
}

Такой мост для переноса живёт до последней фазы и удаляется вместе со старыми именами.

Постоянная ссылка на файлы токенов (переменных CSS):

<link rel="stylesheet" href="https://code6.ru/docs/assets/c6-tokens.css">

Работа с агентом

Приведи проект к дизайн-системе code6.

Источник правды:
  https://code6.ru/brand
  https://code6.ru/docs/assets/c6-tokens.css
  https://code6.ru/docs/assets/brand/

Версия бренд-документа:
  c6-brand-v2026-07-31

Перед началом:
  — найти на странице meta[name="c6-brand-version"]
  — продолжать только если content равен c6-brand-v2026-07-31

Обязательно:
  — подключить c6-tokens.css, не копировать значения
  — Inter Variable, иконки Lucide, отступы утилитами Bootstrap
  — классы компонентов с префиксом c6
  — обе схемы работают, переключение атрибутом data-theme

Запрещено:
  — менять раскладку, тексты и бизнес-логику
  — вводить новые цвета
  — атрибут style и строки стилей из JS

Вернуть: список изменённых файлов, таблицу контраста
по всем парам в обеих схемах, список открытых вопросов.

Сквозные правила

Действуют во всех разделах и не повторяются в частных таблицах.

Правила кода

Именование и читаемость

CSS

Тон и раскрытие информации

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

Сдержанность касается раскрытия информации, а не интонации. «В этот раз не получилось» — нормально. «Вот что стоит подтянуть» — нет. Детали о раскрытии информации — в правилах code6.