designmd-forge 1.2.0

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

@@ -0,0 +1,405 @@
+# Design System Inspiration of Hinge (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Hinge's iOS app reads like a personal journal printed on warm uncoated paper. The canvas is a soft off-white — almost a cream — that intentionally rejects the cold pure-white of most tech apps, because Hinge's premise is intimate: this is the app "designed to be deleted", and the surface is supposed to feel quiet, considered, careful. Where Tinder's swipe stack is a slot machine of full-bleed faces, Hinge's profile is a vertical scroll — long, novel-like, prompts interleaved with photos — and you respond by tapping a specific paragraph or picture and leaving a comment. The interaction model is the design: Hinge is a conversation, not a verdict.
+
+The accent that does almost all the work is Hinge Black (`#1A1A1A`) — a warm, slightly desaturated near-black used for primary type and the iconic "H" mark. The signature pop is a single gold-orange that Hinge uses for one thing only: the Standouts star, the Roses currency, and certain premium moments. Everything else is greyscale on cream. The restraint is the brand. When the entire app is paper-textured neutrals and a profile suddenly blooms with a single Rose icon, the gesture lands.
+
+Typography is dominated by Sailec — the proprietary face Hinge uses for prompts and personal-attribute text. Headlines and the iconic prompts ("Two truths and a lie", "My simple pleasures") are set in display weights at 28-32pt; prompts answers are oversized at 22-24pt — a tweet-sized intimate statement, sized like a magazine pull-quote, given more weight than the photos themselves. Below the answers, attribute chips (height, job, location, education) use a smaller geometric sans at 13-14pt, sitting on subtle pill backgrounds. The voice the type carries is editorial-personal: a profile reads like an excerpt from someone's diary.
+
+**Key Characteristics:**
+- Cream canvas (`#FDF8F2`) and Paper White (`#FAF6F0`) — warm off-whites that never read as cold
+- Hinge Black (`#1A1A1A`) for type and the iconic "H" mark — a warm near-black, not pure
+- Single gold accent (`#E8A04D`) reserved for Standouts star, Roses currency, premium edges
+- Vertical scrolling profiles with prompt cards and photos interleaved — never a card stack
+- Comment-on-photo and Like-with-a-comment patterns — tap any prompt or photo to react
+- Heart button (filled black `#1A1A1A`) under every prompt and photo — the most pressed button in the app
+- Rose icon (filled gold `#E8A04D`) — premium send, reserved for "this is the one"
+- Bottom tab: Discover / Likes You / Standouts / Matches / Profile — 5 tabs, labeled, black-active
+- Sailec for display + prompts; Inter or system fallback for chrome and attributes
+- Subtle, paper-soft shadows (`rgba(0,0,0,0.06)`) and 12-16pt corner radii on all cards
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Hinge Black** (`#1A1A1A`): The brand color — type, "H" mark, primary CTAs, filled heart, active tab, vote check.
+- **Black Pressed** (`#0A0A0A`): Pressed-state of Hinge Black on CTAs.
+- **Hinge Cream** (`#FDF8F2`): The signature canvas — every screen background by default.
+
+### Brand Accents
+- **Rose Gold** (`#E8A04D`): The single accent — Standouts star, Roses currency icon, premium "send a Rose" CTA, gold ring on hero standout cards.
+- **Rose Gold Deep** (`#C57E2E`): Pressed state on Rose CTAs, gold sparkle on the Roses sheet.
+- **Rose Gold Light** (`#F5D9A8`): Soft fill behind the Standouts module, gold halo on the Rose icon at large sizes.
+
+### Surfaces & Dividers
+- **Paper White** (`#FAF6F0`): Card fill — prompt cards, photo frames, sheet backgrounds.
+- **Surface Sand** (`#F2EBE0`): Attribute chip fills, input field backgrounds, sticky note feel.
+- **Surface Sand 2** (`#E8DFD0`): Pressed states on chips, hairline-thicker dividers.
+- **Divider Bone** (`#E0D6C5`): 0.5pt row dividers on settings and forms.
+- **Hinge Shadow** (`rgba(28, 20, 10, 0.08)`): Card shadow — warm-tinted, never blue-grey.
+
+### Text
+- **Hinge Black** (`#1A1A1A`): Primary text — prompt questions, prompt answers, names.
+- **Hinge Graphite** (`#4A4239`): Secondary text — attribute labels, dates, "x liked your prompt" metadata. Warm-tinted, not neutral grey.
+- **Hinge Stone** (`#7A7268`): Tertiary text — placeholder, helper, "Send a Like" hint.
+- **Hinge Bone** (`#B0A89C`): Disabled labels, very-secondary metadata.
+
+### Semantic
+- **Match Green** (`#2D7A4B`): "It's a match" confirmation banner, profile "verified" checkmark.
+- **Warning Amber** (`#D88B2E`): Profile incomplete warnings, photo review pending.
+- **Error Red** (`#B33A2F`): Form errors, decline confirmation on Likes You.
+- **Info Slate** (`#5A6273`): Rarely used — Hinge Labs info banners, external links.
+
+### Dark Mode
+Hinge added dark mode in 2022. It is warm-dark — preserving the paper feel, never going pure black.
+- **Dark Canvas** (`#16130E`): Warm near-black canvas — the cream-paper-at-night feel.
+- **Dark Surface 1** (`#1E1A14`): Cards and prompt boxes.
+- **Dark Surface 2** (`#2A2520`): Chip fills and pressed states.
+- **Dark Divider** (`#2F2A22`): Hairlines.
+- **Dark Text Primary** (`#EFE8DA`): Inverted Hinge Black, slightly warm.
+- **Dark Text Secondary** (`#A89E8E`): Inverted Hinge Graphite.
+- **Rose Gold (dark)** (`#F0B05C`): Brightened gold for OLED — the Standouts star and Rose icon get +8% luminance on dark canvas.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary (display, prompts)**: `Sailec` — geometric humanist sans by Type Dynamic, used across Hinge marketing and in-app
+- **Weights available**: Light (300), Regular (400), Medium (500), Bold (700), Black (900)
+- **Secondary (UI chrome, body, chips)**: `Inter` or system — paired for compact UI sizes 12-15pt
+- **Fallback stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif` — SF Pro is the warmer system fallback
+- **Web/marketing Google Fonts substitute**: `Manrope` or `DM Sans` — both capture Sailec's mix of warmth and geometric clarity
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Sailec | 36pt | 700 (Bold) | 1.1 | -0.6pt | "It's a match!" celebration, name on profile detail |
+| Prompt Question | Sailec | 22pt | 500 (Medium) | 1.25 | -0.2pt | "Two truths and a lie", italicized in some templates |
+| Prompt Answer | Sailec | 24pt | 700 (Bold) | 1.25 | -0.3pt | The user's response — the most prominent text on profile |
+| Name + Age | Sailec | 28pt | 700 | 1.15 | -0.4pt | "Sigrún, 28" at top of profile |
+| Section Header | Sailec | 18pt | 700 | 1.2 | -0.1pt | "Vitals", "My Vices", on profile detail |
+| Card Body | Inter | 16pt | 400 (Regular) | 1.4 | 0pt | Prompt context, settings descriptions |
+| Card Body Bold | Inter | 16pt | 600 (Semi) | 1.4 | 0pt | Emphasis within paragraphs |
+| Attribute Chip | Inter | 14pt | 500 (Medium) | 1.3 | 0pt | "5'9", "Engineer", "San Francisco" |
+| Metadata | Inter | 13pt | 400 | 1.3 | 0pt | "Liked your prompt 2h ago", date stamps |
+| Button (Primary) | Sailec | 16pt | 700 | 1.0 | 0pt | "Send Like", "Send Rose", "Match" |
+| Tab Label | Sailec | 10pt | 500 | 1.0 | 0.2pt | Bottom tab bar — all caps not used |
+| Comment Input | Inter | 16pt | 400 | 1.35 | 0pt | "Add a comment…" placeholder |
+| Helper / Caption | Inter | 12pt | 400 | 1.3 | 0pt | "Visible to people who liked you", fine print |
+| Match Banner | Sailec | 14pt | 700 | 1.0 | 0.2pt | "You matched with Sigrún" in success green |
+
+### Principles
+- **Prompts get magazine-pull-quote weight**: Answers at 24pt Bold are intentionally larger than supporting photos in visual weight — Hinge wants you to read the words, not skim the face.
+- **Sailec carries voice, Inter carries chrome**: Display, prompts, and CTAs in Sailec; everything tabular or compact in Inter.
+- **Warm Hinge Black, never pure**: Body text sits at `#1A1A1A`, not `#000000` — alongside the cream canvas, this is what makes the surface feel like printed paper.
+- **Italic prompts on certain templates**: Prompt questions like "I geek out on _" sometimes use Sailec Italic for the answer-blank line — a typographic wink that makes them feel handwritten.
+- **Dynamic Type respected on prompt content, name, body**: Attribute chips and tab labels are fixed (layout-sensitive); profile content scales generously.
+- **Tracking is editorial — tight at display, neutral at body**: -0.6pt at 36pt falling to 0pt at body, no positive tracking anywhere except caps-set tab labels at +0.2pt.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA (Send Like / Send Rose / Match / Continue)**
+- Background: `#1A1A1A`
+- Text: `#FAF6F0` (Paper White, not pure white — warm contrast)
+- Padding: 16pt vertical, 32pt horizontal
+- Corner radius: 28pt (capsule — fully rounded, height ≈ 56pt)
+- Height: 56pt fixed
+- Pressed: background `#0A0A0A`, scale 0.97
+- Haptic: `.impactOccurred(.medium)` on Send Like; `.notificationOccurred(.success)` on match
+
+**Rose CTA (Send a Rose — premium)**
+- Background: `#1A1A1A` with a 1pt gold inner stroke (`#E8A04D`)
+- Text: `#FAF6F0`, with a 16pt filled Rose icon in `#E8A04D` leading the label
+- Padding: 14pt vertical, 28pt horizontal
+- Corner radius: 28pt
+- Selected/Rose-spent state: background turns `#E8A04D`, text turns `#1A1A1A`
+- The Rose CTA always carries a `.heavy` haptic — it costs currency and the haptic communicates weight
+
+**Heart Tap (under every prompt and photo — the most-pressed button)**
+- Container: 44pt circle, `#FAF6F0` fill on canvas with 1pt `#1A1A1A` stroke
+- Icon: filled heart, `#1A1A1A`, 18pt
+- Pressed state: scale 0.88, fill flips to `#1A1A1A` solid with white heart
+- Tapped state (the "leave a comment" affordance): expands into a sheet with a text field and the chosen prompt/photo pinned at top
+- Haptic: `.impactOccurred(.light)` on initial tap; `.impactOccurred(.medium)` on send
+
+**Secondary Text Button ("Decline" on Likes You, "Skip" on prompts)**
+- Background: transparent
+- Text: `#4A4239`, Sailec 14pt weight 500
+- No border, 44pt hit target
+- Underline only on text-link variants ("Read more", "Show all")
+
+**X Decline (Likes You stack)**
+- 48pt circle, `#FAF6F0` fill, 1.5pt `#1A1A1A` stroke, 22pt black X glyph
+- Lives bottom-left of the Likes You card; the heart-with-comment lives bottom-right
+- Pressed state: scale 0.92
+
+### Cards & Containers
+
+**Prompt Card (The Hero Component)**
+- Width: full content width (viewport - 32pt horizontal margins)
+- Background: `#FAF6F0` (Paper White, NOT cream — slightly whiter than canvas for the lift)
+- Border: 0.5pt `#E0D6C5` (Divider Bone)
+- Corner radius: 16pt
+- Padding: 24pt all around
+- Structure: question at top (Sailec 22pt Medium `#4A4239`, italicized on certain templates), 12pt gap, answer (Sailec 24pt Bold `#1A1A1A`), then a 44pt heart-tap button bottom-right with 12pt inset
+- Shadow: `rgba(28, 20, 10, 0.06) 0 2px 8px` — barely-there paper lift
+- The card is the canonical reactive surface — tap anywhere on it (not just the heart) and you go straight into "leave a comment"
+
+**Photo Card**
+- Width: full content width
+- Aspect: 4:5 (portrait) — taller than Tinder's photos, by design
+- Corner radius: 16pt
+- Heart-tap: 44pt circle in bottom-right with 16pt inset
+- No caption overlays — Hinge keeps photos clean; the captions live in prompt cards
+
+**Attribute Chip Row (Vitals)**
+- Each chip: pill, `#F2EBE0` (Surface Sand) background, 8pt vertical / 14pt horizontal padding, Inter 14pt Medium `#1A1A1A`
+- 13pt SF Symbol or custom glyph leading the label (e.g., `ruler`, `briefcase.fill`, `mappin`, `graduationcap.fill`)
+- 8pt gap between chips, wrapping into 2-3 rows under the name header
+- Verified-attribute chips get a tiny `checkmark.seal.fill` in `#2D7A4B` (Match Green) trailing the label
+
+**Standouts Card (Premium hero)**
+- Width: full minus 32pt margins
+- Aspect: 1:1 (square) for the photo at top
+- Corner radius: 20pt
+- Background: `#FAF6F0` with a 1pt `#E8A04D` (Rose Gold) gradient border — this is the only gold-bordered surface in the app
+- Header strip above the photo: 32pt tall, `#F5D9A8` (Rose Gold Light) fill, 14pt `star.fill` in `#E8A04D` + "Standout" label in Sailec 12pt Bold `#1A1A1A`
+- Below the photo: a single prompt answer in Sailec 24pt Bold, then the Rose CTA pinned at the bottom
+- Tap haptic: a softer `.impactOccurred(.soft)` because the Standouts list is delicate — these are people specifically curated for you
+
+**Likes You Tile (grid view)**
+- 2-col grid, 8pt gap, full-bleed photos with the answered prompt below
+- Each tile: 16pt radius, photo 4:5 aspect, prompt text below in Sailec 16pt Medium `#1A1A1A` truncated to 2 lines
+- Blur overlay on non-subscribed accounts — full reveal requires Hinge+
+- Tap opens the full vertical-scroll profile
+
+### Navigation
+
+**Top Header Bar (Discover / Likes You / Standouts / Matches / Profile)**
+- Height: 56pt (no large-title pattern like Airbnb — Hinge uses a slim header)
+- Background: `#FDF8F2` (canvas), no blur — content scrolls under cleanly
+- Title: Sailec 24pt Bold `#1A1A1A`, left-aligned, 20pt leading margin
+- Trailing icons: 24pt filter icon on Discover, 24pt sort-by icon on Likes You
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `#FDF8F2` with 0.5pt `#E0D6C5` top divider; semi-transparent `.regularMaterial` blur when content scrolls beneath
+- Tabs: Discover (compass), Likes You (heart-stack), Standouts (star), Matches (chat-bubble), Profile (person)
+- Icon size: 24pt, outlined default / filled when active
+- Active color: `#1A1A1A` (Hinge Black) — no special accent; the active tab uses filled icons + a 2pt black indicator dot 4pt below the icon
+- Inactive: `#7A7268`
+- Labels: Sailec 10pt weight 500, visible always
+- Tap haptic: `.selectionChanged()` on each switch
+
+**The "H" Mark**
+- The proprietary "H" logomark — a tall, thin slab-serif uppercase "H" usually inside a circle
+- Render: `#1A1A1A` on cream canvas; reversed (Paper White on Hinge Black circle) for splash and onboarding hero
+- Used on splash, the Match celebration screen behind the names, and as a watermark on shared profile links
+- Never rendered in any color other than `#1A1A1A` or `#FAF6F0` (and the rare gold variant on the "Standouts" launch screen)
+
+### Input Fields
+
+**Comment Input (the most-used input in the app)**
+- Background: `#F2EBE0` (Surface Sand)
+- Border: none
+- Corner radius: 24pt (capsule)
+- Padding: 14pt vertical, 20pt horizontal
+- Placeholder: "Add a comment…" in Inter 16pt Regular `#7A7268`
+- Send icon: 28pt circle in `#1A1A1A` trailing the input, white arrow glyph
+- Disabled state (no text): send circle drops to `#B0A89C`
+- The comment input is paired with the prompt or photo it's replying to — that source is pinned at the top of the sheet, sized to half the available height
+
+**Text Field (Profile editing, settings)**
+- Background: `#FAF6F0` (Paper White)
+- Border: 1pt `#E0D6C5` default, 1.5pt `#1A1A1A` focused
+- Corner radius: 12pt
+- Height: 52pt
+- Label: floating — sits as placeholder at 16pt Regular `#7A7268` when empty; animates to 12pt Medium `#4A4239` at the top-left corner when focused or filled
+- Text: Inter 16pt Regular `#1A1A1A`
+
+**Prompt Picker (full-screen modal)**
+- Scrollable list of prompt templates grouped by mood ("About me", "Self-care", "Story time")
+- Each prompt row: 64pt tall, `#FAF6F0` background, 12pt radius, Sailec 16pt Medium label, 1pt `#E0D6C5` divider beneath
+- Tapping a prompt expands inline into a text editor with character counter (max 150 chars) in Inter 12pt at top-right
+
+### Distinctive Components
+
+**Match Celebration ("You matched with…")**
+- Full-screen takeover, `#FDF8F2` canvas
+- Two photos side-by-side at top (each 120pt circle), 24pt gap, soft confetti animation in Rose Gold particles
+- "It's a match!" in Sailec 36pt Bold `#1A1A1A` centered
+- Subline: "You and Sigrún liked each other" in Inter 16pt Regular `#4A4239`
+- Primary CTA: "Send a message" pill, full width, Hinge Black
+- Secondary CTA: "Keep browsing" text button below
+- Haptic on entry: `.notificationOccurred(.success)` + a slight `.impactOccurred(.soft)` 200ms later as the photos settle
+
+**Rose Send Sheet**
+- A bottom sheet, top corners 24pt radius
+- 80pt rose icon at top in `#E8A04D` (Rose Gold), with a subtle 1500ms pulse halo
+- "Send Sigrún a Rose?" in Sailec 22pt Bold
+- Sub: "You have 3 Roses · Roses stand out 3× more than likes"
+- Primary CTA: "Send Rose" with the rose icon leading
+- Tertiary action: "Maybe later"
+- Background: `#FAF6F0` with a 1pt Rose Gold border on the sheet to signal the premium moment
+
+**Profile Vertical Scroll (the architecture)**
+- A long single-column scroll: name+age header → vitals chip row → photo 1 → prompt 1 → photo 2 → prompt 2 → photo 3 → prompt 3 → photo 4 → vitals 2 (Religion/Politics/Family Plans) → photo 5 → prompt 4 → photo 6 → bottom action bar
+- Each photo and each prompt is a separate reactive card with its own heart-tap
+- 16pt vertical gap between cards
+- Bottom action bar (sticky on Likes You; bottom-of-scroll on Discover): X Decline / Heart Tap area
+- The architecture is the brand — there is no swipe gesture; advancement is read-and-tap, not flick
+
+**Roses Currency Sheet**
+- "You have 3 Roses" display, Sailec 28pt Bold centered, with three small `rose` icons floating above
+- A 3-row purchase ladder ("3 Roses for $3.99", "12 Roses for $14.99", "36 Roses for $39.99") in Sailec 18pt Medium, each row a tappable pill
+- Each row has a tiny rose-count icon and the price right-aligned in Sailec 16pt Bold
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+- Standard horizontal margin: 16pt on lists; 24pt inside prompt cards
+- Section vertical gap: 16pt between prompt and photo cards (this gap defines the profile rhythm)
+- Generous vertical padding inside prompt cards (24pt) — the words need to breathe
+
+### Grid & Container
+- Content width: full device width minus 16pt horizontal margins
+- Profile: single column, full-width cards stacked vertically — no two-up layout, ever
+- Likes You: 2-col grid with 8pt gap on the grid view; single-column when viewing a specific profile
+- Standouts: vertical carousel, one card at a time, full-width
+- Attribute chips: wrap horizontally, never scroll horizontally
+
+### Whitespace Philosophy
+- **Cream gives the spacing visual weight**: the off-white canvas reads as breathing room even at zero margin — Hinge can use tighter spacing than Airbnb because the cream itself is a soft pillow
+- **Prompts get more vertical air than photos**: 24pt internal padding on prompt cards versus 16pt around photos — the words are the focal points
+- **Sticky chrome is minimal**: just the top header (56pt) and tab bar (56pt + safe area) — the rest of the screen is profile
+
+### Border Radius Scale
+- Square (0pt): rarely used — only on certain attribute glyphs
+- Small (4pt): toast notifications, tiny pills
+- Medium (12pt): text fields, settings rows
+- Standard (16pt): prompt cards, photo cards — the signature Hinge radius
+- Large (20pt): Standouts cards, modal sheets
+- Capsule (28pt): primary CTAs, comment inputs — the rounded paper-feel
+- Full Pill (500pt): attribute chips, secondary chips
+- Circle (50%): tab indicator dot, heart-tap container, avatar in Match celebration
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Canvas, section dividers |
+| Card (Level 1) | `rgba(28, 20, 10, 0.06) 0 2px 8px` | Prompt cards, photo cards — paper-soft lift |
+| Floating (Level 2) | `rgba(28, 20, 10, 0.10) 0 4px 12px` | Standouts cards, hero modules |
+| Overlay (Level 3) | `rgba(28, 20, 10, 0.14) 0 8px 24px` | Comment sheet, prompt picker modal |
+| Sheet (Level 4) | `rgba(28, 20, 10, 0.18) 0 -12px 32px` | Bottom sheets (Rose send, settings actions) |
+| Blur Material | `.regularMaterial` over `#FDF8F2` at 92% | Sticky bottom action bar on Likes You, tab bar |
+
+**Shadow Philosophy**: Hinge's shadows are warm-tinted — they use a base color of `rgba(28, 20, 10, x)` rather than `rgba(0, 0, 0, x)`, which keeps the lift consistent with the cream canvas. The result is paper-on-paper depth: a prompt card lifts off the cream like a torn-out journal page placed on a leather notebook. Shadows never exceed 0.18 opacity; nothing in Hinge "pops".
+
+### Motion
+- **Heart tap (the most repeated motion in the app)**: scale 1.0 → 0.88 → 1.0 over 250ms spring (damping 0.6), paired with `.impactOccurred(.light)` haptic; fill morph from white→black happens on the down-press
+- **Card tap into comment sheet**: shared-element 400ms spring — the tapped card scales up and slides to the top of the sheet, content cross-fades; the rest of the profile blurs slightly behind
+- **Match celebration confetti**: 60fps Rose Gold particle fall for 1800ms, paired with a `notificationOccurred(.success)` and a soft photo-pulse on the two avatars
+- **Rose Send pulse halo**: the rose icon pulses scale 1.0 → 1.05 → 1.0 over 1500ms while the sheet is open — a gentle "this is precious" cue
+- **Standouts card swipe**: vertical carousel with subtle parallax — the gold border on the active card brightens from `rgba(232, 160, 77, 0.6)` to `rgba(232, 160, 77, 1.0)` during transition
+- **Tab switch**: 200ms ease — icons transition outlined→filled and the indicator dot fades in 4pt below; `.selectionChanged()` haptic on each tab
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the cream canvas (`#FDF8F2`) everywhere — it's the brand's most recognizable surface treatment
+- Reserve Rose Gold (`#E8A04D`) for Standouts, Roses, and premium edges — nothing else
+- Render the "H" mark in Hinge Black (`#1A1A1A`) on cream, or Paper White on Hinge Black — never gold, never any other color except the launch-screen variant
+- Use Sailec for display, prompts, names, and CTAs; Inter or system for attribute chips and chrome
+- Make every prompt card and photo independently tappable — the unit of interaction is "a moment on the profile", not "a profile"
+- Put the heart-tap button on every reactive surface with consistent placement (bottom-right, 12pt inset)
+- Use warm Hinge Black (`#1A1A1A`) for primary text, not pure black — the warmth is the brand
+- Use warm-tinted shadows (`rgba(28, 20, 10, x)`) — never neutral blue-greys
+- Add the `.impactOccurred(.light)` haptic on heart-tap and the `.impactOccurred(.heavy)` on Rose-send — currency gets weight
+- Render attribute chips with a 13pt SF Symbol leading the label, on `#F2EBE0` (Surface Sand) pills
+- Treat the comment input as a first-class element — capsule-rounded, generous padding, source-pinned
+
+### Don't
+- Don't use a Tinder-style swipe stack — Hinge profiles are vertical scrolls, not card decks. The interaction model IS the design
+- Don't render the canvas in pure white (`#FFFFFF`) — cream (`#FDF8F2`) is the signature
+- Don't use gold (`#E8A04D`) anywhere except Standouts, Roses, and the Rose CTA — it loses its meaning if it appears in chrome
+- Don't use pure black (`#000000`) for type — `#1A1A1A` is warm and intentional
+- Don't make the prompt question larger than the answer — the user's words should always be the loudest element
+- Don't use a 2-col grid for the main profile flow — vertical single-column is the Hinge pattern; 2-col is reserved for the Likes You preview grid
+- Don't skip the heart-tap on any reactive card — the consistency is the muscle memory of the app
+- Don't add a "super like" rocket or any Tinder-style escalation glyph — Hinge has Roses, full stop
+- Don't put attribute chips in a horizontal scroll — they wrap, never scroll
+- Don't use cool greys anywhere — Hinge's neutrals are all warm-tinted (sand, bone, graphite, stone)
+- Don't blur Likes You photos for paying subscribers — the blur is the paywall, and it must lift cleanly when subscribed
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Prompt card padding drops to 20pt; photo aspect shifts 4:5 → 1:1.2 for vertical density |
+| iPhone 13/14/15 | 390pt | Standard 4:5 photos, 24pt prompt card padding, 16pt horizontal margins |
+| iPhone 15/16 Pro | 393pt | Dynamic Island respected; the top header drops slightly to make room |
+| iPhone 15/16 Pro Max | 430pt | Photos render slightly larger; prompt answer can reach 26pt for visual parity |
+| iPad | 768pt+ | 2-col profile rendering (photos right, prompts left), or full-bleed single column with side margins to keep prompt cards readable |
+
+### Dynamic Type
+- Prompt questions, prompt answers, name, body, metadata: full scale
+- Attribute chips, tab labels, the "H" mark sizing: fixed
+- Comment input: full scale; the heart-tap glyph stays fixed but the input row grows
+
+### Orientation
+- All swipe surfaces: portrait-locked
+- Photo lightbox (tap-to-zoom on a profile photo): full-bleed, rotates to landscape
+- The Match celebration: portrait only — confetti choreography is portrait-tuned
+
+### Touch Targets
+- Heart-tap: 44pt circle, 56pt full hit area (8pt inset hit-slop)
+- Attribute chip: 36pt tall, 80pt minimum width
+- Tab bar icons: 24pt icon, full 56pt row
+- CTAs: 56pt height, full width minus 24pt margins
+
+### Safe Area Handling
+- Top: safe area honored — the 56pt header sits below the dynamic island/status bar
+- Bottom: the sticky bottom action bar on Likes You respects home indicator; tab bar pins above home indicator on all other screens
+- Sides: 16pt content insets on lists; 24pt inside prompt cards
+
+## 9. Quick Reference Cheat Sheet
+
+### Quick Color Reference
+- Canvas: `#FDF8F2` (Hinge Cream)
+- Paper White (cards): `#FAF6F0`
+- Surface Sand (chips, inputs): `#F2EBE0`
+- Divider Bone: `#E0D6C5`
+- Hinge Black (primary): `#1A1A1A`
+- Hinge Graphite (secondary): `#4A4239`
+- Hinge Stone (tertiary): `#7A7268`
+- Rose Gold (Standouts/Roses): `#E8A04D`
+- Rose Gold Light (Standouts halo): `#F5D9A8`
+- Match Green: `#2D7A4B`
+- Error Red: `#B33A2F`
+- Dark canvas: `#16130E`
+
+### Example Component Prompts
+- "Create a SwiftUI Hinge prompt card: full-width card with `#FAF6F0` (Paper White) fill, 0.5pt `#E0D6C5` border, 16pt corner radius, 24pt internal padding, and a `rgba(28, 20, 10, 0.06) 0 2px 8px` shadow. The prompt question 'Two truths and a lie' is at the top in Sailec 22pt Medium `#4A4239`. Below it, the user's answer in Sailec 24pt Bold `#1A1A1A`, wrapping to 3-4 lines. A 44pt circle heart-tap button sits in the bottom-right with 12pt inset — `#FAF6F0` fill, 1pt `#1A1A1A` stroke, filled-heart glyph in `#1A1A1A` at 18pt. The whole card is tappable and bounces to scale 0.98 on press."
+- "Build the Hinge bottom tab bar: 56pt tall plus safe area, `#FDF8F2` (cream) background with 0.5pt `#E0D6C5` top divider and a `.regularMaterial` blur layer for when content scrolls beneath. Five tabs: Discover (compass), Likes You (heart-stack), Standouts (star), Matches (chat-bubble), Profile (person). All icons 24pt, outlined when inactive (`#7A7268`), filled when active (`#1A1A1A`). Labels in Sailec 10pt Medium below each icon. A 4pt circle indicator dot in `#1A1A1A` appears 4pt below the active label. Selection haptic on tap."
+- "Design the Standouts hero card: 1:1 photo at top with 20pt corner radius on the outer card. A 32pt header strip above the photo in `#F5D9A8` (Rose Gold Light) with a 14pt `star.fill` glyph in `#E8A04D` followed by 'Standout' in Sailec 12pt Bold `#1A1A1A`. Below the photo, a single prompt answer in Sailec 24pt Bold over 16pt padding. Pinned to the bottom: a Rose CTA — `#1A1A1A` background with a 1pt `#E8A04D` inner stroke, 'Send a Rose' label in Sailec 16pt Bold `#FAF6F0`, leading 16pt rose glyph in `#E8A04D`. The whole card has a 1pt Rose Gold gradient border around the outer frame to signal premium."
+- "Create the Hinge match celebration screen: full-screen `#FDF8F2` canvas. Two 120pt circular avatars side-by-side at the vertical-center-third, 24pt apart. Rose Gold confetti particles fall from above for 1800ms on entry. Below the avatars, 'It's a match!' in Sailec 36pt Bold `#1A1A1A` centered, with -0.6pt letter spacing. Subline 24pt below: 'You and Sigrún liked each other' in Inter 16pt Regular `#4A4239`. Primary CTA 'Send a message' at the bottom — full-width capsule, 56pt tall, `#1A1A1A` background, `#FAF6F0` text in Sailec 16pt Bold. Below the CTA, a text-only 'Keep browsing' button in Inter 14pt Medium `#4A4239`. Entry haptic: `.notificationOccurred(.success)`."
+- "Build the Hinge comment sheet: bottom sheet with 24pt top corner radius, `#FAF6F0` background. The tapped prompt/photo source pins at the top, scaled to occupy the upper half of the sheet — for prompts, render the question + answer in a card with `#FDF8F2` fill and a thin `#E0D6C5` border. Below the source, a capsule comment input — `#F2EBE0` background, 24pt radius, 'Add a comment about her response' placeholder in Inter 16pt Regular `#7A7268`, 14pt vertical and 20pt horizontal padding. A 28pt circle send button trails the input — `#1A1A1A` fill, white arrow glyph; reduces to `#B0A89C` when input is empty. Send haptic: `.impactOccurred(.medium)`. On send, the sheet animates down with a soft Match Green toast at the bottom."
+
+### Iteration Guide
+1. Canvas is `#FDF8F2` (cream); use `#FAF6F0` (Paper White) only on cards, sheets, and inputs
+2. Primary action is `#1A1A1A` (Hinge Black) — Send Like, Match, Send Rose, active tab
+3. Rose Gold `#E8A04D` is sacred — only Standouts, Roses, and premium edges
+4. Body text is `#1A1A1A` warm-black, NOT `#000000` — this is what makes the surface feel like paper
+5. Prompt cards are 16pt radius with 24pt internal padding — answers in Sailec 24pt Bold
+6. The heart-tap button sits on every reactive card at bottom-right with 12pt inset, 44pt circle
+7. Sailec for display + prompts; Inter (or system) for attribute chips and chrome
+8. Shadows are warm-tinted (`rgba(28, 20, 10, x)`), low opacity (0.06-0.18), short blur (2-12pt)
+9. The architecture is vertical scroll — never a swipe stack; advancement is read-and-tap
+10. Dark mode is warm dark `#16130E` canvas with `#EFE8DA` primary text; Rose Gold brightens to `#F0B05C` for OLED