# seo_mode design system notes

Короткая памятка, чтобы интерфейс не расползался при быстрых итерациях.

## Визуальный тон

- База: светлая Apple-like система, много воздуха, мягкие панели, скругления и спокойный серый фон.
- Главный акцент: тёмный neutral active `#202124 -> #111113`, как у активного этапа и основных submit/action-кнопок.
- Вторичный слой: white glass surfaces/controls через `--nodedc-glass-*`, без отдельных цветных акцентов. Glass-панели должны оставаться прозрачными: материал строится на низкой alpha-подложке, `backdrop-filter` и outline-gradient, а не на глухой белой заливке.
- Избегаем случайной зелени/оранжевого/голубого/фиолета, если это не специально введённый статус.
- Точки ошибок в preview-сайте: розовый marker `#ff4fb8`, активный `#d81b7d`.

## Кнопки

- Primary actions: `Создать проект`, `Анализировать`, будущие основные шаги этапов. Используют тёмный градиент активного этапа.
- Import action: `Выбрать папку`. Использует тот же тёмный neutral active, без отдельного оранжевого акцента.
- Icon actions: копировать, удалить, настройки. Круглые `42x42`, нейтральная светлая поверхность, тонкая граница, мягкая тень.
- Danger icon: нейтральная круглая поверхность в покое, красный значок; красная заливка только на hover.

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

- Заголовки секций: плотные, тёмные, без лишних декоративных цветов.
- Helper copy под инпутами: `13px`, `font-weight: 400`, приглушённый `--muted`, line-height около `1.38`.
- Placeholder: всегда normal/400, приглушённый, без жирности.
- Иконки рядом с заголовками секций выравниваем по первой строке заголовка, а не по центру всего блока с описанием.
- Не смешивать в одной карточке слишком много жирных уровней: жирный только у заголовка и главного действия.

## Карточки и сетки

- Основная ширина страницы: не заужать без причины, держать рабочую ширину около `min(1180px, 100%)`.
- Карточки: светлая полупрозрачная поверхность, `var(--radius-lg/xl)`, тонкая линия `var(--line)`, мягкая тень только на крупных контейнерах.
- Не вкладывать много одинаковых карточек друг в друга без визуальной причины.
- Каждый этап сверху должен быть отдельной логической страницей, а предыдущие настройки на следующих этапах показываем компактно.

## Рабочее правило

Перед новой UI-правкой сначала проверяем, нет ли уже подходящего класса/паттерна. Если стиль повторяется второй раз, выносим его в общий паттерн, а не лепим ещё один локальный костыль.
