designmd-forge 1.2.0

package/dist/data/designs/ios-feeld.md

@@ -0,0 +1,378 @@
+# Design System Inspiration of Feeld (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Feeld's iOS app is the dating app for the open-minded — non-monogamy, kink, queer, exploratory — and its design language is deliberately the opposite of the candy-bright, photo-heavy mainstream dating apps. The app is **dark-native**: there is no light mode in the shipping product. The canvas is true black (`#000000`), profile photography is the only large field of color, and the entire interface floats over that black like neon on velvet. The single brand accent is an electric **acid-yellow** (`#E8FF63`) — a color that reads as energetic, queer-coded, and intentionally un-romantic (no soft pinks-as-default here). A warm **desire pink** (`#FF5C8A`) is the secondary emotional color, and a soft **lilac** (`#C9B8FF`) handles the "Wink"/super-interest gesture.
+
+The signature screen is the **Discover stack**: a single, deeply-rounded (28pt) profile card filling most of the screen, with a heavy bottom gradient so the name, age, and the person's **Desires** chips read against any photo. Below the card sits a three-button action row — a circular Pass (outline), a large acid-yellow Like (the only acid fill on the screen), and a lilac Wink/super-like. Feeld supports **couples and groups**, so the card frequently shows two names ("Robin & Sky"), two ages, and shared desires — the design must never assume a single-person profile. Above the card is a minimal top bar with a hamburger (filters) and a settings glyph.
+
+The other defining concept is **Desires**: Feeld lets members tag what they're into (Non-monogamy, Kink, ENM, specific orientations, pronouns) and these appear everywhere as pill chips — selected (acid fill, black text), unselected (dark surface, hairline border), or emotional (pink-tinted). The profile, the filter sheet, and the onboarding all revolve around these chips. The second core surface is **Connections** — Feeld's word for matches/chats — a list of round avatars, names (often paired), and last-message snippets.
+
+Typography is a quirky-humanist geometric: **Space Grotesk** for display, names, and headings (its irregular letterforms feel human and a little subversive, matching the brand), with **Inter** for body and metadata where neutral legibility matters. Weights stay in the 400/500/600/700 band — no hairline, no black. Hierarchy is product-UI (display → name → section → body → meta → chip), not editorial. Everything is rounded: cards at 28pt, buttons are full pills (500pt), avatars are circles. The result reads as confident, adult, inclusive, and a little underground.
+
+**Key Characteristics:**
+- True-black canvas (`#000000`) — dark-native, no light mode in the shipping app
+- One rationed accent: acid-yellow `#E8FF63` — lands on exactly one primary action per screen
+- Desire pink `#FF5C8A` (emotional/secondary) + lilac `#C9B8FF` (Wink/super-interest)
+- Discover stack: one full-bleed 28pt-rounded profile card with heavy bottom gradient
+- Couples/groups first-class — cards show paired names, paired ages, shared desires
+- Three-button action row: outline Pass · acid Like (the only acid fill) · lilac Wink
+- "Desires" pill-chip system everywhere — selected / unselected / emotional states
+- "Connections" (not "Matches") — list of round avatars + paired names + snippets
+- Space Grotesk (display/names) + Inter (body/meta) — quirky-humanist over editorial
+- Fully rounded geometry: 28pt cards, 500pt pill buttons, circular avatars
+- Verified badge as a small acid-checkmark glass pill on the photo
+- Minimal chrome — black bar, hamburger filters, no tab-bar tint pill
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Acid Yellow** (`#E8FF63`): The single brand accent — primary Like button, active tab indicator, selected chips, verified checkmark. Rationed to one primary action per screen.
+- **Acid Pressed** (`#D4EB4F`): Pressed state of acid surfaces.
+- **Desire Pink** (`#FF5C8A`): Secondary emotional action — "Send a Wink"/secondary CTA, pink-tinted chips, liked-you affordances.
+- **Pink Deep** (`#E0447A`): Pressed state of pink surfaces.
+- **Lilac** (`#C9B8FF`): Wink / super-interest gesture, premium accents.
+
+### Canvas & Surfaces (Dark — the only mode)
+- **Canvas Black** (`#000000`): Primary canvas. True black so photography and accent feel like neon.
+- **Surface 1** (`#121212`): Cards-on-black, top-bar icons, list rows.
+- **Surface 2** (`#1C1C1E`): Elevated chips, action buttons (Pass), bottom sheets.
+- **Surface 3** (`#262626`): Pressed/hover surface, input fields.
+- **Divider** (`#2A2A2A`): Hairline dividers between connection rows and sections.
+- **Scrim** (`rgba(0,0,0,0.72)`): Bottom gradient on profile cards so text reads on any photo.
+
+### Light Mode
+Feeld ships **dark-only**. There is no first-class light theme. If a host platform forces a light surface (e.g., a share sheet), keep accents identical (`#E8FF63`, `#FF5C8A`) on white `#FFFFFF` with text `#1A1A1A` — but this is a system surface, not the Feeld UI.
+
+| Role | Dark Mode (shipping) | Forced-Light (system surfaces only) |
+|------|----------------------|--------------------------------------|
+| Canvas | `#000000` | `#FFFFFF` |
+| Surface 1 | `#121212` | `#F4F4F2` |
+| Surface 2 | `#1C1C1E` | `#EAEAEA` |
+| Divider | `#2A2A2A` | `#E2E2E2` |
+| Text Primary | `#FFFFFF` | `#1A1A1A` |
+| Text Secondary | `#A8A8A8` | `#6E6E6E` |
+| Acid Yellow | `#E8FF63` | `#E8FF63` |
+| Desire Pink | `#FF5C8A` | `#FF5C8A` |
+
+### Text
+- **Text Primary** (`#FFFFFF`): Names, headings, primary body on black.
+- **Text Secondary** (`#A8A8A8`): Metadata ("Couple · 31 & 29 · 2 km away"), message snippets.
+- **Text Tertiary** (`#6E6E6E`): Timestamps, disabled, very low emphasis.
+- **On-Acid** (`#000000`): Text/icon on acid-yellow fills — always black for contrast.
+- **On-Pink** (`#FFFFFF`): Text on pink fills.
+
+### Semantic
+- **Success** (`#66E0A3`): Verification success, "Connected" confirmation.
+- **Error** (`#FF6B6B`): Form errors, blocked/report confirmation.
+- **Warning** (`#E8FF63`): Reuses acid for caution callouts (consistency over a separate amber).
+- **Liked-You Glow** (`rgba(232,255,99,0.5)`): Drop-shadow halo behind the acid Like button.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Names / Headings**: `Space Grotesk` (by Florian Karsten, derived from Colophon's Space Mono, SIL OFL) — a proportional grotesque with irregular, slightly mechanical letterforms that feel human and subversive — on-brand for Feeld's non-mainstream identity.
+- **Body / Metadata / UI**: `Inter` (by Rasmus Andersson, SIL OFL) — neutral, highly legible at small sizes for message snippets, metadata, form fields.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- Feeld's production app uses a custom grotesque; **Space Grotesk** is the closest free, well-hinted match for the quirky-geometric character.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Space Grotesk | 32pt | 700 | 1.15 | -0.5pt | Onboarding / empty-state hero |
+| Profile Name | Space Grotesk | 26pt | 700 | 1.15 | -0.4pt | On card, supports paired names ("Robin & Sky") |
+| Section Title | Space Grotesk | 22pt | 600 | 1.2 | -0.3pt | "Your Desires", "Connections" |
+| Subsection | Space Grotesk | 18pt | 600 | 1.3 | -0.1pt | "About this connection" |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Bio text, prompt answers |
+| List Title | Space Grotesk | 15pt | 600 | 1.3 | 0pt | Connection name in list |
+| Card Meta | Inter | 14pt | 400 | 1.4 | 0pt | "Couple · 31 & 29 · 2 km away" |
+| Message Snippet | Inter | 13pt | 400 | 1.4 | 0pt | Last message in Connections list |
+| Chip | Inter | 12pt | 600 | 1.0 | 0.1pt | Desire / identity pill text |
+| Button | Space Grotesk | 16pt | 600 | 1.0 | 0pt | Primary / secondary CTA |
+| Caption | Inter | 12pt | 400 | 1.3 | 0.1pt | Timestamps, helper text |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0.2pt | (icons-only is also valid; dot indicator) |
+
+### Principles
+- **Two-font system**: Space Grotesk carries personality (display, names, sections, buttons); Inter carries legibility (body, meta, snippets). Never set body in Grotesk.
+- **Weights 400/500/600/700 only** — no thin, no black; the grotesque is expressive enough without weight extremes.
+- **Paired-name aware**: name styles must gracefully wrap two names + "&" (couples) without truncating mid-name.
+- **Negative tracking on display**: tighten -0.3 to -0.5pt on 22pt+ Grotesk for the confident, condensed feel.
+- **Dynamic Type**: display, name, section, body, snippet scale; chip text, tab labels stay fixed (layout-sensitive pills).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Like / Continue)**
+- Shape: Full pill, 500pt corner radius
+- Background: `#E8FF63` (Acid Yellow) — the only acid fill on the screen
+- Text/Icon: `#000000`
+- Padding: 15pt vertical, 30pt horizontal (pill) — or 64pt circle in the Discover action row
+- Font: Space Grotesk 16pt weight 600
+- Pressed: background `#D4EB4F` + scale 0.98
+- Discover variant: 64pt circle with `0 12px 30px -8px rgba(232,255,99,0.5)` glow
+
+**Secondary Button (Send a Wink / Pink CTA)**
+- Background: `#FF5C8A` (Desire Pink)
+- Text: `#FFFFFF`
+- Shape: pill, 500pt
+- Padding: 15pt / 30pt
+- Pressed: `#E0447A` + scale 0.98
+
+**Outline Button (Skip / Pass)**
+- Background: transparent
+- Text: `#FFFFFF`
+- Border: 1pt `rgba(255,255,255,0.28)`
+- Shape: pill 500pt (or 52pt circle in action row, bg `#1C1C1E`, 1pt `#2A2A2A`)
+- Padding: 13pt / 24pt
+- Pressed: background `#1C1C1E`
+
+**Text Button (Edit Desires / inline action)**
+- Background: none
+- Text: `#E8FF63` (acid), Space Grotesk 15pt weight 600
+- No underline
+- Pressed: opacity 0.7
+
+**Icon Button (top-bar hamburger / settings)**
+- Size: 17pt glyph in 34pt circular `#1C1C1E` hit area
+- Color: `#FFFFFF`, stroke 2pt
+- Pressed: background `#262626`
+
+### Profile Card (the core atom)
+
+- Shape: rounded rect, **28pt** corner radius, full-bleed photo
+- Fills most of the screen between top bar and action row
+- Bottom gradient: `linear-gradient(180deg, transparent, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.92))` over bottom ~56%
+- Body overlay (bottom-left, 20pt/22pt padding):
+  - Name: Space Grotesk 26pt w700 `#FFFFFF` — supports "Robin & Sky"
+  - Sub: Inter 14pt `rgba(255,255,255,0.78)` — "Couple · 31 & 29 · 2 km away"
+  - Desire chips row: 7pt gap, wrapping
+- Verified badge: top-right glass pill — `rgba(0,0,0,0.5)` + blur, 6/10pt padding, 999pt radius, acid checkmark 12pt + "Verified" Inter 11pt w600 `#FFFFFF`
+- Photo dots (multi-photo): top, 4pt gap, active `#FFFFFF`, inactive `rgba(255,255,255,0.45)`
+
+### Action Row (Discover)
+- Centered, 22pt gap, padding 4/12pt
+- Pass: 52pt circle, `#1C1C1E`, 1pt `#2A2A2A`, X glyph 22pt `#A8A8A8`
+- Like: **64pt circle**, `#E8FF63`, heart 28pt filled `#000`, acid glow shadow
+- Wink: 52pt circle, `#1C1C1E`, 1pt `#2A2A2A`, star 22pt filled `#C9B8FF`
+
+### Desire / Identity Chips
+- Shape: full pill 999pt
+- Padding: 9pt vertical, 15pt horizontal (12pt size on card)
+- States:
+  - **Selected**: bg `#E8FF63`, text `#000000`, Inter 12pt w600
+  - **Unselected**: bg `#1C1C1E`, text `#FFFFFF`, 1pt `#2A2A2A` border
+  - **Emotional/Exploring**: bg `rgba(255,92,138,0.16)`, text `#FF5C8A`, 1pt `rgba(255,92,138,0.4)`
+- Used in: profile card overlay, filter sheet, onboarding desire-picker
+
+### Connections List
+- Row: 12pt vertical padding, 1pt `#2A2A2A` bottom divider
+- Avatar: 48pt circle (radial gradient placeholder)
+- Name: Space Grotesk 15pt w600 `#FFFFFF` (supports paired)
+- Snippet: Inter 13pt `#A8A8A8`, single line
+- Timestamp: Inter 11pt `#6E6E6E`, trailing
+- Unread: small acid dot or acid name weight bump
+
+### Navigation
+
+**Top Bar**
+- Height: 44pt + safe area
+- Leading: hamburger (filters) 17pt in 34pt circle `#1C1C1E`
+- Center: screen title — Space Grotesk 22pt w700 `#FFFFFF` ("Discover")
+- Trailing: settings/sort glyph in matching circle (acid dots accent)
+- Background: transparent over black canvas
+
+**Bottom Tab Bar**
+- Height: 64pt + safe area
+- Background: `rgba(0,0,0,0.92)` + `saturate(180%) blur(20px)`, 0.5pt top border `#2A2A2A`
+- Tabs (4): Discover · Likes · Connections · Profile
+- Icon: 23pt, stroke 2pt
+- Active: icon stroke `#E8FF63` + a 5pt acid dot under it — **no tint pill, no label color block**
+- Inactive: `#6E6E6E`
+- Labels optional (icons-only is valid Feeld pattern); dot is the active signal
+
+### Input Fields
+
+**Text Field (bio / message)**
+- Height: 52pt (single-line) / auto (multiline)
+- Background: `#1C1C1E`
+- Border: none (focus: 1pt `#E8FF63`)
+- Corner radius: 16pt
+- Text: Inter 16pt `#FFFFFF`; placeholder Inter 16pt `#6E6E6E`
+
+**Filter Sheet**
+- Bottom sheet, `#121212`, 24pt top corner radius
+- Grab handle: 36pt × 4pt `#2A2A2A`
+- Contents: desire chips grid, distance slider (acid track), age range
+- Apply button: full-width acid pill at bottom
+
+### Distinctive Components
+
+**Desire Chip System** — see Chips above. The defining Feeld component: identity and intent are expressed as togglable pills, never as dropdowns or radio lists.
+
+**Paired Profile Header** — name area renders one OR two names with "&" and two ages; the design is couple/group-first, not single-first.
+
+**Wink Gesture** — lilac star (super-interest) distinct from the acid Like; sends a soft signal before a full match.
+
+**Verified Glass Pill** — frosted `rgba(0,0,0,0.5)` blur pill with acid checkmark; identity verification is a trust pillar for the audience.
+
+**Liked-You Glow** — the acid Like button alone carries a soft acid drop-shadow halo, drawing the eye to the single primary action.
+
+**Connections (not Matches)** — vocabulary and component naming use "Connection" throughout; the list, the empty state, and the chat header all say "Connection".
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 22, 24, 28, 32, 40, 48, 64
+- Card-to-edge inset: 16pt
+- Action row gap: 22pt
+- Chip gap: 7pt (on card) / 10pt (in lists)
+
+### Grid & Container
+- iPhone: single full-bleed card column, 16pt side insets
+- Card height: flexes to fill space between top bar and action row
+- iPad: card max-width 520pt centered; Connections list max-width 600pt
+- No multi-column content — Feeld is a single focused stack
+
+### Whitespace Philosophy
+- **One thing at a time**: Discover shows exactly one profile; no grid of faces
+- **Black breathes**: generous true-black padding around the single card makes the photo and acid pop
+- **Chips wrap, never truncate**: desire chips flow to multiple rows rather than clip
+- **Action row isolated**: clear vertical space isolates Pass/Like/Wink from the card
+
+### Border Radius Scale
+- Square (0pt): full-bleed photo edges that meet the screen
+- Medium (8pt): inline tags, small affordances
+- Standard (12–16pt): input fields, small cards, sheet sub-cards
+- Comfortable (24pt): bottom-sheet top corners
+- Card (28pt): the signature profile card
+- Pill (500pt): all buttons, all desire chips
+- Circle (50%): avatars, action-row buttons
+
+## 6. Depth & Elevation
+
+Feeld is mostly flat — depth comes from the photo, the black canvas, and one glow.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Black canvas, list rows, chips |
+| Card (Level 1) | Implicit via photo + 28pt radius over black | Profile card (no drop shadow needed) |
+| Acid Glow (Level 2) | `0 12px 30px -8px rgba(232,255,99,0.5)` | The single acid Like button only |
+| Sheet (Level 3) | `0 -8px 40px rgba(0,0,0,0.6)` | Filter / settings bottom sheets |
+| Scrim | `rgba(0,0,0,0.45)` | Dim behind modals and sheets |
+
+**Shadow Philosophy**: On a true-black canvas, conventional drop shadows are invisible — so Feeld doesn't fake them. Elevation reads from the 28pt rounded card sitting over black and from the **single acid glow** on the primary Like, which doubles as a visual "this is THE action" cue. Bottom sheets get a top-corner radius + a soft upward shadow as their only elevation tell.
+
+### Motion
+- **Card swipe (like/pass)**: 1:1 finger tracking; rotation ±8° tied to horizontal drag; release past 35% width commits with 220ms spring (damping 0.8); card exits in the swipe direction
+- **Like tap (button)**: button scales 0.92 → 1.0 in 180ms ease-out; acid glow pulses; soft success haptic
+- **Wink tap**: lilac star bounces (scale 1.0 → 1.25 → 1.0) 260ms; light haptic
+- **Match/Connection made**: full-screen takeover, two avatars slide together from edges 320ms ease-out, acid confetti burst, "It's a Connection" Space Grotesk 32pt
+- **Chip toggle**: instant fill swap + 120ms scale 0.96 → 1.0; selection haptic
+- **Sheet present**: bottom sheet slides up 300ms ease-out; scrim fades in parallel
+- **Tab switch**: active dot slides under new icon 200ms ease-out; no cross-fade of icons
+- **Photo advance**: tap left/right edge → instant photo swap; dots update with no animation
+- **Haptics**: soft impact on Like commit, light on Wink, selection on chip toggle, success on Connection
+
+## 7. Do's and Don'ts
+
+### Do
+- Use true black (`#000000`) as the canvas — Feeld is dark-native, not "dark mode"
+- Ration acid-yellow `#E8FF63` to exactly one primary action per screen
+- Design couple/group-first — name area must hold two names + two ages gracefully
+- Use the Desire chip system for identity and intent — togglable pills, three states
+- Put the only glow on the acid Like button — it signals THE action
+- Say "Connection", not "Match", everywhere (vocabulary is part of the brand)
+- Round everything: 28pt cards, 500pt pill buttons, circular avatars
+- Set personality type (display, names, sections, buttons) in Space Grotesk
+- Set legibility type (body, meta, snippets) in Inter
+- Surface the verified glass pill on the photo — verification is a trust pillar
+- Keep the tab bar untinted except for the acid icon + 5pt dot on active
+
+### Don't
+- Don't introduce a light theme as a first-class mode — the app ships dark-only
+- Don't use acid-yellow as a background behind paragraphs or as a second CTA fill
+- Don't assume single-person profiles — never truncate the second name in a couple
+- Don't use dropdowns/radio lists for desires — they are chips by design
+- Don't add drop shadows to cards on black (invisible; the radius + photo carry it)
+- Don't tint the whole active tab (pill/label block) — only the icon + small dot
+- Don't set body text in Space Grotesk — Inter carries legibility
+- Don't soften the pink toward romantic pastel — `#FF5C8A` stays saturated and adult
+- Don't fill the screen with a grid of faces — Discover is one card at a time
+- Don't replace "Connection" with "Match" — it changes the brand voice
+- Don't use thin/black font weights — stay in 400–700
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Card height compresses; chips wrap to 2 rows; action buttons 56/48pt |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island; top bar respects island, card starts below |
+| iPhone 15/16 Pro Max | 430pt | Larger card; action buttons 68/56pt; name 28pt |
+| iPad (portrait) | 768pt | Card max-width 520pt centered; black margins; Connections 600pt |
+| iPad (landscape) | 1024pt+ | Discover card centered 520pt; optional split with Connections list |
+
+### Dynamic Type
+- Display, profile name, section, body, message snippet: full scale
+- Desire chip text, tab labels, verified-pill text: FIXED (layout-sensitive pills)
+- Card meta scales one step then truncates with ellipsis (never wraps past 2 lines)
+
+### Orientation
+- Discover stays portrait-locked on iPhone (card-swipe gesture)
+- iPad supports landscape — card stays centered, Connections list can sit beside it
+- Chat view rotates freely
+
+### Touch Targets
+- Action-row buttons: 52–64pt (well above 44pt)
+- Desire chip: ≥ 32pt tall hit area
+- Tab icon: 23pt glyph, 48pt hit
+- Top-bar icon: 34pt circle hit
+- Photo-advance tap zones: left/right 40% of card each
+
+### Safe Area Handling
+- Top: top bar + first card respect Dynamic Island / notch
+- Bottom: tab bar + home indicator respected; action row sits above tab bar
+- Sides: 16pt card inset
+- Keyboard (chat): message bar rises with keyboard; list scrolls above it
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#000000` (dark-native, only mode)
+- Surface 1 / 2 / 3: `#121212` / `#1C1C1E` / `#262626`
+- Divider: `#2A2A2A`
+- Text primary / secondary / tertiary: `#FFFFFF` / `#A8A8A8` / `#6E6E6E`
+- Accent (acid): `#E8FF63` (pressed `#D4EB4F`) — one per screen
+- Desire pink: `#FF5C8A` (pressed `#E0447A`)
+- Lilac (Wink): `#C9B8FF`
+- On-acid text: `#000000`
+- Success / Error: `#66E0A3` / `#FF6B6B`
+
+### Example Component Prompts
+- "Build the Feeld Discover card in SwiftUI: full-bleed photo, 28pt corner radius, 16pt side insets, filling the space between top bar and action row. Bottom gradient `linear-gradient(transparent → rgba(0,0,0,0.72) at 60% → rgba(0,0,0,0.92))` over the bottom 56%. Overlay at bottom-left (20/22pt padding): name in Space Grotesk 26pt w700 `#FFFFFF` supporting two names ('Robin & Sky'); sub in Inter 14pt `rgba(255,255,255,0.78)` ('Couple · 31 & 29 · 2 km away'); a wrapping row of Desire chips (7pt gap). Top-right: a glass pill `rgba(0,0,0,0.5)` + blur, 999pt radius, acid checkmark 12pt + 'Verified' Inter 11pt w600."
+
+- "Create the Feeld action row: centered, 22pt gap. Pass = 52pt circle `#1C1C1E` + 1pt `#2A2A2A`, X glyph 22pt `#A8A8A8`. Like = 64pt circle `#E8FF63`, filled heart 28pt `#000000`, drop-shadow `0 12px 30px -8px rgba(232,255,99,0.5)`. Wink = 52pt circle `#1C1C1E` + 1pt `#2A2A2A`, filled star 22pt `#C9B8FF`. On Like tap: scale 0.92→1.0 over 180ms ease-out + soft haptic."
+
+- "Render a Feeld Desire chip: full pill (999pt), Inter 12pt w600, padding 9/15pt. Selected = bg `#E8FF63` text `#000000`. Unselected = bg `#1C1C1E` text `#FFFFFF` 1pt `#2A2A2A` border. Emotional = bg `rgba(255,92,138,0.16)` text `#FF5C8A` 1pt `rgba(255,92,138,0.4)`. Toggle: instant fill swap + 120ms scale 0.96→1.0 + selection haptic."
+
+- "Build the Feeld Connections list row: 12pt vertical padding, 1pt `#2A2A2A` bottom divider. Leading 48pt circular avatar. Name in Space Grotesk 15pt w600 `#FFFFFF` (supports paired names). Snippet in Inter 13pt `#A8A8A8` single line. Trailing timestamp Inter 11pt `#6E6E6E`. Unread state: small acid `#E8FF63` dot."
+
+- "Create the Feeld bottom tab bar: height 64pt + safe area, background `rgba(0,0,0,0.92)` + `saturate(180%) blur(20px)`, 0.5pt top border `#2A2A2A`. Four tabs: Discover, Likes, Connections, Profile, icons 23pt stroke 2pt. Active = icon stroke `#E8FF63` + a 5pt acid dot beneath; inactive `#6E6E6E`. No tint pill, no colored label block."
+
+- "Build the Feeld filter sheet: bottom sheet `#121212`, 24pt top corner radius, 36×4pt `#2A2A2A` grab handle. Contents: a wrapping grid of Desire chips, a distance slider with acid `#E8FF63` track, an age range. Bottom: full-width acid pill 'Apply' (Space Grotesk 16pt w600 `#000000`). Present: slide up 300ms ease-out + scrim `rgba(0,0,0,0.45)` fade-in."
+
+### Iteration Guide
+1. Canvas is true black `#000000` — dark-native; do NOT build a light theme
+2. Acid-yellow `#E8FF63` is rationed to ONE primary action per screen — never a paragraph background
+3. Couples/groups are first-class — the name area holds two names + two ages, never truncated
+4. Desires are togglable pill chips with three states (selected / unselected / emotional) — never dropdowns
+5. The only glow in the UI is on the acid Like button — it marks THE action
+6. Vocabulary is "Connection", not "Match" — list, empty state, chat header all say it
+7. Type is two-font: Space Grotesk for personality (display/name/section/button), Inter for legibility (body/meta/snippet)
+8. Everything is rounded — 28pt card, 500pt pill buttons, circular avatars/action buttons
+9. Tab bar active = acid icon + 5pt dot only (no pill, no label block)
+10. Pink `#FF5C8A` is the adult secondary emotional color — keep it saturated, not pastel