# Побудувала дизайн‑систему з 48 токенів на основі власного скляного матеріалу платформи й написала лінтер, який відхиляє магічне число, жорстко заданий розмір шрифту чи анімацію, що ігнорує налаштування зменшеного руху.

серпень 2026

**Ситуація.** Інтерфейс, який будують, додаючи представлення (view) одне за одним, накопичує значення: тут радіус заокруглення, там шрифт у чотирнадцять пунктів, ще деінде — анімація на дві десятих секунди. Кожне окремо цілком розумне, але разом вони дають дизайн, який неможливо змінити, бо немає одного «радіуса заокруглення», який можна було б змінити, — їх сорок, трохи різних, розкиданих по п'ятдесяти файлах.

**Завдання.** Візуальний словник треба було звести до набору іменованих значень, виражених через власні матеріали платформи, а не винайдених заново, і захистити перевіркою, щоб він знову не розрісся.

**Дія.** Система складається із сорока восьми токенів у шести групах: відступи, типографіка, колір, радіус, висота (elevation) і рух. Колір і матеріал побудовано на семантичних кольорах платформи та її скляному матеріалі, а не на фіксованих значеннях, і саме завдяки цьому інтерфейс підлаштовується під системний вигляд, акцентний колір і налаштування контрасту без жодного коду, який би за ними стежив. Типографіку прив'язано до текстових стилів платформи, тож вона масштабується відповідно до вибраного користувачем розміру тексту, а не фіксує значення в пунктах. Лінтер відхиляє три речі: числовий літерал там, де має бути токен відступу чи радіуса, жорстко заданий кегль будь‑де та анімацію, оголошену без урахування налаштування зменшення руху. Саме третю вимогу без лінтера почали б порушувати найшвидше, бо анімацію додають під час фінального шліфування, і пропускають якраз перевірку налаштування, — тож правило не дає навіть написати анімацію без такої перевірки, а не покладається на чиюсь пам'ять.

**Результат.** Сорок вісім токенів описують увесь інтерфейс, вигляд підлаштовується під систему, і жодне з трьох порушень не можна закомітити. Обмеження в тому, що система токенів забезпечує узгодженість, а не якість: тепер усе узгоджено, але узгодженість — не те саме, що добрий дизайн, а такого судження не виносить жоден лінтер у цьому проєкті.

---

- Роль: Інженер дизайн‑систем
- Категорії: [Frontend‑розробка](https://brand.engineer.company/uk/categories/frontend/), [Автоматизація та CI/CD](https://brand.engineer.company/uk/categories/automation/), [Тестування та QA](https://brand.engineer.company/uk/categories/testing/), [Дизайн‑системи та UI](https://brand.engineer.company/uk/categories/design-systems/), [UX / UI‑дизайн](https://brand.engineer.company/uk/categories/ux-ui/)
- Послуги: [Frontend‑розробка](https://brand.engineer.company/uk/services/frontend-development/), [UI/UX‑дизайн та дизайн‑системи](https://brand.engineer.company/uk/services/ui-ux-design/), [Бренд, маркетинг та SEO](https://brand.engineer.company/uk/services/brand-marketing/)

<https://brand.engineer.company/uk/portfolio/built-a-48-token-design-system-160/>
