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

серпень 2026

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

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

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

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

---

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

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