# Дизайн проекта: Стандартный дизайн Спокойный светлый интерфейс по DESIGN-6 (Seline Analytics). Тёплый почти белый фон #fafaf9, белые поверхности, тонкая граница #e8e6e5. Основной текст #0c0a09, вторичный #78716c, голубой акцент #3ba6f1 и мягкая подсветка #c1e1f7. Заголовки лёгкие (400), крупные, с плотным межбуквенным интервалом; тело 14–16px. Roobert заменён локальным Inter. Много воздуха, спокойная аналитика, тонкие графики, маленькие подписи. Кнопки-пилюли, карточки 10px (крупные блоки 16px), поля 6px. Допустима очень мягкая тень. Текст на голубой кнопке тёмный для читаемости. Подсвечивай отдельную фразу заголовка голубым фоном, без градиентов. Не копируй название, маскота или данные Seline. ## Как применять Стиль выбран пользователем при создании проекта и сохранён в `.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` и спрайта. Базовая тема — `light`. Не включай автоматическое переключение светлой/тёмной темы. Используй доступные системные/локальные замены шрифтов, указанные выше. Полный визуальный референс: `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 этот стиль не требует создания сайта.