# Дизайн-система с нуля: с чего начать, чтобы не переделывать через полгода

Токены, компоненты, документация — в каком порядке их строить, чтобы дизайн-система не развалилась при первом крупном редизайне.

*Рубрика: Продукт и UX · Опубликовано: 30 мая 2026 г. · Автор: Александр Покидов*

Канонический URL: https://pokidov.dev/blog/dizain-sistema-s-nulya

---

Самая частая ошибка при запуске дизайн-системы — начать с компонентов, а не с токенов. Тогда через полгода у вас три оттенка «основного синего» в разных местах.

## Порядок слоёв

1. Токены: цвет, типографика, отступы, радиусы, тайминги анимаций.
2. Примитивы: кнопка, поле ввода, чип, карточка.
3. Композиты: форма, карточка проекта, модальное окно.
4. Паттерны страниц: как композиты складываются в реальные экраны.

![Палитра токенов дизайн-системы — тёмная тема](https://pokidov.dev/_astro/content-2.GIxjhAcD_ZeunFh.jpeg)

![Палитра токенов дизайн-системы — светлая тема](https://pokidov.dev/_astro/content-3.C530pwJV_ZeQOU.jpeg)

![Сетка компонентов: кнопки, чипы, поля ввода](https://pokidov.dev/_astro/content-4.mwzbpzTf_2upnDa.jpeg)

> **Контраст — не опция**
Каждая пара «текст на фоне» в токенах должна проходить минимум AA (4.5:1) — иначе доступность придётся чинить точечно на каждой странице.

![Пример карточки, собранной из примитивов дизайн-системы](https://pokidov.dev/_astro/content-5.WrespwZ7_i1EFn.jpeg)
*Карточка — это композиция из уже существующих токенов и примитивов, не новый набор стилей.*

### Документация

Живой пример с переключателем состояний экономит часы созвонов «а как это должно выглядеть при ошибке».

## Ключевые выводы

- Дизайн-токены — это первый слой, а не последний штрих: без них компоненты негде переиспользовать согласованно.
- Начинать стоит с 5–7 самых частых компонентов, а не пытаться описать всё сразу.
- Доступность (контраст, фокус-состояния) дешевле заложить в токены, чем чинить постфактум.
- Документация с живыми примерами используется чаще, чем статичный PDF-гайдлайн.