# Дизайн-система: что это и нужна ли она сайту

Обновлено 29 октября 2026 г. · 2 мин чтения · Студия AETHER · https://aether-studio.ru/blog/dizajn-sistema

Дизайн-система — набор готовых элементов и правил, из которых собирается интерфейс: кнопки, поля, карточки, цвета, отступы. Большие компании строят их годами, а небольшому сайту обычно хватает компактной версии. Разбираем, из чего состоит дизайн-система и когда она действительно нужна.

## Что это такое

Дизайн-система — это:

- **основа** — цвета, шрифты, размеры, отступы, скругления, тени, записанные как правила;
- **компоненты** — готовые элементы интерфейса: кнопки, поля ввода, карточки, меню, всплывающие окна, — каждый в нескольких состояниях;
- **правила** — когда какой элемент использовать и как сочетать;
- **код** — те же компоненты, уже запрограммированные, чтобы разработчики собирали страницы, а не рисовали каждую кнопку заново.

Всё это хранится в одном месте: в Figma для дизайнеров и в библиотеке компонентов для разработчиков.

## Чем отличается от фирменного стиля

Фирменный стиль говорит, как выглядит бренд везде: на сайте, визитках, упаковке, вывеске. Дизайн-система — как устроен цифровой интерфейс: из каких деталей собраны экраны и как они себя ведут. Дизайн-система опирается на фирменный стиль, но идёт дальше — до каждого состояния кнопки. О фирменном стиле — статья [«Фирменный стиль»](https://aether-studio.ru/blog/firmennyj-stil).

## Зачем она нужна

- **Единообразие.** Кнопки на всех страницах одинаковые, отступы ровные, ничего не «поехало».
- **Скорость.** Новая страница собирается из готовых блоков за часы, а не дни.
- **Меньше ошибок.** Состояния, ошибки форм, мобильные версии продуманы один раз для всех.
- **Проще передавать.** Новый дизайнер или разработчик быстро понимает, как всё устроено.

## Открытые дизайн-системы

Крупные компании публикуют свои дизайн-системы: Material Design у Google, Human Interface Guidelines у Apple, Gravity UI у Яндекса и многие другие. Их полезно изучить, чтобы понять, как продуманы компоненты и состояния, — даже если сайт делается в своём стиле.

## Нужна ли она вашему сайту

- **Большой продукт или сервис** с десятками экранов и несколькими дизайнерами — нужна полноценная.
- **Сайт компании или интернет-магазин**, который будет расти, — хватит компактной: палитра, шрифты, кнопки, формы, карточки, сетка и отступы. Она делается вместе с дизайном сайта.
- **Лендинг на одну задачу** — отдельная дизайн-система не нужна, но правила всё равно есть: одни и те же цвета, шрифты и размеры по всей странице.

## Как это устроено у нас

На нашем сайте цвета и шрифты заданы общими переменными в коде: фон, основной и приглушённый текст, цвета для светлых глав, гарнитуры для текста, заголовков и подписей. Поменять оттенок — значит поменять одну строку, и он изменится по всему сайту. Такую основу мы закладываем и в сайты клиентов: элементы рисуем в макете один раз, а потом собираем из них все страницы. О макете — статья [«Макет сайта»](https://aether-studio.ru/blog/maket-sajta).

В корпоративном сайте это главная и шаблоны внутренних страниц — услуги, кейса, статьи, контактов, — собранные из одних элементов.

**Услуга «Корпоративный сайт»:** от 7 рабочих дней, от 45 000 ₽, обычно 45 000–130 000 ₽. Подробнее: https://aether-studio.ru/services/corporate

**Обсудим дизайн вашего сайта.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.