# Design system — Vibe42 песочница Базовые цвета и типографика для лендингов. Начинай с этого, можно отклоняться. ## Палитра | Token | Hex | Использование | |-------|-----|---------------| | `--ink` | `#0F1218` | Тёмный фон / основной текст | | `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) | | `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов | | `--white` | `#FFFFFF` | Основной фон | | `--gray-500` | `#5B6573` | Вторичный текст | | `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны | ## Типографика ```css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; ``` | Уровень | Размер | Вес | line-height | |---------|--------|-----|-------------| | h1 (hero) | 56px | 800 | 1.05 | | h2 (section) | 36px | 700 | 1.15 | | h3 | 22px | 700 | 1.3 | | body | 17px | 400 | 1.6 | На мобиле — h1 → 36px, h2 → 28px. ## Лейаут - max-width контента: **1140px** - секция: `padding: 80px 24px` (мобила: `48px 20px`) - border-radius: `8px` (кнопки), `16px` (карточки) ## Стартер `index.html` ```html Мой проект

Заголовок

Подзаголовок — пара предложений о чём это.

Начать

Секция

Контент карточки.
Контент карточки.
``` ## Что НЕ юзать - Bootstrap / Material UI / Chakra / Ant Design — слишком тяжело - Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG - jQuery — vanilla JS достаточно ## Что МОЖНО (если очень надо) - **Tailwind через CDN**: `` - **Placeholder картинки**: `https://picsum.photos/800/600` - **Google Fonts через ``** в head ## 📦 Готовые рецепты (используй их, не изобретай) ### Фото без ключей - Детерминированные (одно и то же слово → одна и та же картинка): `https://picsum.photos/seed/coffee/800/600`. Меняй `coffee` на любое слово-seed. - Тематические (по тегу): `https://loremflickr.com/800/600/coffee` — тег прямо в URL (`/coffee`, `/mountains`, `/food`). Тема не гарантируется на 100%, но обычно в кассу. ### Кнопка WhatsApp ```html Написать в WhatsApp ``` `7XXXXXXXXXX` — номер в межд. формате без `+`. `text=` — предзаполненное сообщение. ### Форма заявки без бэкенда ```html
``` Скажи юзеру: замени `EMAIL` на свою почту — заявки будут приходить туда (первая заявка активирует, письмо-подтверждение придёт один раз). ### Google Fonts (максимум 2 шрифта: один display + один text) ```html ``` В CSS: `font-family:'Unbounded',sans-serif` для заголовков, `'Manrope',sans-serif` для текста. ### Favicon-эмодзи (inline SVG data-URI, без файла) ```html ``` Меняй эмодзи `☕` на подходящее теме. ### Карта (Google Maps embed, без ключа) На maps.google.com найди место → «Поделиться» → «Встроить карту» → скопируй iframe. Вставь как есть: ```html ``` ### Плавные появления при скролле (IntersectionObserver) ```html ``` Добавь класс `reveal` любой секции/карточке — появится плавно при прокрутке.