124 lines
8.8 KiB
Markdown
124 lines
8.8 KiB
Markdown
<!-- vibe42-design-version: v8-design-presets-2026-09-18:midnight -->
|
||
# Дизайн проекта: 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
|
||
<!DOCTYPE html>
|
||
<!-- Дизайн: Midnight. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="dark">
|
||
<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 этот стиль не требует создания сайта.
|