designmd-forge 1.2.0

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

@@ -0,0 +1,400 @@
+# Design System Inspiration of happn (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+happn's entire product — and therefore its design system — is built around a single, very specific idea: **the people you have crossed paths with in real life**. Not a global swipe deck, not a search radius — happn shows you profiles only after your phone and theirs registered being in roughly the same place at roughly the same time. The signature screen is the **Crossings timeline**: a vertical, scrollable feed where each entry is a location-and-time-stamped card ("Camille, 27 — Le Marais · 11 min ago — You crossed paths 3 times"), strung together on a thin connector line dotted with happn-pink markers. The timeline reads like a diary of near-misses, and the core gesture is sending a **Charm** — a one-tap pink heart that tells someone "I noticed you crossed my path."
+
+The brand color is an unmistakable **happn pink** (`#FF4865`) that on hero moments deepens into a pink→**magenta** (`#E91E63`) gradient. This pink is the connective tissue of the whole UI: it's the timeline dots, the Charm heart, the active tab, the primary button, and the map crossing pins. A warm **rose tint** (`#FF7B93`) softens secondary surfaces, and a single reserved **gold** (`#FFC24B`) means one thing only — **Crush** (mutual instant interest) and premium. The canvas is a cool graphite near-black (`#0E0E12`) in dark mode and a clean off-white in light; happn ships both, but the brand is most recognizable on dark, where the pink and the timeline glow.
+
+The second defining surface is the **Map** — the same crossings rendered as teardrop pins on a city map, so you can literally see *where* your paths intersected (a café, a metro station, a park). Pins use the same pink / gradient / ghost language as the timeline hearts. The third surface is **Chats**, which only unlock after a mutual Charm (a **Crush**), reinforcing that conversation is earned through real-world serendipity. Beyond Charm there's the **FlashNote** — a short opener attached to your Charm so the first message references something real.
+
+Typography is a friendly rounded-geometric: **Poppins** for the wordmark, names, headings, and buttons (its circular bowls feel warm and contemporary, matching happn's optimistic "serendipity" tone), with **Inter** for body copy, location strings, and metadata where dense legibility matters. Weights live in the 400/500/600/700 band. Geometry is soft: cards at 18pt, buttons are full pills (500pt), avatars are 16pt rounded squares, map pins are the classic teardrop. The overall feeling is hopeful, urban, a little romantic, and grounded in *place and time* rather than endless swiping.
+
+**Key Characteristics:**
+- Crossings timeline — a vertical connector-line feed of location+time-stamped cards (the signature screen)
+- Built on real-world path-crossing, not a global swipe deck or radius search
+- happn pink `#FF4865` as connective tissue: dots, Charm heart, active tab, primary CTA, map pins
+- Pink→magenta gradient (`#FF4865 → #E91E63`) on hero buttons and the Crush star
+- "Charm" — the one-tap pink-heart gesture; "Crush" — mutual Charm that unlocks chat
+- Reserved gold `#FFC24B` — Crush / premium only, used nowhere else
+- Map view — the same crossings as teardrop pins on a city map (where you crossed)
+- FlashNote — a short opener attached to a Charm so first contact references something real
+- Location + time stamps everywhere ("Le Marais · 11 min ago", "You crossed paths 3 times")
+- Cool graphite canvas `#0E0E12` dark / off-white light — ships both, recognizable on dark
+- Poppins (wordmark/names/headings/buttons) + Inter (body/location/meta) — warm rounded-geometric
+- Soft geometry — 18pt cards, 500pt pill buttons, 16pt rounded-square avatars, teardrop pins
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **happn Pink** (`#FF4865`): The brand color and connective tissue — timeline dots, Charm heart, active tab, primary button, map pins, crossing count.
+- **Pink Pressed** (`#E5354F`): Pressed state of pink surfaces.
+- **Magenta** (`#E91E63`): Gradient end-stop, deep accents — pairs with happn pink in the hero gradient.
+- **Hero Gradient**: `linear-gradient(120deg, #FF4865, #E91E63)` — primary hero buttons, Crush star, splash.
+- **Rose Tint** (`#FF7B93`): Soft secondary accent, subtle highlights, secondary avatars.
+- **Crush Gold** (`#FFC24B`): RESERVED — Crush celebration + premium only. Never decorative.
+
+### Canvas & Surfaces (Dark)
+- **Canvas Graphite** (`#0E0E12`): Primary dark canvas — cool near-black, NOT pure black.
+- **Surface 1** (`#18181F`): Timeline cards, list rows.
+- **Surface 2** (`#21212B`): Elevated chips, ghost buttons, top-bar icons, sheets.
+- **Surface 3** (`#2C2C38`): Pressed surface, input fields.
+- **Divider** (`#2A2A33`): Hairline dividers AND the timeline connector spine.
+
+### Canvas & Surfaces (Light)
+happn also ships a light theme. The brand is most recognizable on dark, but pair these for light.
+
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Canvas | `#FFFFFF` | `#0E0E12` |
+| Surface 1 | `#F6F6F8` | `#18181F` |
+| Surface 2 | `#EDEDF1` | `#21212B` |
+| Surface 3 | `#E4E4EA` | `#2C2C38` |
+| Divider / Spine | `#E6E6EC` | `#2A2A33` |
+| Text Primary | `#15151B` | `#F4F4F6` |
+| Text Secondary | `#6C6C7A` | `#A0A0AE` |
+| happn Pink | `#FF4865` | `#FF4865` |
+| Magenta | `#E91E63` | `#E91E63` |
+| Crush Gold | `#FFC24B` | `#FFC24B` |
+
+### Text
+- **Text Primary** (`#F4F4F6` dark / `#15151B` light): Names, headings, primary body.
+- **Text Secondary** (`#A0A0AE` dark / `#6C6C7A` light): Location strings, timestamps, metadata.
+- **Text Tertiary** (`#6C6C7A` dark / `#9A9AA6` light): Disabled, very low emphasis, ghost icon strokes.
+- **On-Pink** (`#FFFFFF`): Text/icon on pink or gradient fills.
+- **On-Gold** (`#1A1A1A`): Text on Crush gold.
+
+### Semantic
+- **Success** (`#4ED9A4`): "Charm sent" confirmation, "It's a Crush" success.
+- **Error** (`#FF5C5C`): Form errors, block/report confirmation.
+- **Warning** (`#FFC24B`): Reuses Crush gold sparingly for caution (rare).
+- **Crossing Glow** (`rgba(255,72,101,0.18)`): The 4pt halo ring around active timeline dots.
+
+## 3. Typography Rules
+
+### Font Family
+- **Wordmark / Names / Headings / Buttons**: `Poppins` (by Indian Type Foundry & Jonny Pinhorn, SIL OFL) — a geometric sans with near-circular bowls; warm, optimistic, contemporary — matches happn's "serendipity" tone and approximates its rounded brand type.
+- **Body / Location / Metadata**: `Inter` (by Rasmus Andersson, SIL OFL) — neutral and dense-legible for location strings, timestamps, chat, and long bios.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- happn's production app uses a custom rounded-geometric; **Poppins** is the closest free, well-hinted match.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Poppins | 32pt | 700 | 1.15 | -0.5pt | Onboarding / empty-state hero |
+| Profile Name | Poppins | 26pt | 700 | 1.15 | -0.4pt | Full profile "Camille, 27" |
+| Section Title | Poppins | 22pt | 600 | 1.2 | -0.3pt | "People near you" |
+| Subsection | Poppins | 18pt | 600 | 1.3 | -0.1pt | "Where you crossed" |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Bio text, chat messages |
+| Card Name | Poppins | 15pt | 600 | 1.3 | 0pt | Name in timeline card "Léa, 24" |
+| Timeline Header | Poppins | 15pt | 600 | 1.3 | 0pt | "Crossed paths today" |
+| Location / Meta | Inter | 12pt | 400 | 1.4 | 0pt | "Le Marais · 11 min ago" |
+| Crossing Count | Poppins | 12pt | 600 | 1.3 | 0pt | "You crossed paths 3 times" — pink |
+| Body Meta | Inter | 14pt | 400 | 1.4 | 0pt | Secondary descriptive lines |
+| Button | Poppins | 16pt | 600 | 1.0 | 0pt | Primary / gradient / outline CTA |
+| Caption | Inter | 12pt | 400 | 1.3 | 0.1pt | Helper text, fine print |
+| Tab Label | Poppins | 10pt | 600 | 1.0 | 0.2pt | Bottom tab labels |
+
+### Principles
+- **Two-font system**: Poppins carries warmth/identity (wordmark, names, headings, buttons, crossing count); Inter carries dense legibility (body, location strings, timestamps, chat). Never set body in Poppins.
+- **Weights 400/500/600/700 only** — no thin, no black.
+- **Crossing count is always pink**: "You crossed paths N times" uses happn pink `#FF4865` — it's the emotional hook of the timeline.
+- **Negative tracking on display/section**: tighten -0.3 to -0.5pt at 22pt+ Poppins for a confident wordmark feel.
+- **Location strings are quiet**: 12pt Inter `#A0A0AE` with a leading pin glyph — present but never louder than the name.
+- **Dynamic Type**: display, name, section, body scale; crossing count, tab labels, location meta stay fixed (layout-sensitive rows).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Send a Charm / Continue)**
+- Shape: Full pill, 500pt corner radius
+- Background: `#FF4865` (happn pink)
+- Text/Icon: `#FFFFFF`
+- Padding: 15pt vertical, 30pt horizontal
+- Font: Poppins 16pt weight 600
+- Pressed: background `#E5354F` + scale 0.98
+
+**Gradient Button (hero "Say hi" / splash CTA)**
+- Background: `linear-gradient(120deg, #FF4865, #E91E63)`
+- Text: `#FFFFFF`
+- Shape: pill 500pt
+- Padding: 15pt / 30pt
+- Pressed: scale 0.98 + slight darken overlay
+
+**Outline Button (Maybe later / secondary)**
+- Background: transparent
+- Text: `#F4F4F6` (dark) / `#15151B` (light)
+- Border: 1.5pt `#FF4865`
+- Shape: pill 500pt
+- Padding: 13pt / 24pt
+- Pressed: background `rgba(255,72,101,0.10)`
+
+**Text Button (See profile / inline action)**
+- Background: none
+- Text: `#FF4865`, Poppins 15pt weight 600
+- No underline
+- Pressed: opacity 0.7
+
+**Icon Button (top-bar search)**
+- Size: 17pt glyph in a 34pt circular `#21212B` hit area
+- Color: `#F4F4F6`, stroke 2pt
+- Pressed: background `#2C2C38`
+
+### Crossings Timeline (the core atom)
+
+The signature happn surface. A vertical scroll where each crossing is a card pinned to a connector line.
+
+**Connector Spine**
+- A 2pt vertical line `#2A2A33` running down the left, behind the dots
+- Continuous between cards; hidden after the last card
+
+**Crossing Dot**
+- 12pt circle, `#FF4865`, with a 4pt halo `rgba(255,72,101,0.18)` ring
+- Positioned at the top-left of each card, centered on the spine
+- Ghost (older / not-yet-active) variant: dot uses `#2C2C38`, no halo
+
+**Crossing Card**
+- Shape: rounded rect, 18pt corner radius
+- Background: `#18181F` (dark) / `#F6F6F8` (light), 1pt `#2A2A33` border
+- Padding: 12pt; left content inset 26pt to clear the spine/dot
+- Layout (horizontal): avatar · meta · Charm heart
+  - Avatar: 56pt rounded square, 16pt radius (gradient placeholder)
+  - Name: Poppins 15pt w600 `#F4F4F6` ("Camille, 27")
+  - Location row: pin glyph 11pt + Inter 12pt `#A0A0AE` ("Le Marais · 11 min ago")
+  - Crossing count: Poppins 12pt w600 `#FF4865` ("You crossed paths 3 times")
+  - Charm heart (trailing): 40pt circle
+- Card-to-card gap: 14pt
+
+**Charm Heart (on card)**
+- Active/available: 40pt circle `#FF4865`, white filled heart 18pt, shadow `0 6px 16px -4px rgba(255,72,101,0.5)`
+- Ghost (not yet charmed): 40pt circle `#21212B`, 1pt `#2A2A33`, heart outline `#A0A0AE`
+- Sent: heart fills + brief scale bounce + success haptic
+
+### Charm · Crush · FlashNote
+
+**Charm** — the core action. A pink heart that signals interest from a crossing.
+- Standalone large variant: 56pt circle `#FF4865`, white heart 24pt, shadow `0 8px 20px -6px rgba(255,72,101,0.55)`
+
+**Crush** — a mutual Charm. Unlocks chat. Celebrated with gold.
+- Crush star: 56pt circle, hero gradient `linear-gradient(135deg,#FF4865,#E91E63)`, white star 24pt
+- Crush celebration screen uses **gold `#FFC24B`** accents (the only place gold appears besides premium)
+
+**FlashNote** — a short opener attached to a Charm.
+- Surface: `#21212B`, 1pt `#2A2A33`, 16pt radius, 12/16pt padding
+- Text: Inter 13pt `#A0A0AE`, prefixed "FlashNote · "
+
+### Map View
+
+**Crossing Pin (teardrop)**
+- Classic teardrop: 44pt body, `border-radius: 50% 50% 50% 6px` rotated 45°, white 30pt inner dot
+- Default: `#FF4865`
+- Highlighted / mutual: hero gradient `linear-gradient(135deg,#FF4865,#E91E63)`
+- Ghost (passed / older): `#21212B`, 1pt `#2A2A33`, `#6C6C7A` inner
+- Tap → opens the crossing's profile sheet
+
+### Navigation
+
+**Top Bar**
+- Height: 44pt + safe area
+- Leading: wordmark "happ**n**" — Poppins 22pt w700, the trailing "n" in `#FF4865`
+- Trailing: search glyph 17pt in a 34pt `#21212B` circle
+- Background: transparent over canvas
+
+**Bottom Tab Bar**
+- Height: 64pt + safe area
+- Background: `rgba(14,14,18,0.94)` + `saturate(180%) blur(20px)`, 0.5pt top border `#2A2A33`
+- Tabs (4): Timeline · Map · Chats · Profile
+- Icon: 23pt; Timeline icon is the happn heart-leaf glyph
+- Active: icon filled `#FF4865` + label `#FF4865` Poppins 10pt w600
+- Inactive: `#6C6C7A`
+- No tint pill — color + fill is the active signal
+
+### Input Fields
+
+**Search Bar**
+- Height: 44pt
+- Background: `#21212B` (dark) / `#EDEDF1` (light)
+- Border: none (focus: 1.5pt `#FF4865`)
+- Corner radius: 999pt (pill)
+- Leading magnifier 16pt `#A0A0AE`; placeholder Inter 14pt `#A0A0AE`
+
+**Chat Composer**
+- Height: 44pt pill, `#21212B`, send button = 34pt pink circle with white arrow
+- FlashNote prompt appears above composer on first message
+
+### Distinctive Components
+
+**Crossings Timeline** — see above. The defining happn surface: place + time + frequency of real-world path crossings, on a connector line.
+
+**Charm Heart** — the one-tap pink interest gesture, present on every timeline card and profile.
+
+**Crush Celebration** — the gold moment when a Charm is mutual; chat unlocks.
+
+**FlashNote** — opener text attached to a Charm so first contact references something real.
+
+**Map Crossing Pins** — the same crossings as teardrop pins on a city map; the "where" of serendipity.
+
+**Crossing Count Badge** — "You crossed paths N times" in pink; the emotional hook that differentiates happn from swipe apps.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 14, 16, 18, 20, 24, 26, 32, 40, 56
+- Card padding: 12pt; spine clearance inset: 26pt
+- Card-to-card gap: 14pt
+- Screen side inset: 16pt
+
+### Grid & Container
+- iPhone: single timeline column, 16pt side insets
+- Map: full-bleed; pins overlay; profile sheet slides up over the map
+- iPad: timeline max-width 600pt centered; Map fills, sheet as side panel
+- No multi-column content — the timeline is a single focused scroll
+
+### Whitespace Philosophy
+- **Timeline rhythm**: 14pt between crossing cards keeps the connector line readable as a continuous thread
+- **The spine is sacred**: never let card content cross the 26pt inset that protects the connector line + dots
+- **Location is quiet**: generous but secondary; the name and crossing count lead, the place/time supports
+- **Map breathes**: pins are spaced so taps don't collide; clusters expand on zoom
+
+### Border Radius Scale
+- Square (0pt): full-bleed map
+- Medium (8pt): inline tags, small affordances
+- Standard (12pt): small cards, sheet sub-elements
+- Avatar (16pt): timeline rounded-square avatars; FlashNote surface
+- Card (18pt): the signature crossing card
+- Comfortable (24pt): bottom-sheet top corners
+- Pill (500pt): all buttons, search bar
+- Circle (50%): Charm/Crush buttons, dots, tab icons hit area
+- Teardrop: map pins (`50% 50% 50% 6px` rotated 45°)
+
+## 6. Depth & Elevation
+
+happn uses soft, pink-tinted elevation — shadows are warm and reserved for the Charm and floating layers.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Canvas, connector spine, list text |
+| Card (Level 1) | 1pt `#2A2A33` border (dark) / `0 1px 3px rgba(0,0,0,0.06)` (light) | Crossing cards |
+| Charm (Level 2) | `0 6px 16px -4px rgba(255,72,101,0.5)` | Charm heart on card |
+| Charm Large (Level 2+) | `0 8px 20px -6px rgba(255,72,101,0.55)` | Standalone Charm / Crush button |
+| Sheet (Level 3) | `0 -8px 40px rgba(0,0,0,0.5)` | Profile sheet over map, bottom sheets |
+| Scrim | `rgba(0,0,0,0.45)` | Dim behind sheets and the Crush takeover |
+
+**Shadow Philosophy**: happn's elevation is *emotional* — the only prominent shadows are the warm pink halos behind the Charm and Crush buttons, which read as "this is the thing to tap." Cards lean on a 1pt border (dark) or a whisper shadow (light) rather than heavy elevation, so the timeline stays calm and the pink pops.
+
+### Motion
+- **Charm tap**: heart scales 1.0 → 1.25 → 1.0 over 280ms spring (damping 0.55), fills pink, soft success haptic; on the card the ghost heart morphs to filled
+- **Crush reveal**: full-screen gold takeover — two avatars slide together from edges 360ms ease-out, gold sparkle burst, "It's a Crush!" Poppins 32pt, chat-unlock button rises
+- **Timeline scroll**: connector spine and dots scroll with content; new crossings fade+slide in from bottom 240ms ease-out as they load
+- **Dot pulse**: a freshly-added crossing's dot pulses its halo (scale 1.0 → 1.4 → 1.0) once over 600ms to draw the eye
+- **Card press**: scale 0.98 + 80ms ease-out; release springs back
+- **Tab switch**: icon fill cross-dissolves to pink 180ms; no pill slide
+- **Map pin tap**: pin lifts (translateY -6pt) + bounce 220ms, profile sheet slides up 320ms ease-out
+- **Sheet present**: slide up 320ms ease-out; scrim fades in parallel
+- **Haptics**: soft impact on Charm sent, success notification on Crush, light selection on tab switch and pin tap
+
+## 7. Do's and Don'ts
+
+### Do
+- Make the Crossings timeline the home screen — a connector line of place+time+frequency cards
+- Keep happn pink `#FF4865` as the connective tissue — dots, Charm, active tab, primary CTA, pins
+- Always show the crossing count in pink ("You crossed paths N times") — it's the emotional hook
+- Protect the 26pt spine inset — card content never crosses the connector line
+- Use the pink→magenta gradient on hero buttons and the Crush star
+- Reserve gold `#FFC24B` strictly for Crush + premium — nowhere else
+- Render the Map with the same pink / gradient / ghost teardrop language as the timeline
+- Use Poppins for warmth (wordmark, names, headings, buttons) and Inter for legibility (body, location, chat)
+- Stamp location + time on every crossing ("Le Marais · 11 min ago")
+- Celebrate a Crush with a full gold takeover — conversation is earned through serendipity
+- Use a cool graphite canvas `#0E0E12` for dark — not pure black
+
+### Don't
+- Don't present a global swipe deck — happn is path-crossings, not a radius search
+- Don't let card content cross the connector spine inset (breaks the timeline metaphor)
+- Don't use gold for anything but Crush/premium (it dilutes the celebration)
+- Don't drop the location/time/frequency stamps — they ARE the product
+- Don't set body or location strings in Poppins — Inter carries dense legibility
+- Don't tint the whole active tab (pill/label block) — color + icon fill is enough
+- Don't make location louder than the name — place supports, name leads
+- Don't use pure black for the dark canvas — `#0E0E12` graphite keeps cards readable
+- Don't unlock chat before a mutual Charm — a Crush gates conversation by design
+- Don't use thin/black font weights — stay 400–700
+- Don't replace "Charm"/"Crush" vocabulary with "Like"/"Match" — it changes the brand voice
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Avatar 48pt; crossing count wraps below location; tighter card padding |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island; top bar + first card start below island |
+| iPhone 15/16 Pro Max | 430pt | Avatar 60pt; larger Charm 44pt; name 16pt |
+| iPad (portrait) | 768pt | Timeline max-width 600pt centered; Map full with side profile panel |
+| iPad (landscape) | 1024pt+ | Split: timeline list (420pt) + Map detail, or Map + profile panel |
+
+### Dynamic Type
+- Display, profile name, section, body: full scale
+- Crossing count, tab labels, location/time meta: FIXED (layout-sensitive timeline rows)
+- Card name scales one step then truncates with ellipsis (never wraps to 2 lines)
+
+### Orientation
+- Timeline portrait-preferred on iPhone; Map rotates freely
+- iPad supports landscape — list + Map split layout
+- Chat rotates freely
+
+### Touch Targets
+- Charm heart (card): 40pt circle (≥ 44pt hit via padding)
+- Standalone Charm/Crush: 56pt
+- Map pin: 44pt teardrop body, 48pt hit
+- Tab icon: 23pt glyph, 48pt hit
+- Top-bar search: 34pt circle hit
+- Crossing card: full-card tap → profile
+
+### Safe Area Handling
+- Top: wordmark + first card respect Dynamic Island / notch
+- Bottom: tab bar + home indicator respected; last card scrolls clear of tab bar
+- Map: pins and sheet respect safe areas; sheet grab handle below notch
+- Keyboard (chat): composer rises with keyboard; messages scroll above it
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#0E0E12` dark / `#FFFFFF` light (graphite, not pure black)
+- Surface 1 / 2 / 3: `#18181F` / `#21212B` / `#2C2C38`
+- Divider / timeline spine: `#2A2A33`
+- Text primary / secondary / tertiary: `#F4F4F6` / `#A0A0AE` / `#6C6C7A`
+- happn pink: `#FF4865` (pressed `#E5354F`)
+- Magenta (gradient end): `#E91E63` — gradient `linear-gradient(120deg,#FF4865,#E91E63)`
+- Rose tint: `#FF7B93`
+- Crush gold (reserved): `#FFC24B`
+- On-pink text: `#FFFFFF`
+- Success / Error: `#4ED9A4` / `#FF5C5C`
+
+### Example Component Prompts
+- "Build the happn Crossings timeline in SwiftUI: a vertical scroll with a 2pt `#2A2A33` connector spine on the left. Each crossing = a 12pt `#FF4865` dot with a 4pt `rgba(255,72,101,0.18)` halo on the spine, plus a card (18pt radius, `#18181F`, 1pt `#2A2A33` border, 12pt padding, 26pt left inset to clear the spine). Card: 56pt rounded-square avatar (16pt radius), name Poppins 15pt w600 `#F4F4F6` ('Camille, 27'), location row = 11pt pin glyph + Inter 12pt `#A0A0AE` ('Le Marais · 11 min ago'), crossing count Poppins 12pt w600 `#FF4865` ('You crossed paths 3 times'), trailing 40pt Charm heart. 14pt gap between cards."
+
+- "Create the happn Charm heart: 40pt circle `#FF4865` with white filled heart 18pt and shadow `0 6px 16px -4px rgba(255,72,101,0.5)`. Ghost (not yet charmed) variant: 40pt circle `#21212B`, 1pt `#2A2A33`, outline heart `#A0A0AE`. On tap: scale 1.0 → 1.25 → 1.0 over 280ms spring (damping 0.55), fill pink, soft success haptic."
+
+- "Build the happn Crush celebration: full-screen gold takeover. Two circular avatars slide together from left/right edges over 360ms ease-out, a `#FFC24B` gold sparkle burst, 'It's a Crush!' in Poppins 32pt w700 `#F4F4F6`, then a gradient pill button 'Start chatting' (`linear-gradient(120deg,#FF4865,#E91E63)`, Poppins 16pt w600 `#FFFFFF`) rises from the bottom. Success notification haptic."
+
+- "Render a happn map crossing pin: a teardrop — 44pt body, `border-radius: 50% 50% 50% 6px` rotated 45°, 30pt white inner circle. Default `#FF4865`; mutual/highlighted = `linear-gradient(135deg,#FF4865,#E91E63)`; ghost = `#21212B` + 1pt `#2A2A33` + `#6C6C7A` inner. Tap lifts the pin -6pt with a 220ms bounce and slides up the profile sheet 320ms ease-out."
+
+- "Create the happn bottom tab bar: height 64pt + safe area, background `rgba(14,14,18,0.94)` + `saturate(180%) blur(20px)`, 0.5pt top border `#2A2A33`. Four tabs: Timeline (happn heart-leaf glyph), Map, Chats, Profile, icons 23pt. Active = filled icon `#FF4865` + label `#FF4865` Poppins 10pt w600; inactive `#6C6C7A`. No tint pill."
+
+- "Build the happn FlashNote field: surface `#21212B`, 1pt `#2A2A33`, 16pt radius, 12/16pt padding, text Inter 13pt `#A0A0AE` prefixed 'FlashNote · '. It attaches to a Charm so the recipient sees a real opener with the interest."
+
+### Iteration Guide
+1. The home screen is the Crossings timeline — a connector-line feed of place+time+frequency cards, NOT a swipe deck
+2. happn pink `#FF4865` is the connective tissue — dots, Charm, active tab, primary CTA, map pins
+3. The crossing count is always pink ("You crossed paths N times") — it's the emotional differentiator
+4. The 26pt spine inset is sacred — card content never crosses the connector line
+5. Gold `#FFC24B` is reserved for Crush + premium only — never decorative
+6. Hero buttons + the Crush star use the pink→magenta gradient `linear-gradient(120deg,#FF4865,#E91E63)`
+7. Type is two-font: Poppins for warmth (wordmark/name/heading/button), Inter for legibility (body/location/chat)
+8. Map pins reuse the timeline's pink / gradient / ghost language as teardrops
+9. Chat is gated by a mutual Charm (a Crush) — conversation is earned through real-world serendipity
+10. Dark canvas is graphite `#0E0E12`, not pure black; cards lift from `#18181F`