DESIGN — Дизайн-система

Версия: 2.0.0
Дата: 2026-03-24

Базовый стиль

Этот документ описывает базовый стиль по умолчанию: Swiss + Commerce.
Стиль и цветовая схема меняются через ideal_theme.config.yml → Theme Generator.

Параметр	По умолчанию	Варианты
Стиль	Swiss	Swiss / Warm / Bold / Editorial
Схема	Commerce	Navy / Commerce / Warm / Premium / Fresh / Energy
Шапка	RU	RU / INTL / Minimal / Mega
Компоновка	Shop	Shop / Company / Blog / Landing / Portfolio

Философия

Минимализм + Конверсия + Скорость

Дизайн должен продавать, а не отвлекать. Каждый элемент ведёт к покупке.

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

Формат: HSL — гибкость настройки оттенков, шкала 50-900

Brand (основные)

Токен	HSL	Использование
brand-500	hsl(220, 90%, 56%)	Primary — кнопки, ссылки
brand-600	hsl(220, 90%, 48%)	Hover состояние
brand-400	hsl(220, 90%, 64%)	Фоны, бейджи

Gray (нейтральные)

Токен	HSL	Использование
gray-900	hsl(220, 30%, 12%)	Основной текст
gray-700	hsl(220, 20%, 30%)	Вторичный текст
gray-500	hsl(220, 10%, 50%)	Подписи
gray-300	hsl(220, 15%, 80%)	Границы
gray-100	hsl(220, 20%, 96%)	Фоны секций
gray-50	hsl(220, 20%, 98%)	Альт-фон

Semantic (семантические)

Токен	HSL	Использование
success	hsl(142, 70%, 40%)	Успех, в наличии
warning	hsl(38, 95%, 50%)	Внимание, мало
danger	hsl(0, 80%, 50%)	Ошибка, нет в наличии
info	hsl(200, 80%, 50%)	Информация

Цена

Состояние	Токен
Обычная цена	--color-text (gray-900)
Цена со скидкой	--color-danger
Старая цена	--color-text-muted + зачёркивание

CSS переменные

:root {
  /* Brand scale */
  --color-brand-50: hsl(220, 90%, 96%);
  --color-brand-100: hsl(220, 90%, 92%);
  --color-brand-200: hsl(220, 90%, 84%);
  --color-brand-300: hsl(220, 90%, 72%);
  --color-brand-400: hsl(220, 90%, 64%);
  --color-brand-500: hsl(220, 90%, 56%);  /* Primary */
  --color-brand-600: hsl(220, 90%, 48%);
  --color-brand-700: hsl(220, 90%, 40%);
  --color-brand-800: hsl(220, 90%, 32%);
  --color-brand-900: hsl(220, 90%, 24%);

  /* Gray scale */
  --color-gray-50: hsl(220, 20%, 98%);
  --color-gray-100: hsl(220, 20%, 96%);
  --color-gray-200: hsl(220, 20%, 90%);
  --color-gray-300: hsl(220, 15%, 80%);
  --color-gray-400: hsl(220, 10%, 65%);
  --color-gray-500: hsl(220, 10%, 50%);
  --color-gray-600: hsl(220, 15%, 40%);
  --color-gray-700: hsl(220, 20%, 30%);
  --color-gray-800: hsl(220, 25%, 20%);
  --color-gray-900: hsl(220, 30%, 12%);

  /* Semantic */
  --color-success: hsl(142, 70%, 40%);
  --color-warning: hsl(38, 95%, 50%);
  --color-danger: hsl(0, 80%, 50%);
  --color-info: hsl(200, 80%, 50%);

  /* Aliases */
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-bg: white;
  --color-bg-alt: var(--color-gray-50);
  --color-border: var(--color-gray-200);
  --color-link: var(--color-brand-500);
  --color-link-hover: var(--color-brand-600);
}

Типографика

Шрифты

Назначение	Шрифт	Fallback
Заголовки	System	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Текст	System	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Код/Цена	Mono	ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace

Причина: Системные шрифты — быстрее загрузка, нативный вид

Размеры

Элемент	Desktop	Mobile	Weight
H1	36px / 2.25rem	28px	700
H2	30px / 1.875rem	24px	700
H3	24px / 1.5rem	20px	600
H4	20px / 1.25rem	18px	600
Body	16px / 1rem	16px	400
Small	14px / 0.875rem	14px	400
Caption	12px / 0.75rem	12px	400
Price (large)	24px / 1.5rem	20px	700
Price (card)	18px / 1.125rem	16px	700

Line Height

Тип	Значение
Заголовки	1.2
Текст	1.5
UI элементы	1.4

CSS

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
}

Отступы и сетка

Spacing Scale

Токен	Значение	Использование
0	0	—
1	4px	Минимальный
2	8px	Внутри элементов
3	12px	Между мелкими элементами
4	16px	Стандартный
5	20px	Между элементами
6	24px	Между секциями
8	32px	Большой
10	40px	Между блоками
12	48px	Секции
16	64px	Крупные секции

Container

Breakpoint	Max Width	Padding
Mobile	100%	16px
Tablet (768px)	720px	24px
Desktop (1024px)	960px	24px
Large (1280px)	1200px	24px
XL (1536px)	1440px	24px
3XL (1920px)	1720px	32px

Grid

Breakpoint	Columns	Gap
Mobile	2	12px
Tablet	3	16px
Desktop	4	20px
Large	4-5	24px
3XL	5-6	24px

CSS

:root {
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-16: 4rem;    /* 64px */

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-3xl: 1720px;
}

Breakpoints

Название	Ширина	Устройства
xs	<640px	Телефоны (портрет)
sm	≥640px	Телефоны (ландшафт)
md	≥768px	Планшеты
lg	≥1024px	Ноутбуки
xl	≥1280px	Десктопы
2xl	≥1536px	Большие экраны
3xl	≥1920px	Full HD+

Mobile First

/* Mobile (default) */
.element { ... }

/* Tablet */
@media (min-width: 768px) { ... }

/* Desktop */
@media (min-width: 1024px) { ... }

/* Large */
@media (min-width: 1280px) { ... }

Компоненты

Кнопки (Bootstrap component — переопределяем через CSS-переменные)

Тип	Фон	Текст	Использование
Primary	var(--color-brand-500)	white	Главные действия
Secondary	var(--color-gray-100)	var(--color-text)	Вторичные действия
Ghost	transparent	var(--color-brand-500)	Ссылки-кнопки
Danger	var(--color-danger)	white	Удаление

Размер	Padding	Font Size	Height
sm	8px 16px	14px	32px
md	12px 24px	16px	44px
lg	16px 32px	18px	52px

┌─────────────────────────┐
│    В КОРЗИНУ            │  ← Primary, md
└─────────────────────────┘

┌─────────────────────────┐
│    Подробнее            │  ← Secondary, md
└─────────────────────────┘

Карточка товара

┌─────────────────────────┐
│ [−20%]             [♡]  │  ← Badges, Wishlist
│                         │
│   ┌───────────────┐     │
│   │               │     │  ← Фото 1:1
│   │    [ФОТО]     │     │
│   │               │     │
│   └───────────────┘     │
│                         │
│ Название товара         │  ← 14px, 2 строки max
│ в две строки            │
│                         │
│ 2 490 ₽                 │  ← 18px, bold, red
│ 3̶ ̶1̶0̶0̶ ̶₽̶                 │  ← 14px, gray, strike
│                         │
│ ┌─────────────────────┐ │
│ │   🛒 В КОРЗИНУ      │ │  ← Primary button
│ └─────────────────────┘ │
└─────────────────────────┘

Размеры:
- Ширина: 100% (в grid)
- Фото: aspect-ratio 1:1
- Padding: 12-16px
- Gap между элементами: 8-12px
- Border-radius: 8px
- Shadow (hover): 0 4px 12px rgba(0,0,0,0.1)

Формы (Bootstrap component — переопределяем через CSS-переменные)

Элемент	Height	Border	Radius
Input	44px	1px #CBD5E1	6px
Select	44px	1px #CBD5E1	6px
Textarea	auto	1px #CBD5E1	6px
Checkbox	20px	1px #CBD5E1	4px
Radio	20px	1px #CBD5E1	50%

Состояния:
| Состояние | Border | Background |
|-----------|--------|------------|
| Default | var(--color-border) | var(--color-bg) |
| Focus | var(--color-brand-500) | var(--color-bg) |
| Error | var(--color-danger) | var(--color-bg) |
| Disabled | var(--color-gray-200) | var(--color-gray-50) |

┌─────────────────────────────────┐
│ Телефон *                       │  ← Label
├─────────────────────────────────┤
│ +7 (999) 123-45-67              │  ← Input, 44px
└─────────────────────────────────┘
  Обязательное поле                   ← Helper/Error

Badges

Тип	Фон	Текст
Sale	#EF4444	#FFFFFF
New	#22C55E	#FFFFFF
Hit	#F59E0B	#FFFFFF
Out	#64748B	#FFFFFF

Размер: padding 4px 8px, font-size 12px, border-radius 4px

Модальные окна (Bootstrap component)

┌─────────────────────────────────────┐
│ Заголовок                      [×] │
├─────────────────────────────────────┤
│                                     │
│ Контент модального окна             │
│                                     │
├─────────────────────────────────────┤
│           [Отмена] [Подтвердить]    │
└─────────────────────────────────────┘

Размеры:
- Max-width: 480px (sm), 640px (md), 800px (lg)
- Padding: 24px
- Border-radius: 12px
- Overlay: rgba(0,0,0,0.5)

Уведомления (Toast) (Bootstrap component)

┌─────────────────────────────────────┐
│ ✓ Товар добавлен в корзину    [×]  │
└─────────────────────────────────────┘

Позиция: top-right или bottom-center
Длительность: 3-5 секунд

Иконки

Набор	Лицензия	Ссылка
Lucide	MIT	lucide.dev
Heroicons	MIT	heroicons.com
Tabler Icons	MIT	tabler-icons.io

Размеры

Размер	px	Использование
xs	16px	Inline, badges
sm	20px	Кнопки, навигация
md	24px	Стандартный
lg	32px	Акценты
xl	48px	Заголовки секций

Основные иконки

Действие	Иконка
Корзина	ShoppingCart
Поиск	Search
Пользователь	User
Сердце	Heart
Меню	Menu
Закрыть	X
Плюс/Минус	Plus / Minus
Стрелки	ChevronLeft/Right/Down
Удалить	Trash
Редактировать	Pencil
Телефон	Phone
Email	Mail
Локация	MapPin
Доставка	Truck
Успех	Check, CheckCircle
Ошибка	AlertCircle
Инфо	Info

Тени

Уровень	Значение	Использование
sm	0 1px 2px rgba(0,0,0,0.05)	Легкое выделение
md	0 4px 6px rgba(0,0,0,0.1)	Карточки
lg	0 10px 15px rgba(0,0,0,0.1)	Модалки, dropdown
xl	0 20px 25px rgba(0,0,0,0.15)	Попапы

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
}

Скругления

Токен	Значение	Использование
none	0	—
sm	4px	Бейджи, мелкие элементы
md	6px	Инпуты, мелкие кнопки
lg	8px	Карточки, кнопки
xl	12px	Модалки, секции
full	9999px	Круглые элементы

:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
}

Анимации

Длительности

Токен	Значение	Использование
fast	150ms	Hover, focus
normal	300ms	Transitions
slow	500ms	Модалки, drawer

Easing

Токен	Значение
ease-in	cubic-bezier(0.4, 0, 1, 1)
ease-out	cubic-bezier(0, 0, 0.2, 1)
ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)

:root {
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Пример */
.button {
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

Мобильная адаптация

Принципы

Правило	Описание
Mobile First	Сначала мобильные, потом desktop
Touch Friendly	Min tap target 44×44px
Thumb Zone	Важные кнопки внизу
No Hover	Состояния без :hover

Desktop	Mobile
Полное меню	Бургер → Drawer
Поиск строка	Иконка → Раскрытие
Корзина dropdown	Отдельная страница

Карточки товаров

Desktop	Mobile
4 в ряд	2 в ряд
Hover эффекты	Tap эффекты
Quick view	Переход на страницу

Фильтры

Desktop	Mobile
Sidebar слева	Drawer снизу
Всегда видны	По кнопке "Фильтры"

Checkout

Desktop	Mobile
2 колонки	1 колонка
Все шаги видны	Accordion / Steps

Z-Index

Слой	Значение	Элементы
Base	0	Контент
Dropdown	10	Выпадающие меню
Sticky	20	Фиксированный header
Drawer	30	Боковые панели
Modal	40	Модальные окна
Popover	50	Tooltips, popovers
Toast	60	Уведомления

Accessibility

Цветовой контраст

Тип	Минимум
Текст (normal)	4.5:1
Текст (large)	3:1
UI компоненты	3:1

Фокус

:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

ARIA

Компонент	ARIA атрибуты
Modal	role="dialog", aria-modal="true"
Drawer	role="dialog", aria-label
Tab	role="tablist", role="tab"
Accordion	aria-expanded, aria-controls
Alert	role="alert"

Dark Mode (V3, опционально)

Цвета

Light	Dark
#FFFFFF (bg)	#0F172A
#0F172A (text)	#F8FAFC
#F1F5F9 (gray-100)	#1E293B
#CBD5E1 (border)	#334155

Реализация

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0F172A;
    --color-text: #F8FAFC;
    --color-gray-100: #1E293B;
    --color-border: #334155;
  }
}

/* Или через класс */
.dark {
  --color-bg: #0F172A;
  ...
}

Примеры страниц

Главная (above the fold)

┌─────────────────────────────────────────────────────────────────┐
│ [Logo]  [Каталог ▼]  [____Поиск____]  📞 8-800  [🛒 3] [👤]     │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│              ЗАГОЛОВОК БАННЕРА                                  │
│              Подзаголовок описание                              │
│              [  СМОТРЕТЬ КАТАЛОГ  ]                             │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│  🚚 Доставка      💳 Оплата       ✅ Гарантия     🎁 Бонусы     │
│  за 1 день        удобная         качества        за покупки    │
├─────────────────────────────────────────────────────────────────┤
│  [Категория 1]   [Категория 2]   [Категория 3]   [Категория 4]  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Чеклист

[ ] Цветовая палитра определена
[ ] Шрифты подключены
[ ] Spacing система
[ ] Компоненты задокументированы
[ ] Breakpoints настроены
[ ] Иконки выбраны
[ ] Accessibility проверена
[ ] Mobile-first реализован

← CHECKLIST | THEME-SPEC → | BUILD-PLAN →

Версия: 2.1.0
Обновлено: 2026-03-24

DESIGN — Дизайн-система

Базовый стиль

Философия

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

Brand (основные)

Gray (нейтральные)

Semantic (семантические)

Цена

CSS переменные

Типографика

Шрифты

Размеры

Line Height

CSS

Отступы и сетка

Spacing Scale

Container

Grid

CSS

Breakpoints

Mobile First

Компоненты

Кнопки (Bootstrap component — переопределяем через CSS-переменные)

Карточка товара

Формы (Bootstrap component — переопределяем через CSS-переменные)

Badges

Модальные окна (Bootstrap component)

Уведомления (Toast) (Bootstrap component)

Иконки

Рекомендуемые наборы

Размеры

Основные иконки

Тени

Скругления

Анимации

Длительности

Easing

Мобильная адаптация

Принципы

Навигация

Карточки товаров

Фильтры

Checkout

Z-Index

Accessibility

Цветовой контраст

Фокус

ARIA

Dark Mode (V3, опционально)

Цвета

Реализация

Примеры страниц

Главная (above the fold)

Чеклист