Aurum Multibrand
Одне казино-лобі в чотирьох брендах, світлій і темній темі, на одному наборі компонентів. Робоча модель системи, яку я будую для команд із кількома брендами.
- Обсяг
- 4 бренди × 2 теми · 29 компоненти
- Роль
- Продуктовий дизайн · Дизайн-система · Пайплайн токенів
- Статус
- Живе демо · Публічний репозиторій
- Стек
- Figma · Tokens Studio · GitHub · React · CSS-змінні
Контекст
White-label та iGaming-платформи випускають один продукт під кількома брендами. Кожен бренд хоче свої кольори, шрифти й форми, а продуктова команда — одну кодову базу. Aurum Multibrand моделює саме це: казино-лобі з промо, плитками ігор, турнірами, магазином і екранами акаунта, де весь вигляд задають лише токени. Перемкніть бренд або тему — і весь інтерфейс змінюється без перезавантаження.
Проблема
Значення бренду живуть у компонентах
Коли кольори й радіуси зашиті в кнопку чи картку, кожен новий бренд означає правку кожного компонента.
Бренди множаться на теми
Чотири бренди у світлій і темній темі — це вісім комбінацій. Якщо вести їх вручну, вони розходяться.
Дизайн і код живуть окремо
Змінні у Figma і CSS у репозиторії правлять окремо, а контраст перевіряють на око.
Рішення
Шість шарів токенів. Компоненти просять значення за змістом, тема зіставляє зміст із брендом, і лише файл бренду тримає сирі значення. Tokens Studio пушить JSON у GitHub, скрипт збірки перетворює його на CSS-змінні й перевіряє.
- componentsЩо просить кожен компонент: button.primary.bg, chip.selected.bg.548 · 29 компоненти
- themeЗміст для світлої й темної теми: заливка, текст, межа, поверхня.73 × 2
- typographyТекстові стилі, спільні для всіх брендів.25
- mapРампи, згенеровані з кольорів бренду: від 100 до 900.41
- brandЄдиний файл на бренд: кольори, шрифти, радіуси, відступи.55 × 4змінюється для бренду
- coreСирі шкали: розміри, радіуси, товщини.59
Результат
- 55значень у файлі брендуОднакові ключі в кожному бренді. Новий бренд — копія цього файлу з новими значеннями.
- 0змін у компонентах для нового брендуКомпоненти посилаються лише на зміст. Чекер зупиняє збірку, якщо компонент тягнеться до сирого значення.
- 8комбінацій бренд × темаЗ однієї бібліотеки компонентів і одного CSS-файлу, перемикаються двома атрибутами на кореневому елементі.
Що я зробив би інакше
Я додав би автоматичну перевірку контрасту до другого бренду, а не після четвертого. Коли чекер з'явився, він знайшов, що text.accent у світлій темі не проходить WCAG AA у жодному бренді: Aurum 2.13, Nova 1.67, Fiesta 1.42, Ultra 3.03 при потрібних 4.5. Добра новина в тому, де живе виправлення: одна правка в спільному шарі теми виправляє всі чотири бренди одразу.