← Back to Documentation ← Назад к документации

Design System Дизайн-система

A warm, vintage-inspired design system for the Family Photo Archive project. Designed to complement 1960s-1990s era photography with modern presentation. Тёплая дизайн-система в винтажном стиле для проекта семейного фотоархива. Разработана для гармоничного сочетания фотографий 1960-х - 1990-х годов с современной подачей.

Philosophy Философия

The design draws from two worlds: Дизайн черпает вдохновение из двух миров:

Archival warmth - amber/sepia tones that connect to the photographic heritage Архивное тепло - янтарные/сепийные тона, связывающие с фотографическим наследием
Modern clarity - clean typography and spacing that make content easy to navigate Современная ясность - чистая типографика и отступы, облегчающие навигацию по контенту

Neither pure dark nor pure light. The dark theme uses deep navy tones (not pure black) that let vintage photos breathe. The light theme uses warm cream (not pure white) that feels like archival paper. Ни чисто тёмная, ни чисто светлая. Тёмная тема использует глубокие тёмно-синие тона (не чисто чёрный), позволяющие винтажным фотографиям дышать. Светлая тема использует тёплый кремовый (не чисто белый), напоминающий архивную бумагу.

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

Core Semantic Colors Основные семантические цвета

Token	Light	Dark	Purpose Назначение
`--color-bg`	#faf8f5	#0c0f14	Page background Фон страницы
`--color-surface`	#ffffff	#181d27	Cards, panels Карточки, панели
`--color-surface-raised`	#ffffff	#1e2433	Elevated elements Приподнятые элементы
`--color-text`	#1c1917	#e8e4de	Primary text Основной текст
`--color-text-secondary`	#44403c	#b8b0a4	Secondary text Вторичный текст
`--color-text-muted`	#78716c	#7d7568	Captions, hints Подписи, подсказки
`--color-border`	#e7e5e4	#262d3a	Default borders Стандартные границы

Accent Colors Акцентные цвета

Token	Light	Dark	Usage Использование
`--color-accent`	#b45309 amber	#f59e0b gold	Primary accent, branding Основной акцент, брендинг
`--color-interactive`	#2563eb blue	#60a5fa	Links, buttons Ссылки, кнопки
`--color-success`	#16a34a green	#4ade80	Status, output steps Статус, этапы вывода
`--color-ai`	#7c3aed purple	#a78bfa	AI/ML features Функции ИИ/МО
`--color-restore`	#e11d48 rose	#fb7185	Restoration highlights Подсветка реставрации

Diagram Colors Цвета диаграмм

Token	Value Значение	Meaning Значение
`--diagram-blue`	#3b82f6	Image processing steps Этапы обработки изображений
`--diagram-purple`	#a855f7	AI/ML operations Операции ИИ/МО
`--diagram-green`	#22c55e	Output / success Вывод / успех
`--diagram-amber`	#f59e0b	Input / accent Вход / акцент
`--diagram-rose`	#f43f5e	Warnings / highlights Предупреждения / подсветка

Typography Типографика

Font Families Семейства шрифтов

--font-sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
--font-serif: 'Georgia', 'Times New Roman', 'Palatino Linotype', serif;
--font-mono:  'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

Type Scale Шкала размеров

Token	Size Размер	Usage Использование
`--text-xs`	12px	Badges, fine print Бейджи, мелкий текст
`--text-sm`	14px	Captions, metadata Подписи, метаданные
`--text-base`	16px	Body text Основной текст
`--text-lg`	18px	Section intro Вступление раздела
`--text-xl`	20px	Card titles Заголовки карточек
`--text-2xl`	24px	Section headers Заголовки разделов
`--text-3xl`	30px	Page titles Заголовки страниц
`--text-4xl`	36px	Hero subheading Подзаголовок героя
`--text-5xl`	48px	Hero title Заголовок героя

Spacing Отступы

4px base unit with a consistent scale: Базовая единица 4px с последовательной шкалой:

4  8  12  16  20  24  32  40  48  64  80  96
1  2   3   4   5   6   8  10  12  16  20  24

Usage: var(--space-4) for 16px, var(--space-8) for 32px. Использование: var(--space-4) для 16px, var(--space-8) для 32px.

Shadows Тени

Token	Usage Использование
`--shadow-sm`	Subtle elevation (badges, small cards) Тонкая приподнятость (бейджи, маленькие карточки)
`--shadow-md`	Default cards, dropdowns Стандартные карточки, выпадающие списки
`--shadow-lg`	Modals, popovers Модальные окна, всплывающие элементы
`--shadow-xl`	Hero sections, lightbox Секции героя, лайтбокс
`--shadow-glow`	Amber glow for featured elements Янтарное свечение для выделенных элементов

Border Radius Скругление углов

Token	Value Значение	Usage Использование
`--radius-xs`	4px	Small badges Маленькие бейджи
`--radius-sm`	6px	Buttons, inputs Кнопки, поля ввода
`--radius-md`	8px	Cards Карточки
`--radius-lg`	12px	Panels, modals Панели, модальные окна
`--radius-xl`	16px	Hero sections Секции героя
`--radius-full`	9999px	Pills, avatars Пилюли, аватары

Theme Implementation Реализация тем

System Detection (automatic) Определение системы (автоматическое)

/* Light theme in :root, dark in @media */
@media (prefers-color-scheme: dark) {
  :root { /* dark overrides */ }
}

Manual Toggle Ручное переключение

Apply data-theme="dark" or data-theme="light" to <html> to override system preference: Примените data-theme="dark" или data-theme="light" к <html> для переопределения системных настроек:

function setTheme(theme) {
  if (theme === 'system') {
    document.documentElement.removeAttribute('data-theme');
    localStorage.removeItem('theme');
  } else {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }
}

// Restore on load
const saved = localStorage.getItem('theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);

Accessibility Доступность

All color combinations meet WCAG AA contrast minimums: Все цветовые комбинации соответствуют минимальным требованиям контрастности WCAG AA:

Combination Комбинация	Light Ratio Светлая	Dark Ratio Тёмная
`--color-text` on `--color-bg`	14.5:1	12.8:1
`--color-text-secondary` on `--color-bg`	7.2:1	6.1:1
`--color-text-muted` on `--color-bg`	4.6:1	4.5:1
`--color-accent` on `--color-bg`	4.8:1	7.2:1

File Locations Расположение файлов

File Файл	Purpose Назначение
`web/styles/design-tokens.css`	CSS custom properties Пользовательские CSS-свойства
`docs/diagrams/pipeline-flow.svg`	Processing pipeline flowchart Блок-схема конвейера обработки
`docs/diagrams/tech-stack.svg`	Technology stack layers Слои технологического стека
`docs/diagrams/data-flow.svg`	Data flow through system Поток данных через систему
`docs/diagrams/committee.svg`	Multi-model voting system Система многомодельного голосования
`docs/index.html`	Interactive documentation page Интерактивная страница документации