131 lines
7.3 KiB
Markdown
131 lines
7.3 KiB
Markdown
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.
|