IlyasBAKT/sozday-analog-sayta-https-ww
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
89938a34b0
sozday-analog-sayta-https-ww/design.md

8.8 KiB
Raw Blame History

Дизайн проекта: 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

Правь существующий каркас под идею пользователя.

<!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 этот стиль не требует создания сайта.