Design system — Vibe42 песочница

Базовые цвета и типографика для лендингов. Начинай с этого, можно отклоняться.

Палитра

Token	Hex	Использование
`--ink`	`#0F1218`	Тёмный фон / основной текст
`--cyan`	`#00E5FF`	Основной акцент (кнопки, лого)
`--cyan-50`	`#E8FCFF`	Светлая подложка для акцентов
`--white`	`#FFFFFF`	Основной фон
`--gray-500`	`#5B6573`	Вторичный текст
`--gray-100`	`#F2F4F7`	Сепараторы / тонкие фоны

Типографика

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`

<!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

<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= — предзаполненное сообщение.

Форма заявки без бэкенда

<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)

<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, без файла)

<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. Вставь как есть:

<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="320" style="border:0;border-radius:12px" loading="lazy"></iframe>

Плавные появления при скролле (IntersectionObserver)

<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 любой секции/карточке — появится плавно при прокрутке.

6.6 KiB Raw Permalink Blame History Unescape Escape