Gibrat_Auganov/hr-indicators
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6abfeadf5b
hr-indicators/design.md

4.2 KiB
Raw Blame History

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