# PhotoPlaces Twilight — Дизайн-система

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

## 1. АНАЛИЗ ПРОЕКТА

### Что это
PhotoPlaces Twilight — маркетплейс фотолокаций. Пользователи находят места и студии для фотосъёмок, бронируют, общаются с фотографами.

### Целевая аудитория
- **Фотографы** (25-40 лет): ищут новые локации, хотят впечатлить клиентов
- **Владельцы студий/локаций**: хотят привлечь клиентов, показать пространство
- **Заказчики съёмок** (20-35 лет): свадьбы, любительские, коммерческие съёмки

### Эмоциональный посыл
1. **Вдохновение** — хочется снимать, открывать новые места
2. **Надёжность** — можно доверять бронирование
3. **Профессионализм** — серьёзный подход к фотосъёмке
4. **Открытость** — дружелюбное сообщество

### Ключевые ценности
Вдохновение • Надёжность • Красота • Сообщество

### Визуальный характер
**Современный минимализм с акцентом на визуальный контент.**
Фотографии — главные герои. Интерфейс — рамка, которая не отвлекает.

### Философия Twilight
- **Golden Hour** — тёплые янтарные акценты (secondary `#F59E0B`)
- **Blue Hour** — глубокий индиго как основной цвет (primary `#6366F1`)
- **Ночной контраст** — чистый минимализм на тёмном фоне
- **Магия момента** — каждое фото как произведение искусства

---

## 2. ЦВЕТОВАЯ ПАЛИТРА

### Философия Twilight
Тёмная тема — идеальный фон для фотографий (как ночное небо). Акцентный цвет — индиго-фиолетовый, который ассоциируется с креативностью и вечерним blue hour. Тёплый янтарный secondary — отсылка к golden hour.

### Primary: Индиго-фиолетовый

| Формат | Значение |
|--------|----------|
| Hex | `#6366F1` |
| RGB | `rgb(99, 102, 241)` |
| HSL | `hsl(239, 84%, 67%)` |

**Почему именно этот:**
- Ассоциируется с креативностью и вечерним светом (golden hour → blue hour)
- Хорошо читается на тёмном фоне
- Отличается от типичного зелёного/синего в конкурентах
- Работает как для CTA, так и для акцентов

### Secondary: Тёплый янтарный

| Формат | Значение |
|--------|----------|
| Hex | `#F59E0B` |
| RGB | `rgb(245, 158, 11)` |
| HSL | `hsl(38, 92%, 50%)` |

**Назначение:** бейджи, рейтинг, избранные, премиум-метки

### Accent: Бирюзовый

| Формат | Значение |
|--------|----------|
| Hex | `#06B6D4` |
| RGB | `rgb(6, 182, 212)` |
| HSL | `hsl(189, 94%, 43%)` |

**Назначение:** ссылки, интерактивные элементы, ховер-состояния

### Neutrals (тёмная тема)

| Токен | Hex | Назначение |
|-------|-----|------------|
| `--bg` | `#09090B` | Основной фон |
| `--bg-elevated` | `#18181B` | Поверхности (карточки, модалки) |
| `--bg-hover` | `#27272A` | Ховер-состояния |
| `--border` | `#3F3F46` | Границы, разделители |
| `--border-subtle` | `#27272A` | Мягкие границы |
| `--text-primary` | `#FAFAFA` | Основной текст |
| `--text-secondary` | `#A1A1AA` | Вторичный текст |
| `--text-muted` | `#71717A` | Приглушённый текст |

### Neutrals (светлая тема)

| Токен | Hex | Назначение |
|-------|-----|------------|
| `--bg` | `#FAFAFA` | Основной фон |
| `--bg-elevated` | `#FFFFFF` | Поверхности |
| `--bg-hover` | `#F4F4F5` | Ховер-состояния |
| `--border` | `#E4E4E7` | Границы |
| `--border-subtle` | `#F4F4F5` | Мягкие границы |
| `--text-primary` | `#18181B` | Основной текст |
| `--text-secondary` | `#52525B` | Вторичный текст |
| `--text-muted` | `#A1A1AA` | Приглушённый текст |

### Functional Colors

| Состояние | Hex | Назначение |
|-----------|-----|------------|
| `--success` | `#22C55E` | Успешные действия, подтверждения |
| `--warning` | `#F59E0B` | Предупреждения, ожидание |
| `--error` | `#EF4444` | Ошибки, удаление |
| `--info` | `#3B82F6` | Информационные сообщения |

### Accessibility (контрастные пары)

| Комбинация | Ratio | WCAG |
|------------|-------|------|
| `#FAFAFA` на `#09090B` | 19.3:1 | AAA ✓ |
| `#6366F1` на `#09090B` | 6.8:1 | AA ✓ |
| `#A1A1AA` на `#09090B` | 7.2:1 | AA ✓ |
| `#18181B` на `#FAFAFA` | 19.3:1 | AAA ✓ |
| `#6366F1` на `#FFFFFF` | 4.7:1 | AA ✓ |

---

## 3. ТИПОГРАФИКА

### Шрифты

| Роль | Шрифт | Обоснование |
|------|-------|-------------|
| **Заголовки** | Inter | Геометрический, чистый, отлично читается на экране |
| **Основной текст** | Inter | Единообразие, хорошая читаемость |
| **Mono** | JetBrains Mono | Для кода, ID, технической информации |

Почему Inter:
- Бесплатный (Google Fonts)
- Оптимизирован для экранов
- Отличная поддержка кириллицы
- Множество начертаний (от Thin до Black)

### Масштабная шкала

| Токен | Размер | Line-height | Letter-spacing | Использование |
|-------|--------|-------------|----------------|---------------|
| `--text-xs` | 12px | 16px | 0.01em | Метки, капшены |
| `--text-sm` | 14px | 20px | 0.01em | Small text, описания |
| `--text-base` | 16px | 24px | 0em | Основной текст |
| `--text-lg` | 18px | 28px | -0.01em | Крупный body text |
| `--text-xl` | 20px | 28px | -0.01em | h5, h4 |
| `--text-2xl` | 24px | 32px | -0.02em | h3 |
| `--text-3xl` | 30px | 36px | -0.02em | h2 |
| `--text-4xl` | 36px | 40px | -0.03em | h1 |
| `--text-5xl` | 48px | 48px | -0.03em | Hero заголовки |

### Иерархия текста

```
Hero (text-5xl, font-bold)
  └── Подзаголовок (text-lg, text-secondary)

Раздел (text-3xl, font-semibold)
  └── Описание (text-base, text-secondary)

Карточка заголовок (text-xl, font-medium)
  └── Карточка описание (text-sm, text-secondary)

Метка (text-xs, font-medium, uppercase, tracking-wider)
  └── Значение (text-base, font-semibold)
```

---

## 4. СЕТКА И ОТСТУПЫ

### Базовая единица: 4px

### Spacing Scale

| Токен | Значение | Использование |
|-------|----------|---------------|
| `--space-0` | 0px | Нет отступа |
| `--space-0.5` | 2px | Минимальный зазор |
| `--space-1` | 4px | Минимальный отступ |
| `--space-1.5` | 6px | Between иконок |
| `--space-2` | 8px | Внутренний padding кнопок |
| `--space-3` | 12px | Between элементов в строке |
| `--space-4` | 16px | Стандартный padding |
| `--space-5` | 20px | Между секциями |
| `--space-6` | 24px | Карточки, блоки |
| `--space-8` | 32px | Между группами |
| `--space-10` | 40px | Отступы секций |
| `--space-12` | 48px | Крупные разделители |
| `--space-16` | 64px | Hero-секции |
| `--space-20` | 80px | Между страницами |

### Сетка

| Параметр | Значение |
|----------|----------|
| Колонки (desktop) | 12 |
| Колонки (tablet) | 8 |
| Колонки (mobile) | 4 |
| Gutter | 24px (desktop), 16px (mobile) |
| Max-width | 1280px |
| Padding | 32px (desktop), 16px (mobile) |

### Breakpoints

| Имя | Минимальная ширина | Описание |
|-----|-------------------|----------|
| `sm` | 640px | Мобильный (альбом) |
| `md` | 768px | Планшет |
| `lg` | 1024px | Десктоп |
| `xl` | 1280px | Широкий десктоп |
| `2xl` | 1536px | Экстрабольшой |

### Border Radius

| Токен | Значение | Использование |
|-------|----------|---------------|
| `--radius-sm` | 6px | Кнопки, инпуты |
| `--radius-md` | 8px | Карточки, модалки |
| `--radius-lg` | 12px | Крупные блоки |
| `--radius-xl` | 16px | Hero-элементы |
| `--radius-2xl` | 24px | Аватары, круглые элементы |
| `--radius-full` | 9999px | Пилюли, бейджи |

### Shadows (тёмная тема)

| Токен | Значение |
|-------|----------|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.4)` |
| `--shadow-md` | `0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)` |
| `--shadow-lg` | `0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3)` |
| `--shadow-xl` | `0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px rgba(0,0,0,0.3)` |
| `--shadow-glow` | `0 0 20px rgba(99,102,241,0.3)` |

### Shadows (светлая тема)

| Токен | Значение |
|-------|----------|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` |
| `--shadow-md` | `0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)` |
| `--shadow-lg` | `0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)` |
| `--shadow-xl` | `0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04)` |

---

## 5. КОМПОНЕНТЫ

---

### Button

#### Описание
Основной интерактивный элемент. Визуально — чистый, с чёткими состояниями.

#### Variants

**Primary**
```css
background: var(--primary);
color: white;
font-weight: 600;
```

**Secondary**
```css
background: transparent;
border: 1px solid var(--border);
color: var(--text-primary);
```

**Ghost**
```css
background: transparent;
color: var(--text-secondary);
```

**Danger**
```css
background: var(--error);
color: white;
```

#### Размеры

| Размер | Высота | Padding | Шрифт | Border-radius |
|--------|--------|---------|-------|---------------|
| `sm` | 32px | 8px 12px | 13px | 6px |
| `md` | 40px | 10px 16px | 14px | 8px |
| `lg` | 48px | 12px 24px | 16px | 8px |
| `xl` | 56px | 16px 32px | 18px | 12px |

#### Состояния

| Состояние | Изменение |
|-----------|-----------|
| Default | Базовый вид |
| Hover | `brightness(1.1)`, `transform: translateY(-1px)` |
| Active | `brightness(0.95)`, `transform: translateY(0)` |
| Focus | `outline: 2px solid var(--primary)`, `outline-offset: 2px` |
| Disabled | `opacity: 0.5`, `cursor: not-allowed` |
| Loading | Спиннер вместо текста, `pointer-events: none` |

#### Tailwind-классы

```tsx
// Primary
<button className="bg-indigo-600 text-white font-semibold rounded-lg
  hover:bg-indigo-500 active:bg-indigo-700
  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-zinc-900
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-all duration-150
  px-4 py-2 text-sm">

// Secondary
<button className="bg-transparent border border-zinc-700 text-zinc-100 font-medium rounded-lg
  hover:bg-zinc-800 active:bg-zinc-700
  focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-all duration-150
  px-4 py-2 text-sm">

// Ghost
<button className="bg-transparent text-zinc-400 font-medium rounded-lg
  hover:bg-zinc-800 hover:text-zinc-100 active:bg-zinc-700
  focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-all duration-150
  px-4 py-2 text-sm">
```

#### Доступность
- `aria-label` для кнопок с иконками
- `aria-disabled="true"` вместо `disabled` для семантики
- `role="button"` для div-кнопок (но лучше использовать `<button>`)

---

### Input / TextField

#### Описание
Поле ввода с лейблом, плейсхолдером и состояниями ошибки.

#### Визуал
```
┌─────────────────────────────────┐
│ Лейбл (обязательный)            │
├─────────────────────────────────┤
│ Иконка │ Placeholder/Value      │
└─────────────────────────────────┘
│ Текст ошибки (если есть)        │
```

#### Размеры

| Размер | Высота | Padding | Шрифт |
|--------|--------|---------|-------|
| `sm` | 32px | 8px 12px | 13px |
| `md` | 40px | 10px 14px | 14px |
| `lg` | 48px | 12px 16px | 16px |

#### Состояния

| Состояние | Визуал |
|-----------|--------|
| Default | `border-zinc-700`, `bg-zinc-900` |
| Focus | `border-indigo-500`, `ring-2 ring-indigo-500/20` |
| Error | `border-red-500`, `ring-2 ring-red-500/20` |
| Disabled | `opacity-50`, `cursor-not-allowed` |

#### Tailwind-классы

```tsx
<div className="flex flex-col gap-1.5">
  <label className="text-sm font-medium text-zinc-300">
    Лейбл
  </label>
  <input
    className="h-10 px-3 rounded-lg
      bg-zinc-900 border border-zinc-700 text-zinc-100
      placeholder:text-zinc-500
      focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20
      disabled:opacity-50 disabled:cursor-not-allowed
      transition-colors duration-150
      text-sm"
    placeholder="Введите значение"
  />
  <span className="text-xs text-red-400">
    Текст ошибки
  </span>
</div>
```

#### Доступность
- `aria-label` или `aria-labelledby` для лейбла
- `aria-invalid="true"` при ошибке
- `aria-describedby` для связи с текстом ошибки
- `aria-required="true"` для обязательных полей

---

### Card

#### Описание
Карточка для отображения локаций, студий, профилей. Главная фича — крупное фото.

#### Визуал

```
┌─────────────────────────────────┐
│                                 │
│         [ФОТО / IMAGE]          │
│                                 │
├─────────────────────────────────┤
│ Заголовок карточки              │
│ Описание (2 строки)             │
│                                 │
│ ★ 4.8  ·  Москва  ·  Студия    │
├─────────────────────────────────┤
│ [Забронировать]     [Избранное ♡]│
└─────────────────────────────────┘
```

#### Варианты

| Вариант | Использование |
|---------|---------------|
| Default | Карточка локации в каталоге |
| Compact | Карточка в боковой панели |
| Featured | Крупная карточка в hero-секции |
| Minimal | Карточка в списке результатов |

#### Tailwind-классы

```tsx
<div className="group rounded-xl bg-zinc-900 border border-zinc-800
  overflow-hidden hover:border-zinc-700
  transition-all duration-300 hover:shadow-xl hover:shadow-black/20
  hover:-translate-y-1">

  {/* Изображение */}
  <div className="aspect-[4/3] overflow-hidden">
    <img
      className="w-full h-full object-cover
        group-hover:scale-105 transition-transform duration-500"
      src="..."
      alt="..."
    />
  </div>

  {/* Контент */}
  <div className="p-4">
    <h3 className="text-lg font-semibold text-zinc-100 mb-1">
      Название
    </h3>
    <p className="text-sm text-zinc-400 line-clamp-2 mb-3">
      Описание локации
    </p>

    {/* Мета-информация */}
    <div className="flex items-center gap-2 text-xs text-zinc-500">
      <span className="flex items-center gap-1">
        <StarIcon className="w-3.5 h-3.5 text-amber-400" />
        4.8
      </span>
      <span>·</span>
      <span>Москва</span>
      <span>·</span>
      <span>Студия</span>
    </div>
  </div>

  {/* Действия */}
  <div className="px-4 pb-4 flex items-center justify-between">
    <button className="text-sm font-medium text-indigo-400 hover:text-indigo-300">
      Забронировать
    </button>
    <button className="text-zinc-500 hover:text-rose-400 transition-colors">
      <HeartIcon className="w-5 h-5" />
    </button>
  </div>
</div>
```

#### Доступность
- `role="article"` или `<article>`
- `alt` для изображений
- `aria-label` для кнопок действий

---

### Badge / Tag

#### Описание
Метки для категорий, статусов, тегов.

#### Варианты

| Вариант | Цвет | Использование |
|---------|------|---------------|
| Default | `bg-zinc-800 text-zinc-300` | Обычные теги |
| Primary | `bg-indigo-500/20 text-indigo-400` | Основные категории |
| Success | `bg-emerald-500/20 text-emerald-400` | Доступно, подтверждено |
| Warning | `bg-amber-500/20 text-amber-400` | Ожидание, на модерации |
| Error | `bg-red-500/20 text-red-400` | Ошибка, отменено |

#### Tailwind-классы

```tsx
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full
  bg-indigo-500/20 text-indigo-400 text-xs font-medium">
  Студия
</span>
```

---

### Modal / Dialog

#### Описание
Модальное окно для форм, подтверждений, детальной информации.

#### Размеры

| Размер | Ширина | Описание |
|--------|--------|----------|
| `sm` | 400px | Подтверждения, простые формы |
| `md` | 500px | Формы входа/регистрации |
| `lg` | 640px | Сложные формы, детали |
| `xl` | 800px | Полноэкранный просмотр |

#### Визуал

```
┌─────────────────────────────────────────┐
│ Заголовок                    [X закрыть]│
├─────────────────────────────────────────┤
│                                         │
│              Содержимое                 │
│                                         │
├─────────────────────────────────────────┤
│ [Отмена]                    [Действие]  │
└─────────────────────────────────────────┘
```

#### Tailwind-классы

```tsx
// Backdrop
<div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm
  animate-in fade-in duration-200" />

// Modal
<div className="fixed left-1/2 top-1/2 z-50
  -translate-x-1/2 -translate-y-1/2
  w-full max-w-md p-6
  bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl
  animate-in fade-in zoom-in-95 duration-200">

  {/* Header */}
  <div className="flex items-center justify-between mb-4">
    <h2 className="text-lg font-semibold text-zinc-100">
      Заголовок
    </h2>
    <button className="text-zinc-500 hover:text-zinc-300">
      <XIcon className="w-5 h-5" />
    </button>
  </div>

  {/* Content */}
  <div className="text-zinc-400">
    Содержимое
  </div>

  {/* Footer */}
  <div className="flex justify-end gap-3 mt-6">
    <button className="secondary">Отмена</button>
    <button className="primary">Подтвердить</button>
  </div>
</div>
```

#### Доступность
- `role="dialog"`
- `aria-modal="true"`
- `aria-labelledby` для заголовка
- Фокус внутри модалки (focus trap)
- Закрытие по Escape

---

### Navigation (Header)

#### Описание
Верхняя навигация с лого, ссылками и действиями пользователя.

#### Визуал

```
┌─────────────────────────────────────────────────────────────┐
│ PhotoPlaces Twilight    Локации  Студии  Фотографы    [Войти] │
└─────────────────────────────────────────────────────────────┘
```

#### Tailwind-классы

```tsx
<header className="sticky top-0 z-40 w-full
  bg-zinc-950/80 backdrop-blur-xl
  border-b border-zinc-800">

  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="flex h-16 items-center justify-between">

      {/* Logo */}
      <Link href="/" className="flex items-center gap-2">
        <CameraIcon className="h-8 w-8 text-indigo-500" />
        <span className="text-xl font-bold text-zinc-100">
          PhotoPlaces Twilight
        </span>
      </Link>

      {/* Nav Links */}
      <nav className="hidden md:flex items-center gap-6">
        <Link href="/places" className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors">
          Локации
        </Link>
        <Link href="/studios" className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors">
          Студии
        </Link>
        <Link href="/photographers" className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors">
          Фотографы
        </Link>
      </nav>

      {/* Actions */}
      <div className="flex items-center gap-3">
        <button className="text-sm text-zinc-400 hover:text-zinc-100">
          Войти
        </button>
        <button className="bg-indigo-600 text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-indigo-500">
          Регистрация
        </button>
      </div>

    </div>
  </div>
</header>
```

---

### Footer

#### Описание
Подвал сайта с ссылками, копирайтом, соцсетями.

#### Tailwind-классы

```tsx
<footer className="border-t border-zinc-800 bg-zinc-950">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">

    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      {/* Колонка 1: О проекте */}
      <div>
        <h3 className="text-sm font-semibold text-zinc-100 mb-4">
          PhotoPlaces Twilight
        </h3>
        <p className="text-sm text-zinc-500">
          Маркетплейс фотолокаций
        </p>
      </div>

      {/* Колонка 2: Навигация */}
      <div>
        <h4 className="text-sm font-medium text-zinc-300 mb-3">Навигация</h4>
        <ul className="space-y-2">
          <li><a href="/places" className="text-sm text-zinc-500 hover:text-zinc-300">Локации</a></li>
          <li><a href="/studios" className="text-sm text-zinc-500 hover:text-zinc-300">Студии</a></li>
        </ul>
      </div>

      {/* Колонка 3: Контакты */}
      <div>
        <h4 className="text-sm font-medium text-zinc-300 mb-3">Контакты</h4>
        <ul className="space-y-2">
          <li><a href="mailto:info@photoplaces.ru" className="text-sm text-zinc-500 hover:text-zinc-300">info@photoplaces.ru</a></li>
        </ul>
      </div>

      {/* Колонка 4: Соцсети */}
      <div>
        <h4 className="text-sm font-medium text-zinc-300 mb-3">Соцсети</h4>
        <div className="flex gap-3">
          <a href="#" className="text-zinc-500 hover:text-zinc-300">
            <TelegramIcon className="w-5 h-5" />
          </a>
          <a href="#" className="text-zinc-500 hover:text-zinc-300">
            <InstagramIcon className="w-5 h-5" />
          </a>
          <a href="#" className="text-zinc-500 hover:text-zinc-300">
            <PinterestIcon className="w-5 h-5" />
          </a>
        </div>
      </div>
    </div>

    <div className="mt-8 pt-8 border-t border-zinc-800">
      <p className="text-xs text-zinc-600 text-center">
        © 2024 PhotoPlaces Twilight. Все права защищены.
      </p>
    </div>

  </div>
</footer>
```

---

### Toast / Notification

#### Описание
Всплывающие уведомления о результатах действий.

#### Варианты

| Тип | Иконка | Цвет | Пример |
|-----|--------|------|--------|
| Success | CheckCircle | `text-emerald-400` | "Локация добавлена" |
| Error | XCircle | `text-red-400` | "Ошибка сервера" |
| Warning | AlertTriangle | `text-amber-400` | "Проверьте данные" |
| Info | Info | `text-blue-400` | "Отправлена заявка" |

#### Tailwind-классы

```tsx
<div className="fixed bottom-4 right-4 z-50
  flex items-center gap-3 px-4 py-3
  bg-zinc-900 border border-zinc-800 rounded-lg shadow-xl
  animate-in slide-in-from-bottom-5 fade-in duration-300">

  <CheckCircleIcon className="w-5 h-5 text-emerald-400 shrink-0" />
  <p className="text-sm text-zinc-100">
    Локация успешно добавлена!
  </p>
  <button className="text-zinc-500 hover:text-zinc-300 ml-2">
    <XIcon className="w-4 h-4" />
  </button>
</div>
```

---

### Tabs

#### Описание
Переключение между секциями или вкладками.

#### Tailwind-классы

```tsx
<div className="border-b border-zinc-800">
  <nav className="flex gap-6" role="tablist">
    <button
      role="tab"
      aria-selected="true"
      className="py-3 text-sm font-medium text-indigo-400 border-b-2 border-indigo-400"
    >
      Вкладка 1
    </button>
    <button
      role="tab"
      aria-selected="false"
      className="py-3 text-sm font-medium text-zinc-500 hover:text-zinc-300 border-b-2 border-transparent"
    >
      Вкладка 2
    </button>
  </nav>
</div>
```

---

### Tooltip / Popover

#### Описание
Вспомогательная информация при наведении.

#### Tailwind-классы

```tsx
<div className="relative group">
  <button>Элемент</button>
  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
    px-3 py-1.5 rounded-lg
    bg-zinc-800 text-zinc-200 text-xs
    opacity-0 group-hover:opacity-100
    transition-opacity duration-200
    pointer-events-none
    whitespace-nowrap">
    Подсказка
    <div className="absolute top-full left-1/2 -translate-x-1/2
      border-4 border-transparent border-t-zinc-800" />
  </div>
</div>
```

---

### Table

#### Описание
Таблица данных для админки, списков бронирований.

#### Tailwind-классы

```tsx
<div className="overflow-x-auto rounded-lg border border-zinc-800">
  <table className="w-full text-sm">
    <thead>
      <tr className="border-b border-zinc-800 bg-zinc-900/50">
        <th className="text-left py-3 px-4 font-medium text-zinc-400">Название</th>
        <th className="text-left py-3 px-4 font-medium text-zinc-400">Статус</th>
        <th className="text-left py-3 px-4 font-medium text-zinc-400">Дата</th>
      </tr>
    </thead>
    <tbody>
      <tr className="border-b border-zinc-800/50 hover:bg-zinc-900/50 transition-colors">
        <td className="py-3 px-4 text-zinc-100">Название</td>
        <td className="py-3 px-4">
          <span className="inline-flex px-2 py-1 rounded-full bg-emerald-500/20 text-emerald-400 text-xs">
            Активно
          </span>
        </td>
        <td className="py-3 px-4 text-zinc-400">01.01.2024</td>
      </tr>
    </tbody>
  </table>
</div>
```

---

## 6. АНИМАЦИИ И ПЕРЕХОДЫ

### Длительность

| Токен | Значение | Использование |
|-------|----------|---------------|
| `--duration-fast` | 100ms | Hover-эффекты, color transitions |
| `--duration-normal` | 200ms | Toggle, appearance |
| `--duration-slow` | 300ms | Modal, dropdown |
| `--duration-slower` | 500ms | Page transitions, complex |

### Кривые

| Токен | Значение | Использование |
|-------|----------|---------------|
| `--ease-default` | `cubic-bezier(0.4, 0, 0.2, 1)` | Стандартные переходы |
| `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Уход элементов |
| `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | Появление элементов |
| `--ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Bounce-эффекты |

### Примеры анимаций

```css
/* Появление модалки */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Slide-in toast */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer для skeleton */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    var(--bg-hover) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
```

---

## 7. ПРАВИЛА И ПРИНЦИПЫ

### 1. Content First (Контент важнее декора)

Фотографии — главные герои. Интерфейс обрамляет, но не перетягивает внимание.

**Плохо:** Яркие рамки вокруг фото, мигающие кнопки, слишком много цвета
**Хорошо:** Фото занимает 70% карточки, UI — тихий фон

---

### 2. Clarity Over Cleverness (Понятность важнее красивости)

Пользователь должен понимать, что делать, без инструкций.

**Плохо:** Кнопка-иконка без подписи,神秘ные жесты
**Хорошо:** "Забронировать" вместо просто иконки корзины

---

### 3. Accessible by Default (Доступность не опциональность)

Каждый элемент должен работать для всех пользователей.

**Плохо:** Серый текст на сером фоне, нет фокуса, нет aria
**Хорошо:** Контраст 4.5:1, видимый фокус, семантический HTML

---

### 4. Consistent Rhythm (Единый ритм)

Отступы, размеры, анимации следуют единой системе.

**Плохо:** Разные отступы в карточках, рандомные размеры шрифтов
**Хорошо:** Везде spacing-4, text-sm для описаний, radius-lg для карточек

---

### 5. Progressive Disclosure (Показывай по необходимости)

Не перегружай интерфейс. Показывай детали по мере необходимости.

**Плохо:** Вся форма бронирования на главной
**Хорошо:** Сначала карточка → клик → модалка с формой

---

## 8. ТОКЕНЫ ДЛЯ FIGMA

### JSON-структура (Tokens Studio)

> PhotoPlaces Twilight Design Tokens

```json
{
  "colors": {
    "primary": {
      "50": "#EEF2FF",
      "100": "#E0E7FF",
      "200": "#C7D2FE",
      "300": "#A5B4FC",
      "400": "#818CF8",
      "500": "#6366F1",
      "600": "#4F46E5",
      "700": "#4338CA",
      "800": "#3730A3",
      "900": "#312E81"
    },
    "secondary": {
      "500": "#F59E0B",
      "600": "#D97706"
    },
    "accent": {
      "500": "#06B6D4",
      "600": "#0891B2"
    },
    "neutral": {
      "50": "#FAFAFA",
      "100": "#F4F4F5",
      "200": "#E4E4E7",
      "300": "#D4D4D8",
      "400": "#A1A1AA",
      "500": "#71717A",
      "600": "#52525B",
      "700": "#3F3F46",
      "800": "#27272A",
      "900": "#18181B",
      "950": "#09090B"
    },
    "success": { "500": "#22C55E" },
    "warning": { "500": "#F59E0B" },
    "error": { "500": "#EF4444" },
    "info": { "500": "#3B82F6" }
  },
  "typography": {
    "fontFamily": {
      "heading": "Inter, sans-serif",
      "body": "Inter, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "fontSize": {
      "xs": { "value": "12px", "lineHeight": "16px" },
      "sm": { "value": "14px", "lineHeight": "20px" },
      "base": { "value": "16px", "lineHeight": "24px" },
      "lg": { "value": "18px", "lineHeight": "28px" },
      "xl": { "value": "20px", "lineHeight": "28px" },
      "2xl": { "value": "24px", "lineHeight": "32px" },
      "3xl": { "value": "30px", "lineHeight": "36px" },
      "4xl": { "value": "36px", "lineHeight": "40px" },
      "5xl": { "value": "48px", "lineHeight": "48px" }
    },
    "fontWeight": {
      "normal": "400",
      "medium": "500",
      "semibold": "600",
      "bold": "700"
    }
  },
  "spacing": {
    "0": "0px",
    "0.5": "2px",
    "1": "4px",
    "1.5": "6px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "20px",
    "6": "24px",
    "8": "32px",
    "10": "40px",
    "12": "48px",
    "16": "64px",
    "20": "80px"
  },
  "borderRadius": {
    "sm": "6px",
    "md": "8px",
    "lg": "12px",
    "xl": "16px",
    "2xl": "24px",
    "full": "9999px"
  },
  "boxShadow": {
    "sm": "0 1px 2px rgba(0,0,0,0.4)",
    "md": "0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)",
    "lg": "0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3)",
    "xl": "0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px rgba(0,0,0,0.3)",
    "glow": "0 0 20px rgba(99,102,241,0.3)"
  },
  "duration": {
    "fast": "100ms",
    "normal": "200ms",
    "slow": "300ms",
    "slower": "500ms"
  }
}
```

---

## 9. CSS-ПЕРЕМЕННЫЕ

```css
/* PhotoPlaces Twilight Design System */
:root {
  /* ========== LIGHT THEME ========== */
  --bg: #FAFAFA;
  --bg-elevated: #FFFFFF;
  --bg-hover: #F4F4F5;
  --border: #E4E4E7;
  --border-subtle: #F4F4F5;
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-muted: #A1A1AA;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
  /* ========== DARK THEME ========== */
  --bg: #09090B;
  --bg-elevated: #18181B;
  --bg-hover: #27272A;
  --border: #3F3F46;
  --border-subtle: #27272A;
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);
}

:root {
  /* ========== COLORS ========== */
  --primary: #6366F1;
  --primary-hover: #4F46E5;
  --secondary: #F59E0B;
  --accent: #06B6D4;

  /* Functional */
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;

  /* ========== TYPOGRAPHY ========== */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ========== SPACING ========== */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ========== BORDER RADIUS ========== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ========== TRANSITIONS ========== */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
```

---

## 10. TAILWIND CONFIG

```javascript
// tailwind.config.js
// PhotoPlaces Twilight Design System
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#EEF2FF',
          100: '#E0E7FF',
          200: '#C7D2FE',
          300: '#A5B4FC',
          400: '#818CF8',
          500: '#6366F1',
          600: '#4F46E5',
          700: '#4338CA',
          800: '#3730A3',
          900: '#312E81',
        },
        secondary: {
          500: '#F59E0B',
          600: '#D97706',
        },
        accent: {
          500: '#06B6D4',
          600: '#0891B2',
        },
      },
      fontFamily: {
        heading: ['Inter', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      fontSize: {
        'xs': ['12px', { lineHeight: '16px' }],
        'sm': ['14px', { lineHeight: '20px' }],
        'base': ['16px', { lineHeight: '24px' }],
        'lg': ['18px', { lineHeight: '28px' }],
        'xl': ['20px', { lineHeight: '28px' }],
        '2xl': ['24px', { lineHeight: '32px' }],
        '3xl': ['30px', { lineHeight: '36px' }],
        '4xl': ['36px', { lineHeight: '40px' }],
        '5xl': ['48px', { lineHeight: '48px' }],
      },
      spacing: {
        '0.5': '2px',
        '1.5': '6px',
        '18': '72px',
        '88': '352px',
      },
      borderRadius: {
        'sm': '6px',
        'md': '8px',
        'lg': '12px',
        'xl': '16px',
        '2xl': '24px',
      },
      boxShadow: {
        'glow': '0 0 20px rgba(99,102,241,0.3)',
        'glow-lg': '0 0 40px rgba(99,102,241,0.4)',
      },
      animation: {
        'fade-in': 'fade-in 0.2s ease-out',
        'slide-up': 'slide-up 0.3s ease-out',
        'slide-down': 'slide-down 0.3s ease-out',
        'scale-in': 'scale-in 0.2s ease-out',
      },
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'slide-up': {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        'slide-down': {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        'scale-in': {
          '0%': { transform: 'scale(0.95)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
      },
    },
  },
  plugins: [
    require('tailwindcss-animate'),
  ],
}
```