--- name: "cp-design-system" description: "Собирает тему бренда — палитру и шрифтовую пару — и сохраняет её в brands//assets.md как один набор токенов, который дальше читают все визуальные скиллы. Подбирает шрифты с настоящей кириллицей и отсеивает те, у которых она сделана формально, проверяет контраст по WCAG 2.2 и режет признаки «ИИ-вида». Use when the user needs a brand palette, a font pair, a visual theme or a contrast check. Триггеры — «палитра», «фирменный стиль», «тема оформления», «какие шрифты», «подбери цвета», «проверь контраст», «шрифт с кириллицей», «токены дизайна»." --- Перед применением прочитай [правила интеграции «Блог с нуля»](../../context/10-blog-runtime.md). Они задают единый запуск, текущий проект и производственные ограничения; не начинай второй независимый бриф. # cp-design-system · Тема бренда Тема заводится один раз и потом не обсуждается: `cp-carousel-render`, `cp-cover` и `cp-image-prompt` берут её готовой. Задача скилла — чтобы через месяц никто не выбирал цвет заново. ## Когда не этот скилл - Тема есть, нужно превратить слайды в картинки → `cp-carousel-render`. - Нужно придумать содержание слайдов → `cp-carousel`. - Нужна одна обложка или превью → `cp-cover`. - Нужно описать бренд словами, а не цветами → `cp-brand-setup`. ## Контекст Читай из `context/`: `06-design.md` (§1 шрифты, §2 читаемость и контраст, §3 правила слайда, §7 контракт темы), `03-legal-ru.md` §9 (лицензии на шрифты). Профиль бренда — `brands//`: `brand.md` (позиционирование, от него зависит характер темы), `assets.md` (куда сохранять). Не нашлось — скажи одной строкой и работай по врезке ниже, факты спрашивай, не выдумывай. --- ## Врезка констант **Наличие кириллицы не равно качеству кириллицы.** У большинства популярных шрифтов Google Fonts кириллический набор сделан формально. Разбор профильного издания словолитни, специализирующейся на кириллице: **ВНИМАНИЕ. Это уровень C с высоким доверием к источнику, а не уровень A.** Первоисточник найден и подтверждён, авторы известны, но это **обоснованное мнение одной институции, а не измеряемый стандарт**, и авторы разбора сами проектировали часть шрифтов из левой колонки. Ссылаться как на сильный профессиональный аргумент — да; подавать клиенту как объективный норматив — нет. | Рекомендуется | Не рекомендуется для кириллицы | |---|---| | **Golos Text** — «функциональная гарнитура, хорошо подходит для чтения с экрана», кириллица первична | **Inter** — кириллице «не хватает внимания к деталям», «использовать не следует» | | **IBM Plex Sans** — «высококачественная гарнитура», кириллица делалась отдельным дизайнером | **Manrope** — «неубедительна концептуально и плохо реализована» | | **IBM Plex Mono** — моно, метаданные, код | **Roboto** — кириллица «сомнительна», «мало пригодна к применению» | | Nunito — с осторожностью, качество достаточное с неточностями | **Oswald** — «слишком много проблем, чтобы игнорировать» | | | **Arimo** — «не тот случай, если нужна кириллица». **Overpass**, **Alumni Sans** — «использовать нельзя» | Это ломает дефолты почти всех открытых дизайн-скиллов: там повсеместно Inter. Для русского контента **Inter не рекомендуется — по умолчанию ставим Golos Text или IBM Plex Sans**. Это рекомендация, а не запрет: **если Inter уже в брендбуке клиента, это осознанный компромисс, а не ошибка**. Тогда — назвать проблему с кириллическим набором, предложить замену и принять решение клиента; ломать утверждённый бренд задним числом не нужно. **Другие проверенные OFL-шрифты с кириллицей:** Fira Sans, Montserrat, EB Garamond, Sofia Sans, Caveat, Shantell Sans, Arsenal, PT Sans, PT Serif, PT Mono. **Лицензии.** Весь стек пака — SIL Open Font License 1.1, бандлится локально. Любой шрифт вне списка проверяется до коммерческого использования: тип лицензии различается (desktop / web / app / broadcast), многие «бесплатные» шрифты запрещены к коммерческому применению. Это самая частая незамеченная утечка прав в SMM-макетах. **Контраст — WCAG 2.2, уровень A источника:** обычный текст **4,5:1**, крупный **3:1**, AAA **7:1**. Крупным считается ≥18 pt (≈24 CSS px) или ≥14 pt bold (≈18,5 CSS px). Обоснование порогов в самом документе: 4,5:1 покрывает остроту зрения около 20/40, 7:1 — около 20/80. **Кегли.** Официального норматива минимального кегля нет ни у Material Design, ни у Apple HIG — всё, что об этом пишут в блогах, без исследовательской базы. Честно можно сказать только арифметику: карточка 1080×1350 на экране шириной около 390 CSS px масштабируется примерно 1:2,77. Отсюда 44 px на макете ≈ 16 CSS px (нижняя граница чтения), 42 px ≈ 15 CSS px (абсолютный пол, ниже не опускаться), 66 px ≈ 24 CSS px (уже «крупный» по WCAG, разрешён контраст 3:1), 90+ px — заголовок. **Контракт темы — восемь токенов и ничего больше:** ``` --bg основной фон --surface панели и карточки --text основной текст --text-muted вторичный текст --accent единственный акцент --accent-dim акцент для мелких элементов, если основной не проходит по контрасту --font-head заголовки --font-body текст ``` --- ## Вход 1. **Бренд** — slug или название. Есть `brand.md` — характер темы выводится из позиционирования, а не из вкуса. 2. **Есть ли уже цвета** — логотип, сайт, сложившийся стиль. Есть — тема строится вокруг них, а не с нуля. 3. **Светлая или тёмная** основа, есть ли ограничение (например, печать). 4. **Где будет применяться**: карусели, превью, лендинг, PDF. От этого зависит, нужен ли моно-шрифт и печатный профиль. 5. **Ограничения:** запрещённые цвета, цвета конкурентов, отраслевые табу. Ответов нет — бери один из трёх пресетов ниже и скажи, что это стартовая тема, которую бренд позже сузит. --- ## Процесс 1. **Определи характер** одним словом из позиционирования: строгий, тёплый, технический, редакционный, ремесленный. Дальше всё вытекает отсюда. 2. **Выбери базу:** тёмная, светлая или контрастная. Не «обе на выбор» — одна. 3. **Назначь один акцент.** Один. Не два и не «градиент бренда». 4. **Посчитай контраст** всех пар текст-к-фону (раздел ниже). Не прошло — правь цвет, а не порог. 5. **Собери `--accent-dim`** — затемнённый или осветлённый вариант акцента для мелкого текста, если основной даёт меньше 4,5:1. 6. **Выбери шрифтовую пару** из проверенных. Пара, а не четыре гарнитуры. 7. **Задай шкалу кеглей** и проверь арифметикой, что соседние выбранные ступени различаются минимум в 1,15 раза. 8. **Прогони по списку «признаков ИИ-вида»** и вычисти. 9. **Сохрани в `brands//assets.md`** блоком ниже. Тема живёт в одном месте. --- ## Как считать контраст Формула WCAG: относительная яркость `L = 0.2126·R + 0.7152·G + 0.0722·B`, где каждый канал сначала нормируется в 0–1, затем `c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4`. Отношение = `(L_светлее + 0.05) / (L_темнее + 0.05)`. ```python def lum(h): h = h.lstrip('#'); ch = [int(h[i:i+2], 16)/255 for i in (0, 2, 4)] f = lambda c: c/12.92 if c <= 0.03928 else ((c+0.055)/1.055)**2.4 r, g, b = map(f, ch) return 0.2126*r + 0.7152*g + 0.0722*b def cr(a, b): l1, l2 = sorted([lum(a), lum(b)], reverse=True) return round((l1+0.05)/(l2+0.05), 2) print(cr('#F2F5F9', '#0E1116')) # 17.29 ``` Считать, а не оценивать на глаз: разница между 4,3 и 4,6 глазом не видна, а порог проходит только вторая. **Обязательные пары к проверке:** `--text` к `--bg`; `--text` к `--surface`; `--text-muted` к `--bg`; `--accent` к `--bg`; `--bg` к `--accent` (текст на акцентной плашке). **Если акцент не проходит для мелкого текста** — по порядку, до первого сработавшего: 1. Оставить акцент только для крупного (≥24 CSS px, порог 3:1) и плашек, а мелкий текст красить в `--text`. 2. Ввести `--accent-dim`: на светлом фоне затемнить акцент, на тёмном — осветлить, шагами по 8–10% яркости до прохождения 4,5:1. 3. Инвертировать: не цветной текст на фоне, а фоновая плашка акцентом с текстом цвета `--bg`. 4. Не менять порог и не «почти проходит». Порог бинарный. --- ## Правила темы - **Один акцентный цвет.** Второй акцент отменяет первый. - **Только пресетные палитры.** Произвольный hex, выбранный на ходу, — главный источник «ИИ-вида». - **Тема = один файл токенов.** Смена темы — правка восьми переменных, а не каждого слайда. - **Контраст кеглей.** Правило открытых наборов — минимум **8:1** между крупнейшим и мельчайшим элементом слайда. Честная оговорка: на слайде с абзацем текста 8:1 недостижимо, не уходя под порог чтения (44 px). Практическая формулировка: 8:1 держится на слайдах-героях (число, хук) между главным элементом и служебной меткой; на текстовых слайдах правило работает как запрет размещать рядом два элемента близкого кегля — соседние ступени шкалы различаются минимум в **1,15 раза**. - **Шкала кеглей для 1080×1350:** герой 240–300 · h1 96–120 · h2 66–80 · body 52–60 · small 42–44 (пол читаемости) · служебное 32 (хэндл, номер слайда — читать не обязательно). - **Как проверять 1,15.** Отношение считается между **выбранными значениями** соседних ступеней, а не между краями диапазонов: взял body 52 — h2 берётся от 66 (1,27), взял body 60 — h2 не ниже 72 (1,20). Порог 1,15 — уровень C, ремесленная практика: он задан так, чтобы разница ступеней читалась на телефоне, и проверяется глазом на реальном устройстве. - Прямые углы и плоские заливки по умолчанию. Градиенты, тени и скругления — только как осознанное решение темы. - Выравнивание по сетке обязательно. Все изображения одной группы — одинаковой высоты, иначе ряд разъезжается. - Фон рабочей области за пределами кадра тоже берётся из палитры, чтобы превью не обманывало. ## Признаки «ИИ-вида» и что делать | Признак | Замена | |---|---| | Фиолетово-синий светящийся градиент | плоская заливка `--bg` плюс один акцент | | Ряд из трёх одинаковых карточек | один блок или список с разной длиной строк | | Иконки-эмодзи вместо смысловых элементов | цифра, маркер, линейка `--accent` | | Центрированный текст везде | выключка влево, центр — только на слайдах-героях | | Тень под каждым блоком | контраст фона `--bg` и `--surface` | | Шрифт Inter | Golos Text или IBM Plex Sans | | Пять оттенков одного цвета «для глубины» | два уровня фона и один акцент | --- ## Три пресета Значения контраста посчитаны по формуле выше. Первый столбец после цвета — отношение к `--bg`. **1. Тёмная «Ночь»** — для строгого, технического, экспертного характера. ``` --bg:#0E1116 --surface:#171C24 (1.11 к фону, различима как плоскость) --text:#F2F5F9 17.29 AAA --text-muted:#A3AEBE 8.42 AAA --accent:#FFB01F 10.34 AAA --accent-dim:#FFC966 12.43 AAA --font-head:"Golos Text" --font-body:"Golos Text" моно: "IBM Plex Mono" ``` На акцентной плашке текст красится в `--bg` (10.34), не в `--text`: белый по янтарному даёт 1.83 и не проходит ничего. **2. Светлая «Бумага»** — для редакционного, спокойного, консультационного характера. ``` --bg:#FFFFFF --surface:#F1F3F6 (1.11) --text:#14181F 17.79 AAA --text-muted:#5A6474 5.98 AA, до AAA не дотягивает — не пускать в мелкий текст на surface (5.38) --accent:#0B5FCE 5.93 AA для обычного текста, AAA нет --accent-dim:#0A4EA8 7.87 AAA — вот он и нужен для мелких элементов --font-head:"Golos Text" --font-body:"IBM Plex Sans" моно: "IBM Plex Mono" ``` Ровно тот случай, ради которого в контракте есть `--accent-dim`: основной акцент проходит AA, но не AAA, и на мелком тексте заменяется затемнённым. **3. Контрастная «Ток»** — для громкого, молодёжного, событийного характера. ``` --bg:#0A0A0A --surface:#161616 (1.09) --text:#FFFFFF 19.80 AAA --text-muted:#B8B8B8 9.98 AAA --accent:#E4FF3A 17.60 AAA --accent-dim:#C8E01E 13.33 AAA --font-head:"Sofia Sans" --font-body:"IBM Plex Sans" моно: "IBM Plex Mono" ``` Кислотный акцент читается только на почти чёрном. На светлом фоне этот же цвет даёт около 1,1 к белому — переносить нельзя. Пресет — стартовая точка, а не приговор. Менять можно, но после смены контраст пересчитывается заново, целиком. --- ## Выход Блок для `brands//assets.md`, раздел «Тема оформления»: ```markdown ## Тема оформления Характер: <одно слово> · база: <тёмная / светлая / контрастная> | Токен | Значение | Контраст к --bg | Проверено | |---|---|---|---| | --bg | #… | — | <дата> | | --surface | #… | … | | | --text | #… | … AAA/AA | | | --text-muted | #… | … | | | --accent | #… | … | | | --accent-dim | #… | … | | Шрифты: --font-head "…", --font-body "…", моно "…". Лицензия: OFL 1.1. Файлы шрифтов: <путь>/fonts/*.woff2 Шкала кеглей (1080×1350): герой … · h1 … · h2 … · body … · small 42–44 · служебное 32 Не использовать: <цвета и шрифты, запрещённые бренду> ``` Дальше: слайды → `cp-carousel`, картинки → `cp-carousel-render`, обложки → `cp-cover`, палитра в промпт генератора → `cp-image-prompt`. ## Чек-лист перед выдачей - Шрифты только из проверенного списка, Inter и соседи по чёрной колонке не предложены. - Лицензия названа, файлы шрифтов лежат локально. - Все восемь токенов заполнены, ни одного лишнего. - Контраст посчитан формулой для всех обязательных пар, значения выписаны. - `--accent-dim` существует и отличается от `--accent` — либо явно сказано, почему не нужен. - Акцент один. - Шкала кеглей задана, нижняя текстовая ступень не ниже 42 px (служебное 32 — только для меток, которые читать не обязательно), соседние выбранные ступени различаются минимум в 1,15 раза. - Прогнан список признаков «ИИ-вида». - Тема сохранена в `assets.md` с датой проверки. ## Красные линии 1. Не предлагать Inter, Manrope, Roboto, Oswald, Arimo, Overpass, Alumni Sans для кириллицы. 2. Не выбирать hex на ходу вне пресета или сложившегося стиля бренда. 3. Не округлять контраст в свою пользу и не писать «почти проходит». 4. Не заводить два акцента. 5. Не выдавать шрифт без проверки лицензии на коммерческое использование. 6. Не хранить тему в нескольких местах: один блок в `assets.md` — единственный источник правды. 7. Не украшать градиентом, тенью и скруглением по умолчанию.