marketing-light-2

academic & friendly light

→ Открыть демо

Цвета

Dual primary (violet + yellow равноправны) + warm mediators (coral + lavender) + 4 уровня off-white. Pure white — не дефолт, а контрастная подсветка.

Primary (dual)

primary-violet#6553F5
primary-yellow#FEC800

Warm mediators

accent-coral#FF8562
accent-lavender#ACA2FF
lavender-2#BD9AF9
yellow-soft#FFD589

Surface — 4 уровня off-white

bg-base#FFFFFF
bg-cream#F7F6FB
bg-deep-cream#F4F4F9
bg-dark-base#000000

3D skeu-shadow companions (darker hues)

shadow-yellow-deeprgb(127,102,9)
shadow-violet-deeprgb(64,52,153)

Типографика

Dual-font display: Manrope Variable (wght 780!) + Evolventa (кирилличный academic sans). Extreme H1-to-body ratio 7.75× (124/16). Tight display / generous body.

Программа
H1 mega — font-size: 124px / lh 1.097 / weight 780 / Manrope Variable
новый подход к обучению
H1 sub — font-size: 55px / lh 1.109 / weight 700 / Evolventa (academic)
Как всё устроено
H2 — font-size: 42px / lh 1.26 / weight 900
Тарифы
H2-lg — font-size: 54px / lh 1.26 / weight 900
19 900 ₽
Pricing display — font-size: 40px / weight 800
Body 16px — используется в основных абзацах. Line-height 1.31 — чуть плотнее стандартного 1.5, но читаемо. Это функциональная шкала.
body — font-size: 16px / lh 1.31 / weight 400

Радиусы — 4 роли

Не scale, а chosen-constants по роли. 5px — submit-forms; 20px — cards/inputs; 100px — CTA pill; 3000px — chip overkill (гарантированно pill на любой высоте).

5px — form
20px — card/input
100px — CTA pill
3000px — chip overkill

Тени — 4 роли

Card — diagonal-offset soft (-4px 4px 30px). Tooltip — симметричная плотная (3×). 3D skeu — solid offset без blur. Modal — крупная симметричная.

Card
-4px 4px 30px grey10%
Tooltip
0 0 15px black30%
3D Yellow
0 3px 0 0 deep-yellow
3D Violet
0 2px 0 0 deep-violet

Hero — centered collage на dark

Превью hero-блока: Manrope 124/780 mega + Evolventa 55/700 sub + 2 chips + coral-outlined yellow CTA + ghost secondary. Центрирован, не split.

онлайн 8 недель
Курс
демо hero-блока с dual-font identity

Кнопки

Dual primary (violet + yellow) + ghost + submit (squarish 5px). Все primary имеют 3D solid-shadow + press-feedback. Violet — с light-sweep flash (3s infinite).

Chips / Badges

Radius 3000px — overkill pill, гарантированно капсула на любой высоте. Lavender / yellow / coral / ghost.

lavender neutral -20% NEW ghost

Инпуты

Radius 20px — pill-like. Border 1px grey. Focus — violet ring 2px.

Карточки

Radius 20px + diagonal-offset shadow (-4px 4px 30px). Identity — shadow слева-сверху, не центральная.

White card

Базовая карточка на белом фоне. Radius 20px, diagonal-shadow слева-вверх.

Стат-блок

Пример текста-описания под заголовком карточки с крупным числом.

Cream card

Карточка на cream-фоне — для alt-section. Та же shadow, контекст меняется.

Отзывы

Photo-avatar радиус 3000px (круг). Реальные лица выпускников — social proof.

А
Имя Фамилия
роль / специализация

«Пример цитаты в карточке отзыва — lorem-контент для демонстрации компонента».

Б
Имя Фамилия
роль / специализация

«Вариант с яркой заливкой аватара — жёлто-коралловый градиент».

В
Имя Фамилия
роль / специализация

«Вариант с coral→lavender градиентом. Radius 3000px — overkill pill».

Тарифы — 2-up symmetric

Две одинаковые карточки без «recommended»-выделения. Coral badge сверху, цена 40px weight 800, фичи с violet ✓.

Базовый
Первый тариф
19 900 ₽
  • Пункт программы — первый
  • Пункт программы — второй
  • Пункт программы — третий
Расширенный
Второй тариф
39 900 ₽
  • Всё из базового
  • Расширенный пункт 1
  • Расширенный пункт 2
  • Расширенный пункт 3

Tooltip

3-й уровень surface: radius 10px (меньше card), shadow 30%/15px — в 3× плотнее card-shadow.

Это подсказка. Radius 10px, shadow 0 0 15px black 30%.

FAQ (accordion)

Плоский, без иконок-стрелок. Divider 1px grey. +/− toggle через class --open.

Пример вопроса — открыт по умолчанию
Ответ на демо-вопрос. Text 15px / color secondary / line-height 1.5. Padding-top 12px от заголовка.
Пример вопроса — свёрнут
Скрытый ответ раскрывается кликом. Divider сверху 1px grey, +/− toggle через class --open.
Третий пример — проверка паттерна
Плоский accordion без иконок-стрелок. Только +/− и тонкий divider. Мобильно-дружелюбный.

Avatars (photo-frames)

Radius 3000px — overkill-pill гарантирует круг на любом rect. Размеры: 56 / 96 / 120.

A
B
C

Секционный ритм

Alternation cream/white + 3rd уровень dark-hero/footer. Padding 55.22 top / 27.22 bottom = 2:1 (asymmetric). Без divider-линий.

Dark hero
#000
White section
#FFFFFF · padding s8 / s6
Cream section
#F7F6FB · padding s8 / s6
White section
Cream section
Dark footer — legal dense