143 lines
6.6 KiB
Markdown
143 lines
6.6 KiB
Markdown
<!-- vibe42-design-version: v2-recipes-2026-07-07 -->
|
||
# 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
|
||
<!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}
|
||
.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>`
|
||
- **Placeholder картинки**: `https://picsum.photos/800/600`
|
||
- **Google Fonts через `<link>`** в head
|
||
|
||
## 📦 Готовые рецепты (используй их, не изобретай)
|
||
|
||
### Фото без ключей
|
||
- Детерминированные (одно и то же слово → одна и та же картинка): `https://picsum.photos/seed/coffee/800/600`. Меняй `coffee` на любое слово-seed.
|
||
- Тематические (по тегу): `https://loremflickr.com/800/600/coffee` — тег прямо в URL (`/coffee`, `/mountains`, `/food`). Тема не гарантируется на 100%, но обычно в кассу.
|
||
|
||
### Кнопка WhatsApp
|
||
```html
|
||
<a href="https://wa.me/7XXXXXXXXXX?text=Здравствуйте!" style="display:inline-block;background:#25D366;color:#fff;padding:12px 22px;border-radius:8px;font-weight:700;text-decoration:none">Написать в WhatsApp</a>
|
||
```
|
||
`7XXXXXXXXXX` — номер в межд. формате без `+`. `text=` — предзаполненное сообщение.
|
||
|
||
### Форма заявки без бэкенда
|
||
```html
|
||
<form action="https://formsubmit.co/EMAIL" method="POST">
|
||
<input name="name" placeholder="Имя" required>
|
||
<input name="phone" placeholder="Телефон" required>
|
||
<button type="submit">Отправить</button>
|
||
</form>
|
||
```
|
||
Скажи юзеру: замени `EMAIL` на свою почту — заявки будут приходить туда (первая заявка активирует, письмо-подтверждение придёт один раз).
|
||
|
||
### Google Fonts (максимум 2 шрифта: один display + один text)
|
||
```html
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Unbounded:wght@700&display=swap" rel="stylesheet">
|
||
```
|
||
В CSS: `font-family:'Unbounded',sans-serif` для заголовков, `'Manrope',sans-serif` для текста.
|
||
|
||
### Favicon-эмодзи (inline SVG data-URI, без файла)
|
||
```html
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☕</text></svg>">
|
||
```
|
||
Меняй эмодзи `☕` на подходящее теме.
|
||
|
||
### Карта (Google Maps embed, без ключа)
|
||
На maps.google.com найди место → «Поделиться» → «Встроить карту» → скопируй iframe. Вставь как есть:
|
||
```html
|
||
<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="320" style="border:0;border-radius:12px" loading="lazy"></iframe>
|
||
```
|
||
|
||
### Плавные появления при скролле (IntersectionObserver)
|
||
```html
|
||
<style>
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
</style>
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
```
|
||
Добавь класс `reveal` любой секции/карточке — появится плавно при прокрутке.
|