# 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 | | small | 14px | 400 | 1.5 | На мобиле — h1 уменьши до 36px, h2 до 28px. ## Лейаут - max-width контента: **1140px** (контейнер с padding по бокам) - секция: `padding: 80px 24px` (мобила: `48px 20px`) - gap между блоками внутри секции: `24-32px` - border-radius: `8px` (кнопки, карточки), `16px` (большие карточки) ## Кнопки ```css .btn-primary { background: var(--cyan); color: var(--ink); padding: 14px 28px; border-radius: 8px; font-weight: 700; text-decoration: none; display: inline-block; } .btn-secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 12px 26px; border-radius: 8px; } ``` ## Стартер `index.html` ```html Мой проект

Заголовок проекта

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

Начать

Секция

Контент карточки.
Контент карточки.
``` ## Чем НЕ пользоваться - Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга - Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG - jQuery — vanilla JS более чем достаточно ## Чем МОЖНО (если очень надо) - **Tailwind через CDN**: `` — для прототипа OK - **Lottie animations через CDN** - **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400` - **Шрифты Google Fonts через ``** в head