dating-app-frontend/promts/start-promt.md

Before starting, read and internalize these two skills in full:
- .claude/skills/impeccable/SKILL.md (and all 7 reference files in reference/)
- .claude/skills/taste-skill/SKILL.md

Apply Impeccable's design principles throughout. Apply Taste-skill's directives:
DESIGN_VARIANCE: 8, MOTION_INTENSITY: 6, VISUAL_DENSITY: 4

You are a Figma design expert. Create a complete component library and UI screens for a mobile dating app called "Tandem". Use the Figma MCP tools to build everything directly in Figma.

## Anti-slop directives (from skills — enforce strictly)
- NO Inter font anywhere. DM Sans is explicitly specified below and is the exception (brand choice).
- NO centered hero layouts — use asymmetric, left-weighted compositions where possible within mobile constraints.
- NO generic 3-equal-card rows. Use asymmetric grids, varied sizes, hierarchy through scale.
- NO pure black (#000000). Use bg-primary: #0D0D0F as specified.
- NO outer neon glows — use inner borders and tinted shadows only.
- NO "John Doe" / "Jane Smith" names. Use: Sofia, Artem, Lena, Daniil, Masha, Igor, Alina, Max.
- NO fake round numbers (50%, 99%). Use organic data: 47 matches, 12 meetups, etc.
- NO emoji in UI text or button labels — use Phosphor or Radix icons instead.
- NO Lorem Ipsum — all copy must be contextual and concrete.
- NO generic card overuse — use elevation only where hierarchy demands it.
- Image placeholders: use picsum.photos/seed/{name}/800/600 format (never Unsplash links).

## Project overview
Mobile-first dating app (iOS/Android via Tauri). Users register by phone, create profiles, swipe a feed, match, chat in real-time (text/photo/voice/video), schedule meetups, report users.

## Design system — establish FIRST before any screens

### Color tokens (create as Figma variables)
- bg-primary: #0D0D0F
- bg-surface: #1A1A1F
- bg-elevated: #242429
- accent: #FF4D6D
- accent-soft: #FF4D6D1A
- gold: #F5A623
- text-primary: #F5F5F7
- text-secondary: #8E8E9A
- text-muted: #4A4A55
- success: #30D158
- error: #FF453A
- border: #2C2C35

### Typography
- Display/Hero: Playfair Display Italic, 32–48px (editorial moments only — match celebrations, onboarding headers)
- Title: DM Sans SemiBold, 20–24px, tracking-tight
- Body: DM Sans Regular, 15–16px, leading-relaxed
- Caption: DM Sans Regular, 12–13px, text-secondary
- Button: DM Sans Medium, 15px
- Mono data (stats, counts, timestamps): DM Mono or DM Sans Tabular Numbers

### Taste-skill typography enforcement:
- Headlines use tracking-tighter. No oversized H1s that scream.
- Control hierarchy through weight and color, not scale alone.
- Playfair Display is brand-intentional (editorial register) — use sparingly.

### Spacing scale: 4, 8, 12, 16, 20, 24, 32, 48px
### Border radius: sm=8, md=16, lg=24, full=999px
### Safe areas: top=44px, bottom=34px (iPhone)

### Shadow / elevation (taste-skill materiality rules):
- Shadows are ALWAYS tinted to the background hue, never pure black
- No outer glows. Use inner border (1px border-white/10) + inner shadow for glass surfaces
- Cards appear only where elevation communicates hierarchy

---

## Component library (create as Figma components with variants)

### 1. Buttons
Component: Button
Variants — size: [Large, Medium, Small] × style: [Primary, Secondary, Ghost, Danger]
- Large: full-width, height 56px, border-radius 16px
- Primary: bg=accent, text=white. Active state: scale(0.98) — physical press feel
- Secondary: bg=bg-elevated, border=1px border-color, text=text-primary
- Ghost: transparent bg, text=accent
- Danger: bg=error
- ALL buttons: no outer glow. Primary shadow = tinted coral shadow beneath

### 2. Input field
Component: InputField
Variants — state: [Default, Focused, Filled, Error]
- Height 56px, bg=bg-elevated, border-radius=12px, 1px border=border-color
- Focused: 1.5px border=accent, subtle inner shadow accent-soft
- Label sits above input (never placeholder-only)
- Error: border=error + inline error text below (never toast for form errors)
- Optional: left icon, right icon/clear

### 3. Profile Card (hero swipe card)
Component: ProfileCard
Size: 340×480px
Structure:
- Full-bleed photo background. Gradient overlay: bottom 50%, black 0%→75%
- Photo: picsum.photos/seed/sofia/400/600 style
- Bottom section over gradient:
  - Name + age: Playfair Display Italic 28px, white (e.g. "Sofia, 24")
  - City + distance: pill, bg=rgba(255,255,255,0.15), blur backdrop
  - 3 tag pills: bg=rgba(255,255,255,0.10), border rgba(255,255,255,0.20)
  - Bio: 2 lines max, text-secondary, DM Sans Regular 14px
- Top-right: report icon button (ghost, small, icon only — no emoji)
- Variants: [Default, Liked (green tinted overlay + heart stamp), Disliked (red overlay + ✕), Superlike (gold glow)]
- Card stack illusion: 2 cards partially peeking behind, scale-down + slight translate

### 4. SwipeActions
Three buttons row, centered:
- Dislike: 64px circle, bg=bg-elevated, X icon (accent red), tinted shadow below
- SuperLike: 52px circle, bg=gold 10% opacity, star icon (gold), smaller
- Like: 64px circle, accent gradient, heart icon white, shadow tinted coral
- No labels — icons only, phosphor style

### 5. BottomNav
Height 83px (inc 34px safe area), bg=bg-surface, 1px top border=border-color
5 tabs: Feed (flame), Matches (heart), Chats (message-circle), Dates (calendar), Profile (user)
Active: icon+label=accent, 2px accent indicator dot above icon
Inactive: text-muted
Labels: DM Sans Regular 11px

### 6. Avatar
Variants — size: [XL=80px, L=56px, M=40px, S=32px] × state: [Default, Online, Verified]
Online: 10px green dot (#30D158) bottom-right, 2px white border around dot
Verified: small accent checkmark badge bottom-right instead

### 7. MatchChip
Height 72px, full-width, bg=bg-surface, subtle 1px border bottom=border-color
Left: Avatar M + Online indicator
Center: Name (DM Sans SemiBold 15px) + last message preview (text-muted, 1 line, 13px)
Right: timestamp (Caption, text-muted) + unread count badge (accent circle, white number)
Pressed state: bg=bg-elevated

### 8. MessageBubble
Variants — sender: [Me, Them] × type: [Text, Photo, Voice, Video]
- Me: right-aligned, bg=accent, text=white, radius 18 18 4 18
- Them: left-aligned, bg=bg-elevated, text=text-primary, radius 18 18 18 4
- Voice: horizontal bar waveform (10–12 bars, varying heights) + duration + play circle icon
- Photo: 200×150 rounded image, tap icon overlay
- Timestamp + read checkmarks (icon, not emoji) below, text-muted 11px
- Max width: 72% of screen

### 9. MatchModal
Full-screen, bg=rgba(0,0,0,0.85), backdrop blur
Center:
- "It's a Match!" Playfair Display Italic 40px, white (no emoji — use decorative SVG spark icon)
- Two Avatar XL overlapping, gold border 2px, inner glow tinted gold
- Subtitle: "You and Sofia both liked each other" — text-secondary, DM Sans Regular
- Primary: "Say Hello" button
- Ghost: "Keep Swiping"
- Static confetti: geometric shapes (circles, triangles, small rectangles) in accent/gold/white scattered around, no emoji stars

### 10. TagPill
Variants — selected: [true, false]
Default: bg=bg-elevated, border=border, text=text-secondary, h=32px, px=12px, radius=full
Selected: bg=accent-soft, border=accent, text=accent

### 11. SectionHeader
Left: Title + optional Caption subtitle
Right: optional "See all" in accent (DM Sans Medium 13px)

### 12. GreetingCard
bg=bg-elevated, border-radius=16px, p=16px
Top-left: decorative quote mark in accent (SVG, not emoji)
Body text: italicized, text-primary
Pressed: 1px accent border appears

### 13. DateCard
Full-width, bg=bg-elevated, radius=16px, p=16px
Left: 48px accent circle with calendar icon (phosphor)
Right: Partner name (SemiBold 15px), date+time (Caption), location (text-muted Caption)
Bottom-right: status pill — Pending=gold bg+text, Confirmed=success, Cancelled=error, Rescheduled=text-secondary

### 14. Toast
Variants: [Success, Error, Info, Warning]
Bottom of screen, mx=16px, bg=bg-elevated, 3px left border in status color
Left: status icon (phosphor) in status color
Right: message text DM Sans Regular 14px
Bottom: auto-dismiss progress line

---

## PAGE 1 — "01 · Auth & Onboarding" (390×844px frames, 40px gap)

Apply /impeccable craft principles: shape UX first, then build.
Asymmetric compositions where mobile constraints allow. Every screen complete, production-ready.

**1.1 — Splash / Welcome**
- Full bg-primary background
- Bottom-left: large abstract soft gradient blob in accent (#FF4D6D), heavily blurred (no hard edges)
- Center: geometric logo mark (abstract spark/connection shape, SVG — no emoji) + "Tandem" Playfair Display Italic 48px
- Tagline: "Meet someone real." text-secondary (concrete verb, not "Elevate your connections")
- Bottom: "Get Started" Primary Large + "Sign In" Ghost button
- Subtle grain texture on background (fixed pseudo-element concept)

**1.2 — Register**
- Back arrow (phosphor) + "Create account" Title
- Subtitle: "Your number stays private." (concrete reassurance, not generic)
- Phone input with country code selector (+7 flag)
- Password input with show/hide toggle icon
- Confirm password input
- "Create Account" Primary Large
- "Already registered? Sign in" text-secondary centered bottom

**1.3 — Login**
- Back arrow + "Welcome back" Title
- Phone + password inputs
- "Sign In" Primary Large
- "Forgot password?" ghost link centered, text-secondary

**1.4 — Profile Setup Step 1/3**
- 3-segment progress bar, segment 1 active (accent), others text-muted
- "Tell us about you" Playfair Display Italic Title (editorial register)
- Name input (filled: "Alina")
- Birth date field (filled: "June 15, 1995")
- Gender selector: two large toggle cards side by side with phosphor icons (person/person)
- City dropdown (filled: "Moscow")
- "Continue" Primary Large

**1.5 — Profile Setup Step 2/3**
- Segment 2 active
- "What moves you?" (concrete, not "What are you into?")
- "Pick up to 5" Caption subtitle
- 4-column wrapping tag grid, 12 tags, 4 selected:
  Selected: Hiking, Jazz, Travel, Books
  Unselected: Coffee, Cooking, Cinema, Yoga, Photography, Surfing, Art, Running
- "Continue" Primary Large

**1.6 — Profile Setup Step 3/3**
- Segment 3 active
- "Show yourself" Playfair Display Italic Title
- Upload zone 340×260: dashed 1.5px accent border, camera phosphor icon, "Tap to add a photo" Caption
- Grid: 1 large slot (filled with placeholder) + 4 small slots (2 empty, styled with dashed accent mini-borders)
- "Finish" Primary Large

---

## PAGE 2 — "02 · Main App" (390×844px frames, 40px gap)

**2.1 — Feed**
- Status bar 44px
- Top bar: small "Tandem" wordmark left (Playfair Display Italic 18px), sliders/filter icon right + Avatar M right
- ProfileCard centered, card stack visible (2 cards peeking: scale 0.95 and 0.90, translate-y)
- SwipeActions below card
- BottomNav: Feed active

**2.2 — Feed + Match Modal**
- Same feed, blurred/dimmed beneath
- MatchModal overlay. Avatars: Sofia + current user. Gold border glow (inner, not outer).
- Static confetti in corners (geometric, not emoji)

**2.3 — Matches List**
- "Matches" Title top bar + filter icon
- Horizontal scroll: 5 Avatar L circles with name below. First: gold ring border + "New" pill (gold). Use names: Lena, Sofia, Masha, Alina, Katya
- Divider line (1px border-color)
- "Conversations" SectionHeader
- 4 MatchChip items. One with 3 unread badge. Names: Artem, Daniil, Max, Igor
- BottomNav: Matches active

**2.4 — Chats List**
- "Chats" Title
- 4 MatchChip items:
  - Sofia — "That place sounds perfect" — 14:32 — online dot
  - Lena — "typing..." italic text-secondary — 14:28
  - Masha — "haha definitely" — Yesterday
  - Alina — "Thanks for the recommendation" — Mon — 2 unread
- BottomNav: Chats active

**2.5 — Chat View (with Sofia)**
- Top: back arrow + Avatar M (Sofia, online) + "Sofia" Title + "Online" Caption green + video-call icon + report icon
- Messages:
  - Date divider: "Today" centered Caption text-muted
  - GreetingCard bubble: "What's your favorite hidden spot in the city?" (dashed accent border)
  - Them (Sofia): "Oh I love this question! There's this tiny jazz bar on Arbat..."
  - Me: "I had no idea that place existed, we should go"
  - Them: "Yes! Saturday works for me 🎷" — wait, no emoji in UI — show as text
  - Photo bubble (Them): picsum placeholder 200×150
  - Voice bubble (Me): waveform bars + "0:23" + play icon
  - Typing indicator: 3 animated dots (static in Figma)
- Bottom input bar: bg=bg-surface, attach icon + "Message Sofia..." field + mic icon + send button (accent circle + arrow icon)
- BottomNav: Chats active

**2.6 — Public Profile (Sofia)**
- Photo area top: full-width, 380px height, 2-photo carousel with dots + "2/4" pill top-right
- Back arrow top-left (on photo) + report icon top-right (both on photo, ghost style)
- Below photo: "Sofia, 24" Title + "Moscow · 2.3 km" Caption + verified badge
- Bio: "Architect by day, jazz fan by night. Looking for someone to explore the city with."
- Tags row horizontal scroll: Hiking, Jazz, Travel, Books, Cinema
- Stats row: 3 small info cards — Height: 168 cm, Nation: Russian, Sign: Libra
- Photo grid 2-col: 2 additional picsum photos
- Sticky bottom: Dislike (Secondary) + "Like" (Primary accent) side by side

**2.7 — Dates/Meetups**
- "Meetups" Title + "+" phosphor icon
- SectionHeader "Upcoming"
- DateCard 1: Daniil · Sat, Jun 14 · 19:00 · Blue Goose Bar, Kamergersky · Confirmed (green)
- DateCard 2: Sofia · Sun, Jun 15 · 14:00 · Gorky Park, Main entrance · Pending (gold)
- SectionHeader "Past"
- DateCard 3: Max · May 28 · Coffee Bean · Cancelled (error, dimmed 60% opacity)
- BottomNav: Dates active

**2.8 — Propose Meetup (bottom sheet)**
- Handle bar 4px, 36px wide, centered, text-muted
- "Propose a Meetup" Title
- Sofia Avatar M + "Sofia" centered below (Caption)
- Location input with map-pin phosphor icon (placeholder: "Coffee shop, park, gallery...")
- Date+time field (filled: "Sat, Jun 14 · 19:00")
- "Send Proposal" Primary Large
- "Cancel" Ghost button

---

## PAGE 3 — "03 · Profile & Settings" (390×844px frames, 40px gap)

**3.1 — My Profile**
- "My Profile" Title + settings gear icon right
- Profile selector: horizontal scroll of compact cards 80×100, first (Alina) has accent border, others dimmed. Last: dashed border + "+" add
- Active profile:
  - Cover photo full-width 200px, rounded corners (picsum placeholder)
  - Avatar XL overlapping bottom of cover, centered, white ring border
  - "Alina, 26" Title centered
  - "Edit Profile" Secondary button
  - Stats row: Likes / 47 | Matches / 12 | Meetups / 3 (numbers in accent, labels Caption — tabular numbers, organic values)
  - Tags: horizontal scroll
  - About: "Architect by day, jazz fan by night. Looking for someone genuine." DM Sans Regular 15px
  - Media: 2-col grid, first item has play icon overlay (video)
- BottomNav: Profile active

**3.2 — Edit Profile**
- Back arrow + "Edit Profile" Title + "Save" accent text button right
- Avatar XL with camera icon overlay circle (bg-elevated)
- Scrollable form:
  - Name (filled: "Alina")
  - Birth date (filled: "Jun 15, 1995")
  - Gender toggle
  - City / District dropdowns (filled: "Moscow / Arbat")
  - Description textarea "Architect by day, jazz fan by night. Looking for someone genuine to explore the city with." + "143/300" counter Caption text-muted
  - Height / Weight in a row (168 cm / 54 kg)
  - Nation input (filled: "Russian")
  - Tags grid (same as onboarding step 2, some selected)
  - "Add Media" section: 1 large + 4 small slots
- "Delete Profile" Danger Ghost button (bottom, error color, no icon)

**3.3 — Settings**
- "Settings" Title
- User row: Avatar M + "+7 (916) 847-2391" + "Edit account" accent link
- Setting groups with 1px dividers:
  "Account": Change Password · Notifications (toggle ON) · Language (Russian)
  "Privacy": Who can see me (Everyone) · Block list
  "Danger zone": "Delete account" error-colored text row
- "Sign Out" Secondary Large button full-width bottom

**3.4 — Feed Filters (bottom sheet)**
- Handle bar
- "Search Filters" Title
- City dropdown (Moscow)
- District dropdown (dimmed, placeholder "Select district")
- Age range: dual-handle slider "21 — 34" (organic range)
- Keywords input with search icon
- Interests TagPill grid (same tags, 3 selected: Jazz, Travel, Hiking)
- "Apply Filters" Primary Large + "Reset" Ghost

**3.5 — Report User (bottom sheet)**
- Handle bar
- "Report" Title
- "Reporting Sofia, 24" Caption text-muted centered
- Radio list (styled rows with custom radio circles in accent):
  · Fake profile
  · Spam or self-promotion
  · Inappropriate content
  · Harassment
  · Other
- Description textarea "Add details (optional)..." 
- "Submit Report" Danger Primary button
- "Cancel" Ghost

---

## Final instructions (Impeccable + Taste-skill enforcement)

**Sequence:**
1. Create all color variables and text styles.
2. Run `/impeccable teach` mentally — establish DESIGN.md context (dark luxury premium dating, not hookup app).
3. Create every component as a Figma component with all variants.
4. Build the three pages with all screens.
5. After first pass, run `/impeccable audit` mentally — check: a11y contrast ratios, spacing consistency, touch target sizes (min 44×44px).
6. Run `/impeccable polish` — final pass: alignment, shadow consistency, border-radius uniformity.

**Quality gates (Taste-skill Pre-flight):**
- Every interactive element has Default + Pressed states at minimum
- No card where spacing would suffice
- Shadows tinted to bg hue
- No pure black anywhere
- Touch targets ≥ 44×44px
- All placeholder content: organic names, organic numbers, real-feeling copy
- Photo placeholders: picsum.photos/seed/{name}/400/600 (sofia, lena, masha, daniil, artem)

**Aesthetic directive:**
Dark luxury. Warm coral accent. The refinement of a premium product — not a hookup app, not a social network. Think: the design confidence of Locket or BeReal's intentionality, the premium feel of a high-end financial app, applied to human connection.