ЛК ![Профиль]()
Мы используем cookie файлы для сохранения ваших данных
✓ Скопировано
RomAromA
Бренд-бук
Цветовая эстетика
RomAromA
Палитра
Акцент
Primary
#8FDF29
Фиолетовый
Accent
#7020D6
Ошибка
Error
#DF2929
Бирюзовый
Secondary
#29DFB8
Зелёный
Secondary
#29DF44
Жёлтый
Secondary
#DFD729
Оранжевый
Secondary
#DF6B29
Светлый
Light
#D7DADE
Тёмный
Dark
#222427
Градиенты
Акцент → Светлый
#8FDF29 → #D7DADE
Акцент → Тёмный
#8FDF29 → #222427
Ошибка → Оранжевый
#DF2929 → #DF6B29
Бирюза → Зелёный
#29DFB8 → #29DF44 → #8FDF29
Жёлтый → Оранжевый → Красный
#DFD729 → #DF6B29 → #DF2929
Фиолетовый → Акцент
#7020D6 → #8FDF29
Фиолетовый → Светлый
#7020D6 → #D7DADE
Фиолетовый → Тёмный
#7020D6 → #222427
Типографика
Multi
Aa Bb Cc
Light weight 100
The quick brown fox jumps over the lazy dog
Media Sans
Aa Bb Cc
Light weight 100
The quick brown fox jumps over the lazy dog
Unbounded
Аа Бб Вв
Лёгкий и геометричный
Динамичный стиль
Мощный акцент
UI-элементы
Primary (#8FDF29)
Error (#DF2929)
Outline
Акцент Ошибка
Бейджи
Примеры кода
CSS-переменные
/* Цветовая система RomAromA */
:root {
--color-primary: #8FDF29;
--color-purple: #7020D6;
--color-error: #DF2929;
--color-secondary: #29DFB8;
--color-light: #D7DADE;
--color-dark: #222427;
} Кнопка (акцент)
/* HTML */
<button class="btn-brand">Кнопка</button>
/* CSS */
.btn-brand {
background: #8FDF29;
color: #222427;
padding: 14px 32px;
border-radius: 8px;
transition: background 0.4s, transform 0.2s;
}
.btn-brand:hover {
background: #29DF44;
transform: translateY(-2px);
} Градиент (акцент → тёмный)
/* CSS-градиент */
.gradient-box {
background: linear-gradient(
135deg,
#8FDF29,
#222427
);
border-radius: 16px;
padding: 24px;
} Бейдж (ошибка)
/* HTML */
<span class="badge-error">Ошибка</span>
/* CSS */
.badge-error {
background: rgba(223,41,41, 0.15);
color: #DF2929;
border: 1px solid rgba(223,41,41, 0.15);
padding: 4px 16px;
border-radius: 40px;
}-
БрендбукЭто брендбук, тут есть все о нашем дизайне
