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
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 (большие карточки)

Кнопки

.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`

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

4.2 KiB Raw Blame History Unescape Escape

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

Палитра

Типографика

Лейаут

Кнопки

Стартер index.html

Чем НЕ пользоваться

Чем МОЖНО (если очень надо)

4.2 KiB

Raw Blame History

Стартер `index.html`