# Kodari — брендбук 2.1

**Машиночитаемая спецификация фирменного стиля.** Версия 2.1, октябрь 2026.
Источник истины — этот документ и сайт brand.kodari.ru с файлами знака.
В Figma «Брендбук» остались только стикеры и лист в печать; правил там нет.

---

## 0. Как пользоваться этим файлом

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

**Если вы модель и вам дали этот файл — правила работы:**

1. Не изобретайте цвета, кегли и отступы. Всё, что нужно, есть в разделах 3–5. Если нужного значения нет, возьмите ближайшее из шкалы, а не среднее между двумя.
2. Цвет никогда не берётся «по ощущению». У каждой ступени палитры закреплённая роль (раздел 3.2). Роль важнее оттенка.
3. Акцент интерфейса — всегда фиолетовый (`accent/*`), в любом продукте. Цвета продуктов живут только на знаке и в промо (раздел 2.7).
4. Шрифт один — Rubik. Второй шрифт можно ввести только под настоящий код (раздел 4.7).
5. Знак не перерисовывается. Готовые SVG в разделе 2.3, их можно вставлять как есть.
6. Тексты пишутся по правилам раздела 6. Обращение («ты» или «вы») берётся из таблицы продуктов (раздел 1.1).
7. Если задача противоречит правилу — скажите об этом прямо, а не нарушайте молча.

**Быстрый набор для типовой задачи** (тёмная тема, промо-страница Kodari):
фон `#111113`, поверхность `#19191b`, текст `#e7e7f2`, вторичный текст `#b2b2c6`,
акцент-заливка `#7c3aed`, акцент-текст `#b7a4ff`, шрифт Rubik. Знак — белый куб.

---

## 1. Бренд коротко

| Поле | Значение |
|---|---|
| Название | Kodari |
| Написание | всегда `Kodari`, одно слово, заглавная K. Не `KODARI`, не `kodari`, не `Ko-Dari` |
| Цвет бренда | своего цвета нет: Kodari чёрно-белый. Фиолетовый — служебный цвет интерфейса, не фирменный |
| Слоган | Код, понятный людям |
| Описательная фраза | Просто хорошо сделанные продукты |
| Сфера | студия разработки программного обеспечения |
| Сайт | kodari.ru · брендбук: brand.kodari.ru |
| Поддержка | `@KodariSupportBot`, support@kodari.ru |
| Основатели | Сергей Дроздов (`@dewrolld`), Савва Верьялов (`@kdsov`) |

Слоган ставится только под знаком — на визитке, обложке, в подписи к письму.
Описательная фраза живёт отдельно, в разделе «О нас» и подзаголовках презентаций.
В одном блоке они не встречаются.

### 1.1 Продукты

Продукты бывают двух типов.

**Сервисы Kodari** — функции экосистемы. Пишутся с префиксом: `Kodari TOP`, `Kodari ID`.
В лок-апе рядом с кубом стоит полное имя с префиксом.

**Самостоятельные продукты** — живут своим именем: `Liya`, `KODATA`.
Kodari упоминается рядом строкой «от Kodari» (в подвале, на экране «О приложении», в описании в сторе).
В лок-апе рядом с кубом стоит только имя продукта.

| Продукт | Тип | Написание | Слово на гранях | Подпись в лок-апе | Обращение | Цвет знака |
|---|---|---|---|---|---|---|
| Kodari | родительский бренд | `Kodari` | Kodari | Kodari | на «вы» | ч/б, без цвета |
| Kodari TOP | сервис | `Kodari TOP` | TOP | Kodari TOP | на «ты» | `#c6f54a` лайм |
| Kodari ID | сервис | `Kodari ID` | ID | Kodari ID | на «вы» | `#7dd3fc` голубой |
| Liya | самостоятельный | `Liya` | Liya | Liya | на «ты» | `#ff6b5e` коралл |
| KODATA | самостоятельный | `KODATA`, всегда прописными | KODATA | KODATA | на «вы» | `#03a14a` зелёный |

Регистр каждого имени закреплён в этой таблице. Правило «не прописными» относится только к слову Kodari.
Новый продукт сначала получает строку в этой таблице, потом всё остальное.

---

## 2. Знак

### 2.1 Что это

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

### 2.2 Геометрия

Одно число задаёт всё: длина ребра `L`.

```
ширина = 2 × L × cos30° = 1,732 × L
высота = 2 × L
```

**Размер знака — это высота куба** (`2L`). «Знак 26 px» значит, что куб высотой 26 px, ребро 13 px.
Файлы знака обрезаны по рисунку: `viewBox="0 0 173.21 200"`, ребро — 100 единиц.
Полей внутри файла нет, охранное поле (2.4) отсчитывается от самого куба.

Высота больше ширины — это нормально и так задумано.
Если высота равна ширине, значит куб сплюснут и построен неверно.

Точки в системе координат с началом в верхней вершине, `W = L × cos30°`:

| Точка | Координаты |
|---|---|
| верхняя вершина | `(W, 0)` |
| правая вершина | `(2W, 0.5L)` |
| левая вершина | `(0, 0.5L)` |
| нижняя точка верхней грани | `(W, L)` |
| низ левого ребра | `(0, 1.5L)` |
| низ правого ребра | `(2W, 1.5L)` |
| нижняя вершина | `(W, 2L)` |

Грани:

| Грань | Контур |
|---|---|
| верхняя | `(W,0) → (2W,0.5L) → (W,L) → (0,0.5L)` |
| правая | `(2W,0.5L) → (2W,1.5L) → (W,2L) → (W,L)` |
| левая | `(0,0.5L) → (W,L) → (W,2L) → (0,1.5L)` |

### 2.3 Готовые SVG

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

**Белый куб** — Kodari на тёмном фоне:

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 173.21 200" role="img" aria-label="Kodari">
  <path d="M86.6 0 L173.21 50 L173.21 150 L86.6 200 L0 150 L0 50 Z" fill="#cfcfd0"/>
  <path d="M86.6 0 L173.21 50 L86.6 100 L0 50 Z" fill="#ffffff"/>
  <path d="M173.21 50 L173.21 150 L86.6 200 L86.6 100 Z" fill="#cfcfd0"/>
  <path d="M0 50 L86.6 100 L86.6 200 L0 150 Z" fill="#a5a5a5"/>
</svg>
```

**Тёмный куб** — Kodari на светлом фоне: те же контуры, цвета `#34343d` (силуэт) · `#111113` · `#34343d` · `#4f4f5c`.

**Цветной куб продукта** — мелкий режим, на любом фоне: те же контуры, цвета из таблицы 2.8.

`aria-label` — имя продукта из таблицы 1.1.

### 2.4 Охранное поле

Со всех сторон от куба свободно не меньше **половины ребра** (`0,5 × L`).
Внутрь поля не заходит ни текст, ни другой знак, ни край макета.
В лок-апе (2.9) надпись стоит ровно на границе охранного поля.

### 2.5 Два режима

Знак работает по-разному в зависимости от размера. Граница — высота куба 96 px.

**Режим 1 — от 96 px.** На гранях написано слово. Куб всегда ч/б и переворачивается вслед за фоном:

| Фон | Куб (верх / правая / левая) | Слово |
|---|---|---|
| Тёмный | `#ffffff` / `#cfcfd0` / `#a5a5a5` | `#111113` |
| Светлый | `#111113` / `#34343d` / `#4f4f5c` | `#ffffff` |

Слово на гранях читается везде: минимальный контраст 7,66 на тёмном варианте
и 8,06 на светлом — обе цифры по самой слабой грани.

**Слово на гранях:**

- Одно и то же слово повторено на всех трёх гранях. Какое — колонка «Слово на гранях» в таблице 1.1.
- Шрифт — Rubik Black, регистр — как в таблице 1.1.
- Кегль один на всю семью знаков. Его задаёт самое длинное слово — `KODATA`: оно занимает 80% длины ребра.
  Остальные слова набираются тем же кеглем и стоят по центру грани.
- Слово идёт вдоль грани и трансформируется по изометрии:

| Грань | CSS/SVG матрица |
|---|---|
| верхняя | `matrix(0.866, 0.5, -0.866, 0.5, tx, ty)` |
| левая | `matrix(0.866, 0.5, 0, 1, tx, ty)` |
| правая | `matrix(0.866, -0.5, 0, 1, tx, ty)` |

**Режим 2 — до 96 px.** Слово уже не читается, поэтому рядом **обязательно** ставится подпись — знак
используется только в лок-апе (2.9). Цвет куба — по разделу 2.8.

Исключения, где подпись не ставится: фавикон, иконка приложения, аватар аккаунта (имя и так стоит рядом).

### 2.6 Правило тона

Верхняя грань — всегда чистый цвет знака, по ней узнаётся оттенок. Правая грань отходит от верхней на одну ступень, левая на две.

- **Ч/б куб** (Kodari и крупный режим любого продукта) переворачивается по фону: на тёмном он белый и боковые темнее верхней, на светлом он тёмный и боковые светлее.
- **Цветной куб** не переворачивается: боковые грани всегда темнее верхней — в них подмешан `#111113` на 20% и 38%. Поэтому силуэт держится на любом фоне, даже когда верхняя грань с фоном почти сливается.

### 2.7 Цвета знаков

Цвет продукта существует только на знаке и в промо-материалах этого продукта.
Интерфейс любого продукта красится фиолетовым акцентом (раздел 3), а не цветом продукта.
Цвета знаков не входят в палитру интерфейса и не подставляются вместо её ступеней.

| Знак | Цвет |
|---|---|
| Kodari | нет цвета: белый на тёмном, `#111113` на светлом |
| Kodari TOP | `#c6f54a` лайм |
| Kodari ID | `#7dd3fc` голубой |
| Liya | `#ff6b5e` коралл |
| KODATA | `#03a14a` зелёный |

Различимость всех пар — минимум 25 по OKLab (ближе всех TOP и ID). Порог, ниже которого цвета начинают путать, — около 12.

В интерфейсе TOP лайм допустим точечно: иллюстрации, пустые состояния, промо-блоки.
На кнопках, ссылках, фокусе и статусах его нет.

### 2.8 Мелкий знак

До 96 px куб продукта цветной на любом фоне, светлом и тёмном. Kodari остаётся ч/б: белый на тёмном, тёмный на светлом.

| Знак | Верхняя | Правая | Левая | Левая на белом |
|---|---|---|---|---|
| Kodari TOP | `#c6f54a` | `#a2c73f` | `#819e35` | 3,05 : 1 |
| Kodari ID | `#7dd3fc` | `#67accd` | `#5489a3` | 3,83 : 1 |
| Liya | `#ff6b5e` | `#cf594f` | `#a54942` | 5,78 : 1 |
| KODATA | `#03a14a` | `#06843f` | `#086a35` | 6,72 : 1 |

Правая грань — 80% цвета и 20% `#111113`, левая — 62% и 38%. Верхняя грань лайма и голубого на белом почти сливается с фоном
(1,27 и 1,67 : 1) — силуэт там держат боковые грани, левая от 3 : 1 у всех. Поэтому боковые грани цветного куба никогда не осветляются
и не заменяются прозрачностью: на светлом фоне прозрачность сделала бы их светлее, и куб бы растворился.

Фавикон и иконка приложения — цветной куб на плашке `#111113`. У Kodari — белый куб на той же плашке.

### 2.9 Лок-ап: куб и надпись

Два варианта, оба строятся от ребра `L`.

**Горизонтальный — основной.** Куб слева, надпись справа, надпись по центру куба по вертикали.
Шапка сайта и кабинета, подпись в письме, документы.

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

| Параметр | Значение |
|---|---|
| Надпись | Rubik ExtraBold, текст из колонки «Подпись в лок-апе» (1.1) |
| Высота прописной | `0,8 × L` |
| Расстояние от куба до надписи | `0,5 × L` |
| Цвет надписи | `#ffffff` на тёмном фоне, `#111113` на светлом — у всех продуктов |
| Охранное поле | `0,5 × L` вокруг всего лок-апа |

Лок-ап — это графика. На надпись в нём шкала кеглей (раздел 4) не распространяется.

### 2.10 Одноцветная версия

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

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

| Параметр | Значение |
|---|---|
| Ширина просвета | `0,04 × L` |
| Минимум для шелкографии | 0,3 мм |
| Минимум для гравировки и лазера | 0,15 мм |

Просвет не тоньше минимальной линии технологии. Если по этому правилу просвет выходит заметно шире 4% ребра,
знак слишком мал для такого способа печати — его нужно увеличить.

Просвет — это отсутствие краски, а не нарисованная линия. Правило «рёбра не рисуются» (2.11) он не нарушает.

### 2.11 Чего не делаем

1. **Не поворачивать и не наклонять.** Угол 30° — часть конструкции.
2. **Не рисовать рёбра линиями и обводкой.** Границу граней задаёт только тон, а в одноцветной версии — просвет.
3. **Не сжимать и не растягивать.** Высота ровно два ребра.
4. **Не красить грани в разные цвета.** Цвет один, меняется только светлота.
5. **Не вешать эффекты.** Ни теней, ни градиентов, ни свечения, ни обводки.
6. **Не красить крупный знак.** От 96 px куб только белый или тёмный, по фону. Цвет — только в мелком режиме.
7. **Не ставить мелкий знак без подписи.** Исключения — фавикон, иконка приложения, аватар аккаунта.
8. **Не использовать знак как иллюстрацию** в интерфейсе (пустые состояния, заглушки). Для этого есть иконки.

---

## 3. Цвет

### 3.1 Принцип

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

Светлая тема **не выводится из тёмной инверсией** — у неё свои числа.
Девятая ступень совпадает в обеих темах.

Палитра обслуживает интерфейс. У семейств закреплённые задачи:

| Семейство | Задача |
|---|---|
| neutral | фоны, границы, текст |
| violet | акцент интерфейса во всех продуктах |
| green, amber, red, blue | статусы (успех, внимание, ошибка, информация) |
| green, lime, amber, red | оценки |
| cyan, pink | запас под графики и метки категорий |

Семейства не подставляются друг вместо друга на место акцента.

### 3.2 Роли ступеней

| # | Роль | Где применяется |
|---|---|---|
| 1 | Фон приложения | самый нижний слой |
| 2 | Фон подложки | панели, секции, карточки, поля |
| 3 | Элемент в покое | вторичные кнопки, чипы, бейджи |
| 4 | Элемент под курсором | hover у поверхностей |
| 5 | Элемент нажат | active, выбранное состояние |
| 6 | Тонкая граница | разделители, границы карточек |
| 7 | Граница элемента | границы кнопок |
| 8 | Граница под курсором | hover у границ, выключенный текст |
| 9 | **Плотная заливка** | опорная ступень, кнопки, чекбоксы, индикаторы |
| 10 | Заливка под курсором | hover у плотной заливки |
| 11 | **Акцентный текст** | ссылки, текст статуса. От 4,5 : 1 на ступенях 1–3 |
| 12 | **Контрастный текст** | основной текст. От 7 : 1 на ступенях 1–3 |

Три запрета:

- **Не брать девятую под текст.** Девятая — заливка. Текст на ней — только `text/on-solid` (белый), и только на violet и red: там он даёт от 4,5 : 1. На lime, cyan, amber и green белый текст не ставится.
- **Не смешивать темы.** Ступени тёмной темы на светлом фоне дают грязь.
- **Не заливать статус целиком.** Статус — подложка 3-й ступени и текст 11-й. Девятая ступень статуса — только тонкий индикатор (полоса тоста, граница поля с ошибкой) и опасная кнопка.

У red в тёмной теме десятая ступень темнее девятой: иначе белый текст на наведённой опасной кнопке не проходит 4,5 : 1.

Две ступени работают не по своей строке, и это намеренно: `neutral/9` — граница полей, чекбоксов и дорожка выключенного переключателя (`border/strong`), `violet/11` — кольцо фокуса (`border/focus`). Восьмые ступени, которые по роли должны это делать, не дают 3 : 1, обязательных для элементов управления.

### 3.3 Тёмная тема

| Семейство | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| **neutral · нейтральный** | `#111113` | `#19191b` | `#242429` | `#2c2c34` | `#34343d` | `#3f3f4a` | `#4f4f5c` | `#676778` | `#6f6f86` | `#7e7e95` | `#b2b2c6` | `#e7e7f2` |
| **violet · фиолетовый** | `#110f1b` | `#1a1529` | `#271c45` | `#302059` | `#392569` | `#452d7c` | `#56389b` | `#7148cb` | `#7c3aed` | `#8a4dff` | `#b7a4ff` | `#e8e4ff` |
| **lime · лайм** | `#0f1309` | `#161b0b` | `#1f2904` | `#253300` | `#2d3c00` | `#364800` | `#445900` | `#5a7400` | `#c6f54a` | `#e0ffa4` | `#a0c446` | `#dcf2b5` |
| **cyan · голубой** | `#0a1314` | `#0c1c1e` | `#032a2e` | `#003439` | `#003d43` | `#004a50` | `#005c64` | `#007781` | `#00c1d1` | `#00d3e3` | `#47c9d6` | `#baf4fb` |
| **blue · синий** | `#0b1218` | `#0f1a25` | `#0f263c` | `#0d2f4d` | `#0f375c` | `#14426d` | `#185387` | `#1c6cb1` | `#007dd6` | `#188ceb` | `#75baff` | `#d7eaff` |
| **green · зелёный** | `#0c130d` | `#101d12` | `#102b17` | `#0d361a` | `#0f401e` | `#134d25` | `#17602f` | `#197d3d` | `#03a14a` | `#29b159` | `#6ecc85` | `#c7f6cf` |
| **amber · янтарь** | `#151009` | `#20170b` | `#322104` | `#3f2800` | `#4a2f00` | `#583900` | `#6d4800` | `#8d5e00` | `#fbac16` | `#ffc166` | `#e5a748` | `#ffe3be` |
| **red · красный** | `#190e0d` | `#261311` | `#3d1715` | `#4e1918` | `#5c1d1c` | `#6d2422` | `#872d2b` | `#b13938` | `#d43436` | `#c52f31` | `#ff9088` | `#ffdfdc` |
| **pink · розовый** | `#180e12` | `#24131b` | `#391729` | `#491933` | `#561d3c` | `#662448` | `#7f2d5a` | `#a73a75` | `#d84497` | `#ea55a6` | `#fe86c2` | `#ffddec` |

### 3.4 Светлая тема

| Семейство | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| **neutral · нейтральный** | `#fdfdfe` | `#fafafb` | `#f4f4f7` | `#eeeef2` | `#e8e8ed` | `#e0e0e6` | `#d5d5dc` | `#c4c4ce` | `#6f6f86` | `#67677b` | `#636278` | `#2f2f3a` |
| **violet · фиолетовый** | `#fdfdff` | `#faf9ff` | `#f4f3ff` | `#efecff` | `#e9e5ff` | `#e1dbff` | `#d7cfff` | `#c7b9ff` | `#7c3aed` | `#7026dd` | `#743bdc` | `#36186d` |
| **lime · лайм** | `#fcfefa` | `#f8fcf3` | `#f1f7e9` | `#ebf2de` | `#e3edd3` | `#dae6c7` | `#ceddb5` | `#bace95` | `#c6f54a` | `#b7e637` | `#5a7400` | `#283600` |
| **cyan · голубой** | `#fafefe` | `#f4fcfd` | `#eaf7f9` | `#e1f3f5` | `#d6eef1` | `#cae7ea` | `#b9dee2` | `#9ad0d6` | `#00c1d1` | `#00b1c0` | `#007781` | `#00383d` |
| **blue · синий** | `#fcfdff` | `#f6fbff` | `#edf6ff` | `#e3f1ff` | `#daebfd` | `#cfe3f9` | `#bfd9f5` | `#a4c9f0` | `#007dd6` | `#006fc0` | `#006bb9` | `#00315a` |
| **green · зелёный** | `#fbfefb` | `#f6fcf6` | `#edf8ef` | `#e4f4e7` | `#dbefde` | `#d0e8d4` | `#c1e0c6` | `#a6d2ae` | `#03a14a` | `#009142` | `#007f38` | `#003c17` |
| **amber · янтарь** | `#fffdfa` | `#fef9f3` | `#fbf3e9` | `#f8edde` | `#f5e6d3` | `#efdec7` | `#e9d3b5` | `#debf95` | `#fbac16` | `#e99e00` | `#8d5e00` | `#432b00` |
| **red · красный** | `#fffcfc` | `#fff8f8` | `#fff1ef` | `#ffe9e7` | `#ffe0dd` | `#fdd6d2` | `#f9c9c4` | `#f5b1ab` | `#d43436` | `#ce2930` | `#bc272c` | `#5c0e10` |
| **pink · розовый** | `#fffcfd` | `#fff8fb` | `#fff0f6` | `#ffe8f1` | `#fddfec` | `#f9d5e5` | `#f4c8db` | `#eeb0cc` | `#d84497` | `#c83489` | `#b02a78` | `#550f38` |

### 3.5 Семантические токены

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

| Токен | Ссылается на | Что это |
|---|---|---|
| `bg/app` | `neutral/1` | фон приложения |
| `bg/surface` | `neutral/2` | панели, карточки, поля, шапка, строки списка |
| `bg/raised` | `neutral/3` | вторичные кнопки, чипы, бейджи, тосты |
| `bg/hover` | `neutral/4` | наведение |
| `bg/active` | `neutral/5` | нажатие, дорожка прогресса, скелетон |
| `border/subtle` | `neutral/6` | разделители, границы карточек |
| `border/default` | `neutral/7` | границы кнопок |
| `border/strong` | `neutral/9` | границы полей, чекбоксов, радиокнопок; дорожка выключенного переключателя |
| `border/focus` | `violet/11` | кольцо фокуса |
| `text/primary` | `neutral/12` | основной текст |
| `text/secondary` | `neutral/11` | вторичный текст |
| `text/muted` | `neutral/10` | подписи, плейсхолдеры, даты. На 3-й ступени и выше берите `text/secondary` |
| `text/disabled` | `neutral/8` | выключенный текст |
| `text/on-solid` | `#ffffff` | текст на плотной заливке violet и red |
| `accent/solid` | `violet/9` | основная кнопка |
| `accent/solid-hover` | `violet/10` | её наведение |
| `accent/text` | `violet/11` | ссылка |
| `accent/bg` | `violet/3` | подложка акцента |
| `accent/border` | `violet/6` | граница акцента |
| `status/success-bg` `-text` `-border` `-solid` | `green/3` `green/11` `green/6` `green/9` | успех |
| `status/warning-bg` `-text` `-border` `-solid` | `amber/3` `amber/11` `amber/6` `amber/9` | внимание |
| `status/danger-bg` `-text` `-border` `-solid` | `red/3` `red/11` `red/6` `red/9` | ошибка |
| `status/danger-solid-hover` | `red/10` | наведение на опасную кнопку |
| `status/info-bg` `-text` `-border` `-solid` | `blue/3` `blue/11` `blue/6` `blue/9` | информация |

### 3.6 Оценки

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

| Оценка | Семейство | Тёмная: фон / текст / граница | Светлая: фон / текст / граница |
|---|---|---|---|
| 5 | green | `#102b17` / `#6ecc85` / `#134d25` | `#edf8ef` / `#007f38` / `#d0e8d4` |
| 4 | lime | `#1f2904` / `#a0c446` / `#364800` | `#f1f7e9` / `#5a7400` / `#dae6c7` |
| 3 | amber | `#322104` / `#e5a748` / `#583900` | `#fbf3e9` / `#8d5e00` / `#efdec7` |
| 2 | red | `#3d1715` / `#ff9088` / `#6d2422` | `#fff1ef` / `#bc272c` / `#fdd6d2` |
| нет | neutral | `#242429` / `#b2b2c6` / `#3f3f4a` | `#f4f4f7` / `#636278` / `#e0e0e6` |

### 3.7 Проверенные контрасты

Замерено по WCAG 2.1. Фон — первая ступень нейтрального в своей теме, если не сказано иное.

| Пара | Тёмная | Светлая |
|---|---|---|
| `text/primary` | 15,37 | 13,00 |
| `text/secondary` | 9,05 | 5,82 |
| `text/muted` | 4,77 | 5,43 |
| `accent/text` | 8,77 | 6,07 |
| `accent/text` на `bg/raised` | 7,19 | 5,62 |
| `text/on-solid` на `accent/solid` | 5,70 | 5,70 |
| `text/on-solid` на `accent/solid-hover` | 4,58 | 6,98 |
| `text/on-solid` на `status/danger-solid` | 4,83 | 4,83 |
| `text/on-solid` на `status/danger-solid-hover` | 5,49 | 5,27 |
| `border/focus` на `bg/surface` | 8,17 | 5,92 |
| `border/strong` на `bg/surface` | 3,59 | 4,69 |
| `status/danger-solid` на `bg/surface` | 3,63 | 4,63 |
| Ручка переключателя на `border/strong` | 4,89 | 4,89 |
| Оценка 5 · текст на подложке | 7,71 | 4,71 |
| Оценка 4 · текст на подложке | 7,61 | 4,89 |
| Оценка 3 · текст на подложке | 7,35 | 5,12 |
| Оценка 2 · текст на подложке | 7,21 | 5,51 |
| Оценка «нет» · текст на подложке | 7,41 | 5,39 |

Норма: обычный текст — от 4,5 : 1, крупный (от 24 px или от 19 px полужирным) — от 3 : 1.
Границы элементов управления и кольцо фокуса — от 3 : 1. Границы карточек и разделители декоративны, норма на них не распространяется.

---

## 4. Типографика

### 4.1 Гарнитура

**Rubik** — на буквы и цифры, на промо и на интерфейс. Google Fonts, свободная лицензия.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap">
```

```css
font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
```

### 4.2 Начертания

| Начертание | Вес | Где применяется |
|---|---|---|
| Light | 300 | подписи под графиками |
| Regular | 400 | основной текст |
| Medium | 500 | кнопки, метки, навигация, числа в строке |
| SemiBold | 600 | подзаголовки, названия карточек |
| Bold | 700 | заголовки, крупные числа |
| ExtraBold | 800 | Display, надпись в лок-апе |
| Black | 900 | слово на гранях куба |

### 4.3 Шкала «сайт и промо»

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

| Роль | Начертание | Кегль | Интерлиньяж | Трекинг |
|---|---|---|---|---|
| Display | ExtraBold | 64 | 104% | −3% |
| H1 | Bold | 44 | 108% | −2,5% |
| H2 | Bold | 32 | 115% | −2% |
| H3 | SemiBold | 24 | 125% | −1,5% |
| H4 | SemiBold | 20 | 130% | −1% |
| Лид | Regular | 20 | 155% | 0 |
| Текст | Regular | 17 | 160% | 0 |
| Мелкий | Regular | 15 | 155% | 0 |
| Подпись | Regular | 13 | 145% | 0 |
| Метка | Medium | 12 | 140% | +8%, ПРОПИСНЫЕ |

### 4.4 Шкала «интерфейс»

Для личных кабинетов, веб- и мобильных приложений. Кегли ниже, интерлиньяж плотнее.

| Роль | Начертание | Кегль | Интерлиньяж | Трекинг |
|---|---|---|---|---|
| Экран | SemiBold | 24 | 130% | −1% |
| Блок | SemiBold | 18 | 135% | −0,5% |
| Карточка | SemiBold | 15 | 140% | 0 |
| Текст | Regular | 15 | 150% | 0 |
| Вторичный | Regular | 14 | 150% | 0 |
| Подпись | Regular | 13 | 145% | 0 |
| Метка | Medium | 11 | 140% | +10%, ПРОПИСНЫЕ |
| Число крупное | Bold | 32 | 105% | −2% |
| Число в строке | Medium | 15 | 140% | 0 |
| Чип оценки | Bold | 15 | 100% | 0 |

### 4.5 Правила набора

- Длина строки — 60–75 знаков.
- Заголовок — не длиннее двух строк.
- Основной текст мельче 13 px не набирается. Единственное исключение — метка 11–12 px.
- Прописными набирается только метка и имена из таблицы 1.1, у которых так закреплено (TOP, ID, KODATA).
- Кегли берутся из шкалы своего носителя. Промежуточных значений нет. Начертание внутри компонента может отличаться от роли в шкале, кегль — нет.
- Надпись в лок-апе и слово на гранях — графика знака, шкала на них не распространяется.

### 4.6 Числа

| Что | Как | Пример |
|---|---|---|
| Дробная часть | через запятую | `4,57`, не `4.57` |
| Тысячи | неразрывный пробел | `1 240`, не `1240` и не `1,240` |
| Проценты | без пробела | `87%`, не `87 %` |
| Диапазон | короткое тире без пробелов | `9–11 класс` |
| Даты | точками | `22.08.2026` |
| Деньги | знак после числа | `1 500 ₽` |

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

```css
font-variant-numeric: tabular-nums;
```

### 4.7 Моноширинный

**JetBrains Mono** остаётся только там, где это буквально код: команды, ключи, идентификаторы,
фрагменты в документации. В интерфейсе, в таблицах и в подписях его нет.

---

## 5. Компоненты

Размеры в пикселях. Цвета — семантические токены из раздела 3.5. Кегли — из шкалы «интерфейс» (4.4).

### 5.1 Кнопка

Скругление 10, отступы 13 / 20, промежуток между иконкой и текстом 8, текст Medium 15.

| Вид | Обычная | Наведение | Выключена |
|---|---|---|---|
| Основная | фон `accent/solid`, текст `text/on-solid` | фон `accent/solid-hover` | фон `bg/raised`, текст `text/disabled` |
| Вторичная | фон `bg/raised`, граница `border/default`, текст `text/primary` | фон `bg/hover` | фон `bg/surface`, граница `border/subtle`, текст `text/disabled` |
| Призрак | без фона, текст `text/secondary` | фон `bg/raised`, текст `text/primary` | текст `text/disabled` |
| Опасная | фон `status/danger-solid`, текст `text/on-solid` | фон `status/danger-solid-hover` | фон `bg/raised`, текст `text/disabled` |

Фокус у любой кнопки — кольцо 2 px `border/focus` с отступом 2 px.

### 5.2 Поле ввода

Ширина по контейнеру, скругление 10, отступы 13 / 14, текст Regular 15.

| Состояние | Фон | Граница | Текст |
|---|---|---|---|
| Пусто | `bg/surface` | `border/strong` 1px | `text/muted` |
| Заполнено | `bg/surface` | `border/strong` 1px | `text/primary` |
| Фокус | `bg/surface` | `border/focus` 2px | `text/primary` |
| Ошибка | `bg/surface` | `status/danger-solid` 2px | `text/primary`, под полем текст `status/danger-text` Regular 13 |
| Выключено | `bg/app` | `border/subtle` 1px | `text/disabled` |

### 5.3 Остальная база

| Компонент | Спецификация |
|---|---|
| Чекбокс | 20 × 20, скругление 6. Выкл: граница `border/strong` 1,5px. Вкл: заливка `accent/solid`, галка `text/on-solid` 2px |
| Радиокнопка | 20 × 20, круг. Выкл: граница `border/strong` 1,5px. Вкл: граница `accent/solid` 2px + точка 9 px `accent/solid` |
| Переключатель | 44 × 26, скругление 13. Выкл: фон `border/strong`. Вкл: фон `accent/solid`. Ручка 20 px `text/on-solid` |
| Бейдж | отступы 5 / 10, скругление 6, текст Medium 11 прописными, трекинг +8%. Тон = фон 3 / текст 11 / граница 6 своего семейства |
| Аватар | 44 × 44, скругление 12. Инициалы: фон `accent/bg`, текст `accent/text` SemiBold 15. Аккаунт продукта: знак 28 px по правилам 2.8 на `bg/raised`, без подписи |
| Карточка | скругление 12, отступы 20, фон `bg/surface`, граница `border/subtle` |

### 5.4 Данные и журнал

| Компонент | Спецификация |
|---|---|
| Чип оценки | 44 × 36, скругление 8, текст Bold 15. Цвета — раздел 3.6 |
| Строка списка | отступы 12 / 16, скругление 10, фон `bg/surface`, граница `border/subtle`. Наведение — фон `bg/hover` |
| Прогресс | высота 10, скругление 5, дорожка `bg/active`, заполнение `accent/solid` |
| Пустое состояние | скругление 12, фон `bg/surface`, пунктирная граница `border/subtle`. Иконка 40 px `text/muted`, заголовок SemiBold 18, текст Regular 14, кнопка. Знак не используется (2.11) |
| Скелетон | полосы высотой 12, скругление 6, цвет `bg/active`, ширины 100 / 72 / 88 / 46 % |

### 5.5 Навигация

| Компонент | Спецификация |
|---|---|
| Шапка | отступы 16 / 24, фон `bg/surface`, нижняя граница `border/subtle`. Слева горизонтальный лок-ап (2.9) с кубом 26 px. Пункты Regular 15 `text/secondary`, активный Medium `text/primary` |
| Пункт меню | отступы 11 / 14, скругление 10. Активный: фон `accent/bg`, текст `accent/text` Medium 15. Обычный: без фона, текст `text/secondary` Regular 15 |
| Таб | текст 15, снизу полоса 2 px. Активный: полоса `accent/solid`, текст `text/primary` Medium |
| Хлебные крошки | Regular 14, разделитель `/` цветом `text/disabled`, последний элемент Medium `text/primary` |
| Пагинация | ячейка 34 × 34, скругление 8, текст Medium 14. Активная: фон `accent/solid`, текст `text/on-solid` |

### 5.6 Обратная связь

| Компонент | Спецификация |
|---|---|
| Тост | ширина 400, скругление 10, фон `bg/raised`, граница `status/*-border`, слева полоса 4 px `status/*-solid`. Заголовок Medium 15, текст Regular 13 |
| Тултип | отступы 8 / 12, скругление 8, инверсия: фон `text/primary`, текст `bg/app`, Regular 13 |
| Модальное окно | ширина 480, скругление 16, отступы 28, фон `bg/surface`, граница `border/default`. Заголовок SemiBold 18, текст Regular 15. Кнопки справа: призрак «Отмена» + основная или опасная |

---

## 6. Тон голоса

Голос один, обращение разное. Где «ты», а где «вы», решает колонка «Обращение» в таблице 1.1.

**Всегда на «вы»:** студия Kodari, сайт kodari.ru, коммерческие предложения, деловая переписка, поддержка.
«Вы» — со строчной буквы.

**Общие правила для всех продуктов и обоих обращений:**

1. **По делу.** Сначала что произошло, потом почему. Без разгона на два абзаца.
2. **Без канцелярита.** «Отправили» вместо «был отправлен». Живой человек, а не отдел.
3. **Честно про сроки.** Если не знаем — так и пишем. Обещание без даты — не обещание.
4. **Без восклицаний.** Ни эмодзи в интерфейсе и деловой переписке, ни «Ура!». Спокойный ровный голос.

Ошибка объясняет, что пошло не так и что теперь делать. Без извинений и без «упс».
Кнопка называет действие: «Опубликовать» → уведомление «Опубликовано».

| Ситуация | На «ты» (Kodari TOP, Liya) | На «вы» (Kodari, Kodari ID, KODATA) |
|---|---|---|
| Ошибка сети | Не получилось загрузить. Проверь интернет и обнови страницу. | Не получилось загрузить. Проверьте интернет и обновите страницу. |
| Пустое состояние | Оценок пока нет. Они появятся, когда преподаватель их поставит. | Подключённых устройств пока нет. Войдите в аккаунт на другом устройстве, и оно появится здесь. |

---

## 7. Готовые CSS-переменные

Тема по умолчанию — тёмная. Светлая включается атрибутом `data-theme="light"` на `<html>`.
Если тема должна следовать системе, атрибут ставит скрипт по `prefers-color-scheme`.

### 7.1 Тёмная тема и семантика

```css
:root {
  --neutral-1: #111113;
  --neutral-2: #19191b;
  --neutral-3: #242429;
  --neutral-4: #2c2c34;
  --neutral-5: #34343d;
  --neutral-6: #3f3f4a;
  --neutral-7: #4f4f5c;
  --neutral-8: #676778;
  --neutral-9: #6f6f86;
  --neutral-10: #7e7e95;
  --neutral-11: #b2b2c6;
  --neutral-12: #e7e7f2;
  --violet-1: #110f1b;
  --violet-2: #1a1529;
  --violet-3: #271c45;
  --violet-4: #302059;
  --violet-5: #392569;
  --violet-6: #452d7c;
  --violet-7: #56389b;
  --violet-8: #7148cb;
  --violet-9: #7c3aed;
  --violet-10: #8a4dff;
  --violet-11: #b7a4ff;
  --violet-12: #e8e4ff;
  --lime-1: #0f1309;
  --lime-2: #161b0b;
  --lime-3: #1f2904;
  --lime-4: #253300;
  --lime-5: #2d3c00;
  --lime-6: #364800;
  --lime-7: #445900;
  --lime-8: #5a7400;
  --lime-9: #c6f54a;
  --lime-10: #e0ffa4;
  --lime-11: #a0c446;
  --lime-12: #dcf2b5;
  --cyan-1: #0a1314;
  --cyan-2: #0c1c1e;
  --cyan-3: #032a2e;
  --cyan-4: #003439;
  --cyan-5: #003d43;
  --cyan-6: #004a50;
  --cyan-7: #005c64;
  --cyan-8: #007781;
  --cyan-9: #00c1d1;
  --cyan-10: #00d3e3;
  --cyan-11: #47c9d6;
  --cyan-12: #baf4fb;
  --blue-1: #0b1218;
  --blue-2: #0f1a25;
  --blue-3: #0f263c;
  --blue-4: #0d2f4d;
  --blue-5: #0f375c;
  --blue-6: #14426d;
  --blue-7: #185387;
  --blue-8: #1c6cb1;
  --blue-9: #007dd6;
  --blue-10: #188ceb;
  --blue-11: #75baff;
  --blue-12: #d7eaff;
  --green-1: #0c130d;
  --green-2: #101d12;
  --green-3: #102b17;
  --green-4: #0d361a;
  --green-5: #0f401e;
  --green-6: #134d25;
  --green-7: #17602f;
  --green-8: #197d3d;
  --green-9: #03a14a;
  --green-10: #29b159;
  --green-11: #6ecc85;
  --green-12: #c7f6cf;
  --amber-1: #151009;
  --amber-2: #20170b;
  --amber-3: #322104;
  --amber-4: #3f2800;
  --amber-5: #4a2f00;
  --amber-6: #583900;
  --amber-7: #6d4800;
  --amber-8: #8d5e00;
  --amber-9: #fbac16;
  --amber-10: #ffc166;
  --amber-11: #e5a748;
  --amber-12: #ffe3be;
  --red-1: #190e0d;
  --red-2: #261311;
  --red-3: #3d1715;
  --red-4: #4e1918;
  --red-5: #5c1d1c;
  --red-6: #6d2422;
  --red-7: #872d2b;
  --red-8: #b13938;
  --red-9: #d43436;
  --red-10: #c52f31;
  --red-11: #ff9088;
  --red-12: #ffdfdc;
  --pink-1: #180e12;
  --pink-2: #24131b;
  --pink-3: #391729;
  --pink-4: #491933;
  --pink-5: #561d3c;
  --pink-6: #662448;
  --pink-7: #7f2d5a;
  --pink-8: #a73a75;
  --pink-9: #d84497;
  --pink-10: #ea55a6;
  --pink-11: #fe86c2;
  --pink-12: #ffddec;

  /* семантика — одна на обе темы */
  --bg-app: var(--neutral-1);
  --bg-surface: var(--neutral-2);
  --bg-raised: var(--neutral-3);
  --bg-hover: var(--neutral-4);
  --bg-active: var(--neutral-5);
  --border-subtle: var(--neutral-6);
  --border-default: var(--neutral-7);
  --border-strong: var(--neutral-9);
  --border-focus: var(--violet-11);
  --text-primary: var(--neutral-12);
  --text-secondary: var(--neutral-11);
  --text-muted: var(--neutral-10);
  --text-disabled: var(--neutral-8);
  --text-on-solid: #ffffff;
  --accent-solid: var(--violet-9);
  --accent-solid-hover: var(--violet-10);
  --accent-text: var(--violet-11);
  --accent-bg: var(--violet-3);
  --accent-border: var(--violet-6);
  --status-success-bg: var(--green-3);
  --status-success-text: var(--green-11);
  --status-success-border: var(--green-6);
  --status-success-solid: var(--green-9);
  --status-warning-bg: var(--amber-3);
  --status-warning-text: var(--amber-11);
  --status-warning-border: var(--amber-6);
  --status-warning-solid: var(--amber-9);
  --status-danger-bg: var(--red-3);
  --status-danger-text: var(--red-11);
  --status-danger-border: var(--red-6);
  --status-danger-solid: var(--red-9);
  --status-danger-solid-hover: var(--red-10);
  --status-info-bg: var(--blue-3);
  --status-info-text: var(--blue-11);
  --status-info-border: var(--blue-6);
  --status-info-solid: var(--blue-9);
}
```

### 7.2 Светлая тема

Те же семантические переменные, другие примитивы.

```css
:root[data-theme="light"] {
  --neutral-1: #fdfdfe;
  --neutral-2: #fafafb;
  --neutral-3: #f4f4f7;
  --neutral-4: #eeeef2;
  --neutral-5: #e8e8ed;
  --neutral-6: #e0e0e6;
  --neutral-7: #d5d5dc;
  --neutral-8: #c4c4ce;
  --neutral-9: #6f6f86;
  --neutral-10: #67677b;
  --neutral-11: #636278;
  --neutral-12: #2f2f3a;
  --violet-1: #fdfdff;
  --violet-2: #faf9ff;
  --violet-3: #f4f3ff;
  --violet-4: #efecff;
  --violet-5: #e9e5ff;
  --violet-6: #e1dbff;
  --violet-7: #d7cfff;
  --violet-8: #c7b9ff;
  --violet-9: #7c3aed;
  --violet-10: #7026dd;
  --violet-11: #743bdc;
  --violet-12: #36186d;
  --lime-1: #fcfefa;
  --lime-2: #f8fcf3;
  --lime-3: #f1f7e9;
  --lime-4: #ebf2de;
  --lime-5: #e3edd3;
  --lime-6: #dae6c7;
  --lime-7: #ceddb5;
  --lime-8: #bace95;
  --lime-9: #c6f54a;
  --lime-10: #b7e637;
  --lime-11: #5a7400;
  --lime-12: #283600;
  --cyan-1: #fafefe;
  --cyan-2: #f4fcfd;
  --cyan-3: #eaf7f9;
  --cyan-4: #e1f3f5;
  --cyan-5: #d6eef1;
  --cyan-6: #cae7ea;
  --cyan-7: #b9dee2;
  --cyan-8: #9ad0d6;
  --cyan-9: #00c1d1;
  --cyan-10: #00b1c0;
  --cyan-11: #007781;
  --cyan-12: #00383d;
  --blue-1: #fcfdff;
  --blue-2: #f6fbff;
  --blue-3: #edf6ff;
  --blue-4: #e3f1ff;
  --blue-5: #daebfd;
  --blue-6: #cfe3f9;
  --blue-7: #bfd9f5;
  --blue-8: #a4c9f0;
  --blue-9: #007dd6;
  --blue-10: #006fc0;
  --blue-11: #006bb9;
  --blue-12: #00315a;
  --green-1: #fbfefb;
  --green-2: #f6fcf6;
  --green-3: #edf8ef;
  --green-4: #e4f4e7;
  --green-5: #dbefde;
  --green-6: #d0e8d4;
  --green-7: #c1e0c6;
  --green-8: #a6d2ae;
  --green-9: #03a14a;
  --green-10: #009142;
  --green-11: #007f38;
  --green-12: #003c17;
  --amber-1: #fffdfa;
  --amber-2: #fef9f3;
  --amber-3: #fbf3e9;
  --amber-4: #f8edde;
  --amber-5: #f5e6d3;
  --amber-6: #efdec7;
  --amber-7: #e9d3b5;
  --amber-8: #debf95;
  --amber-9: #fbac16;
  --amber-10: #e99e00;
  --amber-11: #8d5e00;
  --amber-12: #432b00;
  --red-1: #fffcfc;
  --red-2: #fff8f8;
  --red-3: #fff1ef;
  --red-4: #ffe9e7;
  --red-5: #ffe0dd;
  --red-6: #fdd6d2;
  --red-7: #f9c9c4;
  --red-8: #f5b1ab;
  --red-9: #d43436;
  --red-10: #ce2930;
  --red-11: #bc272c;
  --red-12: #5c0e10;
  --pink-1: #fffcfd;
  --pink-2: #fff8fb;
  --pink-3: #fff0f6;
  --pink-4: #ffe8f1;
  --pink-5: #fddfec;
  --pink-6: #f9d5e5;
  --pink-7: #f4c8db;
  --pink-8: #eeb0cc;
  --pink-9: #d84497;
  --pink-10: #c83489;
  --pink-11: #b02a78;
  --pink-12: #550f38;
}
```

---

## 8. Чек-лист

Прежде чем отдать макет или страницу:

- [ ] Шрифт — Rubik. Моноширинный только под код.
- [ ] Кегли взяты из шкалы своего носителя, промежуточных значений нет.
- [ ] Цвета взяты из палитры через семантические токены, роли ступеней соблюдены.
- [ ] Акцент — фиолетовый. Цвет продукта есть только на знаке и в промо.
- [ ] Текст на подложке даёт не меньше 4,5 : 1, основной — не меньше 7 : 1. Границы полей и фокус — не меньше 3 : 1.
- [ ] Знак не повёрнут, не растянут, без эффектов, рёбра линиями не нарисованы.
- [ ] Крупный знак ч/б по фону. Цветной куб — только мелкий, боковые грани темнее верхней по таблице 2.8.
- [ ] Охранное поле вокруг знака — не меньше половины ребра.
- [ ] Ниже 96 px знак стоит в лок-апе с подписью (кроме фавикона, иконки приложения и аватара).
- [ ] Имя продукта написано как в таблице 1.1.
- [ ] Обращение «ты» или «вы» — как в таблице 1.1.
- [ ] Числа набраны по правилам: запятая, неразрывный пробел, проценты без пробела.
- [ ] В интерфейсных текстах нет восклицательных знаков и эмодзи.
- [ ] Пустое состояние объясняет, что делать, а не просто сообщает, что пусто.

---

## 9. История изменений

### 2.1 против 2.0

| Что | Было в 2.0 | Стало в 2.1 |
|---|---|---|
| Цвет бренда | на роль фирменного претендовали белый, фиолетовый и лайм | Kodari чёрно-белый; фиолетовый — служебный цвет интерфейса; лайм — только TOP |
| Акцент продуктов | цвет продукта перекрашивал интерфейс | акцент везде фиолетовый, цвет продукта — только знак и промо |
| Мелкий знак на светлом | цветной на прозрачностях, почти невидимый | цветной, боковые грани затемнены к `#111113` — силуэт держится на любом фоне |
| Эталон знака | прозрачности в SVG расходились с таблицей | сплошные цвета, файлы обрезаны по рисунку |
| Размер знака | не определён | высота куба |
| Слово на гранях | «имя продукта» без уточнений | одно слово на трёх гранях, кегль по KODATA |
| Лок-ап | не описан | горизонтальный и вертикальный, всё от ребра |
| Одноцветная версия | «нужна отдельная версия» без описания | просветы 4% ребра с минимумом по технологии |
| Продукты | имена без системы | сервисы с префиксом и самостоятельные продукты, регистр закреплён |
| Тон | везде «вы» | «вы» у студии, у продуктов — по таблице |
| neutral 10 и 11, светлая | 11 светлее 10, иерархия текста перевёрнута | поменяны местами |
| red/9 | `#de3b3d`, белый текст 4,38 | `#d43436`, 4,83; red/10 тёмной темы `#c52f31` |
| Фокус | `violet/8`, 1,75 : 1 на светлой | `violet/11`, от 5,62 : 1 |
| Границы полей | `neutral/7`, 1,40 : 1 на светлой | новый `border/strong` = `neutral/9`, от 3,59 : 1 |
| Переключатель выкл | белая ручка на `bg/active`, 1,22 : 1 | дорожка `border/strong`, 4,89 : 1 |
| `text/muted` | брендбук neutral/10, токены neutral/9 | neutral/10 везде |
| Оценка «нет» | текст neutral/9, 3,16 : 1 | текст neutral/11 |
| Статусы | без ступени для индикаторов | `status/*-solid` для полосы тоста, ошибки поля, опасной кнопки |
| Кегли компонентов | 16, 17, 22 вне шкалы | 15, 18, 18 |
| Пустое состояние | знак 56 px без подписи | иконка 40 px |

### 2.0 против 1.0

| Что | Было в 1.0 | Стало в 2.0 |
|---|---|---|
| Знак | круглый орнамент, трассированный из картинки | изометрический куб, разница по тону |
| Цвет | 12 значений на глаз, максимальная насыщенность на чёрном | 9 семейств × 12 ступеней × 2 темы, роли закреплены |
| Шрифт | Onest на текст, JetBrains Mono на цифры | Rubik на всё |
| Темы | только тёмная | тёмная и светлая равноправны |

Материалы, сделанные по 1.0 и 2.0, нужно переводить на 2.1.

### Отменённые источники

**`book.kodari.ru` — устаревший брендбук, переведён на редирект к `brand.kodari.ru`.**
Он описывает до-2.0 состояние и противоречит этому документу. Если вам попался
его текст или скриншот — не используйте оттуда ничего. Конкретно там неверны:

| Что там сказано | Как на самом деле |
|---|---|
| Знак — «kodari.» строчными с градиентом `#4e8cff → #a353ff` и круглая эмблема | Знак — изометрический куб, надпись «Kodari» в Rubik ExtraBold |
| Градиент — фирменный приём | Градиентов в системе нет. На знаке эффекты запрещены |
| TOP — `#7c3aed`, ID — `#8b5cf6` | TOP — `#c6f54a`, ID — `#7dd3fc` |
| Пять гарнитур: Montserrat, Raleway, Inter, Space Grotesk, Outfit | Одна гарнитура — Rubik |
| Четыре разных фона: `#121212`, `#0a0a0b`, `#0a0a0f`, `#0f0f13` | Один фон — `#111113` в тёмной теме |

**`brandbook-2.0.md`** заменён этим документом.

Единственный действующий источник — этот документ.