# Дизайн-система KT AI — по ней собирается весь UI В папке проекта лежит `design-system/` — это **дизайн-система KT AI** (источник: `github.com/erjan-A/kt-ai-design-system`, MIT, версия в `design-system/VERSION`). Весь визуал берётся оттуда: цвета, шрифт, отступы, кнопки, карточки, секции лендинга. **Не выдумывай свой стиль и не тащи чужие фреймворки.** Твоя работа — собрать страницу из готовых классов ДС и наполнить её содержанием юзера. Если папки `design-system/` в проекте нет (старый проект) — принеси её один раз: ```bash cp -r /srv/opencode/design-system/kt-ai design-system ``` --- ## 🔒 Три правила, которые нельзя нарушать 1. **Цвета и размеры — только токенами** `var(--kt-ai-…)`. Сырой hex (`#0F1218`, `#fff`) в вёрстке запрещён: он ломает светлую/тёмную тему. 2. **Никакого Bootstrap / Tailwind / Material / Font Awesome / Google Fonts.** Шрифт (Inter) уже внутри ДС и работает офлайн. Всё, что нужно лендингу, в ДС уже есть. 3. **Свой `
Название О нас Оставить заявку

Главное обещание в одну строку

Подзаголовок: кому это и почему стоит остаться.

Оставить заявку Подробнее

Что вы получите

Одно-два предложения пояснения к секции.

Пункт первый

Коротко и по делу.

Пункт второй

Коротко и по делу.

Пункт третий

Коротко и по делу.

Призыв к действию

Город, адрес, часы работы — то, что нужно, чтобы дойти.

Написать
``` --- ## Блоки страницы (`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` | иконка над заголовком плитки (спрайт — `design-system/icons/`) | | `.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`. ## Токены (`kt-ai-tokens.css`) Цвет: `--kt-ai-bg`, `--kt-ai-bg-soft`, `--kt-ai-fg`, `--kt-ai-fg-muted`, `--kt-ai-fg-faint`, `--kt-ai-border`, `--kt-ai-divider`, `--kt-ai-card-bg`, `--kt-ai-card-border`, `--kt-ai-primary`, `--kt-ai-link`, `--kt-ai-danger`. Отступы: `--kt-ai-space-1…12` (2px → 64px). Скругления: `--kt-ai-radius-md/lg/xl/2xl/3xl/full`. Текст: `--kt-ai-text-xs…3xl`. Вес: `--kt-ai-weight-regular/medium/semibold/bold`. Шрифты: `--kt-ai-font-sans` (Inter), `--kt-ai-font-mono`. **Тема** — атрибут на ``: `data-theme="auto"` (по системной, ставь его по умолчанию), `"light"`, `"dark"`. Проверь страницу в обеих темах — с токенами это бесплатно. --- ## Не лендинг, а приложение (дашборд, таблица, очередь заявок, чат) Тогда экран собирается **не вёрсткой руками, а конфигом**: 1. Возьми `design-system/templates/kt-ai-app-shell.html` — самодостаточный HTML-каркас приложения (без React и npm). 2. Опиши экран JSON-конфигом по `design-system/docs/PRODUCT_CONTRACT.md` и положи его в тег `` внутри каркаса — он сам отрисует таблицу, KPI, фильтры, drawer и темы. 3. Проверь конфиг: `python3 design-system/scripts/validate_product.py config.json --strict` → нужен `0/0`. Полные правила для сложных экранов — `design-system/AGENTS.md`, список компонентов — `design-system/COMPONENTS.md`, приёмка — `design-system/CHECKLIST.md`. Читай их, когда лендинга уже мало. --- ## 📦 Готовые рецепты ### Фото без ключей - Одно и то же слово → одна и та же картинка: `https://picsum.photos/seed/coffee/800/600` - По теме: `https://loremflickr.com/800/600/coffee` (тег прямо в URL) Вставляй с рамкой ДС: `…` ### Кнопка WhatsApp ```html Написать в WhatsApp ``` `7XXXXXXXXXX` — номер в международном формате без `+`. ### Форма заявки без бэкенда ```html
``` Скажи юзеру: замени `EMAIL` на свою почту — заявки будут приходить туда (первая заявка активирует форму). ### Favicon-эмодзи (без файла) ```html ``` ### Карта На maps.google.com: место → «Поделиться» → «Встроить карту» → вставь iframe как есть: ```html ``` ### Плавные появления при скролле ```html ``` --- ## Перед тем как сказать «готово» - [ ] Подключены все четыре CSS из `design-system/`, папка лежит в проекте (не забудь закоммитить её). - [ ] В вёрстке нет сырых hex-цветов и чужих шрифтов. - [ ] Страница нормально выглядит в светлой и тёмной теме и на телефоне (узкое окно). - [ ] Один `data-variant="primary"` на экран, тексты — про юзера, а не «Lorem ipsum».