architect/standards/1-structure/structure-design-layers.md

type: standard
aspect: structure
title: "Стандарт слоёв дизайна"
version: 1.0.0
date: 2026-02-19
status: active

Стандарт слоёв дизайна

Версия: 1.0.0
Дата: 2025-12-23
Статус: active

Принцип

Дизайн разделён на 4 слоя, каждый наследуется и может быть переопределён.

┌─────────────────────────────────────────────────────────────────┐
│                       СЛОИ ДИЗАЙНА                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  LAYOUT      Структура         Расположение блоков, сетка      │
│     ↓                                                           │
│  STYLES      Компоненты        Визуал элементов UI             │
│     ↓                                                           │
│  THEME       Токены            Цвета, шрифты, размеры          │
│     ↓                                                           │
│  BRANDING    Айдентика         Лого, название, favicon         │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Слои

1. LAYOUT (Инфодизайн)

Что: Структура страниц, расположение блоков, зонирование.

Элемент Описание
Shell Header, Sidebar, Main, Footer
Grid Сетка (12 колонок, responsive)
Zones Зоны контента (primary, secondary)
Pages Структура страниц

Файлы:

layout/
├── shell.yaml           ← Каркас (header, sidebar)
├── grid.yaml            ← Сетка
├── pages/
│   ├── dashboard.yaml   ← Структура dashboard
│   ├── list.yaml        ← Структура списка
│   └── form.yaml        ← Структура формы
└── responsive.yaml      ← Breakpoints

Пример shell.yaml:

shell:
  header:
    height: 56px
    position: fixed
    elements: [logo, search, notifications, user]

  sidebar:
    width: 240px
    collapsed_width: 64px
    position: left
    elements: [navigation, footer]

  main:
    padding: 24px

2. STYLES (Стили компонентов)

Что: Внешний вид UI-элементов.

Элемент Описание
Buttons Кнопки (primary, secondary, danger)
Cards Карточки
Forms Инпуты, селекты, чекбоксы
Tables Таблицы, списки
Badges Бейджи, теги
Modals Модальные окна

Файлы:

styles/
├── buttons.yaml
├── cards.yaml
├── forms.yaml
├── tables.yaml
├── badges.yaml
└── modals.yaml

Пример buttons.yaml:

buttons:
  base:
    padding: "8px 16px"
    border_radius: "{radius.md}"
    font_weight: 500
    transition: "all 0.2s"

  variants:
    primary:
      background: "{color.primary}"
      color: "{color.on_primary}"
      hover:
        background: "{color.primary_dark}"

    secondary:
      background: "transparent"
      border: "1px solid {color.border}"
      color: "{color.text}"

    danger:
      background: "{color.error}"
      color: "{color.on_error}"

  sizes:
    sm:
      padding: "4px 8px"
      font_size: "12px"
    md:
      padding: "8px 16px"
      font_size: "14px"
    lg:
      padding: "12px 24px"
      font_size: "16px"

3. THEME (Тема/Токены)

Что: Дизайн-токены — переменные для цветов, шрифтов, размеров.

Категория Примеры
Colors primary, secondary, background, text
Typography font-family, font-sizes, line-heights
Spacing 4px, 8px, 16px, 24px, 32px
Radius sm, md, lg, full
Shadows sm, md, lg

Файлы:

theme/
├── colors.yaml          ← Цветовая палитра
├── typography.yaml      ← Шрифты
├── spacing.yaml         ← Отступы
├── radius.yaml          ← Скругления
├── shadows.yaml         ← Тени
└── dark.yaml            ← Тёмная тема (override)

Пример colors.yaml:

colors:
  # Основные
  primary: "#FF6B00"
  primary_light: "#FF8A33"
  primary_dark: "#CC5500"
  on_primary: "#FFFFFF"

  secondary: "#1a1a2e"
  on_secondary: "#FFFFFF"

  # Фоны
  background: "#FFFFFF"
  surface: "#F5F5F5"

  # Текст
  text: "#212121"
  text_secondary: "#757575"
  text_disabled: "#BDBDBD"

  # Границы
  border: "#E0E0E0"
  divider: "#EEEEEE"

  # Статусы
  success: "#4CAF50"
  warning: "#FF9800"
  error: "#F44336"
  info: "#2196F3"

  # Сегменты (специфично для CRM)
  segment_vip: "#FFD700"
  segment_medium: "#4CAF50"
  segment_small: "#2196F3"
  segment_cold: "#9E9E9E"

4. BRANDING (Брендинг)

Что: Айдентика — логотип, название, favicon.

Элемент Описание
Logo Логотип (svg, png)
Name Название продукта
Favicon Иконка вкладки
Icons Набор иконок
Fonts Брендовые шрифты (если есть)

Файлы:

branding/
├── branding.yaml        ← Настройки
└── assets/
    ├── logo.svg
    ├── logo-dark.svg
    ├── favicon.ico
    └── og-image.png

Пример branding.yaml:

branding:
  name: "ПироCRM"
  tagline: "CRM для пиротехники"

  logo:
    light: ./assets/logo.svg
    dark: ./assets/logo-dark.svg
    height: 32px

  favicon: ./assets/favicon.ico

  og_image: ./assets/og-image.png

  # Переопределение темы
  theme_overrides:
    primary: "#FF6B00"

Наследование по уровням

┌────────────────────────────────────────────────────────────────────────┐
│ LEVEL          │ LAYOUT      │ STYLES      │ THEME       │ BRANDING   │
├────────────────┼─────────────┼─────────────┼─────────────┼────────────┤
│                │             │             │             │            │
│ APP (mcrm)     │ Базовый     │ Все         │ Дефолты     │ mCRM       │
│                │ shell       │ компоненты  │ (серый)     │ placeholder│
│                │             │             │             │            │
│ SOLUTION       │ CRM layout  │ CRM стили   │ Цвета       │ Название   │
│ (piro-crm)     │ Dashboard   │ Kanban      │ бизнеса     │ Лого типа  │
│                │ Kanban      │ Badges      │             │            │
│                │             │             │             │            │
│ PROJECT        │ (редко)     │ (редко)     │ Цвет        │ Лого       │
│ (salut-spb)    │             │             │ accent      │ Название   │
│                │             │             │             │ Favicon    │
│                │             │             │             │            │
└────────────────────────────────────────────────────────────────────────┘

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

В приложении (system/apps/mcrm/)

system/apps/mcrm/
├── app/
│   └── static/
│       └── design/
│           ├── layout/          ← Базовые layouts
│           ├── styles/          ← Базовые стили
│           ├── theme/           ← Дефолтная тема
│           └── branding/        ← mCRM branding

В решении (solutions/piro-crm/)

solutions/piro-crm/
├── design/
│   ├── layout/
│   │   └── pages/
│   │       ├── dashboard.yaml   ← CRM dashboard
│   │       └── kanban.yaml      ← Воронка
│   ├── styles/
│   │   ├── badges.yaml          ← Бейджи сегментов
│   │   └── cards.yaml           ← Карточки клиентов
│   ├── theme/
│   │   └── colors.yaml          ← Оранжевая тема
│   └── branding/
│       ├── branding.yaml
│       └── assets/
│           └── logo.svg

В проекте (projects/salut-spb/)

projects/salut-spb/
├── design/
│   ├── theme/
│   │   └── colors.yaml          ← Красный accent
│   └── branding/
│       ├── branding.yaml        ← "Салюты СПб"
│       └── assets/
│           ├── logo.png
│           └── favicon.ico

Загрузка и мерж

# Порядок загрузки (каждый следующий переопределяет)
design = {}
design = merge(design, load("system/apps/mcrm/static/design/"))
design = merge(design, load("solutions/piro-crm/design/"))
design = merge(design, load("projects/salut-spb/design/"))

# Результат: полная тема с переопределениями

CSS-переменные

Токены компилируются в CSS-переменные:

:root {
  /* Colors */
  --color-primary: #FF6B00;
  --color-primary-light: #FF8A33;
  --color-primary-dark: #CC5500;
  --color-on-primary: #FFFFFF;

  /* Typography */
  --font-family: 'Inter', sans-serif;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Связь с другими стандартами

Стандарт Связь
DATABASE_NAMING.md Уровни (app/sol/prj) совпадают
CODE_DATA_SEPARATION.md Design = код (в git)

Пример полного решения

solutions/piro-crm/
├── config.yaml
├── entities/
├── funnel.yaml
├── segments.yaml
├── scenarios/
├── templates/
├── products/
│
└── design/                      ← НОВОЕ
    ├── layout/
    │   ├── shell.yaml           ← Sidebar с меню CRM
    │   └── pages/
    │       ├── dashboard.yaml   ← KPI карточки
    │       ├── clients.yaml     ← Таблица + фильтры
    │       └── kanban.yaml      ← Воронка
    │
    ├── styles/
    │   ├── badges.yaml          ← Бейджи сегментов
    │   ├── cards.yaml           ← Карточка клиента
    │   └── funnel.yaml          ← Стили воронки
    │
    ├── theme/
    │   ├── colors.yaml          ← Оранжевая палитра
    │   └── dark.yaml            ← Тёмная тема
    │
    └── branding/
        ├── branding.yaml
        └── assets/
            ├── logo.svg
            ├── logo-dark.svg
            └── favicon.ico

Версия: 1.0.0