Hinge DESIGN.md

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

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

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

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