Тема ▾Ссылки ▾

ЛК

Мы используем Cookie файлы для сохранения ваших данных

RomAromA

Ок

RomAromA

Брендбук
живой системы

Часть 1 — обязательное Типографика Цвет Палитра Отступы Часть 2 — второстепенное Логотипы Кнопки Формы Навигация Медиа Код Так нельзя

Created by Claude Designed by Дизайн в клеточку Icons by icons8

Листайте вниз

Часть 1

Обязательное чтиво

Три слоя, без которых это уже не RomAromA: типографика, цвет и отступы. Здесь нет «зависит от проекта» — соблюдается всегда и везде.

Типографика Цвет Контраст Палитра Отступы

Привет, здесь типографика

Haval — основной

Заголовки

Универсальный шрифт бренда. Заголовки, цены, крупные цифры. Длинный текст им набирать можно, но не нужно — экран замусоривается.

Georgia bold italic — акцент

выделенное слово

Только внутри заголовков, одно-два слова. Это интонация, а не второй шрифт текста.

Unbounded — редкий текст

Лендинги, промо, описания — то, что человек читает один раз.

Характерный, но тяжёлый при объёме.

Inter — ежедневный текст

Интерфейсы и всё, что читают постоянно. Например сообщения в SlyChat набраны Inter.

Нейтральный, не устаёт глаз.

HAVAL · GEORGIA ITALIC · UNBOUNDED · INTER · HAVAL · GEORGIA ITALIC · UNBOUNDED · INTER · HAVAL · GEORGIA ITALIC · UNBOUNDED · INTER · HAVAL · GEORGIA ITALIC · UNBOUNDED · INTER ·

Цвет и контраст

Акцент 01

#8FDF29

Работает на тёмном. Не ставить на белый.

Акцент 02

#7020D6

Работает на светлом. Не ставить на чёрный.

Светлый

#D7DADE

Фирменный белый. Фон и текст на тёмном.

Тёмный

#222427

Фирменный чёрный. База системы.

Акцент 1 → тёмный

Акцент 2 → светлый

Акцент 2 → акцент 1

Пресеты

#8FDF29

#7020D6

#DF2929

#29DFB8

#29DF44

#DFD729

#DF6829

#D7DADE

#222427

Где можно, где нельзя

Да

Акцент 1
на тёмном

Кислотный зелёный светится только в темноте.

Нет

Акцент 1
на светлом

Текст пропадает. Контраст ниже нормы.

Да

Акцент 2
на светлом

Фиолетовый держит вес на белом поле.

Нет

Акцент 2
на тёмном

Цвет уходит в грязь, теряет читаемость.

Красная прерывистая обводка #DF2929 — только про опасность, ошибку и то, что нельзя пропустить.

Палитра

Кликни по карточке чтобы скопировать цвет

Акцент Primary #8FDF29

Фиолетовый Accent #7020D6

Ошибка Error #DF2929

Бирюзовый Secondary #29DFB8

Зелёный Secondary #29DF44

Жёлтый Secondary #DFD729

Оранжевый Secondary #DF6829

Светлый Light #D7DADE

Тёмный Dark #222427

Свой цвет из акцента

#91DF2A Клик — копировать

Отступы

Шаг сетки — 8px. Всё кратно восьми, без «на глаз».

8px

иконка и подпись, счётчики

16px

поля в плотных списках

24px

внутренний отступ карточки

32px

между полями формы

48px

между смысловыми блоками

96px

между секциями экрана

Внутри блока — 24px Карточка, модалка, поле: 24px по умолчанию, 16px в плотных списках.

Между блоками — 48px Смысловые группы разделяет 48px, секции экрана — 96px.

Кнопка — 10 / 18 Единственное исключение из восьмёрки: пропорция кнопки важнее сетки.

Часть 2

Второстепенное чтиво

Готовые решения: знак, UI, состояния, носители, код. Рекомендации, а не закон — проект или площадка размещения могут диктовать своё, пока первая часть на месте.

Принципы Логотипы Кнопки Контролы Формы Навигация Модалки Медиа Код Так нельзя

Принципы

Плоскость Никаких теней, свечений и градиентных подложек под элементами. Объём появляется только при наведении.

Один акцент на экран Зелёный и фиолетовый не спорят: тёмный экран — зелёный, светлый экран — фиолетовый.

Скругление 8 / 18 Верхний левый угол 8px, остальные 18px. Это подпись бренда на каждом элементе.

Красный — редко #DF2929 только там, где есть риск потери или ошибки. Если он везде — его нет нигде.

Шрифт по назначению Haval — заголовки и цены. Unbounded — то, что читают раз. Inter — то, что читают каждый день.

Что обязательно Обязательны только типографика, цвета и отступы. Остальное — рекомендация: конкретный проект или площадка размещения могут диктовать свои формы, и это нормально, пока три обязательных слоя на месте.

STORY Началось с одной свечи Идея продавать свечи родилась после того, как я решил проверить, работает ли мой старый графический планшет. Так я нарисовал свой первый логотип, а дальше пришла идея назвать бренд Рома Арома — но что может так называться? И вот я уже бренд свечей. Сегодня RomAromA — мульти-бренд: сайты, дизайн, мессенджер, лаунчер. Отсюда и система: она должна одинаково работать и на баночке свечи, и в интерфейсе.

Логотипы

Краткий знак

Haval Thin. Аватарки, favicon, тиснение, малые размеры.

Полный знак

RomAromA

Haval Thin. Основной вариант: сайты, презентации, подписи.

Собака — доп. знак

Использовать можно, но обязательно с подписью RomAromA рядом. Файл: ЛогоСобака.SVG

Старый тип

RomAromA

Media Sans Medium. Не используется в новых макетах, но уже выпущенные носители обновлять не обязательно.

Охранное поле

Пустота вокруг знака — часть знака. Мера одна: x — высота знака.

Построение поля

½ x

Со всех четырёх сторон — не меньше половины высоты знака. Внутрь поля не заходит ничего: ни текст, ни иконки, ни край макета. Правило одно для собаки, RA и полного RomAromA.

Три знака, одна высотная линия

RA RomAromA

Кегль считается от знака: высота прописных равна высоте собаки, поэтому кегль = x / 0,71. Все три версии упираются в одни линии.

Минимальный размер

24px

48px

80px

Экран — от 24px, печать — от 8 мм. Мельче знак читается пятном: берите RA.

Поле у карточки

Карточка тянется по ширине и высоте

У карточек то же правило: воздух вокруг не меньше их внутреннего отступа. Паддинги в процентах, размеры через clamp — поле не ломается на узком экране.

Кнопки

Тип 01 — главная

Фон: #8FDF29
Текст: #222427
Обводка: 3px
Скругление: 8 / 18 / 18 / 18
Отступы: 10 × 18
Наведение: #222427 + большая тень, 0.5s

Тип 02 — для тёмного фона

Фон: нет
Текст: #D7DADE
Обводка: 2px #D7DADE
Скругление: 18
Отступы: 10 × 18
Наведение: инверсия, 0.5s

Тип 03 — для светлого фона

Фон: нет
Текст: #222427
Обводка: 2px #222427
Скругление: 18
Отступы: 10 × 18
Наведение: инверсия, 0.5s

Тени в покое нет никогда. Тень появляется только в момент наведения — это единственный разрешённый объём в системе.

Состояния

Пять состояний у любого интерактивного элемента.

Обычное

Наведение

Фокус

Выключено

Загрузка

Фокус — всегда акцент 2 в обводке, он не спорит с зелёным. Выключенное состояние теряет фон и уходит в прерывистую обводку: элемент виден, но явно неактивен.

Галочки и ползунки

Чекбокс — на светлом

Согласен с правилами

Получать письма

Сохранить выбор

Бокс 22px, обводка 2px, скругление одинаковое по всем углам — 6px. В активном состоянии заливка акцентом.

Чекбокс — на тёмном

Тёмная тема

Автообновление

На тёмном фоне активный бокс — #8FDF29, галочка — #222427.

Слайдер 64

Полоска 4px, бегунок — акцентная вертикальная плашка со скруглением 4px и насечкой. Шаг по сетке из 10 делений.

Слайдер на тёмном 38

Заполненная часть всегда акцент, пустая — 20% от цвета текста.

Поля и обводки

Тёмное поле Фокус — обводка акцентом 1.

Светлое поле Фокус — обводка акцентом 2.

Без фона Только обводка — для плотных экранов.

Ошибка Прерывистая красная — опасность и запрет.

Сплошная — норма

Прерывистая — черновик, пустое место

Красная прерывистая — важное

Акцентная — выбор, активность

Толщина обводки в системе только 2px или 3px. 3px — у главной кнопки и там, где элемент должен физически давить; 2px — везде остальное.

Формы и валидация

Лейбл — Haval bold, подсказка — мельче и серым, ошибка — под полем.

Nickname Чтобы мы могли вас найти и ответить Вы не заполнили

Url С какой страницей возникла проблема? https://roma-roma.ru/

Требует срочного решения

Вы не заполнили

ПолеТёмное поле на светлой форме, скругление 18px, внутренний отступ 13/18. Плейсхолдер — пример ответа на 45% прозрачности, введённое значение — Haval bold. Фокус — обводка акцентом 2.

ОшибкаКрасная обводка 2px и текст ошибки прямо под полем, коротко и по-человечески: «Вы не заполнили». Общая плашка над кнопкой появляется только при попытке отправить.

Группы и служебноеБлоки разделяет заголовок Haval bold, служебные секции помечаются шуткой-меткой в стиле «Debug info /_/». Кнопка отправки — главная, по центру, с иконкой слева.

Поиск и фильтры

Заголовки групп — акцентом, значения — светлым. Один столбец, без рамок внутри.

Найти товар

Все Свечи Мерч Подарки Цифровые товары

Запах

Franck Boclet

Кожа и дерево

Манго и бергамот

Цена

25 — 5 000

Бренд RALimited RomAromA

ПанельПанель — плашка на тон светлее фона, скругление 8/18/18/18, внутри только текст и контролы: никаких вложенных рамок. Группы разделяет воздух 22px, а не линии.

ИерархияЗаголовок группы — Haval bold акцентом. Категории-ссылки тоже акцентом, значения внутри группы — Inter светлым. Выбранное состояние: залитый радио-кружок или галочка акцентом.

Цена и поискДвойной ползунок: полоска акцентом 2px, ручки — светлые круги 18px (единственное место, где круг допустим). Под ним два поля «от» и «до» тем же скруглением, что кнопки. Поиск — поле с иконкой слева, плейсхолдер говорит, что искать.

Ценники и цифры

Цена — всегда Haval. Валюта капсом, единица мельче и приглушённая.

RomAromA

Свеча Пачули 500 RUB / 1 шт

Карточка товара: фото со скруглением 8/18/18/18, избранное — тёмный круг с акцентной иконкой в углу, название и цена под фото без разделителей.

Формат цены

500 RUB / 1 шт 1 200 RUB / набор от 250 RUB

Разряды — тонкий пробел, без запятых. Валюта капсом после числа. Единица через косую, мельче и на 45% прозрачности. Копейки не пишем.

Скидка и диапазон

400 RUB 500 RUB −20%

Старая цена — зачёркнутая, приглушённая, того же начертания. Процент скидки — единственный случай красной плашки в магазине: это про потерю выгоды.

Таблицы и списки

Линии вместо зебры, цифры вправо, заголовок липкий.

ПроектСтатусЦена

SlyChat — редизайн В работе 240 000 ₽

Свечи: упаковка Готово 85 000 ₽

MSB — лендинг Пауза 120 000 ₽

Дизайн в клеточку Важно —

СтрокиВысота 48px в норме, 40px в плотном режиме. Разделитель — линия 1px на 12% светлого; зебры нет. Ховер подсвечивает строку на 5%.

ДанныеЦифры и цены — Haval, выравнивание по правому краю. Текст — Inter. Статус — бейдж, а не цветной текст.

На мобильномТаблица разбирается в список карточек: заголовок сверху, пары «поле — значение» ниже. Горизонтальный скролл допустим только для таблиц с числами.

Модалки

Подложка гасит фон, окно держит одно решение.

Удалить проект? Вернуть не получится. Файлы и ссылки перестанут работать сразу.

Правила окна Одно окно за раз, одно решение внутри. Ширина до 340–520px, скругление 8/18/18/18, обводка 2px. Опасное действие — красной прерывистой, безопасное — светлой обводкой; главная кнопка стоит первой слева.

Подложка

затемнение 72% блюр как в шапке

Блюр — там, где под окном живой контент (шапка, лента). Простое затемнение — в остальных случаях. Клик по подложке закрывает окно, если решение не разрушительное.

Аватарки и счётчик

Квадрат со скруглением — база. Круг и сквиркл — исключения.

Аватарки

квадрат

круг

сквиркл

Rбез фото

Скругление 6px на 24–32px, 10px на 40–64px, дальше пропорционально. Без фото — первая буква имени на акценте. В уведомлениях RALauncher — 39px со скруглением 6px.

Бейджи и счётчики

Новое Важно Черновик 12

Счётчик у иконки — плашка акцентом, минимум 19px, цифры Inter. Больше 99 — «99+». Красный бейдж только про риск, не про количество.

Круговой счётчик времени

10 Диаметр 50px, кольцо 3px, цифра Haval Thin 14px по центру. Кольцо убывает по часовой от полного к пустому, число — целые секунды. Ставится в правый нижний угол медиа на 15px от краёв, режим наложения difference — читается и на светлом, и на тёмном кадре.

Это часть языка бренда: тот же счётчик подходит автослайдерам, таймерам показа и ожиданию ответа.

Капсулы 40px, шрифт Haval Thin, фон — полупрозрачный тёмный с блюром. Полное имя на десктопе, «RA» на мобильном. При скролле капсулы прилипают к краю: радиус слева обнуляется, скругление остаётся справа. Выпадающие списки — тот же блюр, радиус 20px.

Подвал

shop Домашняя страница Поддержка Старый сайт SlyChat Админ панель

other Брендбук Кастомизация Дизайн в клеточку Личный кабинет

gratitude Freepik icons8 PromeAI Made on Tilda

links Вконтакте Телеграм Дзен MAX

Заголовки колонок — акцентом, ссылки — светлым, неактивное и сноски — светлым на 35%. Внешние продукты могут светиться своим цветом (SlyChat).

Уведомления

Два семейства: системное и игровое. Смешивать в одном продукте нельзя.

Версия 1 — текущая

ГотовоПроект сохранён.

Не вышлоФайл больше 20 МБ. Сожмите и пришлите снова.

К сведениюЧерновик обновляется сам.

Одно за раз, справа снизу, 4 секунды. Фона нет — только обводка и иконка слева: успех зелёная, ошибка красная прерывистая, нейтральное светлая.

Игровой — из RALauncher

Pastry написал Вот так будет выглядеть уведомление с текущими настройками

21:38 ✕ персонаж

Правила игрового Скошенная плашка 86px: срез 5% с обеих сторон, аватар 39px со скруглением 6px, весь текст Haval белым (заголовок 11px, сообщение 15px bold). Справа — персонаж 115px, из его картинки берётся цвет плашки; если картинки нет, цвет — фирменный #8FDF29. Время и ✕ в правом верхнем углу, снизу белый прогресс-бар 4px на 4.8 секунды. Появляется маской справа налево, уходит так же — картинка персонажа никогда не масштабируется.

Пустое и загрузка

Пустой экран объясняет, что делать. Загрузка не прыгает.

Тут пока пусто Ни одного проекта. Создайте первый — займёт минуту.

Скелетон

Скелетон повторяет форму будущего контента: те же размеры и скругления, без спиннера. Где применять: объекты, которые не задерживают лоадер; экраны после досрочного скрытия лоадера; страницы, где лоадера нет вовсе.

Анимации

Одна кривая на всё. Разница только в длительности.

0.2s Мелочи: галочка, иконка, смена цвета текста.

0.35s Контролы: слайдер, таб, обводка поля.

0.5s Кнопки и появление блоков. Дольше — нельзя.

Кривая cubic-bezier(.4, 0, .2, 1) Плавный старт и плавное замедление — никаких резких концов. Та же кривая у притягивания к слайдам и у прокрутки. linear — только для бесконечных циклов.

Наведите на полосу

0.5s

Две темы

Одна сетка, два набора цветов. Акцент меняется вместе с фоном.

Тёмная — по умолчанию

Свеча Пачули Ровный воск, спокойный запах, горит 40 часов.

Купить В избранное

Светлая

Свеча Пачули Ровный воск, спокойный запах, горит 40 часов.

Купить В избранное

Правило заменыТёмная: фон #222427, текст #D7DADE, акцент #8FDF29. Светлая: фон #D7DADE, текст #222427, акцент #7020D6. Красный #DF2929 одинаков в обеих.

Что не меняетсяГеометрия, кегли, толщина обводок, кривая анимации. Тема — это только пара «фон + акцент», а не другой дизайн.

ПереключательТри состояния: тёмная, светлая, системная. Выбор живёт в шапке и запоминается; переход по той же кривой 0.5s.

Медиа и слайдеры

Крупный радиус, счётчик в углу, дисклеймер перед чувствительным кадром.

Кадр слайдера

Радиус 39px на десктопе и 20px на мобильном, поля по 10px от краёв экрана. Смена кадра — растворение 0.5s, высота контейнера подстраивается под кадр.

Дисклеймер перед кадром

Дальше кадр, который может задеть. Показать?

Да Нет

Единственное место с капсульными кнопками 30px — это экран-заглушка внутри медиа, не интерфейс. Ответ запоминается на сессию: «нет» убирает кадр из показа.

ПоказКартинка — 10 секунд по умолчанию, видео — своей длительностью. Слайдер живёт только пока виден на экране: ушёл из вида — таймер и видео на паузе.

СчётчикТот же круговой счётчик, что в UI: 50px, кольцо 3px, difference поверх кадра. На последней секунде не исчезает — гаснет вместе со сменой.

КадрированиеМедиа всегда во всю ширину, обрезка по центру. Текст на кадре только в нижней трети и только поверх затемнения — иначе подпись уходит под фото.

Мобильная адаптация

Контент — светлый лист со скруглением, навигация — тёмная полоса снизу.

Главная

Корзина

Любимое

Профиль

Нижнее менюЧетыре пункта максимум, иконка 26px и подпись Haval 11px под ней. Активный пункт — иконка и подпись акцентом, остальные светлые. Высота полосы 64px, зона нажатия не меньше 44px.

Сетка и отступыПоля экрана 16px, между блоками 24px вместо 48px. Шапка-капсула сжимается до 50px и радиуса 25px, полное имя меняется на RA. Карточки складываются в одну колонку, таблицы — в списки.

Что не меняетсяЦвета, скругление 8/18/18/18, толщина обводок и кривая анимации. Кегли уменьшаются не больше чем на один шаг.

Иконки

icons by icons8

Кнопка с иконкой слева

Иконка слева от текста, зазор 10px, размер 22px при кегле 20px — примерно равна высоте строчной буквы. Цвет иконки всегда равен цвету текста кнопки: на ховере меняется вместе с ним. Набор один — icons8, стиль один во всём продукте. Смешивать наборы нельзя.

Тон голоса

Обязательное поле Тут пусто - без этого не поедем Показываем, если обязательное поле не заполнено

Ошибка в e-mail Кажется, такой почты не существует Показываем, если почта заполнена с ошибкой

Ошибка в телефоне На такой номер мы не дозвонимся Показываем, если телефон заполнен с ошибкой

Ошибка в имени Так вас точно зовут? Показываем, если имя заполнено с ошибкой

Слишком короткое значение Коротковато, вы что-то потеряли Показываем, если значение короче нужного — например, в номере телефона

Успешно Готово! Показываем после удачного сохранения

Молодёжный Свои, на «ты» по духу, но без панибратства. Короткая фраза, живой глагол, лёгкая ирония. Ошибка — не приговор.

Пунктуальный Ровно, на «вы», без шуток и сокращений. Для документов, счетов, писем и тех, кто попросил серьёзно.

Общее для двух Одна мысль — одно предложение. Никакого канцелярита и «!!!». Ошибку объясняем и сразу даём выход.

Доступность

Заложена в основной дизайн, в чате и звонках донастраивается.

КонтрастТекст — не меньше 4,5:1 к фону, крупные заголовки — 3:1. Отсюда и правило акцентов: зелёный живёт на тёмном, фиолетовый на светлом.

Зона нажатия

Минимум 44×44px, даже если иконка меньше.

КлавиатураЛюбое действие достижимо табом, фокус видно — обводка акцентом 2. Модалка держит фокус внутри себя и закрывается по Esc.

ДонастройкаВ чате и звонках пользователь отдельно меняет кегль, плотность и длительность уведомлений; анимации отключаются системной настройкой «меньше движения».

Применение

Носители собираются из тех же цветов, шрифтов и скруглений.

Экран сайта

Узнавайте информацию первыми

Светлое поле по краям, тёмная сцена со скруглением внутри, стеклянные капсулы шапки поверх. Снизу — стопка ссылок-полос: акцент 1 заливкой, служебные — обводкой.

Пост в соцсети

1:1
лента

4:5
карусель

9:16
сторис

Размеры разные — правило одно: одна мысль на кадр, знак с подписью в углу, безопасное поле по краю не меньше 6% короткой стороны.

Мерч

Место под фото носителя или 3D-рендер: свеча, футболка, стикерпак. Пришлите файл — вставлю сюда.

На мерче знак одноцветный: зелёный на тёмном, тёмный на светлом. Градиентов на ткани нет.

Код

Копируйте как есть — это и есть система.

Токены Клик — копировать

:root {
  --ink-dark:  #222427;
  --ink-light: #D7DADE;
  --accent-1:  #8FDF29; /* на тёмном */
  --accent-2:  #7020D6; /* на светлом */
  --danger:    #DF2929;
  --radius:    8px 18px 18px 18px;
  --ease:      cubic-bezier(.4, 0, .2, 1);
}

Кнопка — главная Клик — копировать

.btn {
  font: 200 20px Haval, sans-serif;
  color: var(--ink-dark);
  background: var(--accent-1);
  border: 3px solid var(--accent-1);
  border-radius: var(--radius);
  padding: 10px 18px;
  transition: all .5s var(--ease);
}
.btn:hover {
  color: var(--ink-light);
  background: var(--ink-dark);
  border-color: var(--ink-light);
  box-shadow: 0 18px 44px rgb(0 0 0 / .55);
}

Поле ввода Клик — копировать

.field {
  font: 400 16px Inter, sans-serif;
  color: var(--ink-light);
  background: #2b2e32;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 12px 18px;
  transition: border-color .35s var(--ease);
}
.field:focus  { border-color: var(--accent-1); }
.field[aria-invalid] {
  border: 2px dashed var(--danger);
}

Слайдер Клик — копировать

.slider      { height: 4px; border-radius: 4px;
               background: rgb(215 218 222 / .2); }
.slider__fill{ height: 4px; border-radius: 4px;
               background: var(--accent-1); }
.slider__knob{ width: 12px; height: 30px;
               border-radius: 4px;
               background: var(--accent-1); }

Подписи в коде

Имя говорит, чей это элемент и из какого проекта.

Суффикс проекта

.header-btn-glass-rad3125
#nav861896779
--bar-color-rad3125

Классы, переменные и id получают хвост -rad{id проекта} — id берётся из закрытой кодовой системы. Хвост обязателен всюду, где код живёт на чужой площадке: Tilda, встройки, виджеты.

Имя сервиса

 RA{Название} — краткая форма RomAromA{Название} — полная форма 

Название берётся из барабана ниже. Упрощённые имена продуктов тоже собираются как RA{Название}: RADesign, RAChat, RASC.

Полное имя наружу

SlyChat by RomAromA MSB by RomAromA

В публичных названиях «by» набирается тем же начертанием, что и RomAromA — это одна связка, а не приписка.

Домены

roma-roma.ru roma-roma-inside.ru

В визуальной среде домены пишутся начертанием RomAromA. В служебных местах — подвал, реквизиты, счётчики — стиль соблюдать не обязательно.

Барабан названий

Dev Design Chat Calls СБП Blocket Launcher Bypass Rental SC Dev Design Chat Calls СБП Blocket Launcher Bypass Rental SC

Барабан: слева неподвижное RA, справа впритык — название. Зелёным отмечены названия с упрощённой публичной формой: Design — Дизайн в клеточку, Chat — SlyChat, SC — MSB.

Файлы и выдача

Один адрес, откуда всё берут. Кнопки включим, когда соберём пакет.

Логотипы RomAromA, RA, собака SVG и PNG, светлая и тёмная версии, охранное поле в макете.

Шрифты Haval, Unbounded, Inter Начертания Thin–Bold, лицензии и правила подстановки.

Иконки Набор icons8 PNG 100px и маски под перекраску. Указание «icons by icons8» обязательно.

Код Токены и компоненты CSS-переменные, кнопки, поля, слайдер, уведомления двух типов.

Так нельзя

Растягивать и обрезать логотипы

RomAromA

Ставить акцент 1 на белый — текст исчезает.

RomAromA

Посторонние шрифты. Только Haval, Georgia italic, Unbounded, Inter.

Тени и свечения в покое. Тень — только на ховере.

Перекрашивать логотипы в произвольный цвет

★

Смешивать icons8 с чужими иконками и глифами.

Система работает, пока её соблюдают

Брендбук

Это брендбук, тут есть все о нашем дизайне

Брендбукживой системы

Обязательное чтиво

Цвет и контраст

Где можно, где нельзя

Палитра

Отступы

Второстепенное чтиво

Принципы

Логотипы

Охранное поле

Кнопки

Состояния

Галочки и ползунки

Поля и обводки

Формы и валидация

Поиск и фильтры

Ценники и цифры

Таблицы и списки

Модалки

Аватарки и счётчик

Навигация

Уведомления

Пустое и загрузка

Анимации

Две темы

Медиа и слайдеры

Мобильная адаптация

Иконки

Тон голоса

Доступность

Применение

Код

Подписи в коде

Файлы и выдача

Так нельзя

Брендбук
живой системы