ENUK

Андрій Озеров · Дизайн-системи для мультибрендових продуктів

Багато брендів. Один код.

Я будую токен-архітектуру, де новий бренд — це один файл на 55 значень. Компоненти, розмітка й релізи лишаються тими самими. Доказ нижче: живий продукт у 4 брендах і 2 темах.

Перемкнути бренд наживоЯк це побудовано

Ключові цифри

  • 4бренди в живому демо, і всі на одному коді
  • 2теми на кожен бренд: світла й темна
  • 55значень у файлі бренду. Цей файл і є весь бренд

Змініть бренд. Код лишиться на місці.

Живе демо Aurum MultibrandЖиве демо Aurum Multibrand

Завантажую демо…

Оберіть Aurum, Nova, Fiesta чи Ultra, потім перемкніть світлу й темну тему. Змінюються кольори, шрифти, радіуси й відступи. Компоненти під ними — ні.Відкрити на весь екран ↗

Шість шарів. Бренд — лише один із них.

Компонент ніколи не знає, в якому він бренді. Він просить значення за змістом, тема обирає крок на кольоровій шкалі, і лише файл бренду тримає справжні кольори, шрифти й радіуси. Усі цифри нижче порахувані з токенів демо під час збірки.

Шари згори донизу

  1. Компоненти548 токенів · 29 компонентів

    Кнопки, картки й чіпи беруть значення за змістом, а не сирі кольори чи розміри.

  2. Тема73 на тему × 2

    Семантичні кольори: текст, заливка, рамка. Світла й темна — окрема вісь.

  3. Типографіка25 текстових стилів

    Зібрані зі шрифтів бренду й базової шкали розмірів.

  4. Шкали41 кроків шкал

    Світлі й темні відтінки рахуються з кольорів бренду — ніхто не підбирає їх руками.

  5. БрендСвій у кожного55 значень × 4 бренди

    Єдиний файл, який змінюється, коли додаєте бренд.

  6. Основа59 значень

    Сира шкала: розміри, радіуси, насиченість шрифту, базові кольори.

Простежте один токен крізь шари

Токен
Бренд
  1. Компонентbutton.primary.bg.default
  2. Темаcolor.fill.primary.default
  3. Шкалаcolor.product1.500крок 500 — це сам колір бренду
  4. Брендcolor.product1#CFA74A
  5. Результат#CFA74A

Перемкніть тему сайту вгорі праворуч: світла й темна беруть різні кроки тієї самої шкали.

Як бренд потрапляє з Figma в продакшен

  1. Бренд — це дані

    Кожен бренд — один файл у Token Studio з тими самими 55 ключами: кольори, шрифти, радіуси, відступи, сітка. Дизайнери змінюють значення. Компонентних токенів ніхто не торкається.

  2. Пайплайн збирає сам

    Токени живуть у Git як JSON і збираються в CSS-змінні. Автоперевірки ловлять пропущені ключі, зламані посилання між шарами й недостатній WCAG-контраст ще до релізу.

  3. Два атрибути перемикають

    Продукт змінює бренд і тему через data-brand і data-theme на одному елементі. Та сама розмітка, ті самі компоненти, один реліз для всіх брендів.

Для команд, у яких більше одного бренду

  • iGaming і white-label платформи

    Один продукт під багатьма брендами. Кожен оператор отримує свій вигляд без окремої кодової бази.

  • Фінтех із суббрендами

    Основний бренд і продукти для різних аудиторій чи ринків. Однаковий UX, різний вигляд, одна бібліотека.

  • Агенції з одним стеком

    Багато клієнтів на тих самих компонентах. Новий клієнт починається з файлу бренду, а не з форку.

Маєте більше ніж один бренд? Поговорімо.

Аудит поточної системи, токен-архітектура, повна мультибрендова бібліотека чи лише пайплайн із Figma в код. Розкажіть, де ви зараз.

Розповісти про свої бренди