dsh-desktop-kit 0.0.0-stage → 1.0.0

package/skills/wow-design/references/presets.md

@@ -0,0 +1,96 @@
+# Пресеты AURORA — как выбрать и как настроить
+
+> Все пресеты уже реализованы в `assets/kit/assets/css/tokens.css`: переключаются атрибутом
+> `<html data-preset="...">`, тема — `<html data-theme="light|dark">`.
+> Не создавай новый визуальный язык без причины — выбери пресет и адаптируй акцент/шрифт под бренд.
+
+## Как выбрать за 60 секунд
+1. Кто пользователь и что важно? (доверие / скорость / плотность / эмоция / статус)
+2. Это «бренд-история» (лендинг, клиника, культура) или «рабочий инструмент» (дашборд, кабинет)?
+3. Есть ли бренд-цвета? Если да — акцент берём из бренда, остальное из ближайшего пресета.
+4. Нужна ли тёмная тема по умолчанию? (product/DevOps — да → `graphite`)
+
+---
+
+## 1. `aurora` — премиальная клиника / культура / сервис
+- **Настроение:** тихая роскошь, человечность, доверие, «дорого, но не кричит».
+- **Кому:** медицина, wellness, образование, премиум-услуги, бренд-лендинги.
+- **Палитра (light):** бумага `#F4F1EA`, поверхность `#FFFFFF`, чернила `#14181A`, изумруд `#0E6E5E`,
+  медь `#B36A43`, линии `#DCD6CA`.
+- **Палитра (dark):** фон `#0B0F0F`, поверхность `#121718`, мята `#5AD2B7`, медь `#E09A70`.
+- **Шрифты:** display — **Lora** (serif, 500), body — **Golos Text**.
+- **Формы:** радиус карточек 14px, контролов 10px, волосяные линии, слоистые тени.
+- **Signature-элементы:** крупные редакционные цифры, печать/эмблема, монограммы вместо фото,
+  капс-надзаголовки с линией, тонкая бумажная текстура.
+- **Композиция hero:** 7/5, слева kicker → H1 в 2–3 строки → lead → 2 CTA; справа — «документ/печать»
+  или вертикальная колонка цифр на волосяной сетке.
+- **Do:** много воздуха, спокойный тон, один изумрудный акцент, медь только в деталях.
+- **Don't:** яркие градиенты, неон, стоковые фото улыбающихся врачей, «медицинский синий» по умолчанию.
+
+## 2. `graphite` — продукт / SaaS / дашборд / админка
+- **Настроение:** точность, плотность, технологичность, контроль.
+- **Кому:** Service Desk, CRM, аналитика, dev-tools, панели управления.
+- **Палитра (light):** фон `#F4F6F5`, поверхность `#FFFFFF`, чернила `#0F1414`, акцент `#0E7C66`,
+  мятный `#6EE7C8` для тёмной.
+- **Палитра (dark):** фон `#080B0B`, поверхность `#0F1414`, мята `#6EE7C8`, линии `#1F2926`.
+- **Шрифты:** display — **Unbounded** (осторожно, 1–2 места), body — **Golos Text**, цифры — tabular.
+- **Формы:** радиусы 4–11px, плотные отступы, границы вместо теней, аккуратные hover-состояния.
+- **Signature-элементы:** KPI-цифры с дельтой и sparkline, sticky-таблица, командная строка ⌘K,
+  тонкая сетка графиков, статус-точки.
+- **Композиция:** сайдбар 240–260px, топбар 64px, контентная сетка 12 колонок, 8px ритм, таблицы
+  с правыми числами, панель активности справа.
+- **Do:** данные прежде декора, состояния всего, читаемые таблицы, tabular-nums, один акцент.
+- **Don't:** огромные радиусы, «карточки ради карточек», тени поверх данных, пестрота статусов.
+
+## 3. `editorial` — медиа / истории / бренд-лендинг
+- **Настроение:** журнал, характер, смелость, крупная типографика.
+- **Кому:** новости, блог, культура, портфолио, лендинг с историей.
+- **Палитра (light):** бумага `#F8F5EF`, чернила `#171310`, вермильон `#C8442A`, линии `#DCD4C7`.
+- **Палитра (dark):** фон `#121110`, поверхность `#1A1613`, коралл `#F06A4D`.
+- **Шрифты:** display — **Lora** с крупным кеглем, body — Golos Text; допустим italic для цитат.
+- **Формы:** почти прямоугольные (2–5px), жирные волосяные линии, много чёрного текста.
+- **Signature-элементы:** гигантские заголовки (clamp 3–6rem), номерные рубрики, drop cap в первом
+  абзаце, цитаты на всю ширину, асимметричные фото-блоки (в нашем случае — типографические).
+- **Do:** контраст масштабов, строгая сетка, смелые переносы, крупные отступы между секциями.
+- **Don't:** мелкие заголовки, «SaaS-карточки», пастель, всё центрировать.
+
+## 4. `warm` — человечный сервис / забота / образование
+- **Настроение:** тепло, спокойствие, дружелюбие, «свои люди».
+- **Кому:** школы/курсы, детские сервисы, ЗОЖ, соцпроекты, сервис для сотрудников.
+- **Палитра (light):** крем `#FBF5EC`, чернила `#241B14`, терракота `#B85C38`, шалфей `#6C7A5B`.
+- **Палитра (dark):** фон `#14100D`, поверхность `#1D1712`, акцент `#E8835C`.
+- **Шрифты:** display — Lora, body — Golos Text.
+- **Формы:** крупные радиусы 12–24px (осознанно мягко), скруглённые иконки, тёплые тени.
+- **Signature-элементы:** мягкие плашки-акценты, рукописные подчёркивания (SVG), крупные эмпатичные
+  цитаты, фото-иллюстрации (если есть контент), «шаги» с крупными номерами.
+- **Do:** дружелюбный copy, округлость, тёплый фон, простые формы.
+- **Don't:** корпоративный холод, острые углы, кислотные цвета, перегруз данными.
+
+## 5. `swiss` — строгий корпоративный / B2B / отчёты
+- **Настроение:** дисциплина, ясность, сдержанность, точность.
+- **Кому:** банки/страхование, промышленность, госуслуги, документы, отчёты.
+- **Палитра (light):** белый `#FFFFFF`, чёрный `#0E0E0E`, сигнальный красный `#E0301E`, серые линии.
+- **Палитра (dark):** фон `#0D0D0D`, поверхность `#151515`, акцент `#FF5B47`.
+- **Шрифты:** display — **Golos Text** 700 с плотным трекингом, body — Golos Text.
+- **Формы:** радиусы 1–4px, жёсткая сетка, минимум декора, максимум выравнивания.
+- **Signature-элементы:** толстые линии-разделители, номера секций, таблицы, крупные цифры,
+  красные акценты только на действиях и статусах.
+- **Do:** строгая сетка, монохром + один красный, крупные поля, читаемые таблицы.
+- **Don't:** декор, тени, мягкие радиусы, пастель, «игривые» иллюстрации.
+
+---
+
+## Адаптация под бренд (если есть фирменные цвета)
+Меняй **только** эти переменные, остальное оставь из пресета:
+```css
+:root{
+  --accent:#<бренд>;          /* основной акцент */
+  --accent-hover:#<темнее>;
+  --accent-press:#<ещё темнее>;
+  --accent-soft:#<очень светлый тон акцента>;
+  --accent-ink:#<тёмный тон для текста на soft>;
+  --accent-contrast:#<текст на акценте: белый или тёмный>;
+}
+```
+Правила: контраст `accent` ↔ `accent-contrast` ≥ 4.5:1; `accent-soft` — это фон для бейджей/подсветок,
+текст на нём — `accent-ink`; не использовать акцент для больших заливок, только для действий/статусов/линий.

package/skills/wow-design/references/principles.md

@@ -0,0 +1,368 @@
+# 01 · Принципы ремесла — 76 правил
+
+> Рабочий документ для системы WOW-дизайна (DSH). Читать перед вёрсткой и во время критики.
+> Каждое правило — **что делать → как → типичная ошибка**. Все значения совместимы с токенами
+> AURORA (`assets/kit/assets/css/tokens.css`): отступы `--sp-*`, типографика `--text-*`,
+> строка `--measure`, движение `--dur*`/`--ease*`, фокус `--focus-ring`, радиусы `--radius-*`.
+> Опирается на практику Linear, Stripe, Vercel, Apple, Airbnb, Raycast, Framer, Notion, Aesop
+> и крупных клиник (Mayo, Cleveland, Charité, One Medical) — своими словами, без цитат.
+
+## A. Иерархия и композиция
+
+**P01. Один главный акцент на экран.** Взгляд должен иметь одну точку притяжения — заголовок или primary-CTA.
+→ Как: primary-кнопка одна на секцию; всё остальное — secondary/ghost; акцентный цвет ≤10% площади.
+✗ Ошибка: две равные яркие кнопки в hero — пользователь не знает, куда нажать.
+
+**P02. Не больше трёх уровней иерархии.** Primary (H1/CTA) → secondary (подзаголовок, lead) → tertiary (подписи, мета).
+→ Как: различие по размеру ≥1.25×, по контрасту — ink → ink-2 → muted; не 5 «почти одинаковых» уровней.
+✗ Ошибка: все тексты 16–18px, различаются только жирностью — «серая каша».
+
+**P03. Контраст масштабов обязателен.** Display 56–96px против служебного 11–13px; body 16–18px.
+→ Как: AURORA `--display-l/xl` + `.eyebrow` (11–12px, трекинг .14em); не «всё 16px».
+✗ Ошибка: H1 32px и body 18px — заголовок не звучит, страница выглядит как документ.
+
+**P04. Маршрут взгляда проектируется, а не получается.** Z-паттерн для лендинга, F/скан для текста; CTA — в конце маршрута.
+→ Как: kicker → H1 → lead → 2 CTA → proof-цифры → визуальный якорь; каждую секцию начинать с левого верхнего угла.
+✗ Ошибка: CTA спрятан в середине текста, а главный акцент — декоративная картинка.
+
+**P05. Асимметрия вместо 50/50.** Пропорции 7/5 или 8/4 дают «редакционность»; идеальная симметрия — только для форм и модалок.
+→ Как: `grid-template-columns:minmax(0,7fr) minmax(0,5fr)`; текст 5–6 колонок, визуал 6–7.
+✗ Ошибка: hero 50/50 с двумя одинаковыми половинами — выглядит как шаблон.
+
+**P06. Близость сильнее рамок.** Элементы одной группы ближе друг к другу, чем к соседним группам.
+→ Как: внутри группы 8–16px, между группами 32–64px; убрать рамку, если хватает воздуха.
+✗ Ошибка: карточки с рамкой и одинаковым отступом внутри и снаружи — границы групп не читаются.
+
+**P07. Одна signature-деталь.** Запоминается одна вещь: крупные редакционные цифры, номерные секции, монограмма, вертикальный лейбл, необычный разделитель.
+→ Как: выбрать 1 деталь и повторить в 2–3 местах; всё остальное — спокойно.
+✗ Ошибка: пять «фишек» сразу (градиент + блоб + стекло + 3D + карусель) — визуальный шум.
+
+## B. Типографика
+
+**P08. Только модульная шкала.** Размеры берутся из ряда, а не «на глаз».
+→ Как: `--text-2xs…--text-5xl` (11/12/14/16/17/20/24/30/36/44) + display clamp; коэффициент 1.125–1.25 для UI, 1.25–1.333 для лендинга.
+✗ Ошибка: 13/15/17/19/23px — непредсказуемый ритм и «дрожащая» иерархия.
+
+**P09. Body не меньше 16px.** На мобильном 16–18px; 14–15px допустимо только в плотном продуктовом UI (таблицы, сайдбар).
+→ Как: `font-size:var(--text-md)` (16px), на мобиле не уменьшать; line-length контролировать через `--measure`.
+✗ Ошибка: 14px body и 12px подписи на лендинге — читается как «мелкий шрифт в договоре».
+
+**P10. Интерлиньяж по роли текста.** Body 1.5–1.65; заголовки 1.05–1.2; display 0.95–1.05; мелкий текст 1.4+.
+→ Как: `--lh-relaxed:1.65` для body, `--lh-tight:1.05` для H1; крупный serif требует больше воздуха (+0.02).
+✗ Ошибка: line-height 1.2 у абзаца — строки слипаются; 1.8 у заголовка — заголовок «рассыпается».
+
+**P11. Длина строки 60–72ch.** Комфортный диапазон 45–75 знаков; lead — ≤52ch; подписи — ≤48ch.
+→ Как: `max-width:var(--measure)` (66ch) для body, `--measure-narrow` (48ch) для лидов; не задавать фиксированный px.
+✗ Ошибка: текст на всю ширину 1360px — глаз теряет строку, чтение падает.
+
+**P12. Трекинг зависит от размера.** Крупный display: −0.015…−0.03em; body: −0.006em; капс-лейблы: +0.08…+0.14em.
+→ Как: `--display-tracking` в пресетах; `.eyebrow{letter-spacing:.14em}`; не трекать body положительно.
+✗ Ошибка: letter-spacing .1em у body — текст «рассыпается», особенно на кириллице.
+
+**P13. 2–3 начертания максимум.** Обычно display + body; третий — моно для кода/ID.
+→ Как: 400/500/600 для текста; 700 — только в swiss-пресете; не использовать 300 на светлом фоне.
+✗ Ошибка: пять жирностей и три семейства на одном экране.
+
+**P14. Заголовки балансируются, абзацы — нет.** `text-wrap:balance` для H1–H2, `pretty` для body; без висячих предлогов и «сирот».
+→ Как: `h1,h2{text-wrap:balance}`; в управляемом контенте — `&nbsp;` после коротких предлогов; не использовать `<br>` для «красоты».
+✗ Ошибка: в H1 последняя строка — одно слово; в абзаце одинокая строка на всю ширину.
+
+**P15. Числа — табличные.** В таблицах, таймерах, KPI, ценах: `font-variant-numeric:tabular-nums`.
+→ Как: `.tnum{font-variant-numeric:tabular-nums}`; моно (`--font-mono`) для ID, кодов, ⌘K-подсказок.
+✗ Ошибка: пропорциональные цифры — колонки «пляшут», дельты не выравниваются.
+
+**P16. Пары шрифтов — по контрасту, не по сходству.** Serif display + гротеск body (AURORA); либо один гротеск в двух ролях.
+→ Как: Lora/Unbounded для display, Golos Text для body; не скрещивать два похожих геометр-гротеска.
+✗ Ошибка: два похожих sans в заголовке и тексте — выглядит как ошибка, а не приём.
+
+**P17. Капс — только для коротких лейблов.** До 3 слов: надзаголовок, категория, табличный заголовок; не для абзацев.
+→ Как: `.eyebrow`/`.caps` — 11–12px, вес 600, трекинг .12–.14em, цвет muted.
+✗ Ошибка: длинный заголовок капсом — читается по буквам и выглядит дёшево.
+
+**P18. Соседние уровни шкалы различимы.** Отношение размеров ≥1.2×, иначе уровень не читается.
+→ Как: 16→20→24→30→36; не ставить 16 и 17 рядом как разные уровни.
+✗ Ошибка: 18px H3 и 16px body — иерархия почти не видна.
+
+**P19. Кириллица требует проверки.** Тестировать «ё, й, Щ, Д, Ж», кавычки-ёлочки, длинные слова; не переносить латинские типографские приёмы слепо.
+→ Как: `lang="ru"`, `«ёлочки»`, длинное тире, неразрывный пробел перед единицами; проверить переносы в узких колонках.
+✗ Ошибка: латинские кавычки и дефис вместо тире; «рваться» слова в заголовке.
+
+## C. Цвет
+
+**P20. Правило 60-30-10.** 60% — нейтральный фон, 30% — поверхности и текст, 10% — акцент.
+→ Как: фон `--bg`, панели `--surface/--bg-alt`, акцент — только кнопки, ссылки, активные состояния, 1–2 акцента на экран.
+✗ Ошибка: акцентные блоки на 30–40% площади — «пёстро» и дёшево.
+
+**P21. Один акцент + нейтрали + редкий тёплый тон.** В AURORA второй тон — медь (`--copper`), ≤2% площади: линия, цифра, хайлайт.
+→ Как: медь для деталей, не для кнопок; не вводить третий акцент «для красоты».
+✗ Ошибка: четыре цвета-акцента в одном интерфейсе, каждый «важный».
+
+**P22. Оттенки генерируются в OKLCH.** Hover/press — сдвиг светлоты L на ±0.04–0.06 при той же хроме; не «подбирать hex на глаз».
+→ Как: `oklch()`/`color-mix(in oklab, …)`; в токенах уже есть пары `--accent/-hover/-press`.
+✗ Ошибка: hover-цвет случайно уходит в другой оттенок (изумруд → бирюза → синий).
+
+**P23. Контраст — порог, а не вкус.** Текст ≥4.5:1; крупный (≥24px или ≥18.66px bold) ≥3:1; иконки/границы контролов ≥3:1.
+→ Как: проверять пары WebAIM Contrast Checker; не «серый на сером»; `--faint` — только декор.
+✗ Ошибка: подписи `--faint` на `--bg` (2.35:1) — формально «видно», фактически нечитаемо.
+
+**P24. Не только цветом.** Статус дублируется текстом, иконкой или формой: «Ошибка» + иконка + цвет, не только красный.
+→ Как: badge = точка/иконка + подпись; в таблицах статус текстом, цвет — фоном; проверить grayscale.
+✗ Ошибка: красная/зелёная точка без подписи — не работает для 8% мужчин и в ч/б.
+
+**P25. Поверхности отделяются светлотой, а не только тенью.** Разница L между `--bg` и `--surface` 3–6%; в тёмной теме — светлее с уровнем.
+→ Как: `--bg:#F4F1EA` → `--surface:#FFFFFF`; `--surface-2` для вложенных панелей; hairline по краю.
+✗ Ошибка: белая карточка на белом фоне без границы — «парит» непонятно где.
+
+**P26. Акцент — для действия, не для декора.** Ссылки — `--accent-ink` (контрастнее), крупные акцентные заливки — только CTA/активные состояния.
+→ Как: в editorial/warm-пресетах `--accent` как мелкий текст даёт 4.19–4.47:1 — для ссылок брать `--accent-ink`.
+✗ Ошибка: акцентный цвет у всех заголовков — акцент перестаёт быть акцентом.
+
+**P27. Семантика статусов фиксирована.** success/warning/danger/info + soft-фон; не менять значение цвета между экранами.
+→ Как: пары `--danger`/`--danger-soft`, `--success`/`--success-soft`; иконка + текст + цвет.
+✗ Ошибка: «предупреждение» оранжевым на одном экране и синим на другом.
+
+**P28. Grayscale-тест.** Убрать цвет: иерархия, границы, статусы должны остаться понятными.
+→ Как: DevTools → Rendering → Grayscale (или фильтр `grayscale(1)`); если всё «слиплось» — добавить контраст/линии/вес.
+✗ Ошибка: единственное различие блоков — цвет фона; в ч/б страница превращается в кашу.
+
+## D. Сетка, воздух, выравнивание, оптика
+
+**P29. 12 колонок, контейнер 1200–1360.** Gutter `clamp(20px,4.5vw,56px)`, контент — в `--container`/`--container-wide`.
+→ Как: `.container`/`.container-wide` из base.css; не задавать max-width вручную на каждой секции.
+✗ Ошибка: 5 разных ширин контента на одной странице — левый край «гуляет».
+
+**P30. Одна шкала отступов.** Только `--sp-*`: 4/8/12/16/24/32/48/64/96/128; никаких 13/17/22/27px.
+→ Как: `gap:var(--sp-5)`, `padding-block:var(--section-y)`; если нужного нет — брать соседний токен, не выдумывать.
+✗ Ошибка: «на глаз» 18px здесь, 22px там — страница выглядит неаккуратной без явной причины.
+
+**P31. Вертикальный ритм секций.** Desktop 96–140px, mobile 56–72px; между заголовком и контентом — 24–40px.
+→ Как: `--section-y:clamp(64px,8vw,128px)`; чередовать фон секций (`bg`/`surface`/`bg-alt`), а не рамки.
+✗ Ошибка: одинаковые 24px между всеми блоками — нет «дыхания» и группировки.
+
+**P32. Воздух важнее рамок.** Сомневаешься — убери border и добавь padding.
+→ Как: 24–32px внутри карточки, 48–64px между блоками; рамка только когда нужна граница данных (таблица).
+✗ Ошибка: каждая карточка в рамке и с тенью — «сетка клеток», а не композиция.
+
+**P33. Выравнивание по оптике, а не по математике.** Иконки — по оптическому центру строки, кавычки — выступают за поле, буллеты — висят в отступе.
+→ Как: `transform:translateY(1px)` для иконки 20px в строке 16px; `hanging-punctuation` где поддерживается; visually center в круге.
+✗ Ошибка: иконка «на 2px ниже» текста — заметно на всех кнопках.
+
+**P34. Оптические поправки типографики.** Крупный display: чуть плотнее трекинг и меньше line-height; serif — на 1–2% больше воздуха; цифры — выровнены по базовой линии.
+→ Как: `--display-tracking` −0.018em, `--lh-tight`; для Lora H1 допускать line-height 1.02–1.06.
+✗ Ошибка: одинаковые line-height и tracking у 14px и 96px — крупный текст «разваливается».
+
+**P35. Выравнивание по одной из линий.** Каждый элемент выровнен по левому краю колонки, центру или правому краю чисел; «почти выровнено» запрещено.
+→ Как: grid + `align-items`, а не margin-left; правые числа в таблицах; центр — только для коротких блоков.
+✗ Ошибка: три карточки с разной высотой заголовков и «плавающими» кнопками.
+
+**P36. Hairline вместо рамок.** Разделители 1px `--line` (в dark — `--line`), для групп — только горизонтальные линии, не «коробки».
+→ Как: `.rule{border-top:var(--hairline)}`; в таблицах — линии строк, без вертикальной сетки.
+✗ Ошибка: сетка 1px со всех сторон — интерфейс выглядит как Excel 2003.
+
+## E. Глубина
+
+**P37. Сначала бордер, потом тень.** Тень означает реальный уровень: dropdown, modal, sticky-элемент; статичная карточка — hairline.
+→ Как: карточки — `border:var(--hairline)`; меню/модалки — `--shadow-md/lg`; не «тень на всём».
+✗ Ошибка: 20 карточек с одинаковой большой тенью — «пластиковый» вид и потеря уровней.
+
+**P38. Слоистые тени из 2 слоёв.** Малый offset + большой blur с низкой alpha; без чёрного 30–50%.
+→ Как: `--shadow-sm/md/lg` из tokens.css; светлая тема — rgb(20 24 26 / .06–.35), тёмная — глубже.
+✗ Ошибка: `box-shadow:0 0 30px rgba(0,0,0,.5)` — «тень из 2010».
+
+**P39. Два уровня теней максимум.** Один для всплывающих, один для модальных; остальное — границы и фон.
+→ Как: не смешивать 6 разных теней; в тёмной теме усилить alpha, а не размытие.
+✗ Ошибка: тени разной силы на соседних компонентах — «грязь» под элементами.
+
+**P40. Радиус по смыслу.** Контролы 8–12px, карточки 12–18px, модалки 16–20px, pill — только теги/чипы/аватары.
+→ Как: `--radius-control` (8–12), `--radius-card` (11–18), `--radius-pill` для бейджей; не всё 24–32px.
+✗ Ошибка: «rounded-3xl» на кнопках, полях и карточках — AI-шаблонный вид.
+
+**P41. Фокус — кольцо, не тень.** 2px акцент + offset 2–3px, видимый на любом фоне.
+→ Как: `:focus-visible{outline:2px solid var(--accent);outline-offset:3px}` или `box-shadow:var(--focus-ring)`.
+✗ Ошибка: `outline:none` без замены — клавиатурная навигация «слепая».
+
+## F. Motion
+
+**P42. Длительность по типу действия.** 120–180ms — micro (hover, кнопки), 180–260ms — UI (табы, выпадашки), 280–400ms — overlay (модалки), 500–700ms — reveal при скролле.
+→ Как: `--dur-fast`/`--dur`/`--dur-slow`/`--dur-reveal`; длиннее 400ms — только один раз при появлении секции.
+✗ Ошибка: 600ms hover на кнопке — интерфейс «тормозит»; 80ms — движение не читается.
+
+**P43. Один easing на интерфейс.** Стандарт — `cubic-bezier(.2,.7,.2,1)`; вход — ease-out, выход — ease-in.
+→ Как: `--ease`, `--ease-out`; не смешивать bounce/elastic с деловым UI.
+✗ Ошибка: у каждого компонента свой easing — движение «дёрганое».
+
+**P44. Анимировать transform и opacity.** Не width/height/top/left — они дёргают layout.
+→ Как: `translateY(12px)` + `opacity`; для раскрытия — `grid-template-rows` или scale, но аккуратно.
+✗ Ошибка: анимация `height:auto` — скачки контента и лаги на мобильном.
+
+**P45. Reveal — сдержанный.** translateY 12–16px, opacity 0→1, stagger 60–80ms, не больше 4–6 элементов; повторно не проигрывать.
+→ Как: `.reveal` + `IntersectionObserver`, `data-delay` 1–5; отключать в reduced-motion.
+✗ Ошибка: каждый абзац «влетает» с поворотом и задержкой 1.5s — цирк и ожидание.
+
+**P46. Никаких бесконечных и декоративных анимаций.** Движение только в ответ на действие или появление контента.
+→ Как: hover — фон/сдвиг 1–2px/цвет; не крутить фоновые градиенты, не «дышать» логотипом.
+✗ Ошибка: пульсирующие блобы и бегущие полоски — отвлекают и жгут батарею.
+
+**P47. prefers-reduced-motion — обязательно.** Отключить reveal, hover-сдвиги, parallax; scroll-behavior:auto.
+→ Как: media-query из base.css уже есть; проверить, что контент виден без JS-анимации.
+✗ Ошибка: при reduced-motion секции остаются с `opacity:0` — контент пропадает.
+
+## G. Иконки, изображения, иллюстрации
+
+**P48. Один набор иконок.** Inline SVG, stroke 1.5–1.6, размеры 20/24, скругления концов; эмодзи в UI запрещены.
+→ Как: общий `<symbol>`-спрайт или повторяющийся паттерн; `stroke-linecap:round`, `stroke-linejoin:round`.
+✗ Ошибка: смесь эмодзи, иконок с разной толщиной и «иконок-облачков» из разных наборов.
+
+**P49. Иконка не заменяет текст.** В навигации и CTA — подпись; icon-only — только для очевидных действий (закрыть, поиск) с `aria-label`.
+→ Как: `<button aria-label="Закрыть">…<svg aria-hidden="true">`; декоративные иконки — `aria-hidden`.
+✗ Ошибка: ряд непонятных иконок без подписей; скринридер читает «button».
+
+**P50. Изображения с фиксированными пропорциями.** 4:5, 3:2, 16:9, 1:1; `object-fit:cover`; `width/height` или `aspect-ratio` против layout shift.
+→ Как: `aspect-ratio:16/9` + `object-fit:cover`; alt описывает смысл, декоративное — `alt=""`.
+✗ Ошибка: фото «прыгает» при загрузке; alt = «image1.jpg».
+
+**P51. Визуал строится из типографики и геометрии.** В AURORA нет внешних фото: SVG-диаграммы, монограммы, крупные цифры, номерные секции, бумажное зерно 2–3%.
+→ Как: `--grain-opacity:.022`; SVG-графики с `currentColor`; монограмма = инициалы в hairline-рамке.
+✗ Ошибка: стоковые улыбающиеся люди и «командные» фото — мгновенно дешёвый вид.
+
+## H. Текст и микрокопирайт
+
+**P52. Заголовок продаёт результат.** 3–8 слов, конкретная польза; не «Добро пожаловать» и не название отдела.
+→ Как: «Запись к врачу за 2 минуты» вместо «Онлайн-запись»; проверить: понятно ли, что получит человек.
+✗ Ошибка: «Инновационные решения для вашего здоровья» — ноль информации.
+
+**P53. Конкретика вместо прилагательных.** Числа, сроки, имена, проценты; «качественный» и «профессиональный» — удалить.
+→ Как: «94% заявок закрыты в SLA», «4 врача, 12 направлений»; источники цифр — если это демо, не выдумывать чрезмерно.
+✗ Ошибка: «команда профессионалов с многолетним опытом» — не верифицируемо и не запоминается.
+
+**P54. Кнопки — глагол + объект.** 1–3 слова, sentence case: «Записаться на приём», «Скачать отчёт»; не «Отправить» в одиночку и не CAPS.
+→ Как: primary — действие; secondary — альтернатива; destructive — «Удалить заявку», с подтверждением.
+✗ Ошибка: «OK», «Далее», «Отправить» без контекста; CAPS-кнопки в русском UI.
+
+**P55. Ошибки объясняют и чинят.** Что случилось + что сделать + где: «Не удалось сохранить: нет соединения. Проверьте сеть и повторите».
+→ Как: текст рядом с полем, `aria-invalid`, `aria-describedby`; не «Что-то пошло не так».
+✗ Ошибка: toast «Error 500» без пути решения и без сохранения введённого.
+
+**P56. Пустые состояния — часть дизайна.** Что здесь будет, почему пусто и один CTA; для ошибок — альтернативный путь.
+→ Как: иконка/монограмма + 1–2 строки + кнопка; не пустой белый экран и не «Нет данных».
+✗ Ошибка: таблица «No data» без объяснения, что делать дальше.
+
+**P57. Русская типографика.** «Ёлочки», длинное тире, неразрывные пробелы перед единицами и после коротких предлогов; без lorem ipsum и англицизмов без нужды.
+→ Как: «5 000 ₽», «с 9:00 до 18:00», «врач‑кардиолог»; проверить переносы и «сироты».
+✗ Ошибка: "Lorem ipsum", кавычки “...”, дефис вместо тире, «5000 рублей» без разрядов.
+
+## I. Состояния
+
+**P58. Семь состояний у каждого интерактива.** default / hover / focus-visible / active / disabled / loading / error (для полей).
+→ Как: показывать все в showcase; для кнопок — hover+focus+active+disabled+loading; поля — +error.
+✗ Ошибка: только default и hover — интерфейс «оживает» непредсказуемо.
+
+**P59. Hover — микроизменение без сдвига layout.** Фон на 4–6% темнее/светлее, бордер, сдвиг 1–2px; 160–200ms.
+→ Как: `background:color-mix(in oklab,var(--ink) 5%,var(--surface))`; подчёркивание ссылки; не менять размеры.
+✗ Ошибка: карточка «прыгает» на 8px и меняет высоту — layout дёргается.
+
+**P60. Focus-visible виден всегда.** Не удалять outline без равноценной замены; фокус заметен на фоне любого цвета.
+→ Как: `--focus-ring` (2px + offset); проверить Tab по всей странице.
+✗ Ошибка: фокус только на кнопках, поля и ссылки «слепые».
+
+**P61. Disabled — очевидно неактивный.** opacity 45–55%, `cursor:not-allowed`, без hover/тени; причина недоступности — текст рядом.
+→ Как: `[disabled]{opacity:.5;pointer-events:none}` + подсказка «Сначала выберите врача».
+✗ Ошибка: disabled-кнопка выглядит активной, а нажатие ничего не делает.
+
+**P62. Loading повторяет геометрию.** Skeleton с теми же размерами/радиусами, shimmer 1.2–1.6s; spinner 16–20px локально, не на весь экран.
+→ Как: skeleton-блоки по сетке контента; `aria-busy="true"`; не блокировать всю страницу ради одной кнопки.
+✗ Ошибка: скелетон «не той» формы → контент прыгает при загрузке; вечный спиннер без текста.
+
+**P63. Ошибка — рядом с источником.** Поле краснеет + текст ошибки + `aria-invalid`; не только цвет и не только toast.
+→ Как: `input[aria-invalid="true"]{border-color:var(--danger)}`; ошибка под полем 12–13px.
+✗ Ошибка: ошибки собраны вверху формы безымянным списком.
+
+**P64. Empty / error / 403 / 404 — часть системы.** Стиль тот же, что у остальных экранов; есть объяснение и путь назад.
+→ Как: переиспользовать `.empty`/alert-компоненты; в 404 — поиск/ссылки на разделы.
+✗ Ошибка: страница 404 дефолтная браузерная или «белый экран».
+
+## J. Адаптив и мобильная композиция
+
+**P65. Мобильная версия — другая композиция, а не сжатый desktop.** Меняется порядок, размеры, видимость декора.
+→ Как: stacking через `grid-template-columns:1fr`; hero — текст → CTA → proof → визуал; скрыть фоновую сетку.
+✗ Ошибка: desktop-сетка, ужатая до 390px, с 12px текстом и горизонтальным скроллом.
+
+**P66. Тач-цели ≥44px.** Минимум WCAG — 24px, практика Apple — 44px; отступ между целями ≥8px; важные действия — в thumb-зоне.
+→ Как: `min-height:44px` у кнопок/ссылок меню; sticky CTA снизу на мобиле; не полагаться на hover.
+✗ Ошибка: иконки 16px без padding — промахнуться легко даже на 390px.
+
+**P67. Таблицы скроллятся внутри контейнера.** `.table-wrap{overflow-x:auto}` + sticky первая колонка; страница не должна «ехать».
+→ Как: `min-width` таблицы, тень-подсказка у края, `overscroll-behavior-x:contain`.
+✗ Ошибка: таблица расширяет body → горизонтальный скролл всей страницы.
+
+**P68. clamp() для типографики и отступов.** Плавное масштабирование без десяти брейкпоинтов; input font-size ≥16px против iOS-зума.
+→ Как: `font-size:clamp(1rem,1.2vw,1.125rem)`; на мобиле поля не 14px.
+✗ Ошибка: фиксированные 64px заголовки на 390px → 2–3 строки и обрезка.
+
+**P69. Проверка на 390/768/1440 и 200% zoom.** Нет overflow-x, обрезанного текста, «прыжков» layout; брейкпоинты AURORA: ≥1200, 768–1199, 390–767.
+→ Как: `document.documentElement.scrollWidth > innerWidth` → искать виновника; zoom 200% для читаемости.
+✗ Ошибка: проверка только на 1440 — на мобиле «половина сайта за краем».
+
+## K. Тёмная тема
+
+**P70. Тёмная тема — не инверсия.** Фон #0B–#14 (не #000), поверхности светлеют на 3–6% с уровнем, акцент светлее (L +0.15–0.2), тени глубже.
+→ Как: `[data-theme="dark"]` уже задаёт палитру; не генерировать автоматически `filter:invert`.
+✗ Ошибка: белый текст на чистом чёрном + кислотные акценты — «терминал», устают глаза.
+
+**P71. Не чистый чёрный и не чистый белый.** Текст L≈0.93–0.95, фон L≈0.10–0.16; в AURORA `--ink:#F2EFE7`, `--bg:#0B0F0F`.
+→ Как: тёплый/холодный оттенок сохранять в обеих темах (у AURORA бумажная теплота); не `#fff/#000`.
+✗ Ошибка: `#FFFFFF` на `#000000` — максимальный контраст, но максимальная усталость.
+
+**P72. Обе темы проверяются скриншотами.** Контраст AA, акцент читается, изображения/иллюстрации/градиенты не «ломаются», тени не исчезают.
+→ Как: переключатель темы в шапке; скриншоты light+dark для каждой ключевой страницы.
+✗ Ошибка: тёмная тема «на сдачу»: нечитаемые ссылки, белые SVG-подложки, тени-невидимки.
+
+## L. Доступность
+
+**P73. Семантика — каркас.** Landmarks (`header/nav/main/footer`), один H1, порядок заголовков без пропусков, skip-link, `lang="ru"`.
+→ Как: семантические теги вместо div-кнопок; кнопка — `<button>`, ссылка — `<a>`; заголовки по уровням.
+✗ Ошибка: `<div onclick>` вместо кнопки — недоступно с клавиатуры и скринридера.
+
+**P74. Клавиатура — полный сценарий.** Tab-порядок логичен, фокус видим, модалка держит фокус и закрывается Escape, после закрытия фокус возвращается.
+→ Как: focus trap (первый/последний элемент), `aria-modal="true"`, `role="dialog"`; вернуть фокус на инициатора.
+✗ Ошибка: модалка, из которой Tab уходит на страницу за ней.
+
+**P75. Формы доступны.** `<label for>` у каждого поля, ошибки программно связаны, `autocomplete`, `required` + понятные подсказки.
+→ Как: не использовать placeholder вместо лейбла; видимый текст подсказки; `aria-describedby` на help/error.
+✗ Ошибка: поле с подписью только внутри placeholder — при вводе контекст теряется.
+
+**P76. Гейт качества.** axe: 0 critical/serious; reduced-motion; alt/aria; контраст AA. Это блокер сдачи, а не «пожелание».
+→ Как: прогон `tools/design-qa/audit.mjs`; критичные нарушения исправляются до финального скриншота.
+✗ Ошибка: «потом поправим доступность» — потом не наступает.
+
+---
+
+## Проверено по токенам AURORA (можно ссылаться)
+
+| Пара | Контраст | Вывод |
+|---|---|---|
+| `--ink` на `--bg` (light) | 15.8:1 | основной текст — отлично |
+| `--ink-2` на `--bg` | 9.1:1 | body/lead — отлично |
+| `--muted` на `--bg` | **4.28:1** | ниже AA для обычного текста → на `--bg` брать `--ink-2`, либо `--muted` только ≥18.7px bold |
+| `--muted` на `--surface` | 4.83:1 | на белых панелях — ок |
+| `--faint` на `--bg` | **2.35:1** | только декор (разделители, disabled-подписи), не смысловой текст |
+| `--accent` на `--bg` (aurora) | 5.46:1 | ссылки/акцентный текст — ок |
+| `--accent` на `--bg` (editorial / warm) | **4.47 / 4.19:1** | ниже AA → для текста `--accent-ink`, `--accent` — заливки/крупное |
+| `--accent-contrast` на `--accent` | 6.16:1 (light), 8.95:1 (dark) | белый текст на кнопке — ок |
+| `--line` / `--line-strong` на фоне | **1.3–1.9:1** | hairline-декор — ок; **границы полей ввода так нельзя** (нужно ≥3:1) → `color-mix(in oklab,var(--ink) 32%,transparent)` или `--muted` |
+| `--copper` на `--bg` | 3.68:1 | только крупные акценты/иконки/линии, не мелкий текст |
+| `--muted` на `--surface` (dark) | 5.95:1 | тёмная тема — ок |
+
+## Источники и инструменты (проверены)
+
+- [WCAG 2.2 Quick Reference](https://www.w3.org/WAI/WCAG22/quickref/) — контраст, тач-цели, reduced-motion.
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) — тач-цели 44pt, типографика, motion.
+- [Material Design 3](https://m3.material.io/) — elevation, tonal surfaces, motion-система.
+- [Refactoring UI](https://refactoringui.com/) — иерархия, цвет, тени, пустые состояния.
+- [Butterick’s Practical Typography](https://practicaltypography.com/) — длина строки, интерлиньяж, трекинг.
+- [Every Layout](https://every-layout.dev/) — сетки/интро-раскладки на CSS.
+- [Easings](https://easings.net/) — кривые, не выдумывать cubic-bezier.
+- [OKLCH Color Picker](https://oklch.com/) — генерация оттенков в перцептивном пространстве.
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) — проверка пар цветов.
+- [Type Scale](https://type-scale.com/) — модульные шкалы.
+- [Modern Font Stacks](https://modernfontstacks.com/) — системные стеки без внешних загрузок.

package/skills/wow-design/references/stack-recipes.md

@@ -0,0 +1,93 @@
+# Stack Recipes — как встраивать AURORA в реальные проекты
+
+> Принцип: **не переписывай проект, а перенеси токены и компоненты**. Сначала посмотри, что уже есть
+> (тема, переменные, UI-кит), и замапь новое на существующее. Ничего не ломать — часть дизайна.
+
+## Универсальный перенос (любой стек)
+1. Скопируй из `assets/kit/assets/css/`: `tokens.css`, `base.css`, `fonts.css` (и при необходимости `components.css`).
+2. Подключи первыми в каскаде: `tokens → base → components → styles проекта`.
+3. Если в проекте уже есть CSS-переменные — замапь:
+   ```css
+   :root{
+     --brand-accent: var(--accent);
+     --surface-page: var(--bg);
+     --text-primary: var(--ink);
+     --radius-md: var(--radius-card);
+   }
+   ```
+4. Проверь, что ни один компонент проекта не использует «магические» цвета — замени на токены постепенно.
+5. Тёмная тема: переключай `data-theme` на `<html>`; в проекте может быть свой механизм (class/`prefers-color-scheme`) —
+   адаптируй, а не дублируй две системы.
+
+## React + Vite (+ Tailwind, если есть)
+- **Токены:** `src/styles/tokens.css` + `base.css` импортируются в `main.tsx`/`index.css`.
+- **Tailwind v4:** в CSS вместо `tailwind.config`:
+  ```css
+  @import "tailwindcss";
+  @theme {
+    --color-bg: var(--bg);
+    --color-surface: var(--surface);
+    --color-ink: var(--ink);
+    --color-accent: var(--accent);
+    --color-line: var(--line);
+    --font-display: var(--font-display);
+    --font-sans: var(--font-body);
+    --radius-card: var(--radius-card);
+  }
+  ```
+  Тогда работают классы `bg-surface`, `text-ink`, `border-line`, `font-display`, `rounded-card`.
+- **Компоненты:** один каталог `src/components/ui` (Button, Input, Select, Badge, Card, Table, Modal, Tabs,
+  Toast, EmptyState). Варианты — через пропсы/`data-variant`, состояния — `data-state`, не через десятки классов.
+- **Тёмная тема:** `useEffect` ставит `data-theme` на `document.documentElement`, значение в `localStorage`,
+  первый рендер — из `prefers-color-scheme`.
+- **Проверка:** `npm run dev` → `capture.mjs http://localhost:5173` (или нужный роут) + `audit.mjs`.
+- **Тесты:** RTL — проверка доступных имён кнопок/полей, axe в Playwright/`vitest-axe`; скриншоты —
+  `toHaveScreenshot` для ключевых экранов (опционально, если проект уже на Playwright).
+- **Не тащи** тяжёлые UI-библиотеки ради дизайна: сначала токены и свои 8–12 компонентов.
+
+## Laravel + Blade
+- **Стили:** `resources/css/tokens.css`, `base.css`, `fonts.css`; `resources/css/app.css` импортирует их;
+  `vite.config.js` уже собирает `app.css`. Шрифты — `resources/fonts/`, пути в `@font-face` относительные.
+- **Layout:** `resources/views/layouts/app.blade.php` — `<html lang="ru" data-theme="{{ $theme ?? 'light' }}">`,
+  `@vite(['resources/css/app.css','resources/js/app.js'])`, skip-link, header/footer partials.
+- **Blade-компоненты:** `resources/views/components/ui/button.blade.php`:
+  ```blade
+  @props(['variant' => 'primary', 'size' => 'md', 'type' => 'button'])
+  <button type="{{ $type }}" {{ $attributes->class(['btn', "btn--$variant", "btn--$size"]) }}>
+    {{ $slot }}
+  </button>
+  ```
+  Аналогично input/select/badge/card/table/empty/modal. Никаких inline-стилей.
+- **Существующая вёрстка:** не заменяй весь шаблон. Добавь `resources/css/redesign.css` **после** старых стилей,
+  переопределяй только проблемные компоненты; проверь все основные страницы.
+- **Проверка:** `npm run build`, `php artisan serve`, скриншоты ключевых страниц (логин, список, карточка,
+  формы, ошибки), обе темы. PHPUnit/фича-тесты не должны упасть — дизайн не меняет логику.
+- **Blade-подводные камни:** экранирование в атрибутах, `@class([...])`, не ломать `old()`/`@error` в формах,
+  CSRF остаётся, не переносить формы на JS без причины.
+
+## Bitrix / Aspro («Медицинский центр 3.0» и др.)
+- **Где править:** только `local/` (свой шаблон/компоненты) или кастомные файлы шаблона сайта;
+  **не** трогать `/bitrix/` ядро и файлы маркетплейс-шаблона, которые перезапишутся обновлением.
+- **CSS:** обычно `.../local/templates/<template>/styles/custom.css` или `template_styles.css`;
+  подключай токены через `init.php`/`<link>`; селекторы скоупи под контейнер страницы
+  (`.page-<name> .btn { ... }`), чтобы не сломать другие разделы и админку.
+- **Шрифты:** положи в `local/templates/<template>/fonts/` и подключи `@font-face` с относительными путями;
+  не тяни с CDN, если сайт работает в закрытом контуре.
+- **Кэш:** после правок CSS/шаблонов чистить кэш (`Настройки → Очистить кэш` или удалить
+  `/bitrix/cache/css/s1/<template>/`), иначе увидишь старое.
+- **Проверка:** открыть живую страницу в браузере (desktop/mobile), проверить другие разделы (шапка/футер общие),
+  админку не задеть. Для локальных наработок — статический HTML-снимок страницы.
+- **Аспро-подводные камни:** свои классы `.btn`, `.card`, `--palette-*`, вложенные `.wrapper`/`.maxwidth`;
+  проверяй каскад и `!important` (лучше без него), не ломай мобильное меню и попапы.
+- **Контент:** заголовки h3 в анкетах/статьях не менять на h2 без необходимости — SEO-структура важна.
+
+## Статический HTML (лендинг/прототип)
+- Скопируй папку `assets/kit` → в проект; замени контент и бренд-акцент; оставь структуру и токены.
+- Проверь `file://` (нет сборки): относительные пути, шрифты локально, никаких fetch/CDN.
+- Дальше — `capture.mjs`/`audit.mjs`, скриншоты, правки по рубрике.
+
+## Что считать «интеграцией» в отчёте
+- Какие файлы добавлены/изменены (точные пути).
+- Какие токены/переменные замаплены на существующую тему.
+- Какие экраны проверены скриншотами (desktop/mobile, light/dark).
+- Что не тронуто (логика, БД, роуты, чужие компоненты).