Дизайн-система с нуля: чек-лист

Вы запустили продукт. Первые экраны сделали быстро. Потом добавили новые фичи. Еще фичи. И вдруг оказалось, что в продукте 7 разных оттенков синего, 4 стиля кнопок, и каждая страница выглядит по-своему.

Звучит знакомо? Добро пожаловать в мир без дизайн-системы.

Дизайн-система — это не просто UI-kit. Это единый язык продукта, который делает разработку быстрее, дизайн консистентным, а пользователей — счастливыми.

В этом гайде — пошаговый чек-лист создания дизайн-системы с нуля.

Что такое дизайн-система?

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

Что входит в дизайн-систему:

1. Design Tokens — базовые переменные (цвета, шрифты, отступы)
2. UI Components — переиспользуемые элементы (кнопки, инпуты, модалки)
3. Patterns — типовые решения (формы, навигация, dashboards)
4. Guidelines — правила использования (когда использовать что)
5. Code — реализация компонентов в коде

Зачем нужна дизайн-система?

Для дизайнеров:
- Не нужно придумывать кнопку с нуля каждый раз
- Фокус на UX, а не на пикселях
- Быстрое прототипирование

Для разработчиков:
- Готовые компоненты → быстрая разработка
- Меньше кастомного CSS
- Легко поддерживать и обновлять

Для бизнеса:
- Скорость вывода фич на рынок
- Консистентный user experience
- Снижение стоимости разработки

Для пользователей:
- Предсказуемый интерфейс
- Меньше cognitive load
- Лучше usability

Этап 1: Foundation (базовые переменные)

1.1. Цветовая палитра

Brand Colors (брендовые):

Primary (основной цвет бренда):
- primary-50: #E3F2FD (lightest)
- primary-100: #BBDEFB
- primary-200: #90CAF9
- primary-500: #2196F3 (base)
- primary-700: #1976D2
- primary-900: #0D47A1 (darkest)

Secondary (вторичный):
- secondary-500: #FF9800

Success/Error/Warning/Info:
- success-500: #4CAF50
- error-500: #F44336
- warning-500: #FF9800
- info-500: #2196F3

Neutral Colors (нейтральные, для текста/фонов):

- gray-50: #FAFAFA (lightest background)
- gray-100: #F5F5F5
- gray-200: #EEEEEE
- gray-500: #9E9E9E (secondary text)
- gray-700: #616161
- gray-900: #212121 (primary text)

Правило: Используйте оттенки с шагом 100 (50, 100, 200, ..., 900) для гибкости.

1.2. Типографика

Font Family:

Primary (для UI): Inter, system-ui, sans-serif
Secondary (для контента): -apple-system, BlinkMacSystemFont
Monospace (для кода): 'Fira Code', monospace

Font Sizes (модульная шкала):

- text-xs: 12px (0.75rem)
- text-sm: 14px (0.875rem)
- text-base: 16px (1rem) ← базовый размер
- text-lg: 18px (1.125rem)
- text-xl: 20px (1.25rem)
- text-2xl: 24px (1.5rem)
- text-3xl: 30px (1.875rem)
- text-4xl: 36px (2.25rem)

Font Weights:

- font-normal: 400 (body text)
- font-medium: 500 (subtle emphasis)
- font-semibold: 600 (UI elements, buttons)
- font-bold: 700 (headings)

Line Heights:

- leading-tight: 1.25 (headings)
- leading-normal: 1.5 (body text)
- leading-relaxed: 1.75 (long-form content)

1.3. Spacing (отступы)

8-point grid system (все отступы кратны 8px):

- space-1: 4px (0.25rem)
- space-2: 8px (0.5rem)
- space-3: 12px (0.75rem)
- space-4: 16px (1rem)
- space-5: 20px (1.25rem)
- space-6: 24px (1.5rem)
- space-8: 32px (2rem)
- space-10: 40px (2.5rem)
- space-12: 48px (3rem)
- space-16: 64px (4rem)

Правило: Используйте space-4 (16px) как базовый отступ между элементами.

1.4. Border Radius (скругление углов)

- radius-sm: 4px (small elements, badges)
- radius-md: 8px (buttons, inputs)
- radius-lg: 12px (cards)
- radius-xl: 16px (modals)
- radius-full: 9999px (pills, avatars)

1.5. Shadows (тени)

- shadow-sm: 0 1px 2px rgba(0,0,0,0.05) (subtle)
- shadow-md: 0 4px 6px rgba(0,0,0,0.1) (cards)
- shadow-lg: 0 10px 15px rgba(0,0,0,0.1) (modals)
- shadow-xl: 0 20px 25px rgba(0,0,0,0.15) (dropdowns)

Этап 2: UI Components (компоненты)

2.1. Кнопки

Варианты:

1. Primary (основное действие):
   - Background: primary-500
   - Text: white
   - Hover: primary-600

2. Secondary (второстепенное):
   - Background: transparent
   - Border: gray-300
   - Text: gray-700
   - Hover: gray-50

3. Destructive (удаление, опасное действие):
   - Background: error-500
   - Text: white

Sizes:

- sm: height 32px, padding 8px 12px, text-sm
- md: height 40px, padding 10px 16px, text-base (default)
- lg: height 48px, padding 12px 20px, text-lg

States:

• Default
• Hover (легкое затемнение)
• Active (нажата)
• Disabled (opacity: 0.5, cursor: not-allowed)
• Loading (спиннер + disabled)

Код (React + Tailwind):

<button className="
  bg-primary-500 text-white
  px-4 py-2 rounded-md
  hover:bg-primary-600
  disabled:opacity-50
  transition-colors
">
  Click me
</button>

2.2. Инпуты (текстовые поля)

Variants:

• Default
• Filled (с фоном)
• Outlined (с border)

States:

• Default
• Focus (border: primary-500, ring)
• Error (border: error-500, message снизу)
• Disabled (opacity: 0.5, cursor: not-allowed)

Anatomy:

• Label (опциональный)
• Input field
• Helper text (подсказка)
• Error message

Код:

<div className="space-y-1">
  <label className="text-sm font-medium">Email</label>
  <input
    type="email"
    className="
      w-full px-3 py-2
      border border-gray-300 rounded-md
      focus:outline-none focus:ring-2 focus:ring-primary-500
    "
    placeholder="you@example.com"
  />
  <p className="text-xs text-gray-500">We'll never share your email.</p>
</div>

2.3. Карточки (Cards)

Структура:

• Header (опционально)
• Content
• Footer (опционально)

Варианты:

• Flat (без тени)
• Elevated (с тенью)
• Outlined (с border)

Код:

<div className="
  bg-white rounded-lg shadow-md
  p-6 space-y-4
">
  <h3 className="text-lg font-semibold">Card Title</h3>
  <p className="text-gray-600">Card content goes here...</p>
  <button className="text-primary-500">Action</button>
</div>

2.4. Модальные окна (Modals)

Anatomy:

• Overlay (затемненный фон)
• Modal container
• Header (заголовок + close button)
• Body (контент)
• Footer (кнопки действий)

Правила:

• Центрировать по экрану
• Закрывать по клику на overlay или Esc
• Блокировать скролл страницы
• Max-width: 600px для обычных модалок

2.5. Навигация

Варианты:

1. Top navigation bar:
   - Logo слева
   - Меню в центре
   - Actions справа (profile, notifications)

2. Sidebar:
   - Фиксированная слева
   - Collapsible (сворачивается)
   - Active state для текущей страницы

3. Tabs:
   - Horizontal tabs
   - Underline для active tab

Этап 3: Patterns (паттерны)

3.1. Формы

Правила:

• Label сверху или слева от поля
• Required fields отмечать звездочкой (*)
• Group related fields
• Показывать validation errors inline
• Disable submit button до валидации

Пример структуры:

[Form Title]

[Label] *
[Input] → [Helper text]
[Error message if any]

[Label]
[Textarea]

[Cancel] [Submit]

3.2. Data Tables

Элементы:

• Header (заголовки колонок)
• Rows (данные)
• Pagination
• Search/Filters
• Sort (по клику на header)
• Row actions (edit, delete)

Best practices:

• Zebra striping (чередующиеся цвета строк) для читаемости
• Hover state для строк
• Sticky header при скролле

3.3. Empty States

Когда использовать:

• Нет данных в таблице
• Нет результатов поиска
• Новый пользователь (onboarding)

Структура:

• Иллюстрация или иконка
• Заголовок ("No data yet")
• Описание ("Get started by creating your first item")
• CTA кнопка ("Create Item")

3.4. Loading States

Варианты:

1. Skeleton screens (для контента):
   - Показывать форму контента до загрузки
   - Анимированные прямоугольники

2. Spinners (для действий):
   - Маленький спиннер в кнопке
   - Полноэкранный спиннер для page load

3. Progress bars (для upload/download):
   - Показывать процент завершения

Этап 4: Guidelines (правила использования)

4.1. Когда использовать Primary vs Secondary кнопку?

Primary:
- Основное действие на странице (только одна!)
- Submit форм
- Деструктивные действия (Delete → red primary)

Secondary:
- Альтернативные действия
- Cancel
- Вспомогательные действия

Правило: На странице не должно быть больше одной Primary кнопки.

4.2. Tone of Voice (тон текстов)

Принципы:

• Clear (ясно, без жаргона)
• Concise (кратко, по делу)
• Friendly (дружелюбно, но профессионально)

Примеры:

❌ "An error has occurred during the authentication process"
✅ "Couldn't sign you in. Please check your email and password."

❌ "Click here to proceed"
✅ "Continue to dashboard"

4.3. Accessibility (доступность)

Обязательные требования:

• [ ] Контраст текста минимум 4.5:1 (WCAG AA)
• [ ] Интерактивные элементы минимум 44x44px (touch targets)
• [ ] Focus states для всех интерактивных элементов
• [ ] Alt text для изображений
• [ ] Семантические HTML теги (button, a, input)
• [ ] Keyboard navigation (Tab, Enter, Esc)
• [ ] ARIA labels где нужно

Этап 5: Documentation (документация)

5.1. Что документировать?

Для каждого компонента:

1. Description — что это и зачем
2. Anatomy — из чего состоит
3. Variants — какие варианты есть
4. Usage guidelines — когда использовать
5. Code examples — как использовать в коде
6. Do's and Don'ts — что делать и не делать

5.2. Инструменты для документации

Storybook:
- Каталог компонентов
- Live preview
- Code examples
- Интерактивное тестирование

Figma:
- Визуальная документация
- Компоненты с variants
- Auto-layout
- Shared library

Notion/Confluence:
- Текстовая документация
- Guidelines
- Design principles

Этап 6: Implementation (реализация в коде)

6.1. Design Tokens в коде

CSS Variables:

:root {
  /* Colors */
  --color-primary-500: #2196F3;
  --color-gray-900: #212121;

  /* Spacing */
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* Typography */
  --font-base: 16px;
  --font-semibold: 600;
}

Tailwind Config:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#2196F3',
          600: '#1976D2',
        },
      },
      spacing: {
        '4': '1rem',
        '6': '1.5rem',
      },
    },
  },
}

6.2. Component Library

Структура проекта:

/components
  /Button
    Button.tsx
    Button.module.css
    Button.stories.tsx
    Button.test.tsx
  /Input
  /Card
  /Modal

Пример компонента (React + TypeScript):

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  children,
  onClick,
}) => {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled || loading}
      onClick={onClick}
    >
      {loading ? <Spinner /> : children}
    </button>
  );
};

Чек-лист: Создание дизайн-системы

Foundation:

• [ ] Цветовая палитра (primary, secondary, neutrals, semantic)
• [ ] Типографика (fonts, sizes, weights, line-heights)
• [ ] Spacing (8-point grid)
• [ ] Border radius
• [ ] Shadows
• [ ] Breakpoints (responsive)

Components:

• [ ] Button (variants, sizes, states)
• [ ] Input (text, email, password, textarea)
• [ ] Select / Dropdown
• [ ] Checkbox / Radio
• [ ] Toggle / Switch
• [ ] Card
• [ ] Modal / Dialog
• [ ] Toast / Alert
• [ ] Badge / Tag
• [ ] Avatar
• [ ] Navigation (navbar, sidebar, tabs)
• [ ] Table
• [ ] Pagination
• [ ] Breadcrumbs
• [ ] Tooltip
• [ ] Progress bar / Spinner

Patterns:

• [ ] Forms (layout, validation)
• [ ] Data tables (sorting, filtering)
• [ ] Empty states
• [ ] Loading states
• [ ] Error states
• [ ] Success states

Guidelines:

• [ ] When to use что
• [ ] Tone of voice
• [ ] Accessibility checklist
• [ ] Responsive rules

Documentation:

• [ ] Storybook setup
• [ ] Component docs
• [ ] Usage guidelines
• [ ] Code examples

Implementation:

• [ ] Design tokens в коде
• [ ] Component library
• [ ] Unit tests
• [ ] Visual regression tests

Примеры дизайн-систем для вдохновения

1. Material Design (Google) — самая популярная, очень подробная
2. Human Interface Guidelines (Apple) — для iOS/macOS
3. Polaris (Shopify) — для e-commerce
4. Carbon (IBM) — для enterprise
5. Ant Design — для admin dashboards
6. Chakra UI — для React, очень гибкая

Заключение

Дизайн-система — это инвестиция. Первые 2-3 недели уйдут на создание, но потом каждая новая фича будет делаться в 3 раза быстрее.

Главные принципы:

1. Consistency (консистентность) — все элементы выглядят единообразно
2. Reusability (переиспользуемость) — компоненты можно использовать везде
3. Scalability (масштабируемость) — легко добавлять новые компоненты
4. Accessibility (доступность) — продукт удобен для всех

Начните с малого: цвета, шрифты, кнопки. Затем расширяйте. Главное — начать.

Есть ли у вас дизайн-система? Поделитесь опытом в комментариях!