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.