dating-app-frontend/promts/start2.md

Read and apply these skills before starting:

• .claude/skills/impeccable/SKILL.md
• .claude/skills/taste-skill/SKILL.md

DESIGN_VARIANCE: 8, MOTION_INTENSITY: 6, VISUAL_DENSITY: 4

You are a Penpot design expert building a mobile dating app "Tandem". Work in a single Penpot page. Layout everything horizontally in one continuous canvas. Use penpot mcp.

EFFICIENCY RULES (critical — minimize MCP calls)

• Create ALL color variables in one batch operation
• Create ALL text styles in one batch operation
• Create components in logical groups, not one-by-one
• Screens go into one frame row, left to right, 40px gaps
• Do NOT switch pages — one page only
• If you hit a rate limit, pause and report what's done vs pending

PRIORITY ORDER — stop if rate-limited, complete in order:

PHASE 1 — Design tokens (do first, everything depends on this)

Color 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

Text styles:

• Display: Playfair Display Italic 40px (editorial moments only)
• Title: DM Sans SemiBold 22px tracking-tight
• Body: DM Sans Regular 15px
• Caption: DM Sans Regular 12px, text-secondary
• Button: DM Sans Medium 15px

PHASE 2 — Core components (minimum viable set, batch-create)

Build these 6 first — screens depend on them:

1. Button/Primary — 56px height, radius 16, bg=accent, DM Sans Medium 15px white. Variants: Large/Medium
2. InputField — 56px height, radius 12, bg=bg-elevated, border 1px border-color. Variants: Default/Focused/Error
3. ProfileCard — 340×480px. Full-bleed photo bg (picsum.photos/seed/sofia/340/480), bottom gradient overlay, Name+age in Playfair Display Italic 28px white, city pill, 3 tag pills, bio 2 lines. Top-right report icon.
4. SwipeActions — 3 circles in a row: Dislike 64px (bg-elevated, X icon), SuperLike 52px (gold tint, star icon), Like 64px (accent gradient, heart icon)
5. BottomNav — 390×83px, bg=bg-surface, top border 1px, 5 tabs: Feed/Matches/Chats/Dates/Profile. Active=accent
6. Avatar — Circle crop. Variants: XL 80px / L 56px / M 40px, with Online green dot state

PHASE 3 — Secondary components (if quota allows)

7. MatchChip — 72px height, Avatar M + name + last message + timestamp + unread badge
8. MessageBubble — Me: right, bg=accent. Them: left, bg=bg-elevated. Variants: Text/Voice
9. TagPill — h=32px, radius=full. Variants: Default (bg-elevated) / Selected (accent-soft + accent border)
10. Toast — bg=bg-elevated, left border 3px, icon + message. Variants: Success/Error/Info
11. MatchModal — full-screen overlay, "It's a Match!" Playfair 40px, two XL avatars gold border, 2 buttons
12. DateCard — bg-elevated, radius 16, calendar icon circle, partner name+date+location, status pill

PHASE 4 — Screens (one frame per screen, 390×844px, horizontal row, 40px gap)

Label each frame. Use components from Phase 2–3.

Auth group (screens A1–A6):

A1 · Splash — bg-primary full, accent blob bottom-left (blurred ellipse), "Tandem" Playfair Italic 48px center, tagline "Meet someone real." text-secondary, Get Started (Primary) + Sign In (Ghost) buttons bottom

A2 · Register — Back arrow, "Create account" Title, phone input (+7 prefix), password input, confirm password, "Create Account" Primary button, "Sign in" ghost link bottom

A3 · Login — Back arrow, "Welcome back" Title, phone input, password input, "Sign In" Primary, "Forgot password?" ghost centered

A4 · Profile Step 1/3 — 3-segment progress (1 active), "Tell us about you" Display, Name/Birthday/Gender toggle/City inputs, Continue button

A5 · Profile Step 2/3 — Segment 2 active, "What moves you?" Title, 4-col tag grid (12 tags, 4 selected: Hiking/Jazz/Travel/Books), Continue

A6 · Profile Step 3/3 — Segment 3 active, "Show yourself" Display, upload zone 340×260 dashed accent border, 1 large + 4 small photo slots, Finish button

Main app group (screens B1–B8):

B1 · Feed — Status bar, top bar (Tandem wordmark + filter icon + Avatar M), ProfileCard centered with card stack behind, SwipeActions below, BottomNav Feed active

B2 · Feed + Match — Same as B1 dimmed, MatchModal overlay: "It's a Match!" Playfair 40px, Sofia+user avatars gold border, "Say Hello" + "Keep Swiping" buttons

B3 · Matches — "Matches" Title, horizontal avatar row (5 avatars L, first gold ring "New"), divider, 4 MatchChip rows (Artem/Daniil/Max/Igor), BottomNav Matches active

B4 · Chats — "Chats" Title, 4 MatchChip rows: Sofia (online, "That place sounds perfect"), Lena (typing…), Masha ("haha definitely"), Alina (2 unread badge), BottomNav Chats active

B5 · Chat View — Top: back + Sofia Avatar M + "Online" + video icon. Messages: date divider, greeting card bubble, 4 alternating bubbles, voice bubble (Me), typing dots. Bottom input bar. BottomNav Chats active

B6 · Public Profile — Photo 390×380 carousel top, back+report icons on photo, "Sofia, 24" + city + verified, bio, tags row, stats row (168cm/Russian/Libra), 2-col photo grid, sticky bottom Dislike+Like buttons

B7 · Meetups — "Meetups" Title + "+" icon, 2 DateCards upcoming (Confirmed+Pending), 1 DateCard past (Cancelled dimmed), BottomNav Dates active

B8 · Propose Meetup (bottom sheet) — Handle bar, "Propose a Meetup" Title, Sofia avatar+name, location input, date+time field, Send Proposal Primary, Cancel Ghost

Profile group (screens C1–C5):

C1 · My Profile — "My Profile" Title, profile selector scroll (Alina active), cover photo, Avatar XL overlapping, "Alina, 26", Edit button, stats row (47 Likes / 12 Matches / 3 Meetups), tags, bio, media grid, BottomNav Profile active

C2 · Edit Profile — Back + "Edit Profile" + Save. Avatar with camera overlay. Form: Name/Birthday/Gender/City/Bio textarea (143/300 counter)/Height+Weight row/Nation/Tags/Media grid/Delete Profile danger button

C3 · Settings — "Settings" Title, user row (Avatar M + phone number + edit link), grouped list rows with dividers (Account/Privacy/Danger zone sections), Sign Out Secondary button

C4 · Feed Filters (bottom sheet) — Handle, "Search Filters" Title, City/District dropdowns, age range slider (21–34), keywords input, tags grid (3 selected), Apply Filters Primary + Reset Ghost

C5 · Report (bottom sheet) — Handle, "Report" Title, "Reporting Sofia, 24" caption, 5 radio reasons (Fake/Spam/Inappropriate/Harassment/Other), details textarea, Submit Report Danger Primary, Cancel Ghost

---

Design principles (enforced throughout)

Visual language — dark luxury:

• Shadows always tinted to bg hue, never pure black drop shadows
• No outer glows — inner borders (1px rgba(255,255,255,0.08)) on elevated surfaces
• Cards only where elevation communicates hierarchy
• Spacing > cards where possible

Anti-slop rules:

• No pure #000000 anywhere
• No Inter font
• No centered hero on non-splash screens
• No generic 3-equal-card rows
• Placeholder images: picsum.photos/seed/{name}/W/H (sofia, lena, masha, artem, daniil)
• Organic numbers: 47 matches, 12 meetups, 143/300, +7 (916) 847-2391
• No emoji in UI — phosphor-style icons only
• Real copy: "Meet someone real." not "Elevate your connections."

Touch targets: All interactive elements minimum 44×44px

Aesthetic: Premium dating app. The design confidence of a high-end product — refined, warm, intentional.