Дизайн-подход¶

Концепция¶

Визуальный стиль Plechiki — тёплый минимализм с акцентом на фотографии одежды. Интерфейс mobile-first, основан на эталонном экране iPhone 14 Pro (390×844). Цветовая палитра — земляные тона с терракотовым акцентом, создающие ощущение уюта и премиальности.

Дизайн-процесс¶

Инструменты и workflow¶

Pencil (дизайн) → Экспорт PNG → Реализация в коде → Chrome MCP верификация

Источник дизайна: файл designs/plechiki-redesign.pen (Pencil — визуальный редактор с компонентами и переменными)
Экспорт: PNG-превью экранов (designs/exports/)
Реализация: pixel-perfect перенос в React с CSS Modules
Верификация: Chrome DevTools MCP — автоматизированное сравнение скриншотов с макетами

Pixel-perfect подход¶

Каждый экран проходит цикл верификации: 1. Макет в Pencil → экспорт эталонного PNG 2. Реализация компонента с использованием дизайн-токенов 3. Скриншот через Chrome MCP в тех же условиях (390×844, mock-данные) 4. Сравнение: отступы, размеры, цвета, типографика 5. Итерация до совпадения

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

Основные цвета¶

Токен	Значение	Назначение
`accent`	`#D18A62`	Терракотовый — основной акцент, CTA-кнопки
`accentHover`	`#C27B54`	Hover-состояние акцента
`accentSoft`	`#F0DCCE`	Мягкий терракотовый — фоны, заливки

Поверхности¶

Токен	Значение	Назначение
`bg`	`#F7F4EF`	Фон приложения (тёплый бежевый)
`surface`	`#FFFDFC`	Карточки, приподнятые поверхности
`surfaceAlt`	`#F2ECE3`	Вторичная поверхность
`surfaceInverse`	`#171614`	Тёмная инверсия (оверлеи)

Текст¶

Токен	Значение	Назначение
`text`	`#1F1B16`	Основной текст (тёмный тёплый коричневый)
`textMuted`	`#7A7267`	Вторичный текст
`textInverse`	`#FFFDFC`	Текст на тёмном фоне

Семантические¶

Токен	Значение	Назначение
`border`	`#DDD5C8`	Границы
`success`	`#8C9A7B`	Успех (шалфейный зелёный)
`warning`	`#D7B77C`	Предупреждение
`danger`	`#C86A55`	Опасность (кирпичный)
`sage`	`#A7B29A`	Шалфейный (чипы, метки)

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

Шрифты¶

Назначение	Шрифт	Fallback
Display (заголовки)	Funnel Sans	Segoe UI, sans-serif
Body (текст)	Geist	Inter, Segoe UI, sans-serif
Data (моноширинный)	Geist Mono	SFMono-Regular, Consolas

Шкала размеров¶

Стиль	Размер	Вес	Line-height
Display	28px	700	1.1
Page Title	24px	700	1.15
Section Title	20px	700	1.15
Body	15px	500	1.4
Caption	13px	600	1.25
Meta	11px	500	1.25

Пространственная система¶

Отступы¶

Токен	Значение	Использование
`space-2`	8px	Минимальный gap
`space-3`	12px	Внутренние отступы
`space-4`	16px	Padding страницы
`space-5`	20px	Секции
`space-6`	24px	Крупные секции
`space-8`	32px	Разделители

Скругления¶

Токен	Значение	Применение
`radius.sm`	16px	Мелкие элементы
`radius.md`	18px	Средние карточки
`radius.card`	22px	Карточки вещей/образов
`radius.sheet`	28px	Bottom sheet
`radius.pill`	999px	Кнопки, бейджи, чипы

Высоты элементов управления¶

Токен	Значение	Элемент
`control.sm`	38px	Малые кнопки
`control.md`	52px	Стандартные кнопки
`control.input`	54px	Поля ввода
`control.nav`	74px	Нижняя навигация

Layout¶

Параметр	Значение
Эталонная ширина	390px (iPhone 14 Pro)
Max-width (desktop)	768px
Page padding	16px
Safe area	учитывается через `env(safe-area-inset-*)`

Связь дизайна с кодом¶

Токены → CSS Variables → Компоненты¶

Pencil Variables ($color.accent, $font.display, ...)
        ↓
CSS Custom Properties (--pl-color-accent, --pl-font-display, ...)
    файл: frontend/src/theme/cssVars.css
        ↓
Ant Design Theme (token.colorPrimary, token.borderRadius, ...)
    файл: frontend/src/theme/antdTheme.ts
        ↓
CSS Modules (var(--pl-color-accent), var(--pl-radius-pill), ...)
    файлы: *.module.css

Все визуальные свойства определены как переменные (72 CSS custom property). Компоненты никогда не используют жёстко заданные значения — только ссылки на токены. Это обеспечивает:

Консистентность: единый источник правды для всех стилей
Поддерживаемость: изменение токена автоматически обновляет все компоненты
Соответствие дизайну: переменные в Pencil и CSS 1:1 маппятся друг на друга

CSS Modules¶

Стили каждого компонента изолированы в CSS Module (*.module.css). Глобальный CSS (index.css) содержит только: - CSS custom properties (токены) - CSS reset - App-level layout - Переопределения сторонних библиотек (Ant Design)

Ant Design Theme¶

Тема Ant Design настроена через ConfigProvider: - Primary color: #D18A62 (терракотовый) - Border radius: 999px (pill) для кнопок - Компонентные переопределения: Button, Input, Select, Card, Drawer, Modal, Tag, Typography - Тени и границы маппятся на палитру