Раздел 01
Цветовая система
8 токенов. Тёплая основа, один огненный акцент, один золотой статус. Больше — не нужно.
Основной фон
Void
#0a0806
Hero, меню, CTA-секции.
Основа всего тёмного.
Светлый фон
Paper
#f0ede5
Фон страницы.
Тёплый белый. Воздух.
Главный акцент
Ember
#c0311a
CTA кнопки, цифра «9»,
единственный удар.
Статус / данные
Gold
#c8a050
Цифры, счётчики,
secondary на тёмном.
Текст
Ink
#111111
Основной текст
на светлом фоне.
Вспомогательные токены
Ash #9a8e7a
Eyebrow, метки, мелкий текст на тёмном фоне
Smoke #c8bfa8
Основной body текст на тёмных секциях
Dust #d0cdc5
Разделители, границы, hover-фоны на светлом
Как цвета работают вместе
Тёмный режим
Встраиваем ИИ в бизнес
Записаться Подробнее
Светлый режим
Встраиваем ИИ в бизнес
Записаться Подробнее
Акцентный (соцсети)
3598 рабочих часов в год
Подробнее
Правила использования
Правило 01
Ember (#c0311a) — один акцент на экран. Не заливать фоны, не использовать декоративно. Только CTA, цифра «9», ключевое слово.
Правило 02
Gold (#c8a050) — данные и статус. Для цифр, счётчиков, secondary кнопок на тёмном. Никогда не основная кнопка.
Правило 03
Никакого синего, фиолетового, зелёного. Палитра тёплая. Хочешь добавить цвет — проверь, нет ли его в системе.
Правило 04
Текст на тёмном — только Ash или Smoke. Ash (#9a8e7a) для меток и eyebrow. Smoke (#c8bfa8) для основного body текста.
Раздел 02
Шрифтовая система
Три шрифта — три роли. Каждый на своём месте. Не смешивать без причины.
Display · Логотип
Unbounded
Weight: 900 · Letter-spacing: −0.03em · Google Fonts
Только логотип 3598, hero-заголовки и акцентные цифры. Нигде больше — теряет силу при частом использовании.
Заголовки · CTA
Barlow
Condensed
Weight: 700–800 · Letter-spacing: +0.01em · Google Fonts
Все заголовки секций, цитаты позиции, текст кнопок. Всегда Sentence case — не КАПС в заголовках.
Основной текст
Inter — лёгкий,
точный, живой
Weight: 300 (body) · 400–500 (акценты) · Google Fonts
Параграфы, описания, подписи, навигация. Вес 300 создаёт ощущение лёгкости. 500 — только для выделений.
Данные · Метки
Inter Mono
Weight: 400 · Letter-spacing: +0.1em · Системный
Цифровые метки, технические данные, теги. Примеры: «3598h/yr», «#c0311a», «day 01».
Иерархия размеров
Unbounded 900
Hero · 96–112px
3598
Barlow Cond 800
H1 · 44–52px
Внедряем. Не учим.
Barlow Cond 700
H2 · 26–32px
Архитектура роста под ваш бизнес
Inter 300
Body · 14–16px
Мы не продаём обучение. Мы встраиваем ИИ в живые процессы — и остаёмся рядом, пока система работает без вас.
Inter Mono
Labels · 10–12px
3598h/yr · ×2 staff · ROI: day 01
Раздел 03
Система кнопок
4 типа. Каждый для своего контекста. Главное правило — на тёмном фоне ghost-кнопка всегда с золотой обводкой.
На тёмном фоне
.btn-p
PRIMARY — красный
Фон #c0311a · Hover: #a02814 + translateY(−2px) + shadow
.btn-s-dark
SECONDARY — золото
Обводка #c8a050 · Hover: заливка золотом · цвет #0a0806
На светлом фоне
.btn-p
PRIMARY — та же
Работает на любом фоне без изменений
.btn-g-light
GHOST — светлый
Обводка #d0cdc5 · Hover: обводка #111
.btn-sm
OUTLINE SMALL
Обводка #c0311a · Hover: заливка Ember
Правила кнопок
✓
На экране максимум одна Primary кнопка — она должна быть единственным красным
✓
На тёмном — Secondary всегда золотая обводка. Прозрачный ghost без обводки не виден
✓
Шрифт кнопок — Barlow Condensed 700, uppercase, letter-spacing 0.08em
✕
Никаких border-radius на кнопках — стиль острый, без пилюль
✕
Никакого ghost с белым текстом без обводки на тёмном — не читается
Раздел 05
Голос и тон
Говорим как партнёр. Не как продавец. Конкретно, коротко, прямо.
Говорим так
Конкретно — числа, факты, результат до оплаты
Коротко — одна мысль, один абзац, точка
Прямо — без «возможно» и «наверное»
Как равный партнёр — не сверху, не снизу
Результат виден до того как заплатили
«Мы встраиваем. Не учим.»
Не говорим
«Уникальная авторская методология»
«Выведем бизнес на новый уровень»
Эмодзи-спам и !!! восклицания
«Осталось 2 места, успейте»
Корпоративный buzzword-салат
«Мы рады предложить вам...»
Шкала тональности
ФормальноНеформально
СдержанноДерзко
АкадемичноПрактично
ТихоУверенно
Примеры текстов
Лендинг · заголовок
Пока конкуренты учатся — мы уже внедрили.
ИИ — это не будущее. Это два сотрудника, которых вы уже не платите.
Telegram пост
Предприниматель спросил: «Зачем мне ИИ?»

Считаем вместе: 3598 часов — это ₽4.3 млн зарплаты.

Он записался на следующей неделе.
Раздел 06
Анимации и живость
Все анимации функциональные — каждая что-то показывает. Никакой анимации ради анимации.
01
Цифра «8» мерцает
Каждые 5 сек мягко белеет и гаснет. Ощущение живого организма без навязчивости.
@keyframes b8 · 5s ease-in-out
color → #fff + text-shadow
Демо:
02
Точка в навигации
Красная точка пульсирует рядом с лого. scale(1→0.5) + opacity. Бренд онлайн.
@keyframes dp · 2.5s ease-in-out
opacity 1→0.25, scale 1→0.5
Демо:
3598
03
Шкала экономии
Gold-бар заполняется за 2.2 сек при загрузке. Маркер-вспышка на конце. Счётчик синхронно.
animBars() · 2.2s cubic-bezier
width: 0% → 100%
Демо:
04
Shimmer кнопки
Световой sweep слева направо при hover. CSS gradient translateX(-100%→200%).
::before · hover · 0.5s
gradient translateX
Наведи:
05
Nav underline
Красная линия под nav-ссылкой разворачивается слева направо при hover. scaleX(0→1).
::after · 0.28s cubic-bezier
scaleX 0→1, origin: left
06
Зернистость (grain)
SVG-шум поверх тёмных секций. Меняет позицию 10 раз/сек. Плёночное ощущение без визуального шума.
SVG feTurbulence + @keyframes
opacity: 0.028–0.055