# Дизайн проекта: Midnight Тёмная редакционная эстетика по DESIGN-2.md (Origin). Фон #0f1011, карточки #2e2e2e, белый текст, вторичный текст приглушённый. Акцент #847dff, светлый фиолетовый #d1c9ff; розовый и голубой допустимы только как вторичные сигналы. Основная кнопка белая с чёрным текстом. Крупные лёгкие заголовки с засечками (Lyon Display заменён Georgia), тело — локальный Inter; цифры можно моноширинные. Кнопки и поля 8px, карточки 16px, большие блоки 30px. Воздух, плоские поверхности, тонкие линии, отсутствие тяжёлых теней. В таблицах сохраняй компактный sans-serif; огромные serif-заголовки только в hero. Не копируй бренд Origin. Опечатка #2e2e2 в исходнике исправлена на #2e2e2e. ## Как применять Стиль выбран пользователем при создании проекта и сохранён в `.vibe42-design.json`. Сохраняй его при дальнейших правках. Цвета, типографика и форма компонентов из этого документа имеют приоритет над оформлением в примерах KT AI и навыках. Оттуда бери структуру и поведение. В проекте уже есть локальные компоненты `kt-ai-*`, шрифт Inter и иконки. Их токены переопределены в `design-system/vibe-theme.css` под выбранный стиль. Подключай этот файл ПОСЛЕДНИМ после четырёх базовых CSS на каждой странице, включая приложения. Не удаляй его при переходе на React: скопируй design-system в public/ и сохрани все пять подключений. Используй `var(--kt-ai-…)` и `var(--vibe-…)`; не подключай сторонние CSS-фреймворки или удалённые шрифты. Логотип и название — проекта пользователя. Корпоративные логотипы из библиотеки не обязательны. Иконки бери из `design-system/icons/kt-ai-icons.js` и спрайта. Базовая тема — `dark`. Не включай автоматическое переключение светлой/тёмной темы. Используй доступные системные/локальные замены шрифтов, указанные выше. Полный визуальный референс: `design-system/style-reference.md`; он описывает стиль, его бренд и примеры текста переносить не надо. При расхождениях (опечатки, контраст текста, коммерческие шрифты) следуй этому design.md. ## Старт: `index.html` Правь существующий каркас под идею пользователя. ```html Название проекта

Название О нас Оставить заявку

Главное обещание в одну строку

Подзаголовок: кому это и почему стоит остаться.

Оставить заявку Подробнее

Что вы получите

Одно-два предложения пояснения к секции.

Пункт первый

Коротко и по делу.

Пункт второй

Коротко и по делу.

Пункт третий

Коротко и по делу.

Призыв к действию

Город, адрес, часы работы — то, что нужно, чтобы дойти.

Написать

``` ## Блоки страницы (`kt-ai-page.css`) | Класс | Что это | |-------|---------| | `.kt-ai-wrap` | контейнер по центру (1080px). `data-width="narrow"` — 720px, `"wide"` — 1200px | | `.kt-ai-pagehead` + `.kt-ai-pagehead-in` | липкая шапка страницы | | `.kt-ai-hero`, `.kt-ai-hero-sub`, `.kt-ai-hero-actions` | первый экран. `data-align="center"` — по центру | | `.kt-ai-section` + `.kt-ai-section-head` (h2 + p) | обычная секция. `data-divider="true"` — линия сверху | | `.kt-ai-grid` + `.kt-ai-tile` (h3 + p) | сетка плиток «возможности». `data-cols="2"/"4"`, у плитки `data-span="2"/"full"` | | `.kt-ai-tile-icon` | иконка над заголовком плитки — из спрайта ДС (см. «Иконки и логотипы» ниже) | | `.kt-ai-cta` | финальный блок с призывом | | `.kt-ai-pagefoot` | подвал | | `.kt-ai-spacer` | распорка внутри шапки/подвала (толкает остальное вправо) | | `.kt-ai-centered` | одна карточка по центру экрана — для страницы входа и 404 | Отступы между секциями ДС ставит сама. Адаптив (3→2→1 колонка) — тоже, `@media` писать не нужно. ## Элементы (`kt-ai-components.css`) | Класс | Как применять | |-------|---------------| | `.kt-ai-btn` | кнопка / ссылка-кнопка. `data-variant="primary"` — главная, `"ghost"` — прозрачная, `"danger"` — опасная. `data-size="sm"/"lg"` | | `.kt-ai-card` | карточка контента | | `.kt-ai-chip` | статус-пилюля / тег | | `.kt-ai-link` | текстовая ссылка | | `.kt-ai-field` + `.kt-ai-input` / `.kt-ai-textarea` / `.kt-ai-select` | поле формы с подписью | **Один `primary` на экран.** Остальные кнопки — обычные или `ghost`. ## Проверка Проверь мобильный экран, читаемость, фокус клавиатуры и реальные действия кнопок. Коммить design-system/ и .vibe42-design.json вместе с проектом. Для бота, документа или скрипта без UI этот стиль не требует создания сайта.