# 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