Дизайн-система — это не набор кнопок и цветов. Это язык бренда в цифровом пространстве. Каждый пиксель, каждый отступ, каждый цвет — это часть сообщения, которое Ceramic Pro транслирует пользователю.
Компоненты (кнопки, карточки, формы) — это слова этого языка. Токены (цвета, шрифты, отступы) — это грамматика. Принципы — это тон голоса.
Принципы дизайн-системы CP
1. Премиальность по умолчанию
Каждый элемент должен транслировать качество. Не «достаточно хорошо», а «безупречно». Белое пространство, точные пропорции, внимание к деталям — это не декорация, а основа восприятия бренда.
Референс: Porsche Design System — нулевая компромиссность в деталях. Lexus — каждый пиксель на своём месте. Mercedes-Benz — утончённость без показушности.
2. Единообразие важнее креатива
Консистентность важнее индивидуальных творческих решений. Пользователь не должен «переключать контекст» при переходе между страницами или продуктами CP.
Референс: Apple Human Interface Guidelines — строгие правила, которые создают ощущение единой экосистемы. IBM Carbon — 80+ компонентов, все подчинены одной системе.
3. Доступность — не опция
Доступность — не «бонус для галочки», а требование закона (Европейский акт о доступности, июнь 2025) и этики. 1 из 12 мужчин — дальтоник. 8 миллионов пользователей в одних только США навигируют только клавиатурой.
Стандарт: WCAG 2.2 уровень AA (ISO/IEC 40500:2025). Минимальный контраст текста 4.5:1. Зона нажатия 44×44 пикселя. Клавиатурная навигация на всех интерактивных элементах.
4. Сначала мобильные, всегда
62% мирового веб-трафика — мобильные устройства. Базовые стили = мобильные. Десктоп — расширение, не основа.
5. Всё через токены, ничего напрямую
Ни один цвет, отступ или размер шрифта не вписывается «жёстко». Всё через токены — атомарные значения дизайна в одном файле. Изменил один токен — все компоненты обновились автоматически.
2. Цвета
2.1. Палитра
Все цвета определены через именованные токены. Запрещено использовать цветовые значения напрямую в компонентах.
Основная палитра
Токен
Значение
Назначение
primary
#ec1d91
Фирменный розовый — акценты, фон кнопок действия, иконки
primary-dark
#e60881
Состояния наведения и нажатия
primary-hover
#d4177f
Наведение для основного цвета
bg-dark
#161616
Тёмные секции, подвал сайта
bg-alt
#f3f3f3
Светлые секции
text-light
#f0f0f0
Текст на тёмном фоне
text-secondary
#b3b3b3
Вторичный текст
text-muted
#76767b
Приглушённый текст — только на чисто белом фоне
text-dark
#1a1a1a
Текст на светлом фоне
success
#4caf50
Успешное действие
error
#d32f2f
Ошибка
2.2. Почему именно эти цвета
Фирменный розовый (#ec1d91) — главный визуальный идентификатор бренда Ceramic Pro. Насыщенный, запоминающийся, отличается от конкурентов (XPEL — синий, 3M — красный, SunTek — зелёный).
Тёмный фон (#161616), а НЕ чёрный (#000000). Чистый чёрный рядом с насыщенным розовым вызывает оптический эффект галации — цвет визуально «расползается» по краям. #161616 достаточно тёмный для премиального ощущения, но без хроматических артефактов.
Как делают другие: Apple использует #1C1C1E для тёмного режима. Porsche — #010205. BMW — #1C1C1C. NIO — #0a0a0a. Ни один люксовый бренд не использует чистый чёрный #000000.
Тёмный фон как основа бренда — не «тёмная тема как опция», а осознанный выбор. 82% мобильных пользователей предпочитают тёмный режим. На OLED-экранах экономия батареи до 47%. Но главное — тёмный фон транслирует премиальное позиционирование.
2.3. Контраст и доступность
Комбинация
Соотношение
Обычный текст (4.5:1)
Крупный текст/UI (3:1)
Светлый текст (#f0f0f0) на тёмном фоне
15.9:1
Проходит
Проходит
Вторичный текст (#b3b3b3) на тёмном фоне
8.6:1
Проходит
Проходит
Тёмный текст (#1a1a1a) на белом
18.1:1
Проходит
Проходит
Розовый (#ec1d91) на тёмном фоне
4.3:1
Не проходит (только крупный)
Проходит
Розовый (#ec1d91) на белом
4.2:1
Не проходит (только крупный)
Проходит
Белый на розовом (#ec1d91)
4.6:1
Проходит
Проходит
Правило: Фирменный розовый (#ec1d91) как цвет текста — только при размере от 24 пикселей и выше. Запрещён как обычный основной текст на любом фоне.
2.4. Семантические токены (двухуровневая система)
Современная индустрия использует двухуровневую систему цветов:
Примитивные токены — фиксированные цветовые значения. Определяются один раз, никогда не переопределяются.
Семантические токены — описывают назначение цвета, а не его значение. Компоненты ссылаются только на семантический уровень. Это позволяет переключать тему целиком, не трогая ни один компонент.
Семантический токен
Роль
Светлая тема
Тёмная тема
Фон страницы
Основной фон
#ffffff
#161616
Фон поверхности
Карточки, модальные окна
#f3f3f3
#1e1e1e
Фон приподнятой поверхности
Выпадающие списки, всплывающие окна
#ffffff
#252525
Основной текст
Текст на фоне страницы
#1a1a1a
#f0f0f0
Вторичный текст
Подписи, пояснения
#555555
#b3b3b3
Акцент
Фирменный розовый
#ec1d91
#ec1d91
Акцент при наведении
Наведение на розовый
#e3087f
#ff35a0
Разделитель
Линии и границы
#e0e0e0
#2e2e2e
Ошибка
Формы и уведомления
#d32f2f
#f44336
Успех
Подтверждения
#4caf50
#66bb6a
Референс: Shopify Polaris — «Цвет имеет назначение». Каждый цвет объясняется через его функцию, а не эстетику. Google Material Design 3 — три уровня токенов (базовый → системный → компонентный).
2.5. Вопросы для обсуждения
Нужен ли второй акцентный цвет (для кнопок действия, отличных от основного)?
Тёплый серый (#1e1e1e) или холодный серый для поверхностей — что ближе к бренду?
Цвет предупреждения — использовать стандартный оранжевый (#ff9800) или подобрать свой?
3. Типографика
3.1. Шрифтовой стек
Три уровня по доступности:
Уровень
Шрифт
Лицензия
Где используется
1 — Основной
Gotham (H&Co)
Коммерческая
Сайт ceramic-pro.com, приложения, печать
2 — Допустимая замена
Montserrat
Свободная (OFL)
Партнёры, мобильные приложения
3 — Системный
Системный шрифт ОС
Встроен в ОС
Электронная почта, PDF, транзакционный интерфейс
Стек шрифтов: «Gotham», «Montserrat», системный sans-serif
Для форм: «Roboto», системный sans-serif
Почему Montserrat как замена? Это сильнейший бесплатный геометрический sans-serif, визуально близкий к Gotham. При крупных размерах (заголовки, дисплей) разница практически незаметна. Расхождение видно только в полностью прописных дисплейных надписях.
Почему Roboto для форм? Поля ввода содержат текст разной длины (имена, адреса, номера). Roboto оптимизирован для мелких размеров и удобочитаемости, в отличие от Gotham/Montserrat — дисплейных шрифтов.
3.2. Шкала размеров
Шкала основана на коэффициенте «чистая кварта» (1.333) — модулярная прогрессия между уровнями.
Уровень
Мобильный
Десктоп
Насыщенность
Межстрочный интервал
Дисплей
32 пикс
56 пикс
900 (Чёрный)
1.1
Заголовок 1
26 пикс
40 пикс
700 (Полужирный)
1.2
Заголовок 2
22 пикс
30 пикс
700 (Полужирный)
1.25
Заголовок 3
18 пикс
22 пикс
500 (Средний)
1.3
Основной текст
16 пикс
17 пикс
400 (Обычный)
1.6
Подпись
12 пикс
13 пикс
400 (Обычный)
1.5
Почему «чистая кварта» (1.333), а не «золотое сечение» (1.618)?
Золотое сечение даёт слишком резкий контраст между уровнями — заголовок 1 получается огромным, основной текст — маленьким. «Чистая кварта» — более плавная шкала, лучше подходит для интерфейсов, где нужна иерархия без чрезмерного драматизма.
IBM Carbon, Material Design 3, Shopify Polaris — все используют коэффициенты в диапазоне 1.2–1.4. Золотое сечение чаще применяется в журнальной/люксовой полиграфии.
Почему статическая шкала, а не плавная (через clamp())?
Функция clamp() имеет документированную проблему с доступностью: при 200% масштабировании текст может не увеличиться достаточно. Для дизайн-системы, которую будут использовать партнёры разного технического уровня, статическая двухточечная шкала (мобильный + десктоп) надёжнее.
3.3. Межбуквенный интервал
Контекст
Правило
Основной текст, заголовки (обычный регистр)
Без дополнительного трекинга — Gotham предкалиброван
Дисплей / Заголовок 1 от 32 пикселей
Отрицательный: от −1 до −3 пикселей (плотнее при крупных размерах)
Прописные кнопки и метки до 14 пикселей
Положительный: 0.08em — 0.15em
3.4. Начертания
Название
Вес
Роль
Чёрный
900
Дисплейные / героические заголовки
Полужирный
700
Заголовок 1, Заголовок 2, кнопки действия
Средний
500
Заголовок 3, навигация, заголовки карточек
Обычный
400
Основной текст
Лёгкий
300
Параграфы, вторичный текст
Запрещены дробные веса (325, 450 и подобные) — Gotham и Montserrat загружены только на перечисленных весах. Дробный вес вызывает синтез шрифта операционной системой («фальшивый» полужирный/лёгкий), что выглядит иначе, чем настоящий шрифт.
3.5. Тренд 2025–2026: вариативные шрифты
Вариативные шрифты — один файл (100–200 КБ) вместо 4–5 статических (400–800 КБ). Меньше сетевых запросов, нет сдвигов макета при загрузке. Возможность плавно анимировать переходы между весами.
3.6. Вопросы для обсуждения
Рассмотреть Montserrat Variable вместо нескольких статических файлов?
Нужен ли отдельный дисплейный шрифт для героических секций (например, Space Grotesk)?
Межбуквенный интервал для прописных кнопок: 0.08em или 0.12em?
4. Отступы и сетка
4.1. Основа: сетка 8 пикселей
Все отступы — кратные 8 пикселям (4 пикселя как полушаг для мелких деталей).
Почему 8, а не 4, 5 или 10:
8 делится нацело при всех плотностях экрана (1×, 1.5×, 2×, 3×) — элементы рендерятся без субпиксельных артефактов, линии остаются чёткими.
Сетка 4 пикселя — слишком мелкая, даёт чрезмерное количество вариантов.
Сетка 10 пикселей — не делится на 1.5× (15 — дробное значение, субпиксели).
Сетка 5 пикселей — не делится на 2× чисто.
Сетку 8 пикселей используют: Google Material Design, Apple Human Interface Guidelines, Porsche Design System, IBM Carbon.
Внутри компонента: иконка ↔ подпись, отступы карточки
Мезо
24–48 пикс
Между компонентами: интервалы между карточками
Макро
от 48 пикс
Между секциями страницы
Правило близости: внутренний отступ компонента всегда меньше расстояния между компонентами. Отступ карточки < интервал между карточками < интервал между секциями.
4.4. Вертикальный ритм
Базовая единица: размер основного текста 16 пикс × межстрочный интервал 1.6 ≈ 24 пикселя — это единица ритма. Вертикальные промежутки между секциями кратны 24: 24 · 48 · 72 · 96 · 120.
Это не золотое сечение, а музыкальная аналогия: как ноты в такте, элементы попадают «в ритм», и пользователь подсознательно воспринимает это как гармонию.
4.5. Контейнер
Параметр
Мобильный
Планшет
Десктоп
Максимальная ширина контента
—
—
1440 пикс
Боковые отступы
20 пикс
40 пикс
160 пикс
Почему 160 пикселей на десктопе? Стандарт отрасли — 80–120 пикселей. 160 — верхняя граница люксового сегмента. Это осознанный выбор: «мы достаточно уверены в себе, чтобы не заполнять каждый пиксель».
Для лендингов и продуктовых страниц белое пространство — это сообщение о качестве.
Правила:
Один доминирующий элемент на секцию — никогда два конкурирующих фокуса
Отступ секции >= 2× интервала между элементами внутри
Раскрывать контент постепенно (ритм галереи), а не всё сразу
Когда уменьшать пространство: каталоги, таблицы сравнения, формы, результаты поиска — контексты, где информационная плотность равна эффективности.
4.7. Вопросы для обсуждения
160 пикселей боковой отступ контейнера — это правильно для CP? Или слишком агрессивно?
Нужна ли отдельная «компактная» плотность для панели управления / CRM?
5. Контрольные точки (брейкпоинты)
Ширина
Название
Назначение
480 пикс
xs
Крупные телефоны
560 пикс
sm
Маленькие планшеты
768 пикс
md
Планшеты, основной переход мобильный → планшет
920 пикс
tab
Большие планшеты
1024 пикс
lg
Ноутбуки, основной переход планшет → десктоп
1100 пикс
desk
Десктоп
1280 пикс
xl
Широкий десктоп
1360 пикс
2xl
Сверхширокий
1560 пикс
3xl
Ультраширокий
1920 пикс
4xl
Full HD — 24% десктопного трафика
Принцип «сначала мобильный»: базовые стили определяются для мобильного, затем расширяются через медиа-запросы от меньшего к большему.
6. Тени и скругления
Скругления углов
Токен
Значение
Применение
Без скругления
0 пикс
—
Малое
4 пикс
Чекбокс, чип
Среднее
8 пикс
Кнопка, поле ввода, карточка
Большое
12 пикс
Карточка, модальное окно
Очень большое
16 пикс
Модальное окно, нижняя панель
Полное
9999 пикс
Аватар, бейдж, плавающая кнопка
Важно: скругление углов контролируется токенами. Переключение современного стиля (8 пикс) на классический (0 пикс) меняет один файл — все компоненты обновляются автоматически. Это основа тематизации.
Тени
Токен
Значение
Применение
Лёгкая
Минимальная тень
Тонкое возвышение
Средняя
Умеренная тень
Карточки, выпадающие списки
Глубокая
Выраженная тень
Модальные окна, приподнятые поверхности
Свечение
Розовое свечение бренда
Эффект свечения фирменного цвета
7. Анимации и движение
Тайминг
Скорость
Длительность
Применение
Быстро
100–200 мс
Наведение, переключатель, чекбокс, ошибка формы
Стандартно
200–300 мс
Выпадающий список, аккордеон, меню
Медленно
300–500 мс
Модальное окно, переход между страницами
Характер движения
Стандартный: замедление к концу — начинает быстро, плавно замедляется. Создаёт ощущение «уверенного торможения», как автомобиль премиум-класса.
Уважение к настройкам пользователя
Обязательно уважать системную настройку «уменьшить движение». Все анимации должны отключаться, когда пользователь активировал эту опцию в настройках своего устройства.
8. Компоненты (120+ штук)
Полный каталог с интерактивными примерами: https://storybook.ceramic-pro.com
Все интерактивные состояния: обычное, наведение, фокус (клавиатура), нажатие, отключено
Навигация клавиатурой
Атрибуты доступности (ARIA)
Зона нажатия не менее 44×44 пикселя
Работает на тёмном фоне (основной) И на светлом
Адаптивность (сначала мобильный)
Использует только токены (никаких жёстко прописанных значений)
9. Темизация
Модель: ядро (фиксированное) + тема (гибкая)
Фиксированное (нельзя менять)
Гибкое (контролируется темой)
Фирменный розовый #ec1d91
Скругление углов
Gotham / Montserrat
Интенсивность теней
Сетка 8 пикселей
Скорость анимации
API компонентов
Плотность (компактная/стандартная)
Стандарт доступности WCAG 2.1 AA
Доступные темы
Современная (по умолчанию): скруглённые углы (8 пикс), мягкие тени, плавные переходы.
Классическая: квадратные углы (0 пикс), минимальные тени, быстрые переходы — совместимость со старым квадратным дизайном.
Референс: BMW Group — общее ядро + суб-бренды (BMW, MINI, Rolls-Royce) имеют свои переопределения токенов. Shopify Polaris — продавцы настраивают через токены темы.
Вопросы для обсуждения
Какой стиль станет «официальным» для нового сайта CP?
Нужно ли партнёрам давать выбор стиля (современный/классический)?
Нужен ли «переходный период» для партнёров при смене стиля?
10. Что делает интерфейс «дорогим»
Это не о количестве эффектов, а о сдержанности и точности.
Белое пространство
Меньше элементов — больше уверенности. Белое пространство транслирует: «нам не нужно кричать, чтобы впечатлить».
Типографика
Один-два тщательно подобранных шрифта. Щедрый межбуквенный интервал в прописных метках. Минимализм в иерархии: вес и размер работают тонко, без крика.
Цвет
Чёрный + белый + один акцент. Нейтральные тона (каменный серый, древесный уголь, чуть тёплый белый) вместо ярких палитр. Фирменный розовый используется точечно, а не повсюду.
Медиа
Фотографии высокого разрешения доминируют. Подход «стиль жизни»: «как ощущается владение», а не «что это такое». Анимации при прокрутке — плавные, целенаправленные.
Интерфейс
Минимальное обрамление. Чистые линии. Каждый элемент служит цели. Без декоративных завитушек.
Референсы:
Mercedes-Benz — фотографии высокого разрешения, иммерсивные визуалы, стильная навигация.
Porsche — конфигуратор с тёмным элегантным интерфейсом.
Библиотека компонентов Figma: захваченные компоненты из Storybook
Проверка контраста: WebAIM Contrast Checker
Этот документ — основа для совместной доработки дизайн-системы. Открытые вопросы помечены чекбоксами [ ]. При принятии решения — отметить и зафиксировать: кто, когда и почему.