dsh-desktop-kit 0.0.0-stage → 2.0.0

package/skills/wow-design/references/critique-rubric.md

@@ -0,0 +1,262 @@
+# 04 · Рубрика критики UI — 12 критериев × 5 уровней
+
+> Часть навыка wow-design. ≈7.4k токенов. Читать, когда: оцениваешь UI по 12 критериям и нужны
+> дескрипторы уровней, веса, подсчёт и шаблон отчёта.
+
+> Инструмент для петли «скриншот → критика → правки → скриншот». Оцениваем **глазами по скриншоту**,
+> а не по коду. Шкала 1–5, веса, порог **4.4/5**, ни один критерий **не ниже 4**. Ниже 4.4 — не сдано.
+>
+> Главные правила критика:
+> 1. **Контекст раньше красоты:** кто пользователь, какая задача экрана, что важнее — доверие/скорость/плотность.
+>    Без этого «плохо/хорошо» не существует.
+> 2. **Каждое замечание — с доказательством:** что вижу (скриншот/координата) → почему проблема → конкретный фикс
+>    в px/rem/токенах. «Сделать современнее» — не замечание.
+> 3. **Сначала блокеры:** P0 (сломанное/недоступное) чинится до P1/P2, даже если P2 «обиднее».
+> 4. **Хвалить тоже обязательно:** 3–5 пунктов, что уже работает, — иначе критика не принимается.
+
+## Веса критериев
+
+| # | Критерий | Вес | Что проверяет |
+|---|---|---|---|
+| К1 | Первое впечатление / концепция | **15%** | понятно ли за 5 секунд, есть ли характер и идея |
+| К2 | Визуальная иерархия и маршрут взгляда | **12%** | что видно первым, куда идёт взгляд, одна ли главная точка |
+| К3 | Типографика | **12%** | шкала, строка, интерлиньяж, трекинг, кириллица |
+| К4 | Цвет и контраст | **10%** | 60-30-10, один акцент, AA-контраст, семантика статусов |
+| К5 | Сетка, выравнивание, ритм | **10%** | колонки, единые отступы, «ничего не гуляет» |
+| К6 | Воздух и плотность | **8%** | дышит ли страница, нет ли «каши» и пустот |
+| К7 | Компоненты и состояния | **8%** | все состояния, формы, таблицы, модалки, empty |
+| К8 | Консистентность | **7%** | один язык на всех экранах и в обеих темах |
+| К9 | Детали и полировка | **6%** | оптические поправки, иконки, цифры, фокус, скроллбар |
+| К10 | Адаптив и мобильный | **5%** | 390/768/1440, отсутствие overflow, тач-цели |
+| К11 | Доступность | **4%** | контраст, клавиатура, семантика, alt/aria, reduced-motion |
+| К12 | Оригинальность vs польза | **3%** | не шаблон, но и не арт ради арта |
+
+Сумма весов — 100%. Средневзвешенный балл: **Σ(оценка × вес)**, округление до 2 знаков.
+
+## Критерии и дескрипторы
+
+### К1. Первое впечатление / концепция — вес 15%
+**Что оцениваем:** за 5 секунд понятно, что это, для кого и что делать; есть ли одна ясная идея (не «набор блоков»); вызывает ли экран нужное чувство (доверие/точность/тепло).
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Сразу читается смысл и характер: одна сильная мысль, «дорого/уместно», хочется скроллить; есть signature-деталь. |
+| **4** | Понятно и профессионально, идея есть, но без «вау»; 1–2 мелкие неясности в первом экране. |
+| **3** | Понятно, что это за сайт, но первый экран нейтральный/шаблонный; фокус размыт, характер не читается. |
+| **2** | Непонятно, что делать; экран выглядит сборкой блоков; первое впечатление «дёшево/сгенерировано». |
+| **1** | Смысл не считывается, визуальный хаос или пустота, доверия нет. |
+**Типичный провал:** центрированный hero с общими словами и тремя равными CTA.
+
+### К2. Визуальная иерархия и маршрут взгляда — вес 12%
+**Что оцениваем:** одна главная точка на экран; 3 уровня иерархии; взгляд идёт по нужному маршруту к CTA; второстепенное приглушено.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Взгляд сразу на H1 → lead → CTA; всё второстепенное явно тише; на экране один главный акцент. |
+| **4** | Маршрут читается, но 1–2 элемента конкурируют (лишний акцент/баннер); CTA заметен. |
+| **3** | Понятно, где заголовок, но много «равных» по весу элементов; маршрут приходится искать. |
+| **2** | Всё примерно одинаково, акценты в случайных местах, CTA теряется. |
+| **1** | Нет иерархии: «серая каша» или несколько кричащих пятен. |
+**Типичный провал:** два primary-CTA, акцентные заголовки у всех секций.
+
+### К3. Типографика — вес 12%
+**Что оцениваем:** модульная шкала и различимость уровней; длина строки 60–72ch; интерлиньяж по роли; трекинг; кириллица; 2–3 начертания; табличные цифры; отсутствие «сирот».
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Шкала ясная (display ↔ body ↔ служебное), строка 60–72 знака, аккуратные лейблы капсом, цифры выровнены, кириллица безупречна. |
+| **4** | Хорошая шкала и строка, но 1–2 огреха: трекинг, висячий предлог, слишком свободный/плотный интерлиньяж. |
+| **3** | Уровни различимы, но шкала нерегулярная (17/19/23px), строка длинновата, капс/трекинг «на глаз». |
+| **2** | 14px body, всё 16–20px, строки на всю ширину, случайные шрифты; читать неприятно. |
+| **1** | Текстовая каша: 5 размеров, 4 жирности, строка 120 символов, капс в абзацах. |
+**Типичный провал:** «display-шрифт не выбран» — один гротеск для всего и одинаковые размеры.
+
+### К4. Цвет и контраст — вес 10%
+**Что оцениваем:** 60-30-10; один акцент + нейтрали; контраст AA (4.5:1 текст, 3:1 крупный/границы); семантика статусов; grayscale-тест; обе темы.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Палитра спокойная и «дорогая», акцент ≤10% площади, контраст везде AA, статусы читаются без цвета, ч/б сохраняет структуру. |
+| **4** | Палитра хорошая, но 1–2 места ниже AA/акцент чуть перебор; семантика в порядке. |
+| **3** | Нейтрали + акцент есть, но контраст второстепенного текста спорный, акцентов 2–3, в ч/б структура слабеет. |
+| **2** | Разнобой цветов, серый на сером, статусы только цветом, градиенты «по умолчанию». |
+| **1** | Кислотная палитра/фиолетовый градиент, текст нечитаем, цвет — единственный носитель смысла. |
+**Типичный провал:** `#999` на белом и 4 акцентных цвета.
+
+### К5. Сетка, выравнивание, ритм — вес 10%
+**Что оцениваем:** 12 колонок, контейнер 1200–1360; единая шкала отступов (4/8/12/…); элементы выровнены по линиям; правые числа/края; нет «почти выровнено».
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Всё по одной сетке, одинаковые края, ритм предсказуемый; «включить линейку» — всё сходится. |
+| **4** | Сетка читается, но 1–2 блока выбиваются на 4–8px; отступы из шкалы. |
+| **3** | Сетка есть, но края местами гуляют; отступы «на глаз» (13/17/22px), секции разной ширины. |
+| **2** | Заметная несоосность: карточки разной высоты, текст «прилип», разные контейнеры. |
+| **1** | Всё рассыпано, нет осей и ритма. |
+**Типичный провал:** три карточки с разной высотой и «плавающими» CTA.
+
+### К6. Воздух и плотность — вес 8%
+**Что оцениваем:** секции дышат (96–140px desktop, 56–72 mobile); внутри карточек 24–32px; нет «каши» и пустых провалов; плотность соответствует типу продукта (лендинг vs дашборд).
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Ритм воздуха идеальный: контент сгруппирован, между группами — простор, внутри — плотно и аккуратно. |
+| **4** | Хорошо дышит, но 1–2 секции тесноваты/разрежены; отступы однородны. |
+| **3** | Средне: местами «прилипло», местами пусто; плотность не всегда подчинена смыслу. |
+| **2** | Тесно (всё в рамках и без отступов) или чрезмерно пусто; блоки не сгруппированы. |
+| **1** | Контент свален в кучу или разбросан по экрану без логики. |
+**Типичный провал:** 24px между всеми секциями и 0 воздуха внутри карточек.
+
+### К7. Компоненты и состояния — вес 8%
+**Что оцениваем:** все состояния (default/hover/focus/active/disabled/loading/error), формы с подсказками и ошибками, таблицы, модалки, пустые состояния, скелетоны; компоненты в реальном контексте.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Витрина/страницы показывают все состояния, формы живые (ошибка/успех/disabled), empty и loading продуманы, таблица удобна. |
+| **4** | Большинство состояний есть, 1–2 не хватает/выглядят неаккуратно; формы с ошибками. |
+| **3** | Базовые состояния есть, но focus/disabled/loading спорные; empty-состояния дефолтные; формы «плоские». |
+| **2** | Только default+hover; ошибки generic, таблицы ломаются, модалки без фокуса. |
+| **1** | Компоненты несостоятельны: нет подписей, кнопки-дивы, формы без валидации. |
+**Типичный провал:** «красивые кнопки без состояний» и empty «Нет данных».
+
+### К8. Консистентность — вес 7%
+**Что оцениваем:** единые радиусы/тени/иконки/термины/CTA между экранами; одинаковые компоненты выглядят одинаково; обе темы и 5 пресетов не ломают друг друга; повторяющиеся паттерны предсказуемы.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Один визуальный язык на всех экранах: компоненты, отступы, иконки, тон текста; темы переключаются без сюрпризов. |
+| **4** | Язык единый, но 1–2 отступления (другая кнопка/радиус/тон). |
+| **3** | В целом похоже, но заметны разные радиусы/тени/иконки от экрана к экрану. |
+| **2** | Каждая страница «своя»: разные стили, термины, состояния. |
+| **1** | Хаос: три набора кнопок и два шрифта в одном продукте. |
+**Типичный провал:** showcase и dashboard выглядят как разные продукты.
+
+### К9. Детали и полировка — вес 6%
+**Что оцениваем:** оптические поправки, выравнивание иконок, табличные цифры, подчёркивания ссылок, selection/скроллбар, фокус-кольцо, микроотступы, отсутствие обрезки и «сирот»; движок в 1–2 signature-деталях.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Мелочи радуют: ровные иконки, аккуратные цифры, корректные кавычки, тонкий фокус, никакой обрезки — уровень Linear/Stripe. |
+| **4** | Полировка хорошая, но 2–3 мелочи (иконка на 1px, висячий предлог, неудачный скроллбар). |
+| **3** | В целом аккуратно, но чувствуется «недокручено»: оптические сдвиги, разнобой отступов, сырые детали. |
+| **2** | Много мелких дефектов, обрезка текста, «пляшущие» цифры. |
+| **1** | Небрежно: сломанные иконки, обрезанный контент, ошибки в типографике. |
+**Типичный провал:** иконка ниже базовой линии текста во всех кнопках.
+
+### К10. Адаптив и мобильный — вес 5%
+**Что оцениваем:** 390/768/1440; нет горизонтального скролла; таблицы в контейнере; тач-цели ≥44px; мобильная композиция, а не сжатый десктоп; ничего не обрезано.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | На 390px всё читается, ничего не едет, тапы крупные, sticky CTA уместен, таблица скроллится внутри, порядок блоков продуман. |
+| **4** | Мобильная версия рабочая, но 1–2 шероховатости (узкий отступ, мелкая подпись, неидеальный порядок). |
+| **3** | В целом работает, но заметно «сжатие» десктопа: мелкий текст, лишние элементы, неудобные тапы. |
+| **2** | Есть overflow/обрезка/мелкие тапы, таблица ломается, навигация неудобна. |
+| **1** | На 390px страница неюзабельна. |
+**Типичный провал:** горизонтальный скролл из-за таблицы и 12px текста.
+
+### К11. Доступность — вес 4%
+**Что оцениваем:** контраст AA, клавиатура (Tab/focus/Escape/focus trap), семантика (landmarks, h1, порядок), alt/aria, не только цвет, reduced-motion. **Блокер:** axe critical/serious > 0.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Контраст AA, видимый фокус на всех элементах, семантика и aria в порядке, reduced-motion, статусы дублируются текстом. |
+| **4** | Почти всё в порядке, 1–2 незначительных недочёта (alt, подпись, фокус). |
+| **3** | Контраст в основном ок, но фокус частичный/подписи слабые; есть замечания axe minor. |
+| **2** | Провалы контраста, нет focus-visible, div-кнопки, статусы только цветом. |
+| **1** | axe critical, интерфейс недоступен с клавиатуры. |
+**Типичный провал:** `outline:none` и серый текст 2.4:1.
+
+### К12. Оригинальность vs польза — вес 3%
+**Что оцениваем:** не шаблон и не AI-slop; есть signature-деталь; при этом оригинальность не мешает ясности и скорости. Оригинальность без пользы — минус, не плюс.
+| Уровень | Что видно на скриншоте |
+|---|---|
+| **5** | Запоминается одной деталью, но интерфейс остаётся очевидным и удобным; не похоже на шаблон. |
+| **4** | Есть характер, идея работает на задачу; 1–2 «общих» места. |
+| **3** | Аккуратно, но «видел такое у 20 компаний»; signature-детали нет или она случайна. |
+| **2** | Шаблон/AI-slop: те же карточки, градиенты, стекло; либо «арт» в ущерб функции. |
+| **1** | Откровенная копия или дизайн, мешающий пользоваться. |
+**Типичный провал:** «необычный» hero, из-за которого не видно, чем занимается клиника.
+
+## Подсчёт и пороги
+
+```
+Итог = Σ(оценка_i × вес_i)   i = 1..12
+Сдача: Итог ≥ 4.40  И  min(оценка_i) ≥ 4  И  нет P0-блокеров
+```
+
+Пример: 5,4,5,4,4,5,4,5,4,4,4,3 при весах выше → 4.42 — **сдано**, но К12=3 → **не сдано** (ни один <4).
+При 4.44 без блокеров — сдано. При 4.6 с axe critical — **не сдано**.
+
+**Автоматический блокер (вне баллов):**
+- axe critical/serious > 0;
+- горизонтальный overflow на 390px;
+- текст ниже 4.5:1 в смысловых местах;
+- сломанные состояния (кнопка без фокуса, форма без ошибок);
+- битые шрифты/изображения, ошибки в консоли на ключевых страницах.
+
+## Чек-лист быстрой проверки (10 минут)
+
+| Тест | Как | Что ловит | Порог |
+|---|---|---|---|
+| **5 секунд** | Открыть, отвернуться, посмотреть | Непонятно, что это и что делать | за 5 сек читаются смысл + главное действие |
+| **Squint test** | Прищуриться / blur 8px | Провалы иерархии, «серая каша» | главный акцент виден, блоки различимы |
+| **Grayscale** | DevTools → Rendering → Grayscale / `filter:grayscale(1)` | Всё держится только на цвете | структура и статусы понятны без цвета |
+| **200% zoom** | Ctrl+= до 200% | Мелкий текст, поломки сетки | текст читаем, ничего не обрезано |
+| **390px** | DevTools device mode 390×844 | Overflow, мелкие тапы, обрезка | `scrollWidth ≤ innerWidth`, тапы ≥44px |
+| **768px** | Планшет | Промежуточные поломки сетки | плитки не рвутся, меню работает |
+| **Тёмная тема** | Переключить `data-theme=dark` | Инверсия, нечитаемый акцент, белые SVG | контраст AA, слои и тени читаются |
+| **Keyboard** | Tab/Shift+Tab/Escape/Enter | Нет фокуса, ловушки, нерабочие действия | фокус видим на всех интерактивных, Escape закрывает модалку |
+| **axe** | `node tools/design-qa/audit.mjs <file>` | Контраст, alt, aria, landmarks | critical/serious = 0 |
+| **Reduced motion** | DevTools → Emulate prefers-reduced-motion | Контент, скрытый анимацией | контент виден, анимаций нет |
+
+## Шаблон отчёта критика
+
+```markdown
+# Дизайн-ревью: <страница / компонент / продукт>
+**Контекст:** <аудитория; задача экрана; что важнее — доверие / скорость / плотность / конверсия>
+**Материалы:** <пути к скриншотам: desktop 1440 light, 390, dark; ссылка/файл>
+**Вердикт:** SHIP / NEEDS WORK / REDESIGN
+
+## Оценка
+| # | Критерий | Вес | Балл | Комментарий (1 строка) |
+|---|---|---|---|---|
+| К1 | Первое впечатление / концепция | 15% | 5 | ... |
+| К2 | Иерархия и маршрут взгляда | 12% | 4 | ... |
+| К3 | Типографика | 12% | 4 | ... |
+| К4 | Цвет и контраст | 10% | 4 | ... |
+| К5 | Сетка, выравнивание, ритм | 10% | 4 | ... |
+| К6 | Воздух и плотность | 8% | 5 | ... |
+| К7 | Компоненты и состояния | 8% | 4 | ... |
+| К8 | Консистентность | 7% | 5 | ... |
+| К9 | Детали и полировка | 6% | 4 | ... |
+| К10 | Адаптив и мобильный | 5% | 4 | ... |
+| К11 | Доступность | 4% | 4 | ... |
+| К12 | Оригинальность vs польза | 3% | 4 | ... |
+**Итог:** X.XX / 5 · минимум по критериям: Y · блокеры: нет/есть
+
+## Первое впечатление (5 секунд)
+<Что понятно сразу; что пришлось искать; какое чувство производит экран>
+
+## P0 — блокеры (без них не сдаём)
+1. **Что вижу:** <...> (скрин: <путь>)
+   **Почему:** <...>
+   **Фикс:** <конкретно: селектор/значение/токен, напр. H1 48→72px, contrast #999→--ink-2>
+2. ...
+
+## P1 — важное (до сдачи)
+1. ...
+
+## P2 — полировка (после сдачи, если есть время)
+1. ...
+
+## Что уже хорошо (обязательно 3–5 пунктов)
+- ...
+
+## Проверено
+- [ ] 1440 desktop (light) · [ ] 390 mobile · [ ] 768 tablet · [ ] dark
+- [ ] 5 сек / squint / grayscale / 200% zoom
+- [ ] keyboard/focus · [ ] axe critical/serious = 0 · [ ] reduced-motion
+- [ ] нет horizontal overflow на 390
+
+## После правок
+<новые скриншоты, повторный балл, что исправлено>
+```
+
+## Как критиковать, чтобы это работало
+
+- **Пиши в терминах экрана, а не кода:** «на экране три равных акцента», а не «bad hierarchy».
+- **Всегда давай значение:** «увеличить H1 до 72–88px», «радиус карточек 24→14px», «строка 110→66ch».
+- **Не больше 5–7 правок за итерацию:** иначе исполнитель распыляется и ломает сделанное.
+- **Оценивай результат, а не намерение:** «задумано красиво» не считается, если на скриншоте не видно.
+- **Сомневаешься между 4 и 3 — ставь 3,** между 4 и 5 — ставь 4; 5 — только уровень Linear/Stripe/Apple.
+- **Каждая итерация заканчивается скриншотом** — без «до/после» критика не принимается.

package/skills/wow-design/references/design-brief-template.md

@@ -0,0 +1,48 @@
+# Шаблон Design Brief (заполняется до кода)
+
+> Часть навыка wow-design. ≈0.9k токенов. Читать, когда: заполняешь арт-брифинг до кода.
+
+> 5–10 минут. Без него не начинай вёрстку. Заполнять можно прямо в ответе пользователю или в файле проекта
+> `docs/design-brief.md`.
+
+## 1. Задача
+- **Что делаем:** <страница / лендинг / дашборд / форма / компонент / апгрейд>
+- **Пользователь:** <кто, в каком контексте, с какого устройства>
+- **Главная задача экрана:** <одно действие/понимание, ради которого всё>
+- **Вторичные задачи:** <...>
+- **Что важно:** <доверие / скорость / конверсия / плотность данных / премиальность>
+
+## 2. Арт-направление
+- **3 прилагательных настроения:** <например: спокойный, точный, человечный>
+- **Пресет:** `aurora | graphite | editorial | warm | swiss` (см. `wow-design/references/presets.md`)
+- **Референс 1 (что крадём конкретно):** <ссылка/название → приём>
+- **Референс 2:** <...>
+- **Анти-референс (чего избегаем):** <...>
+- **Signature-деталь (одна!):** <редакционные цифры / эмблема / вертикальный текст / монограммы / ...>
+
+## 3. Токены и бренд
+- **Акцент (hex/OKLCH):** <или из пресета>
+- **Фон/поверхности:** <тёплая бумага / белый / графит>
+- **Шрифты:** display <Lora/Unbounded/Golos>, body Golos Text; если есть бренд-шрифт — <...>
+- **Радиусы:** <из пресета>
+- **Тёмная тема:** нужна? <да/нет/обязательна>
+
+## 4. Содержимое
+- **Экраны/секции (по порядку):** 1) hero: <заголовок-идея> 2) ... 3) ...
+- **Главный CTA:** <текст> · **Вторичный:** <текст>
+- **Факты/цифры для proof:** <3–4>
+- **Откуда контент:** <реальный / придумать правдоподобный / дан пользователем>
+
+## 5. Ограничения
+- **Стек:** <React+Vite / Laravel Blade / Bitrix+Aspro / статический HTML>
+- **Что нельзя ломать:** <существующие классы, тема, роуты, шаблон>
+- **Браузеры/устройства:** <...>
+- **Доступность:** AA обязателен.
+
+## 6. Критерии приёмки
+- [ ] First impression 1440×900 = «премиально/уместно»
+- [ ] Понятно за 5 секунд, что это и что делать
+- [ ] 390px без overflow, читаемо, тапы ≥ 44px
+- [ ] Тёмная тема проверена
+- [ ] Скриншоты приложены, рубрика ≥ 4.4/5, ни один критерий < 4
+- [ ] axe: critical/serious = 0

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

@@ -0,0 +1,203 @@
+# 02 · Референсы — 32 сайта с разбором
+
+> Часть навыка wow-design. ≈7.9k токенов. Читать, когда: выбираешь референс под задачу и приём
+> для арт-брифа.
+
+> Как пользоваться: крадём **приём, пропорции, паттерн, тон** — не внешний вид целиком.
+> Каждая карточка: что именно украсть → какая фишка → что НЕ копировать. Тег `→ пресет`
+> показывает, в какой палитре AURORA приём раскроется лучше всего.
+> Ссылки проверены поиском/фетчем в ноябре 2026; сайты живут и меняются — перед копированием
+> приёма открой и посмотри текущее состояние.
+>
+> Формула: **1 референс на страницу** (не 10), **1 приём оттуда** (не весь сайт), **1 адаптация**
+> под наш бриф (типографика вместо фото, русский язык, токены AURORA).
+
+## A. Премиальные клиники и медцентры (8)
+
+### 1. Mayo Clinic — [mayoclinic.org](https://www.mayoclinic.org/) · → aurora
+**Что украсть:** task-first навигация («Find a doctor», «Request an appointment», «Locations» — тремя крупными путями); поиск как один из главных элементов; доверие через факты и цифры, а не через декор; спокойная палитра с сильным синим акцентом.
+**Фишка:** первый экран отвечает на вопрос «что мне сделать», а не «кто мы» — три равных пути пациента и короткий поиск.
+**Не копировать:** мега-меню глубиной в 4 уровня, фото-карусели, обилие баннеров и промо-плашек.
+
+### 2. Cleveland Clinic — [my.clevelandclinic.org](https://my.clevelandclinic.org/) · → aurora
+**Что украсть:** разделение «пациенту / врачу / исследователю»; patient portal как заметный, но не кричащий CTA; библиотека знаний как отдельный продукт с понятной иерархией.
+**Фишка:** паттерн «Find care» — единый блок выбора: специальность + расположение + страхование, всё в одной строке.
+**Не копировать:** рекламные баннеры и виджет-перегруз; длинные списки отделений на первом экране.
+
+### 3. Charité — [charite.de](https://www.charite.de/en/) · → swiss
+**Что украсть:** институциональная сдержанность и строгая сетка; честная плотность информации для большой организации; переключатель языка и чёткое разделение аудиторий; маленькие, но аккуратные капс-лейблы.
+**Фишка:** крупная академическая организация умеет выглядеть строго и ясно без «продающих» картинок.
+**Не копировать:** мелкий текст и академическую плотность; длинные текстовые простыни на первом экране.
+
+### 4. One Medical — [onemedical.com](https://www.onemedical.com/) · → warm
+**Что украсть:** тёплый человеческий тон; benefit-first блоки («same-day care», «24/7 virtual care»); прозрачные тарифы/членство как отдельный ясный блок; дружелюбная типографика без «детскости».
+**Фишка:** медицинский сервис говорит как сервис, а не как больница: короткие фразы, глаголы, польза в заголовке.
+**Не копировать:** лайфстайл-фото людей, app-промо блоки, слишком расслабленный тон («веселее, чем надо») для госбольницы.
+
+### 5. МЕДСИ — [medsi.ru](https://medsi.ru/) · → aurora
+**Что украсть:** три главных пути — «записаться», «врачи», «цены/программы»; карточки направлений с понятной структурой; работа с сетью филиалов (город/адрес) как фильтр, а не как список.
+**Фишка:** навигация «по задаче пациента» (запись, результаты, программы), а не «по отделам клиники».
+**Не копировать:** перегруз акциями и слайдерами; разнородные баннеры, ломающие ритм; обилие бейджей «скидка/акция».
+
+### 6. Европейский медицинский центр (EMC) — [emcmos.ru](https://www.emcmos.ru/) · → aurora
+**Что украсть:** премиальную сдержанность палитры; крупные заголовки-обещания с подзаголовком-конкретикой; структуру «программы/специализации» как каталог с быстрым переходом к записи.
+**Фишка:** сочетание «дорогой» типографики и очень простых путей к действию — премиальность не мешает конверсии.
+**Не копировать:** зависимость от фотографий интерьеров (нам нельзя) и длинные тексты «о центре» на первом экране.
+
+### 7. Клиника «Чайка» — [chaika.com](https://chaika.com/) · → aurora / editorial
+**Что украсть:** спокойную зелёно-нейтральную палитру, близкую AURORA; карточки врачей с монограммами вместо фото; редакционный ритм секций и аккуратные волосяные линии.
+**Фишка:** премиальная клиника без «золота и мрамора» — дорого выглядит за счёт воздуха и типографики.
+**Не копировать:** тяжёлые мегаменю с десятками пунктов; обилие декоративных фотографий.
+
+### 8. СберЗдоровье — [sberhealth.ru](https://sberhealth.ru/) · → graphite / aurora
+**Что украсть:** продуктовые паттерны записи к врачу: выбор специалиста → слот → подтверждение; карточки врачей с рейтингом и ценой; понятные статусы консультации.
+**Фишка:** медицинский сервис как продукт: прозрачные шаги и состояния вместо «позвоните нам».
+**Не копировать:** промо-блоки и баннеры поверх контента; смешение маркетинга и продукта на одном экране.
+
+## B. Продуктовые SaaS (9)
+
+### 9. Linear — [linear.app](https://linear.app/) · → graphite
+**Что украсть:** продукт-showcase вместо абстрактных обещаний — реальные экраны в аккуратной рамке; плотная и точная типографика; сдержанный тёмный маркетинг; клавиатурные подсказки (`⌘K`, `C`) как часть бренда; короткие фразы-заголовки.
+**Фишка:** каждый экран на лендинге — настоящий UI, а не сток-иллюстрация; доверие рождается из качества продукта.
+**Не копировать:** тёмный фон с низкоконтрастным серым текстом в маркетинге; «Linear-подобные» фиолетовые отсветы без их дисциплины.
+
+### 10. Stripe — [stripe.com](https://stripe.com/) · → aurora / graphite
+**Что украсть:** типографику документации и лендинга (крупный заголовок → конкретный lead → пример кода/демо); щедрый воздух; аккуратные «сегментные» акценты для продуктов; таблицы и код как визуальный материал.
+**Фишка:** сложный финансовый продукт объясняется через примеры и точные формулировки, а не через «инновационность».
+**Не копировать:** радужный анимированный градиент в hero — это их бренд-ход 2020-х, у нас он читается как AI-штамп; тяжёлые текстовые полотна.
+
+### 11. Vercel — [vercel.com](https://vercel.com/) · → swiss / graphite
+**Что украсть:** монохромную дисциплину и экстремально чистое пространство; типографику как главный визуальный элемент; один смысловой акцент; «triangle» как единственную signature-деталь.
+**Фишка:** страница без цвета выглядит «технически дорого» — за счёт сетки, воздуха и типографики.
+**Не копировать:** холодный ч/б без тёплого слоя (для клиники нужна бумажная теплота); копирование их треугольника/логотипа.
+
+### 12. Raycast — [raycast.com](https://www.raycast.com/) · → graphite
+**Что украсть:** тёмный продуктовый UI с настоящими скриншотами; command palette как центральный паттерн; kbd-капсулы для шорткатов; сетка фич с едиными иконками и короткими подписями; аккуратные «glow»-отсветы под скриншотами — очень дозированно.
+**Фишка:** клавиатура как основной сценарий — интерфейс выглядит быстрым ещё до взаимодействия.
+**Не копировать:** насыщенные градиентные свечения на каждом блоке; перегруз фичами в мелкой сетке.
+
+### 13. Arc — [arc.net](https://arc.net/) · → editorial
+**Что украсть:** смелость цвета и типографики как бренд-приём; тёплый игривый тон в тексте; нестандартные композиции (крупные цифры, диагонали — очень дозированно).
+**Фишка:** как бренд запоминается через смелость, а не через «ещё одну SaaS-страницу».
+**Не копировать:** почти всё целиком: бренд-градиенты, перегруз цветом и анимацией. **Важно:** проект закрывается (Dia/Atlassian), [Arc sunset 22.12.2026](https://www.engadget.com/2294643/the-browser-company-is-officially-killing-arc-on-december-22/) — как «живой эталон» его не брать, только как урок выразительности.
+
+### 14. Framer — [framer.com](https://www.framer.com/) · → editorial
+**Что украсть:** крупную типографику как каркас; демонстрацию продуктов через короткие анимированные примеры; витрину шаблонов как способ показать вкус; чистые сетки кейсов.
+**Фишка:** движение показывает возможности продукта, а не украшает страницу.
+**Не копировать:** анимацию каждого элемента; «все сайты на Framer похожи» — шаблонность сеток и одинаковые карточки.
+
+### 15. Height — [height.app](https://height.app/) · → graphite
+**Что украсть:** тёмный продуктовый интерфейс с плотными списками; статусы-чипы с текстом (не только цветом); реальные экраны задач; сдержанный акцент против нейтралей.
+**Фишка:** плотность данных выглядит дорого, если выровнена по сетке и цифрам (`tabular-nums`).
+**Не копировать:** низкий контраст второстепенного текста; «тёмный = современный» без системы.
+
+### 16. Superhuman — [superhuman.com](https://superhuman.com/) · → graphite
+**Что украсть:** позиционирование через скорость и клавиатуру; один сильный CTA; премиальная простота секций; короткие доказательства (цифры, кейсы) вместо лозунгов.
+**Фишка:** одна фраза «сделайте это быстрее» держит весь лендинг.
+**Не копировать:** эстетику эксклюзивности/листа ожидания; полностью тёмную палитру для медицинского контекста.
+
+### 17. Ramp — [ramp.com](https://ramp.com/) · → aurora / graphite
+**Что украсть:** белый фон + один зелёный акцент; финансовую «чистоту»: крупные цифры, таблицы, кейсы; прозрачные CTA «Get started»; аккуратные логотипы клиентов как доказательство.
+**Фишка:** доверие в финансах строится на точности: цифры, таблицы, факты — а не на декорациях.
+**Не копировать:** стену кейсов и логотипов; мелкий текст в доказательствах.
+
+## C. Бренды и редакционные проекты (6)
+
+### 18. Aesop — [aesop.com](https://www.aesop.com/) · → aurora
+**Что украсть:** «тихую роскошь»: тёплая бумага, serif, минимум цвета; товар/объект как герой; крупные поля и спокойный ритм; сдержанную навигацию и аккуратные капс-лейблы.
+**Фишка:** дорого — это когда странице не нужно кричать: воздух, типографика и один тёплый тон.
+**Не копировать:** аскетизм в ущерб функции (нет цен/быстрых путей) — у клиники задача конверсии важнее позы.
+
+### 19. MUJI — [muji.eu](https://www.muji.eu/) · → swiss
+**Что украсть:** строгую модульную сетку; монохром; товарные сетки с одинаковыми пропорциями; функциональные подписи без маркетингового шума.
+**Фишка:** дисциплина сетки сама по себе создаёт ощущение порядка и качества.
+**Не копировать:** предельную нейтральность (для клиники нужен тёплый акцент и человеческий тон).
+
+### 20. Kinfolk — [kinfolk.com](https://www.kinfolk.com/) · → editorial
+**Что украсть:** редакционную сетку с крупным воздухом; типографику как структуру (а не украшение); медленный ритм чтения; асимметрию текста и изображения.
+**Фишка:** страница «дышит» — плотность подчинена ритму, а не наоборот.
+**Не копировать:** зависимость от больших фотографий (по брифу фото запрещены) и очень длинные вступления.
+
+### 21. Monocle — [monocle.com](https://monocle.com/) · → editorial
+**Что украсть:** информационно-плотный редакционный дизайн: мелкие капс-лейблы, списки, номера секций, микс serif + sans; понятную иерархию «заголовок → лид → мета».
+**Фишка:** «журнальная» плотность не мешает читать, потому что каждый элемент выровнен и промаркирован.
+**Не копировать:** плотность без адаптива — на 390px такие сетки ломаются первыми.
+
+### 22. The New York Times — [nytimes.com](https://www.nytimes.com/) · → editorial
+**Что украсть:** классическую иерархию заголовков; волосяные линии-разделители; модули историй с чёткими уровнями; читаемую длину строки и аккуратную типографику в теле.
+**Фишка:** правила и линии создают структуру без рамок и теней.
+**Не копировать:** рекламный шум, paywall-оверлеи, перегруз модулями на первом экране.
+
+### 23. Apple — [apple.com](https://www.apple.com/) · → graphite / swiss
+**Что украсть:** хореографию одного сообщения на экран; огромную типографику; один CTA на секцию; чередование «тёмных» и «светлых» секций для ритма.
+**Фишка:** каждый экран — одна мысль, один продукт, одно действие.
+**Не копировать:** скролл-джек и зависимость от продуктовых фото; холодную безэмоциональность.
+
+## D. Российские сайты (9) — с пометками
+
+### 24. Т-Банк — [tbank.ru](https://www.tbank.ru/) · → aurora (акцент — жёлтый/чёрный)
+**Что украсть:** плоский бренд-цвет + чёрная типографика; карточки продуктов с benefit-first заголовками; короткие фразы и цифры; ясные CTA «оформить/открыть».
+**Фишка:** один сильный бренд-цвет работает как signature без единого градиента.
+**Не копировать:** жёлтый на больших площадях (у нас акцент изумруд/медь), банковский промо-шум, ставки/бонусы в каждом блоке.
+
+### 25. Яндекс — [yandex.ru](https://yandex.ru/) · → graphite / swiss
+**Что украсть:** функциональную плотность и ясные пути; поиск как центральный элемент; сдержанные продуктовые карточки; системность иконок.
+**Фишка:** интерфейс-инструмент: всё на своих местах, ничего лишнего.
+**Не копировать:** портальную плотность и «много всего на первом экране»; пёстрые сервисные иконки.
+
+### 26. Ozon — [ozon.ru](https://www.ozon.ru/) · → graphite (плотный продуктовый UI)
+**Что украсть:** иерархию цены (крупно) vs вторичных данных (мелко); карточку товара с фиксированными пропорциями; фильтры в сайдбаре; sticky-элементы при скролле.
+**Фишка:** как из плотного каталога сделать читаемую сетку с помощью типографики и отступов.
+**Не копировать:** бейджи «скидка/хит/новинка» на каждом элементе, акционные плашки, счётчики и таймеры.
+
+### 27. Сбер — [sber.ru](https://www.sber.ru/) · → swiss
+**Что украсть:** корпоративное спокойствие и предсказуемую навигацию; зелёный как единственный акцент; продуктовые секции с одинаковыми правилами.
+**Фишка:** крупный корпоративный сайт держит единый визуальный язык на десятках страниц.
+**Не копировать:** одинаковые карточки-кирпичи и канцелярский тон; перегруз продуктами в первом экране.
+
+### 28. Додо Пицца — [dodopizza.ru](https://dodopizza.ru/) · → warm
+**Что украсть:** живой tone of voice на русском; понятное меню с ценами и быстрым добавлением; карточки товаров с одной доминантой (название/цена); дружелюбные, но не детские формулировки.
+**Фишка:** бренд говорит человеческим языком — это повышает доверие сильнее, чем «premium»-эстетика.
+**Не копировать:** избыточную игривость и яркие плашки — для клиники неуместно; сток-фото еды (нам нельзя фото).
+
+### 29. Авито — [avito.ru](https://www.avito.ru/) · → graphite
+**Что украсть:** поиск и фильтры как главный инструмент; карточки объявлений с чёткой иерархией (цена → название → мета); сохранённые фильтры; пустые состояния с подсказками.
+**Фишка:** паттерны каталога, которые масштабируются на тысячи записей — идеально для таблиц заявок и врачей.
+**Не копировать:** рекламные баннеры, перегруз цвета в карточках, «срочно/торг»-бейджи.
+
+### 30. Туту — [tutu.ru](https://www.tutu.ru/) · → graphite
+**Что украсть:** формы поиска с ясными полями и дефолтами; степперы (пассажиры, даты); подсказки и валидация на месте; блок доверия (оплата, поддержка) рядом с CTA.
+**Фишка:** сложная форма может выглядеть просто, если каждый шаг подписан и предсказуем.
+**Не копировать:** перегруз форм на первом экране; несколько конкурирующих CTA в одном блоке.
+
+### 31. Т—Ж — [t-j.ru](https://t-j.ru/) · → editorial
+**Что украсть:** редакционную типографику на русском: крупные заголовки, узкая строка, аккуратные подзаголовки; карточки статей с метаданными; читаемый ритм длинных материалов.
+**Фишка:** русский текст может выглядеть журнально и дорого без единой фотографии — за счёт типографики.
+**Не копировать:** цветные плашки-акценты в избытке; очень длинные лиды.
+
+### 32. Госуслуги — [gosuslugi.ru](https://www.gosuslugi.ru/) · → graphite
+**Что украсть:** паттерны сложных форм и статусов: пошаговость, понятные подписи, статус заявки, «что дальше»; доступность для широкой аудитории; консервативную, но ясную иерархию.
+**Фишка:** сервис для всех — хороший тест типографики и доступности на «недизайнерской» аудитории.
+**Не копировать:** канцелярский стиль, плотность и мелкий текст; тяжёлые таблицы без воздуха.
+
+---
+
+## Быстрые связки: задача → референсы → пресет
+
+| Наша задача | Смотреть в первую очередь | Пресет AURORA |
+|---|---|---|
+| Лендинг клиники (hospital.html) | Mayo, Charité, Чайка, EMC, Aesop | `aurora` |
+| Дашборд / продуктовый UI | Linear, Height, Raycast, Авито | `graphite` |
+| Витрина компонентов (showcase) | Stripe, Linear, Material 3 (системность) | все 5 |
+| Формы и запись | Туту, Госуслуги, СберЗдоровье | `graphite` / `aurora` |
+| Редакционная страница / новости | NYT, Monocle, Т—Ж, Kinfolk | `editorial` |
+| Строгая B2B/отчётность | Vercel, Swiss-традиция, Сбер | `swiss` |
+| Тёплый человечный сервис | One Medical, Додо, Aesop | `warm` |
+
+## Чего не делать с референсами
+
+1. **Не копировать бренд-цвет и логотип** — берём приём композиции, а не айдентику.
+2. **Не тащить фото-зависимость** — по брифу внешние фото запрещены; заменяем типографикой, SVG, монограммами.
+3. **Не копировать плотность без адаптива** — Monocle/Charité на 390px ломаются; сначала мобильная композиция.
+4. **Не собирать «франкенштейна»** — один референс на страницу, один приём оттуда.
+5. **Проверять актуальность** — сайты меняются; Arc закрывается, Framer-шаблоны устаревают. Смотрим текущее состояние и берём только то, что работает сейчас.