frontend-design

name	frontend-design
description	Эстетическое направление, когда нет дизайн-системы. Типографика, цвет, ритм, плотность. Соседние: theme-factory (готовые темы для артефактов), deck-themes (стартовые темы слайдов); развилка — в design-orchestrator.
when_to_use	Дизайн без бренда / без UI-кита. Когда нужно "просто сделай красиво".

Frontend design

Без референса — без направления. Если у тебя нет ни бренда, ни Figma, ни скриншотов — выбери одно из направлений ниже до начала работы и держись его. Не миксуй три эстетики в одном артефакте.

Дефолтная база (использовать, если ничего не сказано)

• Цвета: мягкий off-white фон (#FAF9F6), тёплый чёрный текст (#111), один акцент через oklch(62% 0.14 25). Никаких насыщенностей выше 0.02 для «белых» и «чёрных».
• Типографика: Helvetica Neue (или системный sans). Один шрифт на весь артефакт. Заголовки тяжелее, тело — regular.
• Радиусы: 4 / 8 / 16 — три уровня, всегда из этого набора.
• Тени: одна — 0 30px 80px rgba(0,0,0,.1). Не множь.
• Отступы: кратно 4. Базовая шкала 4 / 8 / 12 / 16 / 24 / 32 / 48 / 80.

Скажи это вслух пользователю в начале работы: «Использую дефолтную базу — Helvetica, off-white, тёплый акцент».

Альтернативные направления

1. Editorial / журнальный

• Антиква с засечками для заголовков (Source Serif, Spectral, GT Sectra).
• Гротеск 14–16px для тела.
• Длинные строки (60–75 символов).
• Большие верхние/нижние отступы у секций (120px+).
• Палитра: бумага + типографская чёрная + один глубокий акцент (бордовый, индиго).

2. Brutalist / utility

• Моноширинный шрифт + один гротеск.
• Чёрно-белый, либо чёрный + один кричащий цвет (электрический жёлтый, хот-пинк).
• Жирные бордеры (1.5–2px), нулевые радиусы.
• Сетка явно видна, секции границами разделены.

3. Soft / OS-вдохновлённый

• SF Pro / Inter, всегда -0.01em letter-spacing на больших.
• Радиусы 12-20px, тени многослойные мягкие.
• Цвета: молочный фон, тонированные нейтрали, акцент — пастельный.
• Текст 14–17px, line-height 1.4–1.5.

4. Data / dashboard

• Гротеск + табличный mono для чисел (tabular-nums).
• Светлая база, но без off-white — чистый #fff.
• Сетки явные. Бордеры тонкие (1px), цвет rgba(0,0,0,.06).
• Цветные акценты только в графиках, нигде больше.

5. Dark / cinematic

• Фон #0a0a0a или #111.
• Текст не белый, а #e8e6e1 (тёплый off-white).
• Один цветной акцент.
• Большие плашки негативного пространства, фотография на full-bleed.

Правила, общие для всех направлений

• Один шрифт по умолчанию, два максимум. Третий не добавлять без причины.
• Контраст текста к фону ≥ 4.5:1 для основного текста, ≥ 3:1 для крупного (24px+).
• Не центрировать длинный текст. Только заголовки, манифесты, цитаты.
• Не использовать чистый чёрный (#000) на чистом белом (#fff). Выглядит «компьютерно». Сдвинь оба на 5–10%.
• Текст-врап pretty в CSS — улучшает baseline бесплатно.

Цветовая палитра через oklch

Если нужно несколько акцентов одной интенсивности — варьируй только hue:

--accent-1: oklch(62% 0.14 25);   /* теплый */
--accent-2: oklch(62% 0.14 145);  /* зелёный */
--accent-3: oklch(62% 0.14 245);  /* синий */

Все три «звучат» одинаково по громкости — мозг читает их как семейство.

Когда что выбирать

Тип проекта	Направление
Серьёзный B2B	дефолт или soft
Лендинг продукта для разработчиков	brutalist / utility или data
Питч стартапа	editorial или soft
Внутренний инструмент	data / dashboard
Маркетинг / лайфстайл	editorial или dark
Учебный материал	soft, без акцентов

Финальная проверка

• Один раз перечитай весь артефакт.
• Если есть элемент, для которого ты не можешь сказать почему он именно такой — убери или переделай.
• Если всё «работает», но выглядит generic — добавь одну смелую деталь (нестандартный layout, крупный type, неожиданный цвет негативного пространства). Только одну.

Legacy reference

Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-frontend-design.md. Секции там: Пресеты, Как использовать, Не путать, Антипаттерны.

Количественный слой поверх этого скилла

Этот скилл выбирает какое направление. Для насколько дерзко/подвижно/плотно исполнить его (3 числовые шкалы 1-10) плюс механический сканер типовых AI-tells (em-dash, eyebrow-инфляция, AI-purple, три одинаковые карточки и т.д.) — соседний скилл design-taste. Для финальной сверки готового результата с референсом или безопасного редизайна живого кода — design-guardrails.