Логотип

Варианты

Вариант	Превью	Файл	Скачать	Когда применяется	Минимальная ширина
Основной	SVG 1057 × 217 · PNG 2000 × 411	code6_logo .c6LogoFull	Тёмная версияPNG SVG Белая версияPNG SVG Монохром тёмныйPNG SVG Монохром белыйPNG SVG	Шапки сайтов, презентации, обложки, промо	120 px · 30 мм
Сокращённый	SVG 801 × 217 · PNG 2000 × 542	code6_logo-short .c6LogoShort	Тёмная версияPNG SVG Белая версияPNG SVG Монохром тёмныйPNG SVG Монохром белыйPNG SVG	Узкие шапки, соцсети, оверлеи	96 px
Знак, скобки	SVG 208 × 217 · PNG 1917 × 2000	code6_logo-mark .c6LogoMark	Цветная версияPNG SVG Монохром тёмныйPNG SVG Монохром белыйPNG SVG	Фавикон, иконка приложения, водяной знак, индикатор загрузки	16 px
Маскот Кодик		code6_codic.png code6_codic_glasses.png		Пустые состояния, ошибки, приветствия, стикеры. Не является заменой логотипа	64 px

Фоны

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

Три исполнения

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

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

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

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

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

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

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

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

Цвет

Бренд

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

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

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

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

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

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

Где брать ступень

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

Правила подпалитры

Именование

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

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

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

Поверхности

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

Типографика

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

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

:root {
  --c6FontSans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --c6FontMono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --c6FontLogo: "Atlantis International", var(--c6FontSans);
}

Шкала

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

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

Иконки

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

<i data-lucide="shield" width="20" height="20" aria-hidden="true"></i>

// После каждой перерисовки DOM иконки нужно пересоздать,
// иначе новые узлы останутся пустыми плейсхолдерами.
function renderScreen(screenName) {
  pageElement.innerHTML = buildScreenMarkup(screenName);
  if (window.lucide) {
    window.lucide.createIcons();
  }
}

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

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

Компоненты

Полный набор с вариациями собран в интерфейсе приёма. Здесь базовые — те, что обязаны выглядеть одинаково на всех поверхностях, и решения, из которых они выросли.

Кнопки

Статусы

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

Проблесковые огни

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

Полоса

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

Пара точек

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

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

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

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

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

Разметка

<div class="c6LightBar" role="presentation" aria-hidden="true">
  <span class="c6LightBarSegment"></span>
  <span class="c6LightBarSegment"></span>
</div>

<span class="c6LightDots" role="presentation" aria-hidden="true">
  <i class="c6LightDot c6LightDotLead"></i>
  <i class="c6LightDot c6LightDotTrail"></i>
</span>

<div class="c6LightSweep" role="presentation" aria-hidden="true"></div>

<section class="c6LightAmbient"> ... первый экран ... </section>

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

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

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

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

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

Логотип и маскот

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

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

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

Мини-логотип как индикатор

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

Скобки в движении

Развитие того же приёма: половины знака расходятся и сходятся, пока идёт работа. Здесь настоящие пути из code6_logo-mini.svg — именно потому, что знак живёт в разметке, а не картинкой, его половины можно двигать по отдельности.

Маскот

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

Спокойное парение · пустые состояния

Ускоренное парение · система думает

Пустое состояние целиком

Пока ничего нет

Записи появятся, когда пройдёт первая смена

Правила

<!-- связка: знак и огни -->
<div class="c6LogoLockup">
  <svg class="c6LogoSvg c6LogoFull c6LogoSizeSm c6LogoRise" viewBox="0 0 1057 217" role="img" aria-label="code6">
    <path class="c6LogoInk" d="..."/>
    <path class="c6LogoLead" d="..."/>
    <path class="c6LogoTrail" d="..."/>
  </svg>
  <div class="c6LightBar" role="presentation" aria-hidden="true">
    <span class="c6LightBarSegment"></span>
    <span class="c6LightBarSegment"></span>
  </div>
</div>

<!-- знак как индикатор: SVG встроен, поэтому красится токенами -->
<span class="c6MarkLoader c6MarkLoaderMd" role="presentation" aria-hidden="true">
  <svg class="c6LogoSvg c6LogoMark" viewBox="0 0 208 217">
    <path class="c6LogoLead" d="..."/>
    <path class="c6LogoTrail" d="..."/>
  </svg>
</span>

<!-- пустое состояние -->
<div class="c6EmptyState">
  <img class="c6Mascot c6MascotSm c6MascotIdle" src="/code6_codic_glasses.png" alt="">
  <p>Пока ничего нет</p>
</div>

Загрузка

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

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

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

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

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

Спиннер

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

Кнопка

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

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

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

Изображение

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

<div class="c6MediaFrame" style="aspect-ratio:16/9">
  <img class="c6MediaImage" src="..." alt="">
</div>

// Класс добавляется по событию загрузки, а не по таймеру:
// иначе на медленной сети картинка проявится раньше, чем придёт.
function bindMediaFadeIn(imageElement) {
  if (imageElement.complete) {
    imageElement.classList.add('c6MediaImageLoaded');
    return;
  }
  imageElement.addEventListener('load', () => {
    imageElement.classList.add('c6MediaImageLoaded');
  }, { once: true });
}

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

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

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

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

Обновление на месте

function updateLiveValue(valueElement, nextValue) {
  const nextText = String(nextValue);

  // Ничего не мигаем, если значение не изменилось:
  // подсветка без изменения читается как сбой.
  if (valueElement.textContent === nextText) {
    return;
  }

  valueElement.textContent = nextText;

  // Снять и вернуть класс мало — браузер не перезапустит анимацию,
  // пока не произойдёт пересчёт раскладки. Обращение к offsetWidth
  // и есть этот принудительный пересчёт.
  valueElement.classList.remove('c6ValueChanged');
  void valueElement.offsetWidth;
  valueElement.classList.add('c6ValueChanged');
}

Правила загрузки

Порог и минимальная жизнь индикатора

async function runWithLoader(task, loaderElement, options = {}) {
  const minimumDelay = options.minimumDelay || 200;
  const minimumVisible = options.minimumVisible || 400;
  let shownAt = 0;

  const showTimer = setTimeout(() => {
    loaderElement.hidden = false;
    shownAt = Date.now();
  }, minimumDelay);

  try {
    return await task;
  } finally {
    clearTimeout(showTimer);

    // Если индикатор успел появиться, он обязан прожить минимум,
    // иначе пользователь увидит вспышку вместо загрузки.
    if (shownAt) {
      const visibleFor = Date.now() - shownAt;
      if (visibleFor < minimumVisible) {
        await new Promise(resolve => setTimeout(resolve, minimumVisible - visibleFor));
      }
    }

    loaderElement.hidden = true;
  }
}

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

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

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

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

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

Разметка

<article class="c6Generated c6GeneratedStreaming">
  <div class="c6GeneratedHead">
    <span class="c6GeneratedMark">
      <i data-lucide="sparkles" width="13" height="13" aria-hidden="true"></i>Генерируется
    </span>
    <span class="c6GeneratedMeta">terminal-assist · 16 сент, 21:04</span>
  </div>

  <div class="c6GeneratedBody">
    <p>Текст ответа<span class="c6GeneratedCaret" aria-hidden="true"></span></p>
  </div>

  <p class="c6GeneratedFoot">Сводка составлена автоматически и может содержать ошибки.</p>
</article>

// Класс состояния снимается, когда поток закончился.
// Кроме анимации он ничего не меняет, поэтому блок
// не «прыгает» в момент завершения.
function finishGeneratedBlock(blockElement, modelName, finishedAt) {
  blockElement.classList.remove('c6GeneratedStreaming');
  blockElement.querySelector('.c6GeneratedMark').lastChild.textContent = 'Сгенерировано';
  blockElement.querySelector('.c6GeneratedMeta').textContent = modelName + ' · ' + finishedAt;

  const caret = blockElement.querySelector('.c6GeneratedCaret');
  if (caret) {
    caret.remove();
  }
}

Правила разметки сгенерированного

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

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

Правила кода

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

function renderScreen(screenName) {
  const screen = screens[screenName];

  // Класс режима нужен вёрстке: от него зависит,
  // какие соседние блоки встают в пару на десктопе.
  pageElement.className = 'page mode-' + screen.mode;
  pageElement.innerHTML = screen.blocks
    .map(blockName => blockRenderers[blockName](screen.data, screen))
    .join('');

  bindInteractiveControls();
  refreshIcons();
}

CSS

/* --- прогресс -----------------------------------------------------------
   Токены: --c6TrackEmpty, --c6ActionFill, --c6StatusWaiting
   ------------------------------------------------------------------------ */
.c6ProgressTrack { height: 8px; border-radius: 5px; background: var(--c6TrackEmpty); overflow: hidden; }
.c6ProgressFill { display: block; height: 100%; border-radius: 5px; }
.c6ProgressFillAction { background: var(--c6ActionFill); }
.c6ProgressFillWaiting { background: var(--c6StatusWaiting); }

@media (min-width: 900px) {
  .c6ProgressTrack { height: 10px; }
}

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

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

Сдержанность касается раскрытия информации, а не интонации. «В этот раз не получилось» — нормально. «Вот что стоит подтянуть» — нет. Тему закрывает формулировка из правил сообщества: «Решения по заявкам не комментируются».