111 lines
4.2 KiB
Markdown
111 lines
4.2 KiB
Markdown
<!-- vibe42-design-version: v1-2026-06-01 -->
|
||
# 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
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Мой проект</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white)}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||
.btn:hover{background:#1be5ff}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Заголовок проекта</h1>
|
||
<p>Подзаголовок — пара предложений о чём это.</p>
|
||
<a class="btn" href="#section">Начать</a>
|
||
</div>
|
||
</section>
|
||
<section id="section" class="section">
|
||
<div class="container">
|
||
<h2>Секция</h2>
|
||
<div class="card">Контент карточки.</div>
|
||
<div class="card">Контент карточки.</div>
|
||
</div>
|
||
</section>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## Чем НЕ пользоваться
|
||
|
||
- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
|
||
- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
|
||
- jQuery — vanilla JS более чем достаточно
|
||
|
||
## Чем МОЖНО (если очень надо)
|
||
|
||
- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
|
||
- **Lottie animations через CDN**
|
||
- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
|
||
- **Шрифты Google Fonts через `<link>`** в head
|