Принципы
Пять фундаментальных принципов определяют каждое решение в дизайн-системе Ceramic Pro. Компоненты — это слова языка бренда. Токены — грамматика. Принципы — тон голоса.
Премиальность по умолчанию
Каждый элемент должен транслировать качество. Не «достаточно хорошо», а «безупречно». Белое пространство, точные пропорции, внимание к деталям — это не декорация, а основа восприятия бренда.
Porsche, Lexus, Mercedes-Benz
Porsche Design System — нулевая компромиссность в деталях. Lexus — каждый пиксель на своём месте. Mercedes-Benz — утончённость без показушности.
Единообразие важнее креатива
Консистентность важнее индивидуальных творческих решений. Пользователь не должен «переключать контекст» при переходе между страницами или продуктами CP.
Apple HIG, IBM Carbon
Apple Human Interface Guidelines — строгие правила, которые создают ощущение единой экосистемы. IBM Carbon — 80+ компонентов, все подчинены одной системе.
Доступность — не опция
Доступность — не «бонус для галочки», а требование закона (Европейский акт о доступности, июнь 2025) и этики. 1 из 12 мужчин — дальтоник. 8 миллионов пользователей в одних только США навигируют только клавиатурой.
WCAG 2.2, Европейский акт о доступности
Стандарт: WCAG 2.2 уровень AA (ISO/IEC 40500:2025). Минимальный контраст текста 4.5:1. Зона нажатия 44×44 пикселя. Клавиатурная навигация на всех интерактивных элементах.
Сначала мобильные, всегда
62% мирового веб-трафика — мобильные устройства. Базовые стили = мобильные. Десктоп — расширение, не основа.
Mobile First
Принцип Mobile First: базовые стили определяются для мобильного, затем расширяются через медиа-запросы от меньшего к большему.
Всё через токены, ничего напрямую
Ни один цвет, отступ или размер шрифта не вписывается «жёстко». Всё через токены — атомарные значения дизайна в одном файле. Изменил один токен — все компоненты обновились автоматически.
color: #ec1d91
color: var(--primary)
Shopify Polaris, Material Design 3
Shopify Polaris — «Цвет имеет назначение». Google Material Design 3 — три уровня токенов (базовый → системный → компонентный).