✦ Альбина Романенко
✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦
✦

Дизайн-система
«Альба»

Полная спецификация визуального языка бренда

Смотреть палитру Типографика Все элементы
✦
Палитра
#0D1B2A
Космический тёмный
Основной тёмный фон, hero, footer
#152738
Мягкий тёмный
Карточки на тёмном, hover-состояния
#1B3A5C
Звёздный синий
Бренд-цвет, кнопки, заголовки
#8EADC1
Серебристо-голубой
Мета-текст, подписи, иконки
#E8C547
Звёздный золотой
Главный акцент, звезда ✦, CTA, цитаты
#FFFFFF
Белый свет
Текст на тёмном, яркий акцент
#FAF7F2
Тёплый белый
Основной светлый фон контента
#E8E4DF
Серебристый белый
Альт. фон, карточки, чередование
✦
Типографика

Сайт · Instagram · Сторис· Статьи

H1 — Cormorant Garamond 500
Путь к звёздам
H2 — Cormorant Garamond 400
Осознанная трансформация
H3 — Cormorant Garamond 400
Экосистема Альбы
Цитата — Cormorant italic 300
«Каждая звезда когда-то была темнотой, которая решила светить»
Body — Inter 300
Альба — это экосистема для тех, кто готов к осознанной трансформации. Здесь каждый инструмент создан, чтобы помочь вам найти свой свет.
Caption — Inter 500
✦ Навигация · Звёздная карта

Презентации · Гайды · PDF· Instagram · Сторис

H1 — Space Grotesk 700
Путь к звёздам
H2 — Space Grotesk 600
Осознанная трансформация
H3 — Space Grotesk 500
Экосистема Альбы
Цитата — Cormorant italic 300
«Каждая звезда когда-то была темнотой, которая решила светить»
Body — Inter 300
Альба — это экосистема для тех, кто готов к осознанной трансформации. Здесь каждый инструмент создан, чтобы помочь вам найти свой свет.
Caption — Space Grotesk 500
✦ Навигация · Звёздная карта
Градиенты
✦
«Космос» — Radial
radial-gradient( ellipse at 50% 35%, #1B3A5C, #0D1B2A )
✦
«Рассвет» — Linear
linear-gradient( to bottom, #0D1B2A 0%, #1B3A5C 30%, #8EADC1 60%, #E8E4DF 85%, #FAF7F2 100% )
Кнопки
На тёмном фоне
✦ Записаться на курс Узнать больше Подробнее
На светлом фоне
✦ Начать путь Читать далее Подробнее
✦
Карточки
✦ Звёздная навигация
Индивидуальный разбор вашей натальной карты с фокусом на текущий период и ключевые точки роста.
Узнать больше →
✦ Путь Альбы
Трёхмесячная программа трансформации через работу с архетипами и звёздными циклами.
Узнать больше →
✦ Звёздная навигация
Индивидуальный разбор вашей натальной карты с фокусом на текущий период и ключевые точки роста.
Узнать больше →
✦ Путь Альбы
Трёхмесячная программа трансформации через работу с архетипами и звёздными циклами.
Узнать больше →
Графические элементы
✦
Акцент
Одиночная крупная звезда. Hero, обложки, заголовки. Glow на тёмном фоне.
  • Осознанность
  • Трансформация
  • Звёздный путь
Маркер
Мелкая звезда вместо буллетов. Списки, навигация, ключевые мысли.
✦ ✦ ✦ ✦ ✦ ✦ ✦
Россыпь
Декоративное звёздное поле. Разные размеры и прозрачности. Фоновый эффект.
✦
Линия горизонта
Разделитель секций. Со звездой — парадный, без звезды — тихий.
✦
Свечение
Glow-эффект на звезде, кнопках, активных элементах. Золотой акцент.
✦
Орбиты
Тонкие эллипсы с медленным вращением. Hero, экосистема, обложки.
✦
✦
«Каждая звезда когда-то была темнотой, которая решила светить»
— Альба
Маркеры и ссылки

Маркеры на тёмном

  • Индивидуальные консультации
  • Групповые программы
  • Звёздные гайды и карты
  • Медитации и практики
  • Сообщество единомышленников

Маркеры на светлом

  • Индивидуальные консультации
  • Групповые программы
  • Звёздные гайды и карты
  • Медитации и практики
  • Сообщество единомышленников

Ссылки на тёмном

Default Ссылка на раздел
Hover Ссылка на раздел
Visited Ссылка на раздел
Active Ссылка на раздел

Ссылки на светлом

Default Ссылка на раздел
Hover Ссылка на раздел
Visited Ссылка на раздел
Active Ссылка на раздел
Тени
Card
0 2px 12px
Card Hover
0 4px 24px
Button
0 2px 8px
Modal
0 8px 40px
Скругления
Кнопка6px
Карточка12px
Модальное16px
Аватар50%
Система отступов (×8px)
XS
8px
S
16px
M
24px
L
32px
XL
48px
XXL
80px
HERO
120px
✦
Структура фонов
Сайт
✦ Hero — градиент
░ Контент — тёплый белый
░ Альт. секция
░ Контент
█ Footer — космический
Презентации · Гайды
✦ Титульный — рассвет
░ Контент слайд
░ Контент слайд
✦ Акцентный слайд
░ Контент слайд
✦ Финальный — космический
Instagram
█
░
█
░
█
░
█
░
█
Сводная таблица ролей
Элемент На тёмном На светлом
Фон #0D1B2A / gradient #FAF7F2 / #E8E4DF
Фон карточки #152738 #FFFFFF
H1 #FFFFFF #0D1B2A
H2 — H3 #FFFFFF #1B3A5C
Body текст #E8E4DF #152738
Caption / мета #8EADC1 #8EADC1
Цитата #E8C547 italic #1B3A5C italic
Звезда ✦ #E8C547 + glow #1B3A5C / #E8C547
Ссылка #E8C547 #1B3A5C
CTA кнопка #E8C547 #E8C547
Вторая кнопка outline #FFFFFF #1B3A5C solid
Иконки #8EADC1 #1B3A5C
Буллеты ✦ #E8C547 #1B3A5C
Разделитель rgba(142,173,193, 0.15) rgba(27,58,92, 0.1)
Чеклист

Бренд ли это Альба?

Любой материал должен содержать минимум 4 из 6 элементов

✦
Звезда ✦
в любом формате
🎨
Палитра
космос + золото
Aa
Cormorant italic
цитата или заголовок
─ ✦ ─
Линия горизонта
со звездой или без
◉
Градиент
Космос или Рассвет
♡
Тон голоса
тепло + глубина + ясность
✦
Made on
Tilda