# MeetMe — Дизайн-система в Penpot (Claude Code + MCP)

## Предисловие

Перед началом работы прочитай и усвой полностью:

- `.claude/skills/impeccable/SKILL.md` и все 7 файлов из `reference/`
- `.claude/skills/taste-skill/SKILL.md`

Эти скиллы — не опциональные. Без них выйдет типичный AI-слоп: Inter везде, фиолетово-синие градиенты, карточки внутри карточек, серый текст на цветном фоне. Читай. Потом работай.

---

## Контекст проекта

**MeetMe** — мобильное дейтинг-приложение (Vue 3 + Tauri 2). Пользователи регистрируются по телефону, создают несколько профилей, листают ленту, ставят лайки, получают матчи, переписываются в чате, договариваются о реальных встречах.

Весь дизайн — **на русском языке**: лейблы, плейсхолдеры, заголовки, подписи, пустые состояния, сообщения об ошибках, CTA-кнопки.

Два брейкпоинта:

- **Mobile** — 390 × 844 px (iPhone 14 Pro как эталон)
- **Desktop** — 1440 × 900 px

---

## Задача

Создать в Penpot полноценный дизайн-проект **MeetMe** со следующей структурой:

```
MeetMe/
├── 🎨 Foundations
│   ├── Color Palette
│   ├── Typography
│   ├── Spacing & Grid
│   ├── Elevation & Shadows
│   └── Motion Tokens
├── 🔷 Icons
│   └── Icon Library (48+ иконок)
├── 🧱 Components
│   ├── Atoms
│   ├── Molecules
│   └── Organisms
└── 📱 Screens
    ├── Mobile (390px)
    └── Desktop (1440px)
```

---

## Айдентика и тон

**Название:** MeetMe  
**Характер:** тёплый, живой, немного дерзкий — не корпоративный. Как хорошее свидание: интересно, немного волнительно, красиво.  
**Аудитория:** 22–35 лет, городские жители, ценят эстетику.  
**Тон:** уверенный, человечный, без заигрывания. Не «найди любовь», а «встреть своего человека».

---

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

### Принципы (из impeccable color-and-contrast)

- Все цвета определяй в **OKLCH** — предсказуемый контраст при изменении яркости
- Нейтралы должны быть **тёплыми** (чуть красный/жёлтый подтон), не холодно-серыми
- Избегай: синих оттенков по умолчанию, generic «brand purple», чистого чёрного/белого

### Палитра MeetMe

**Brand (основной акцент):**
Тёплый терракотово-коралловый — не стандартный розовый Tinder, не красный. Живой, зрелый.

```
--color-brand-50:  oklch(97% 0.012 22)   /* почти белый с теплом */
--color-brand-100: oklch(93% 0.030 22)
--color-brand-200: oklch(86% 0.065 22)
--color-brand-300: oklch(76% 0.110 22)
--color-brand-400: oklch(66% 0.148 22)
--color-brand-500: oklch(58% 0.172 22)   /* основной — #D4614A approx */
--color-brand-600: oklch(50% 0.160 22)
--color-brand-700: oklch(42% 0.140 22)
--color-brand-800: oklch(32% 0.110 22)
--color-brand-900: oklch(22% 0.075 22)
```

**Neutral (тёплые серые):**

```
--color-neutral-0:   oklch(100% 0 0)
--color-neutral-50:  oklch(97% 0.004 60)
--color-neutral-100: oklch(94% 0.008 60)
--color-neutral-200: oklch(88% 0.012 60)
--color-neutral-300: oklch(78% 0.016 60)
--color-neutral-400: oklch(64% 0.014 60)
--color-neutral-500: oklch(52% 0.012 60)
--color-neutral-600: oklch(40% 0.010 60)
--color-neutral-700: oklch(30% 0.008 60)
--color-neutral-800: oklch(20% 0.006 60)
--color-neutral-900: oklch(12% 0.004 60)
```

**Semantic:**

```
--color-success: oklch(62% 0.155 145)   /* зелёный — матч состоялся */
--color-warning: oklch(78% 0.140 72)    /* янтарный — встреча pending */
--color-error:   oklch(58% 0.180 15)    /* красный — ошибка */
--color-info:    oklch(60% 0.130 240)   /* синий — уведомление */
```

**Поверхности (Light mode):**

```
--surface-page:      --color-neutral-50
--surface-card:      --color-neutral-0
--surface-elevated:  --color-neutral-0
--surface-overlay:   oklch(12% 0.004 60 / 60%)
```

**Все токены фиксируй в Penpot как Color Styles**, организованные в группы: `brand/`, `neutral/`, `semantic/`, `surface/`.

---

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

### Принципы (из impeccable typography)

- Не Inter. Никогда Inter как единственный шрифт.
- Пара: выразительный дисплейный + читаемый текстовый
- Модульная шкала, не произвольные размеры
- Следи за tracking (letter-spacing) — по умолчанию он слишком тесный у большинства шрифтов

### Выбор для MeetMe

**Display / Headings:** `Playfair Display` (Google Fonts)  
Причина: серифный, тёплый, немного романтичный. Хорошо работает в заголовках карточек профилей и экране матча. Контрастирует с современным гротеском основного текста.

**Body / UI:** `Manrope` (Google Fonts)  
Причина: геометрический гротеск с тёплым характером, отличная читаемость на маленьких размерах, хорошие кириллические глифы.

### Типографическая шкала (модульная, ratio 1.25)

| Токен         | Шрифт            | Size | Weight | Line-height | Tracking | Применение             |
| ------------- | ---------------- | ---- | ------ | ----------- | -------- | ---------------------- |
| `display-2xl` | Playfair Display | 48px | 700    | 1.1         | -0.02em  | Экран матча, hero      |
| `display-xl`  | Playfair Display | 38px | 700    | 1.15        | -0.015em | Заголовки онбординга   |
| `display-lg`  | Playfair Display | 30px | 600    | 1.2         | -0.01em  | Имя в профиле          |
| `display-md`  | Playfair Display | 24px | 600    | 1.25        | -0.005em | Заголовки секций       |
| `heading-lg`  | Manrope          | 20px | 700    | 1.3         | -0.01em  | Навбар, диалоги        |
| `heading-md`  | Manrope          | 17px | 600    | 1.35        | -0.005em | Карточки, подзаголовки |
| `heading-sm`  | Manrope          | 15px | 600    | 1.4         | 0        | Лейблы полей           |
| `body-lg`     | Manrope          | 16px | 400    | 1.6         | 0        | Основной текст         |
| `body-md`     | Manrope          | 14px | 400    | 1.6         | 0        | Описание профиля       |
| `body-sm`     | Manrope          | 12px | 400    | 1.5         | 0.01em   | Мета, временные метки  |
| `label-lg`    | Manrope          | 14px | 500    | 1           | 0.04em   | Кнопки, таббар         |
| `label-sm`    | Manrope          | 11px | 500    | 1           | 0.06em   | Бейджи, чипы           |

**Все токены фиксируй в Penpot как Text Styles.**

---

## 3. SPACING & GRID

### Шкала отступов (4px база)

```
--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
```

### Радиусы скругления

```
--radius-sm:   6px    /* чипы, теги */
--radius-md:   12px   /* карточки, поля ввода */
--radius-lg:   20px   /* карточки профиля */
--radius-xl:   28px   /* модальные окна */
--radius-full: 9999px /* кнопки, аватары */
```

### Грид Mobile (390px)

- Колонки: 4
- Гаттер: 16px
- Отступы: 20px

### Грид Desktop (1440px)

- Колонки: 12
- Гаттер: 24px
- Отступы: 80px
- Max content width: 1280px

---

## 4. ELEVATION & ТЕНИ

Не используй `box-shadow: 0 4px 20px rgba(0,0,0,0.25)` — это AI-слоп.  
Тени должны быть тёплыми и слоистыми.

```
--shadow-xs: 0 1px 2px oklch(12% 0.004 60 / 8%)
--shadow-sm: 0 1px 3px oklch(12% 0.004 60 / 10%), 0 1px 2px oklch(12% 0.004 60 / 6%)
--shadow-md: 0 4px 6px oklch(12% 0.004 60 / 7%), 0 2px 4px oklch(12% 0.004 60 / 6%)
--shadow-lg: 0 10px 15px oklch(12% 0.004 60 / 8%), 0 4px 6px oklch(12% 0.004 60 / 5%)
--shadow-xl: 0 20px 25px oklch(12% 0.004 60 / 8%), 0 8px 10px oklch(12% 0.004 60 / 4%)
```

**Карточка профиля** использует `--shadow-lg` + небольшой warm tint.

---

## 5. БИБЛИОТЕКА ИКОНОК

Создай коллекцию **48 иконок** в едином стиле:

- Стиль: **Outlined с rounded endpoints**, stroke 1.5–2px, 24×24 viewport
- Никакого filled + outlined микса в одном экране
- Все иконки — компоненты Penpot с именованием `icon/[category]/[name]`

### Список иконок (сгруппируй в Penpot по категориям):

**Navigation (8)**

- `nav/feed` — сетка карточек или стопка
- `nav/matches` — сердце с двойным контуром или звёзды
- `nav/chat` — облако диалога
- `nav/dates` — календарь с точкой
- `nav/profile` — силуэт человека
- `nav/settings` — шестерёнка или слайдеры
- `nav/back` — стрелка влево
- `nav/close` — крест

**Actions (12)**

- `action/like` — сердце
- `action/dislike` — крест в круге или большой X
- `action/superlike` — звезда
- `action/send` — стрелка отправки
- `action/attach` — скрепка
- `action/camera` — камера
- `action/microphone` — микрофон
- `action/photo` — рамка изображения
- `action/video` — видеокамера
- `action/delete` — корзина
- `action/edit` — карандаш
- `action/more` — три точки (горизонтальные)

**Profile (8)**

- `profile/age` — торт или число
- `profile/location` — пин геолокации
- `profile/height` — линейка роста
- `profile/weight` — весы
- `profile/verified` — галочка в круге
- `profile/add` — плюс в круге
- `profile/switch` — стрелки обмена (смена профиля)
- `profile/tag` — тег/лейбл

**Chat (8)**

- `chat/read` — двойная галочка
- `chat/delivered` — одна галочка
- `chat/typing` — три точки анимированные
- `chat/audio` — волна аудио
- `chat/emoji` — смайлик
- `chat/date-proposal` — календарь с сердцем
- `chat/greetings` — рука с приветствием
- `chat/report` — флажок

**Status (6)**

- `status/online` — зелёная точка
- `status/pending` — часы
- `status/confirmed` — галочка
- `status/cancelled` — крест
- `status/match` — конфетти или двойное сердце
- `status/limit` — замок или стоп-сигнал

**Misc (6)**

- `misc/filter` — воронка
- `misc/search` — лупа
- `misc/notification` — колокол
- `misc/map-pin` — булавка карты
- `misc/link` — цепочка
- `misc/info` — буква i в круге

---

## 6. КОМПОНЕНТНАЯ БИБЛИОТЕКА

### ATOMS

#### Button

**Варианты (Property: variant)**

- `primary` — brand-500 фон, белый текст
- `secondary` — brand-100 фон, brand-700 текст
- `ghost` — прозрачный фон, brand-600 текст
- `destructive` — error фон, белый текст

**Размеры (Property: size)**

- `lg` — height 52px, padding 24px, radius-full, label-lg
- `md` — height 44px, padding 20px, radius-full, label-lg
- `sm` — height 36px, padding 16px, radius-md, label-sm

**Состояния (Property: state)**

- `default`, `hover`, `pressed`, `disabled`, `loading`

**Иконка (Property: icon):** leading / trailing / icon-only

#### Input

- height 52px, radius-md, border 1.5px neutral-200
- Лейбл над полем (floating label — анимируется при фокусе)
- Состояния: `default`, `focused` (brand-500 border), `error` (error border + helper text), `disabled`, `filled`
- Варианты: `text`, `password` (с кнопкой показа), `phone` (с префиксом +7), `search`

#### Avatar

- Размеры: 32px, 40px, 48px, 64px, 80px, 120px
- Форма: круг
- Состояния: с фото, инициалы (brand-100 фон), загрузка, онлайн-индикатор
- Бейдж: счётчик уведомлений (правый верхний угол)

#### Badge / Chip

- `badge` — небольшой счётчик (число), brand или error
- `chip` — тег с текстом, варианты: outline, filled; с иконкой или без; dismissible

#### Tag (интересы)

- Компактный чип с иконкой-эмодзи и текстом
- `selected` / `unselected` состояния
- Используется в профиле для отображения тегов интересов

#### Divider

- Горизонтальный, с опциональным текстом по центру («или»)

---

### MOLECULES

#### ProfileCard (карточка в ленте)

Основной компонент приложения. Полноэкранная карточка на мобиле.

**Структура:**

```
┌─────────────────────────────┐
│                             │
│   [Фото профиля — bg]       │
│                             │
│                             │
│  ╔═══════════════════════╗  │
│  ║  Анна, 26             ║  │
│  ║  📍 Москва, Арбат     ║  │
│  ║  🏷 Путешествия  Йога ║  │
│  ╚═══════════════════════╝  │
└─────────────────────────────┘
```

- Фоновое фото занимает всю карточку
- Снизу градиент `oklch(12% 0 0 / 0%)` → `oklch(12% 0 0 / 80%)` — 40% высоты
- Имя: `display-lg` белый
- Возраст: рядом с именем, `display-lg` `oklch(100% 0 0 / 75%)`
- Геолокация: `body-md` белый, иконка `profile/location`
- Теги: горизонтальный скролл чипов
- Тени под текстом нет — только градиент

**Действия (кнопки поверх карточки):**

- Дизлайк — круглая кнопка 64px, нейтральный фон, иконка `action/dislike` в neutral-600
- Лайк — круглая кнопка 64px, brand-500 фон, иконка `action/like` белый
- Суперлайк (опционально) — 52px, янтарный, звезда

**Свайп-оверлеи:**

- Свайп вправо: зелёный бейдж «НРАВИТСЯ» в левом верхнем углу, наклон текста
- Свайп влево: красный бейдж «ПРОПУСТИТЬ» в правом верхнем углу

#### MessageBubble

- Чужое сообщение: нейтральный фон, скругление `0 radius-lg radius-lg radius-lg`
- Моё сообщение: brand-500 фон, белый текст, скругление `radius-lg 0 radius-lg radius-lg`
- Время: `body-sm` neutral-400
- Статус доставки: иконки `chat/delivered`, `chat/read`
- Медиа-сообщение: превью фото/видео с rounded corners
- Голосовое: волна + длительность + кнопка воспроизведения

#### MatchCard (в списке матчей)

```
┌──────────────────────────────┐
│ [Avatar 64px]  Анна, 26      │
│                Москва        │
│                ──────────    │
│                Написать →    │
└──────────────────────────────┘
```

- Горизонтальный layout
- Левая часть: аватар с онлайн-индикатором
- Правая: имя `heading-md`, город `body-sm` neutral-500, CTA `label-lg` brand-600
- Правый край: время матча `body-sm` neutral-400

#### ChatListItem

```
┌──────────────────────────────────────┐
│ [Avatar 48px]  Анна            14:32 │
│                Привет! Как дела?  [2]│
└──────────────────────────────────────┘
```

- Аватар, имя, последнее сообщение (truncated), время, счётчик непрочитанных
- Active state: brand-50 фон

#### DateCard (встреча)

- Иконка `nav/dates` brand-500
- Имя партнёра, дата и время
- Адрес/координаты
- Status badge: `pending` (янтарный), `confirmed` (зелёный), `cancelled` (красный)
- Действия: «Подтвердить» / «Отменить» / «Перенести»

#### FilterSheet (панель фильтров)

Bottom sheet на мобиле, sidebar на десктопе.

- Возраст: range slider (ageMin–ageMax)
- Город: dropdown select
- Район: dropdown select (зависимый)
- Теги: chip multi-select
- CTA: «Применить фильтры», «Сбросить»

---

### ORGANISMS

#### BottomNav (Mobile)

Высота 83px (+ safe area). 5 вкладок:

- Лента (`nav/feed`)
- Матчи (`nav/matches`) — с бейджем
- Чат (`nav/chat`) — с бейджем
- Встречи (`nav/dates`)
- Профиль (`nav/profile`)

Active state: иконка brand-500, лейбл brand-600, точка под иконкой.

#### SideNav (Desktop)

Ширина 240px, фиксированная. Logo MeetMe сверху. Те же 5 пунктов + «Настройки». Имя и аватар активного профиля снизу с кнопкой смены.

#### ProfileHeader

Используется на экране публичного профиля.

- Фото-галерея (swiper, точки-индикаторы)
- Кнопка назад
- Кнопка «Пожаловаться» (три точки → меню)
- Информация профиля снизу

#### ChatHeader

- Назад, аватар + имя + онлайн-статус, три точки (закрыть чат / встреча / жалоба)

#### MatchModal (bottom sheet / центральный модал)

Появляется при взаимном лайке.

- Анимированный фон (конфетти? мягкие частицы)
- Два аватара с перекрытием
- Заголовок: `display-xl` «Это матч!»
- Подзаголовок: «Ты и Анна понравились друг другу»
- CTA primary: «Написать Анне»
- CTA ghost: «Продолжить поиск»

---

## 7. ЭКРАНЫ — MOBILE (390px)

Создай фреймы для всех экранов в Penpot. Каждый экран — отдельный фрейм 390×844.

### Авторизация

**LoginView**

- Логотип MeetMe (wordmark Playfair Display + иконка) по центру верхней трети
- `display-xl`: «Рады видеть тебя»
- Поля: телефон (+7), пароль
- Кнопка primary `lg`: «Войти»
- Ссылка: «Нет аккаунта? Зарегистрироваться»

**RegisterView**

- «Создай аккаунт»
- Поля: телефон, пароль, подтверждение пароля
- Кнопка: «Зарегистрироваться»
- Ссылка: «Уже есть аккаунт? Войти»

### Онбординг

**CreateProfileView — Шаг 1 (Основное)**

- Прогресс-бар (3 шага)
- «Расскажи о себе»
- Поля: Имя, Дата рождения, Пол (radio-кнопки с иконками ♂ ♀)
- CTA: «Далее»

**CreateProfileView — Шаг 2 (Детали)**

- Поля: Город (select), Район (select), Рост, Вес, Национальность
- Описание (textarea, 300 символов)
- CTA: «Далее»

**CreateProfileView — Шаг 3 (Интересы)**

- «Выбери до 10 интересов»
- Chip grid из тегов (GET /tags)
- CTA: «Готово»

**MediaUploadView**

- «Добавь фото»
- 6 слотов в сетке 2×3, первый — обязательный (основное фото)
- Плейсхолдер слота: `+` иконка, пунктирная рамка
- Подсказка: «Первое фото увидят все»
- CTA: «Начать знакомства»

### Лента

**FeedView**

- Карточка профиля на весь экран (за вычетом статус-бара и BottomNav)
- Вверху: логотип MeetMe (compact) + иконка фильтра + иконка уведомлений
- Кнопки действий снизу карточки
- Индикатор позиции (точки или счётчик «3 из 20»)

**FeedView — Empty State**

- Иллюстрация (простая, монолинейная, brand-200 цвет)
- «Ты просмотрел всех»
- «Попробуй позже или измени фильтры»
- CTA: «Изменить фильтры»

**FeedView — Limit Reached**

- «У тебя 10 матчей»
- «Пообщайся с ними, чтобы продолжить поиск»
- CTA: «Перейти к матчам»

### Матчи

**MatchesView**

- Заголовок «Матчи»
- Horizontal scroll «Новые» — аватары в кружках (как в Instagram Stories)
- Список MatchCard ниже — все матчи в хронологии

### Чат

**ChatsListView**

- Заголовок «Сообщения»
- Поиск по чатам
- Список ChatListItem
- Empty state: «Пока нет чатов. Напиши кому-нибудь из матчей!»

**ChatView**

- ChatHeader
- Сообщения (с группировкой по датам — «Сегодня», «Вчера», дата)
- Быстрые приветствия (горизонтальный скролл чипов, появляется при первом сообщении)
- Input bar: поле ввода + иконки: фото, голосовое, отправить
- Кнопка «Назначить встречу» — плавающая или в меню чата

### Встречи

**DatesView**

- Заголовок «Встречи»
- Фильтр по статусу (таббар: Все / Ожидают / Подтверждены)
- Список DateCard
- Empty state: «Пока нет встреч. Договорись в чате!»

**DateProposalSheet (bottom sheet)**

- «Назначить встречу»
- Поле: дата и время (date-time picker)
- Карта или поле координат
- CTA: «Отправить предложение»

### Профиль

**MyProfilesView**

- «Мои профили»
- Список профилей (аватар, имя, возраст)
- Кнопка «Добавить профиль» (+ иконка)
- Active badge на текущем профиле

**ProfileEditView**

- Редактирование с теми же полями что в создании
- Секция «Медиа» — галерея с drag-to-reorder
- Кнопка «Удалить профиль» (destructive, внизу)

**ProfilePublicView**

- ProfileHeader (фото-галерея)
- Имя, возраст, геолокация
- Описание
- Теги (chips)
- Рост, вес, национальность (иконки + значения)
- Кнопки Лайк/Дизлайк (если это лента) или «Написать» (если это матч)

### Настройки

**SettingsView**

- Аватар + имя аккаунта
- Секции: Аккаунт, Уведомления, Безопасность, О приложении
- Кнопка «Выйти» (destructive)

---

## 8. ЭКРАНЫ — DESKTOP (1440px)

Каждый фрейм 1440×900.

**Общий Layout:**

- Левая колонка: SideNav (240px, фиксированная)
- Основная область: 1200px
- Для чата: split-view — список (320px) + сообщения

**FeedView Desktop**

- SideNav слева
- Центр: карточка профиля 420×560px (не во весь экран!)
- Справа от карточки: детали профиля (имя, теги, описание) — 320px колонка
- Кнопки под карточкой или справа

**ChatsView Desktop**

- SideNav | ChatList 320px | ChatMessages | (опционально ProfilePanel 280px)
- Нет bottom sheet — поле ввода снизу в колонке сообщений

**MatchesView Desktop**

- Сетка 3 колонки из MatchCard

**ProfileEditView Desktop**

- Двухколоночный layout: форма | превью профиля

---

## 9. МОДАЛЬНЫЕ ОКНА И ОВЕРЛЕИ

- **MatchModal** — центральный модал на десктопе, bottom sheet на мобиле
- **FilterSheet** — right sidebar на десктопе, bottom sheet на мобиле
- **DateProposalSheet** — аналогично
- **ReportSheet** — «Пожаловаться»: тип жалобы (chips) + текстовое поле + «Отправить»
- **ConfirmDialog** — удаление профиля, закрытие чата

---

## 10. ПУСТЫЕ СОСТОЯНИЯ И СОСТОЯНИЯ ЗАГРУЗКИ

Для каждого ключевого экрана создай:

**Loading (Skeleton):**

- ProfileCard skeleton: прямоугольник с animated shimmer
- ChatListItem skeleton: аватар-круг + две строки

**Empty States (с иллюстрацией):**

- Лента пуста
- Нет матчей
- Нет чатов
- Нет встреч

**Error State:**

- Что-то пошло не так + кнопка «Повторить»

---

## 11. ЛОГОТИП MEETME

Создай wordmark:

- Текст «MeetMe» шрифтом Playfair Display, 700 weight
- «Meet» — neutral-900
- «Me» — brand-500
- Опционально: небольшой знак — стилизованное «M» из двух сердец или двух силуэтов
- Compact версия: только знак (для BottomNav, favicon)
- Размеры: Full (для онбординга), Medium (для NavBar), Small / Icon-only

---

## 12. ОРГАНИЗАЦИЯ В PENPOT

### Структура страниц:

```
Page 1: 🎨 Foundations
  Frames: Color Palette | Typography Scale | Spacing | Shadows | Motion

Page 2: 🔷 Icons
  Frame: Icon Library (сетка 8×6, все 48 иконок с лейблами)

Page 3: 🧱 Components — Atoms
  Frames: Button | Input | Avatar | Badge | Chip | Tag | Divider

Page 4: 🧱 Components — Molecules
  Frames: ProfileCard | MessageBubble | MatchCard | ChatListItem | DateCard | FilterSheet

Page 5: 🧱 Components — Organisms
  Frames: BottomNav | SideNav | ProfileHeader | ChatHeader | MatchModal

Page 6: 📱 Mobile Screens
  390×844: Login | Register | CreateProfile (×3) | MediaUpload |
           Feed | Feed Empty | Feed Limit | Matches | ChatsList |
           Chat | Dates | DateProposal | MyProfiles | ProfileEdit |
           ProfilePublic | Settings

Page 7: 🖥 Desktop Screens
  1440×900: Feed | Chat | Matches | ProfileEdit
```

### Именование в Penpot:

- Компоненты: `ComponentName/variant/size/state`
- Цвета: `brand/500`, `neutral/200`, `semantic/success`
- Текстовые стили: `display/2xl`, `body/md`, `label/lg`
- Иконки: `icon/nav/feed`, `icon/action/like`

---

## 13. ANTI-PATTERNS (не делай этого)

Из impeccable — то, что категорически запрещено:

- ❌ `font-family: Inter` как единственный шрифт
- ❌ Градиент `purple → blue` в качестве акцента
- ❌ `box-shadow: 0 4px 20px rgba(0,0,0,0.25)` — тёмная жирная тень
- ❌ Карточки внутри карточек внутри карточек
- ❌ `border-radius: 24px` на всём подряд
- ❌ Серый текст на цветном фоне (проверяй контраст WCAG AA)
- ❌ Bounce easing (cubic-bezier с выходом за 1)
- ❌ «Плавающие» заголовки с декоративными линиями и иконками над каждым
- ❌ Полупрозрачные карточки с `backdrop-filter: blur` везде
- ❌ Все кнопки одинаковые, round, pill-shaped — нужна иерархия
- ❌ Пустые состояния без иллюстрации и без конкретного CTA
- ❌ Текст `color: #666` на белом фоне — не пройдёт WCAG

---

## 14. ПОРЯДОК РАБОТЫ

1. **Foundations** — создай все токены как Penpot Styles (цвет, текст)
2. **Icons** — нарисуй все 48 иконок, сохрани как компоненты
3. **Логотип** — создай 3 версии
4. **Atoms** — Button, Input, Avatar, Badge, Chip
5. **Molecules** — ProfileCard, MessageBubble, MatchCard, ChatListItem, DateCard
6. **Organisms** — BottomNav, SideNav, ProfileHeader, ChatHeader, MatchModal
7. **Mobile screens** — собери все 17 экранов из компонентов
8. **Desktop screens** — 4 ключевых экрана
9. **States & Edge cases** — loading, empty, error для каждого экрана

Не спрашивай подтверждения на каждый шаг — работай последовательно до полной готовности проекта.

---

## Финальная проверка

После завершения прогони аудит по impeccable:

- Типографический контраст (все текстовые пары ≥ 4.5:1)
- Touch targets на мобиле (≥ 44×44px)
- Длина строк (45–75 символов для body text)
- Консистентность радиусов (не более 3 уровней на один экран)
- Отступы кратны шкале (никаких «13px»)
- Все состояния компонентов реализованы
- Все иконки используются минимум на одном экране