Design System v1.0
Твой
визуальный
язык
Система для рекламных креативов, YouTube-обложек, лендингов, презентаций и чек-листов.
Чёрный · #00B6FB · Белый · Unbounded · MonumentExtended
01
Цвета
Основной — Чёрный
Black
#000000 · Фон
Black Soft
#0A0A0A · Фон alt
Black Card
#111111 · Карточки
Black Border
#1A1A1A · Обводки
Black Hover
#222222 · Ховер
Акцент — Голубой
Blue Deeper
#006FA0
Blue Dark
#0090CC · Кнопки
Blue ★ Главный
#00B6FB
Blue Light
#40CAFF · Ховер
Blue Pale
#80DDFF · Светлое
Белый — текст и элементы
White 100%
#FFFFFF · Заголовки
White 90%
Основной текст
White 60%
Вторичный текст
White 30%
Подсказки, hint
White 6%
UI-поверхности
Акценты для выделения
Purple #A259FF
Green #00E5A0
Orange #FF6B35
Pink #FF3CAC
Градиенты
Blue Gradient
Кнопки, акценты
Dark Fade
Фоны карточек
Blue → Purple
Спецэффекты
Night Blue
Hero-фоны
02
Типографика
MonumentExtended
Главный дисплейный шрифт. Заголовки, обложки, Hero. Только UPPERCASE. Вес: Regular + Ultrabold. Купить / скачать отдельно.
Unbounded
UI-шрифт. Подзаголовки, кнопки, навигация, описания. Google Fonts — бесплатный. Вес 300–900.
ОБУЧЕНИЕ
КУРС ПО SMM
ЧТО ТЫ ПОЛУЧИШЬ
РЕЗУЛЬТАТ
УЧИСЬ БЫСТРО
Программа курса
Изучи стратегии, которые используют ведущие эксперты. Практические задания и обратная связь после каждого урока.
КАТЕГОРИЯ КУРСА
03
Сетка и пространство
Шаг 4px
4
8
12
16
20
24
32
40
48
64
80
Радиусы
xs/4
sm/8
md/12
lg/16
xl/24
2xl/32
full
04
Кнопки
Типы
Glow CTA — для YouTube / лендинга
Размеры
Акцентные цвета
05
Карточки
▶ Видеокурс
Маркетинг
Таргет с нуля
12 уроков · 6 часов · Домашние задания с проверкой
★ Флагман
Флагман
Полный SMM
48 уроков · 24 часа · Менторство · Диплом
Прогресс
Контент-маркетинг
Модуль 3 из 8 · Урок 5 из 12
38% пройдено5 / 12
06
Бейджи и теги
Основные
Голубой Нейтральный Успех Активно Премиум Новинка Снято
Статусы
Онлайн В процессе Оффлайн Ожидание
Теги курсов
SMM Reels YouTube Telegram Таргет Дизайн ???? Хит ★ Флагман Скидка 40%
07
Формы
Скидка применится автоматически
⚠ Введи корректный email
Прогресс-бары
Таргет72%
SMM38%
Копирайтинг100%
08
Иконки платформ
Используй в одном цвете (белый или #00B6FB) для единства стиля. Рекомендуется: Simple Icons, Phosphor Icons.
Социальные сети
YouTube
Telegram
Instagram
TikTok
VK
X (Twitter)
WhatsApp
Правила иконок
✅ Белый — нейтральный стиль на чёрном
✅ #00B6FB — акцент, выделение платформы
✅ Размеры: 20 / 24 / 32 / 48px
❌ Не смешивай стили иконок в одном блоке
❌ Не более 2 цветов иконок на 1 экране
❌ Не используй иконки разных наборов вместе
09
Оповещения
Новый урок добавлен
В курс «SMM с нуля» добавлен бонусный урок про Reels.
Оплата прошла
Доступ открыт. Письмо отправлено на почту.
Ошибка оплаты
Карта отклонена. Проверь данные или используй другую.
Скидка заканчивается
Акция активна ещё 2 часа. Успей по спеццене.
10
Правила бренда
Чёрный — основа
Главный фон везде. Не заменяй серым или тёмно-синим. Только #000 и оттенки #0A–#22.
Голубой — акцент
#00B6FB только для CTA, выделений, активных элементов. Не используй как фон больших блоков.
Белый — текст
Основной текст белый. Вторичный — white 60%. Подсказки — white 30%. Не используй серые оттенки.
Uppercase везде
Заголовки, кнопки, лейблы — только UPPERCASE. Строчные — только длинные описательные тексты.
Акценты — дозировано
Purple / Green / Orange / Pink — не чаще 1 акцента на блок. Не мешай их между собой.
Glow = важность
Голубое свечение — только для главного CTA. Не применяй ко всему подряд — теряет силу.
11
Токены для дизайнера
Кликни на токен — скопируется. Передай этот файл дизайнеру как референс и руководство.
black: #000000
black-card: #111111
black-border: #1A1A1A
blue: #00B6FB
blue-dark: #0090CC
blue-light: #40CAFF
white: #FFFFFF
white-60: rgba(255,255,255,0.6)
accent-purple: #A259FF
accent-green: #00E5A0
accent-orange: #FF6B35
accent-pink: #FF3CAC
font-ui: Unbounded
font-display: MonumentExtended
gradient-blue ↗
glow-blue ↗