8.6 KiB
Дизайн проекта: Apple
Светлый минимализм по DESIGN.md (Apple). Фон #f5f5f7, белые поверхности, текст #1d1d1f, синяя основная кнопка #0071e3 и ссылки #0066cc. Заголовки 600, крупные (48–64px на широком экране), центрированные на первом экране, спокойная иерархия. Шрифт системный -apple-system с локальным Inter как запасным. Большие отступы между секциями (64px), сильная продуктовая фотография или демонстрация интерфейса, минимум декоративных элементов. Кнопки-пилюли, карточки и поля 8px, тонкие границы #d2d2d7. Не добавляй логотип Apple или названия её продуктов без запроса.
Как применять
Стиль выбран пользователем при создании проекта и сохранён в .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>
<!-- Дизайн: Apple. Сохраняй все пять 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 этот стиль не требует создания сайта.