photoplaces/design_project

Design Project — PhotoPlaces

Две дизайн-системы: текущий стиль (first_style) и концепция развития (twilight).

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

design_project/
├── README.md                                  # Этот файл
├── photoplaces_first_style-design-system.md   # Текущий стиль (документация)
└── photoplaces_twilight-design-system.md      # Концепция развития (новая)

photoplaces_first_style — Текущий стиль

Документация того, что уже реализовано в коде:

Раздел	Содержимое
Архитектура	Tailwind-only, без модульного CSS
Цвета	Тёмная тема, зелёный brand (#22c55e)
Шрифт	Системный стек (-apple-system, Segoe UI)
Паттерны	Стандартные инпуты, кнопки, модалки
Компоненты	Header, Modal, Card, Badge, Admin

Ключевые особенности

• Glassmorphism — bg-white/10 backdrop-blur-md
• Brand-цвет — зелёный (#22c55e)
• Тёмная тема — #060606 → #0f172a → #1e293b
• Стандартный инпут — border-white/10 bg-white/5 focus:border-green-500

---

photoplaces_twilight — Концепция развития

photoplaces_twilight — концепция дизайна, вдохновлённая магией сумерек: когда golden hour переходит в blue hour, и каждый кадр наполнен тёплым светом и креативностью.

Концепция	Цвет	Значение
Golden Hour	#F59E0B (янтарный)	Тёплые акценты, закатный свет
Blue Hour	#6366F1 (индиго)	Основной цвет, вечернее небо
Night Contrast	#09090B (чёрный)	Тёмный фон для фотографий

Что содержит дизайн-система twilight

1. Анализ проекта

• Целевая аудитория
• Эмоциональный посыл
• Ключевые ценности
• Визуальный характер

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

• Primary (индиго #6366F1)
• Secondary (янтарный #F59E0B)
• Accent (бирюзовый #06B6D4)
• Neutrals (тёмная и светлая темы)
• Functional colors (success, warning, error, info)
• Accessibility (контрастные пары WCAG AA)

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

• Шрифты (Inter + JetBrains Mono)
• Масштабная шкала (12px → 48px)
• Иерархия текста

4. Сетка и отступы

• Базовая единица: 4px
• Spacing scale
• 12-колоночная сетка
• Breakpoints
• Border radius
• Shadows

5. Компоненты (10+)

• Button (primary, secondary, ghost, danger)
• Input / TextField
• Card (для локаций)
• Badge / Tag
• Modal / Dialog
• Navigation (Header)
• Footer
• Toast / Notification
• Tabs
• Tooltip / Popover
• Table

6. Анимации и переходы

• Длительности (fast, normal, slow, slower)
• Кривые (default, in, out, spring)
• Примеры keyframes

7. Правила и принципы

1. Content First
2. Clarity Over Cleverness
3. Accessible by Default
4. Consistent Rhythm
5. Progressive Disclosure

8. Токены для Figma

• JSON-структура для Tokens Studio

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

• Light/dark темы
• Все токены

10. Tailwind Config

• Готовый конфиг для использования

Использование

Для дизайнеров (Figma)

1. Импортируй JSON-токены через Tokens Studio
2. Все цвета, типографика и отступы автоматически создадутся как variables

Для разработчиков

1. Скопируй CSS-переменные в globals.css
2. Используй Tailwind config из раздела 10
3. Применяй Tailwind-классы из описания компонентов

Для нетехнических людей

• Читай разделы "Описание" и "Рекомендации" для понимания логики дизайна

Контакты

• Проект: PhotoPlaces Twilight
• Дата создания: 02.07.2026
• Версия: 1.0