Синтетичний контент. «ОБЕРТ» — вигаданий сервіс, створений нами для показу дизайн-системи. Назви, тексти, цифри й дані в таблицях вигадані. Реальних замовників, відгуків і чужих логотипів на цьому стенді немає.
Дизайн-система · UI/UX · демо-стенд GuardLabs
Лендинг сервісу, кабінет клієнта й адмінка оператора. Один файл теми на 4 сторінки: 9 кольорових ролей, 10 кроків типографіки, крок сітки 4 px. Змінюєте одне значення — змінюються всі три екрани одразу.
Що показує стенд
Це не три окремі картинки: кнопка, поле, картка й таблиця на всіх трьох сторінках — той самий код і ті самі токени.
Перший екран, блок можливостей, три кроки роботи, тарифи з перемикачем періоду, поширені питання і форма заявки з живою перевіркою полів.
ВідкритиСписок замовлень картками й рядками, фільтри, пошук, картка з деталями. Окремо показані три стани, які найчастіше забувають: порожньо, завантаження й помилка.
ВідкритиТаблиця замовлень із фільтрами, пошуком і сортуванням, масовий вибір рядків, форма створення з перевіркою і модальне вікно підтвердження.
ВідкритиКольорові токени
У верстці не зустрічається жодного #hex. Компоненти знають лише ролі: --accent, --surface, --danger. Через це темна тема — це 20 рядків перевизначення ролей, а не другий комплект верстки.
Чому не синій. Синій та індиго — колір за замовчуванням майже кожного згенерованого макета, і замовники цю ознаку вже впізнають. Тут основа — хвойна зелень із теплою латунню, а нейтральні тони зсунуті в тепло (відтінок 95°), щоб сірий не читався як «системний діалог».
Токени типографіки
Заголовки — Unbounded (українська гарнітура, широкі форми), текст і інтерфейс — Manrope, цифри й технічні підписи — JetBrains Mono. Проміжних розмірів немає: якщо потрібен розмір «між», беруть найближчий крок.
Основний текст не опускається нижче 16 px, довжина рядка обмежена 66 знаками (.measure), міжрядковий у тексті 1,6 — щоб абзац читався, а не проглядався.
Простір, форма, глибина
Кожен відступ кратний 4. Довільних чисел на кшталт 13 px чи 27 px у системі немає — саме через них верстка «пливе» між екранами.
Правило вкладення: внутрішній елемент завжди має менший радіус, ніж контейнер. Поле (8) всередині картки (16) — а не навпаки.
Тіні не сірі, а кольору тексту з прозорістю — на теплому тлі сіра тінь виглядає брудною. У темній темі це окремі значення з чорним, бо просто «зробити темніше» там не працює.
Компоненти
Мінімальна висота 44 px — розмір, у який людина влучає пальцем без промаху. Малий варіант 34 px допускається лише всередині рядка таблиці.
У кожного бейджа є крапка кольору й слово. Колір ніколи не є єдиною ознакою статусу — інакше екран не читає той, хто не розрізняє червоне й зелене.
Замовлення збережено. Номер призначено автоматично.
Не вдалося зберегти: склад недоступний. Спробуйте ще раз за хвилину.
Рішення й причини
Найчастіше замовника лякає не сам вигляд, а відчуття, що макет зроблено навмання. Тому кожне рішення нижче має причину, яку можна перевірити на екрані.
Уся тема живе в theme.css. Верстка не знає жодного кольору напряму, тому темна тема, зміна фірмового кольору чи другий бренд — це правка одного файлу, а не пошук по всіх сторінках. Перевірити просто: перемикач у шапці не підвантажує другу таблицю стилів.
Сирі кольори (--pine-500) не використовуються у верстці — лише ролі (--accent). Через це «зробити акцент теплішим» не ламає статуси, а «змінити колір помилки» не зачіпає кнопку. Один рівень токенів завжди рано чи пізно злипається.
Якщо обведення фокуса пофарбувати у фірмовий колір, воно зникне саме там, де найпотрібніше — на фірмовій кнопці. Тут фокус — латунний, він видимий і на зеленому, і на білому, і на темному.
Крок 8 занадто грубий для дрібних елементів (бейджі, іконки в рядку), крок 2 не дає жодної дисципліни. 4 — компроміс, у якому дизайнер і верстальник називають однакові числа й макет збігається з кодом без «підганяння на око».
Порожній список, завантаження й помилка — те, що бачить кожен новий користувач у перший день, і те, що найчастіше відсутнє в макеті. У кабінеті ці три стани показані окремими кнопками — їх можна увімкнути й подивитися.
Інверсія дає брудні кольори й важкі тіні. Тут у темній темі свої значення: акцент світлішає (щоб контрастувати з темним тлом), тіні стають чорнішими, м'які підкладки — темними. Ролі ті самі, значення інші.
Перевикористання
design-system-uiux/ ├── theme.css токени: колір, простір, шрифт, радіус, тінь ├── ui.css компоненти: кнопки, поля, картки, таблиця, модалка ├── ui.js тема, іконки, тости, модальні вікна, вкладки ├── index.html ця обкладинка ├── landing.html екран 1 — лендинг ├── cabinet.html екран 2 — кабінет └── admin.html екран 3 — адмінка
Четвертий екран додається як ще один HTML-файл із тими самими трьома підключеннями. Нових стилів при цьому не пишуть — беруть наявні класи.
Натисніть — і фірмовий колір зміниться на всій сторінці: у кнопках, посиланнях, бейджах, підсвітках. Жодного рядка верстки при цьому не змінено, переписано лише чотири значення ролі.
Це і є відповідь на питання «а якщо ми потім захочемо інший колір».