8.8 KiB
Дизайн проекта: Стандартный дизайн
Спокойный светлый интерфейс по 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
Правь существующий каркас под идею пользователя.
<!DOCTYPE html>
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
<html lang="ru" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Название проекта</title>
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
<link rel="stylesheet" href="design-system/kt-ai-components.css">
<link rel="stylesheet" href="design-system/kt-ai-page.css">
<link rel="stylesheet" href="design-system/vibe-theme.css">
<style>
/* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
a.kt-ai-btn { text-decoration: none; }
</style>
</head>
<body>
<header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in">
<strong>Название</strong>
<span class="kt-ai-spacer"></span>
<a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</a>
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Оставить заявку</a>
</div>
</header>
<section class="kt-ai-hero" data-align="center">
<div class="kt-ai-wrap">
<h1>Главное обещание в одну строку</h1>
<p class="kt-ai-hero-sub">Подзаголовок: кому это и почему стоит остаться.</p>
<div class="kt-ai-hero-actions">
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#contacts">Оставить заявку</a>
<a class="kt-ai-btn" data-size="lg" href="#about">Подробнее</a>
</div>
</div>
</section>
<section id="about" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap">
<div class="kt-ai-section-head">
<h2>Что вы получите</h2>
<p>Одно-два предложения пояснения к секции.</p>
</div>
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
<article class="kt-ai-tile"><h3>Пункт первый</h3><p>Коротко и по делу.</p></article>
<article class="kt-ai-tile"><h3>Пункт второй</h3><p>Коротко и по делу.</p></article>
<article class="kt-ai-tile"><h3>Пункт третий</h3><p>Коротко и по делу.</p></article>
</div>
</div>
</section>
<section id="contacts" class="kt-ai-cta">
<div class="kt-ai-wrap">
<h2>Призыв к действию</h2>
<p>Город, адрес, часы работы — то, что нужно, чтобы дойти.</p>
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#">Написать</a>
</div>
</section>
<footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 Название</span>
<span class="kt-ai-spacer"></span>
<span>Контакты</span>
</footer>
</body>
</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 этот стиль не требует создания сайта.