Дизайн-система · версия 1.0
Скачать кит
Основной стиль бренда Эталонный кадр основного стиля
Дизайн-система · версия 1.0

Авторские формулы,
лабораторная дисциплина

Цвет, типографика, стекло, компоненты и правила текста. Десять разделов.

№01 — Контекст

Это лаборатория, а не кухня

Уходовая косметика для женщин по авторским рецептам основательницы. Формулы ручной работы, ботаническое сырьё и масла — но собраны с лабораторной точностью: мерная посуда, протоколы, номера партий, проценты активов.

Глубокий синий

Ночная лаборатория. Фон почти для всего — около 78% площади экрана.

Солнечный янтарь

Масло, свет, золото логотипа. Единственный акцент: линии, одна кнопка, один бейдж.

Стекло

Прозрачные поверхности и тонкие блики. Посуда в кадре — один-два предмета, не химкабинет.

№02 — Логотип

Знак, слово, линия

Знак — пипетка с каплей и ботанической ветвью. Логотип живёт по центру или в левом верхнем углу.

Логотип, золото
Gold — основной
Логотип, кремовый
Cream — на фото
Логотип, синий
Navy — на бумаге
Логотип, чёрный
Ink — для печати
Мин. ширина лого160 px
Мин. размер знака24 px
Свободное полене меньше высоты знака
Положениецентр или левый верх
Нельзя

Разрезать слово, поворачивать знак, заменять золото плоским жёлтым, ставить знак в один ряд с интерфейсными иконками.

Знак Знак отдельно — маркер разделов, favicon, водяной знак. Минимум 24 px.
№03 — Цвет

Синий — фон, янтарь — акцент

Соотношение на экране: примерно 78% синего, 14% кремового, 8% янтаря. Янтарь никогда не заливает большие площади. Второй фоновый цвет один — кремовый, для бумажных разделов.

78% СИНИЙ
14%
8%
--surface-page #0B1B3A
--surface-deep #050D20
--accent #E8B454
--surface-paper #F6F1E7
--text-primary #F6F1E7
--line-hairline 14% cream
Клик по строке копирует токен
№04 — Типографика

Две гарнитуры, третьей нет

Jost — геометрический сан-сериф, подстановка под леттеринг логотипа: весь интерфейс, заголовки в весе 300, капслок-метки с широким трекингом. Cormorant Garamond — числа, названия формул, цитаты.

Jost Сыворотка для сухой кожи Заголовок h2 — light 300 Тело текста, 16 px, интерлиньяж 1.65. Спокойный, точный тон: утверждение вместо обещания, цифра вместо эпитета. Метка · трекинг 0.22em
Cormorant Garamond №4 · 5% · 30 ml Hippophae rhamnoides «Я собрала эту формулу для сухой кожи после 35.» Числа — опознавательный знак лаборатории
№05 — Сетка

Воздух — часть премиальности

Шкала 4 → 128 px. Вертикальный ритм разделов — 96–128 px на десктопе.

Контейнер1240 px
Читаемая колонна720 px
Поля — мобайл / десктоп24 / 48 px
Ритм разделов96–128 px
Шкала пространства
4
8
16
24
48
96
128
№06 — Стекло, тени, движение

Блюр только там, где под ним что-то есть

Стеклянные панели: 6% белого, кромка 1 px, blur 14 px, внутренний блик. Применяются к шапке при скролле, диалогам и карточкам поверх фото. Тени синие, не серые.

Флаконы
Стеклянная карточка Поверх фото

Радиус 14 px, кромка 1 px, blur. При hover плотнеет до 11%.

Бумажная карточка Состав и протокол

Без блюра, тень --shadow-paper, текст синий.

--shadow-md
--shadow-lg
--shadow-amber-glow
Движение

Появление — fade и подъём на 8–12 px. Переходы контролов — 160 ms. Никаких bounce, spring и параллакса. Единственная живая деталь — медленное движение золотого блика по линии и первичной кнопке.

№07 — Компоненты

19 примитивов

Каждый существует потому, что встречается в поверхностях китов. Наведите и нажмите — состояния живые.

Партия 24/03 30 ml Новая формула Сухая кожа Ниацинамид 5%
Согласна на разбор состава Ответ приходит в течение двух дней
Показывать проценты активов
Вечерний ритуал
Утренний ритуал
Подсказка появляется рядом с действием и не перекрывает основной контент.

Диалог — по центру, ширина не больше 560 px, подложка синяя с блюром 8 px. Пустые состояния — констатация и действие: «В корзине пока пусто. Начните с каталога.»

№08 — Иконки

Тонкая линия, толщина 1.25–1.5

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

16 — в тексте 20 — в контролах 24 — навигация 32 — пустые состояния Эмодзи не используются
№09 — Текст и тон

Утверждение вместо обещания

Русский язык, «вы» со строчной, от основательницы — «я» и «мы» в значении лаборатории. Цифра вместо эпитета. Восклицательный знак не используется.

Пишем так Сыворотка №4. Ниацинамид 5%, экстракт облепихи. Вечер, после тоника.
Партия 24/03. Розлив вручную, 180 флаконов.
Пахнет маслом и травой — потому что здесь нет парфюмерной композиции.
Не пишем так Ваша кожа скажет спасибо
Уникальный секрет молодости от эксперта
Домашняя косметика с любовью

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

№10 — Фото и кадры

Тёплые по свету, холодные по тени

Тёмное фото с направленным тёплым светом на синем: флаконы, ботаника, масло в чашке Петри — и портреты женщин, снятые по тем же правилам света. Никакой пастели и белого лайфстайла. Текст поверх фото защищён градиентом, а не капсулой.

Ботаника
Посуда
Портрет
Made on
Tilda