A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
5radius steps
14pxspacing base
Hinge, in one page
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
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 —#1A1A1Ais 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Hinge design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Hinge Black: #1a1a1a
- Black Pressed: #0a0a0a
- Hinge Cream: #fdf8f2
- Rose Gold: #e8a04d
- Rose Gold Deep: #c57e2e
- Rose Gold Light: #f5d9a8
- Paper White: #faf6f0
- Surface Sand: #f2ebe0
- Surface Sand 2: #e8dfd0
- Divider Bone: #e0d6c5
Type:
- families: Sailec, Inter, Manrope, DM Sans
- scale: 10, 12, 13, 14, 16, 18, 22, 24, 28
- weights: 400, 500, 700
Shape:
- radius: 12, 16, 20, 24, 28
- elevation: Shadow: `rgba(28, 20, 10, 0.06) 0 2px 8px` — barely-there paper lift
Spacing: 14, 16, 24
Rules:
- 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)
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
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):
Interor 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:
ManropeorDM 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.
Components and layoutRead the full spec
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:
#1A1A1Awith a 1pt gold inner stroke (#E8A04D) - Text:
#FAF6F0, with a 16pt filled Rose icon in#E8A04Dleading 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
.heavyhaptic — it costs currency and the haptic communicates weight
Heart Tap (under every prompt and photo — the most-pressed button)
- Container: 44pt circle,
#FAF6F0fill on canvas with 1pt#1A1A1Astroke - Icon: filled heart,
#1A1A1A, 18pt - Pressed state: scale 0.88, fill flips to
#1A1A1Asolid 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,
#FAF6F0fill, 1.5pt#1A1A1Astroke, 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.fillin#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:
#FAF6F0with 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, 14ptstar.fillin#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
#1A1A1Atruncated 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:
#FDF8F2with 0.5pt#E0D6C5top divider; semi-transparent.regularMaterialblur 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
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-hinge {--page-bg: #fdf8f2;
--page-bg-gradient: none;
--text-color: #0a0a0a;
--heading-color: #0a0a0a;
--link-color: #975d0e;
--link-hover-color: #68400a;
--border-color: #d1cdc8;
--card-bg: #fdf8f2;
--card-shadow: 0 1px 2px rgba(10,10,10,0.06);
--card-hover-shadow: 0 6px 18px rgba(10,10,10,0.12);
--header-bg: #0a0a0a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #fdf8f2;
--footer-text-color: #5f5d5b;
--button-bg: #f0b05c;
--button-text-color: #000000;
--button-hover-bg: #ec992d;
--button-border: none;
--button-border-radius: 20px;
--button-secondary-bg: #eeeae4;
--button-secondary-text-color: #0a0a0a;
--button-secondary-hover-bg: #e0dbd6;
--button-secondary-border: 1px solid #d1cdc8;
--prompt-bg: #f1ece6;
--prompt-text-color: #0a0a0a;
--base-font: var(--font-inter);
--heading-font: var(--font-helvetica);
--card-border-radius: 20px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- clubhouse 81.3%
- coffee meets bagel 80.6%
- lemon8 78.8%
- the league 77.7%
- bumble 77.5%
Where this came from
- Source document
ios/design-md/dating/hinge/DESIGN.md· 29.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.