Дизайн-система — это набор решений, которые используются повторно: цвета, шкала шрифтов, отступы, кнопки, поля форм, правила того, как всё это сочетается. Сделали один раз — применяете везде.
А ещё для многих компаний, которым её продают, это выброшенные деньги.
Дизайн-система — это накладные расходы, пока у вас нет второй поверхности, которую нужно строить. Весь её экономический смысл — в амортизации: вы платите один раз и распределяете затраты на множество экранов, на годы и обычно больше чем на один продукт. Если у вас один сайт на восемь страниц и никаких планов, амортизировать нечего, и за эти деньги вы покупаете более аккуратный процесс, а не лучший результат.
Эта статья о том, где на самом деле проходит граница, потому что обе ошибки обходятся дорого. Купить дизайн-систему слишком рано — значит потратить бюджет на инфраструктуру для здания, которое вы не собираетесь строить. Купить слишком поздно — значит платить за то, чтобы распутать несогласованность, которая уже расползлась по коду.
Что вы на самом деле покупаете
Под этим словом скрываются четыре вещи очень разной стоимости, и людям часто продают четвёртую, когда им нужна была первая.
Дизайн-токены. Исходные значения с именами: фирменный синий, шкала шрифтов, шаги отступов, радиусы скругления, уровни теней. Короткий документ или файл с переменными. Дёшево — несколько часов — и почти всегда оправдано, даже для одного сайта.
Инвентарь компонентов. Кнопки, поля ввода, карточки, таблицы, уведомления — каждый со своими состояниями: обычное, наведение, фокус, неактивное, загрузка, ошибка. Средняя стоимость, и именно здесь «единообразие» перестаёт зависеть от памяти дизайнера.
Правила использования. Та часть, которую все пропускают, и та, которая на самом деле не даёт интерфейсу расползтись. Не как выглядит кнопка, а когда использовать основную, сколько их можно на одном экране, что означает карточка, чему разрешено двигаться при наведении. Без этого вы получаете библиотеку компонентов, которой пользуются вразнобой, — а это выглядит ровно так же, как её отсутствие.
Живая библиотека с документацией. Компоненты, реализованные в коде, опубликованные, версионированные, задокументированные и поддерживаемые. Это отдельный продукт со своими расходами на содержание, и смысл он имеет только при настоящем масштабе.
Ошибка — относиться к этому как к пакету. Первое пригодится почти любому проекту. Четвёртое нужно очень немногим.
Честная проверка: будет ли второй запуск?
Вот условия, при которых система окупается. Нужно хотя бы два из них.
Больше одной поверхности. Сайт и админ-панель. Веб-приложение и мобильное приложение. Маркетинговый сайт и личный кабинет клиента. С двух поверхностей общие решения начинают давать сложный процент, а не просто лежать в документе.
Больше одного человека строит интерфейс. Как только двое принимают решения по интерфейсу независимо друг от друга, вы платите либо за систему, либо за расхождения. Третьего не дано: расхождения — это просто счёт, который приходит позже, и разобраться в нём сложнее.
Продукт, который продолжает расти. Новые экраны каждый квартал, годами. Каждый новый экран дёшев, если детали уже есть, и превращается в отдельную дизайнерскую задачу, если их нет.
Интерфейс, с которым вы будете жить долго. Если через полтора года всё равно будет полный редизайн, платить за долговечность нет смысла.
Если ничего из этого не про вас — один сайт, один дизайнер, горстка страниц, редизайн при смене бренда, — купите токены, пропустите остальное, а деньги лучше потратьте на тексты на страницах. Этот совет лишает нас более крупного счёта, но мы лучше дадим его, чем продадим вам инфраструктуру, которой вы не будете пользоваться.
Как это выглядит, когда окупается
Три наших собственных проекта лежат по разные стороны этой границы — так её проще всего показать.
В BiliMind она окупается. Одна и та же кодовая база на Nuxt работает в вебе и собирается в Capacitor-приложения для Android и iOS. Один интерфейс, три места, где он живёт. Каждый компонент, сделанный один раз, сделан сразу для трёх мест, и каждая несогласованность, которой удалось избежать, не появится ни в одном из трёх. Не существует версии этого проекта, в которой отдельный дизайн под каждую платформу был бы дешевле.
В Bronjoy она окупается ещё сильнее. Монорепозиторий на pnpm с двумя приложениями на Nuxt, плюс админка на Filament, плюс Telegram-мини-приложение, плюс боты — и всё это на трёх языках: русском, узбекском и английском. Многоязычность — множитель, который люди недооценивают: каждый компонент должен выдерживать текст, который на одном языке на 30% длиннее, чем на другом, а каждая подпись должна браться из одного словаря, а не писаться там, где используется. Без общих определений кнопка, которая помещается на английском и ломается на русском, — это не один баг, а по багу на каждое место, где эта кнопка появляется.
WAYU Malaysia — интересный промежуточный случай. Многоязычный сайт на узбекском, малайском, английском и русском с Payload CMS под капотом, сделанный за две недели. При таком сроке полная библиотека компонентов с документацией съела бы весь график. Нужны были токены и дисциплинированный набор правил вёрстки — ровно столько общих решений, чтобы четыре языка и пятнадцать коллекций CMS оставались согласованными, и ни граммом больше.
За третий пример и стоит держаться. Вопрос никогда не звучит как «нужна система или нет». Вопрос в том, сколько системы нужно этому проекту при таком размере.
Дешёвые 80%: купите токены
Если вынести из статьи что-то одно, то вот это. Почти для любого проекта, включая небольшие, настаивайте на записанном наборе дизайн-токенов с самого начала. Это часы, а не недели.
Цвет. Не «синий», а точные значения, названные по роли, а не по внешнему виду. surface, text-primary, text-muted, border, accent и семантический набор: успех, предупреждение, опасность. Именно названия по ролям позволяют одной системе выдавать светлую и тёмную тему без всякого редизайна.
Шкала шрифтов. Фиксированный набор размеров с начертаниями и межстрочными интервалами — и правило, что ничто не использует размер вне этого набора. Одно это ограничение устраняет самую распространённую форму визуального дрейфа — четырнадцать чуть-чуть разных размеров заголовков, накопившихся за два года.
Шкала отступов. Небольшой набор шагов — 4, 8, 12, 16, 24, 32, 48, 64 — и правило, что все промежутки берутся только из неё.
Скругления, рамки, тени. По два-три варианта каждого, используемых по смыслу: тень, которая означает «парит над остальным», рамка, которая означает «отдельный объект».
Этот документ — разница между сайтом, который может развивать кто-то другой, и сайтом, который сначала придётся разбирать обратной инженерией. Он входит в передачу проекта, и именно благодаря ему новая страница, добавленная на третий год, всё ещё выглядит своей.
Где дизайн-системы ломаются
Три сценария провала — все частые, все дорогие.
Система, которой никто не пользуется. Построена, задокументирована, опубликована, проигнорирована — потому что её делала дизайн-команда без тех, кто каждый день собирает экраны. Систему либо принимают в работу, либо она украшение.
Система без правил использования. Все компоненты есть, но нигде не сказано, когда какой использовать. Два дизайнера собирают из одной библиотеки два несовместимых экрана, и оба формально всё соблюли.
Система, которая не умеет говорить «нет». Каждое исключение добавляется новым вариантом, пока не наберётся одиннадцать стилей кнопок и выбрать одну не станет сложнее, чем нарисовать новую. Ценность системы — в том, что она запрещает; библиотека, которая впитывает каждую просьбу, — это просто костюм для несогласованности.
В 2026 году стоит назвать и четвёртый, более тонкий: система, из-за которой всё выглядит грамотно и одинаково. Лоск больше не дефицит, и сайт, собранный из со вкусом подобранных настроек по умолчанию, теперь не сообщает ничего. Отдельно мы развернули этот аргумент в статье «Теперь всё выглядит одинаково», и здесь он важен потому, что дизайн-система решает проблему единообразия — вполне реальную — и никак не помогает с узнаваемостью, а это уже совсем другая проблема.
Что просить в зависимости от размера проекта
| Ваша ситуация | Что покупать | Примерно |
|---|---|---|
| Один сайт, до 12 страниц | Дизайн-токены, записанные | Часы |
| Сайт плюс админ-панель | Токены плюс инвентарь компонентов | Дни |
| Продукт с дорожной картой | Токены, компоненты, правила использования | 1–2 недели |
| Несколько поверхностей, несколько исполнителей | Всё целиком, с поддержкой | Постоянно |
Наша услуга дизайна цифровых продуктов стоит от $299 и занимает от одной до трёх недель, а в списке результатов прямо указаны UI-кит и дизайн-система, дизайн-токены и передача в разработку, а также встроенная доступность. Для небольшого сайта большая часть этого бюджета должна уйти на исследование и интерфейс, а документ с токенами занимает полдня. Для платформы пропорция обратная.
Чего стоит избегать, так это платить за пропорцию, удобную подрядчику, а не проекту.
Расскажите, что вам нужно. В ответ вы получите фиксированную цену и дату сдачи — бесплатно и без обязательств продолжать.
Частые вопросы
Можно ли вместо этого взять готовую дизайн-систему?
Да, и для внутренних инструментов это часто правильный ответ: зрелая библиотека компонентов сразу даёт вам доступные и проверенные компоненты. Цена вопроса в том, что ваш продукт будет выглядеть как любой другой продукт на той же библиотеке. Для админ-панели, которую никто за пределами компании не видит, это нормальный размен. Для вашей публичной витрины это ровно то, чего вы пытались избежать.
Дизайн-система удешевляет разработку?
Первую — нет. Она удешевляет второй, третий и десятый экраны, а ещё удешевляет изменения: цвет или отступ меняется в одном месте, а не выискивается в сорока. Если второго экрана и изменений не будет, не будет и экономии.
Кто должен владеть ей после передачи проекта?
Вы — в редактируемом виде: файл Figma с сохранёнными компонентами и определения токенов в коде. Важно владеть именно определениями. Если система живёт только внутри инструментов вашего подрядчика, вы арендовали единообразие, а не купили его.
Наш сайт уже несогласован. Поздно?
Нет, и дешевле всего начать с аудита, а не с переделки. Соберите все цвета, размеры и отступы, которые реально используются, — список обычно шокирует и сам по себе показывает, что так нельзя, — затем определите тот небольшой набор, который должен был быть с самого начала, и переходите на него по мере того, как трогаете страницы. Система, внедрённая постепенно, стоит гораздо больше, чем та, что пришла вместе с переписыванием.
А доступность идёт в комплекте?
Только если её закладывают сознательно. Дизайн-система — отличное место, чтобы решить вопрос доступности один раз: состояния фокуса, контрастность, размеры областей нажатия, подписи полей форм, — потому что если решить это в компоненте, каждое его использование унаследует решение. Это настоящий аргумент в пользу системы, и мы ставим его рядом с юридическими доводами в пользу доступности, а не считаем делом вкуса.
