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
The League, in one page
The League's iOS app is a black-tie members' club rendered as software. Open it and the entire screen is a near-true-black canvas (#0A0A0A) — the color of a private club after dark, a velvet rope, a leather-bound member directory. There is almost no UI chrome in the conventional sense: no shadows, no bright fills, no playful color. Depth is created entirely by 1px gold-tinted hairline borders and an embossed calling-card treatment. The signature object is the prospect card — a single curated member presented like a heavy paper calling card: a photo in the top two-thirds, then a Cormorant-style display-serif name with the age in a lighter weight, a short gold hairline rule, and a stack of credential bullets (title · company, school, neighborhood) each prefixed with a small gold mark. It does not read like a swipe-app card; it reads like an embossed introduction handed to you by a maître d'.
The League's brand promise is exclusivity and curation — you don't browse infinitely; a concierge hand-selects a small daily "batch" of vetted members. The interface enforces that scarcity: a "Today's Batch — 7 Prospects" banner sits above the card, and the concierge appears as a recurring character via the Concierge Note — an italic serif message, gold-accented and set behind a left gold rule, that reads like a personal introduction ("I think you and Eleanor would hit it off — you both ran the New York Marathon and studied at HBS"). This human, hand-curated voice is the emotional core of the product, and the design language — serif, gold, hairline, restraint — exists to make the experience feel earned and refined rather than gamified.
The color system is monastically disciplined. One gold (#C8A35A, with a brighter #DBBA71 and deeper #A8863F for states) does *all* the accent work: the crest/wordmark, every hairline rule, the single primary CTA, the credential bullets, the verification seal, and the active tab. There is no second accent. Champagne (#E8DCC0) appears rarely on premium/celebration surfaces; a muted sage (#6FAE8A) and dusty rose (#C77A7A) cover success/error only. Photography is the only full-color element and it sits inside a hairline-bordered frame so it reads as a mounted portrait, not a feed image. The League is, deliberately, almost monochrome — black, gold, and a warm off-white for text.
Typography is the brand's voice. A Cormorant Garamond–class display serif carries every name, the wordmark, and screen titles — high-contrast, literary, the typography of an engraved invitation. A clean geometric sans (Jost-class) handles credentials, body, and UI, frequently in a quiet letter-spaced uppercase for eyebrows and tab labels. The serif/sans split is not decorative — it encodes the hierarchy: serif = the person and the institution (gravitas), sans = the machine and the metadata (utility). Names are serif 26pt bold; ages drop to a lighter serif weight beside them; eyebrows are 11pt uppercase gold tracked +2px; tab labels are tiny 9pt uppercase.
Key Characteristics:
- Near-true-black canvas (
#0A0A0A) — a private club after dark; no light mode in spirit - One rationed gold (
#C8A35A) does all accent work — crest, hairlines, one CTA, credential bullets - No drop shadows — depth comes entirely from 1px gold-tinted hairline borders + embossed treatment
- The prospect card reads like an embossed calling card, not a swipe-app photo card
- Display serif (Cormorant Garamond–class) for names / wordmark / titles; clean sans (Jost-class) for credentials / UI
- Serif/sans split encodes hierarchy: serif = person & institution, sans = metadata & machine
- Concierge as a recurring character — italic serif notes, gold left-rule, personal introductions
- Scarcity made visual — "Today's Batch · 7 Prospects" banner; curated, finite, never infinite scroll
- Credential bullets (title · company, school, neighborhood) with small gold marks — the LinkedIn-meets-Vogue dossier
- Sharp, minimal corner radii (2–6pt) — engraved-stationery geometry, never rounded/friendly
- Quiet letter-spaced uppercase for eyebrows and tabs — black-tie restraint
- Champagne (
#E8DCC0) only on premium / celebration; sage success, dusty-rose error — nothing louder
Do's and don'ts
Do
- Use a near-true-black canvas (
#0A0A0A) — the club after dark; treat it as the only theme - Ration gold (
#C8A35A) to the crest, hairlines, one CTA, and credential marks — nothing else - Replace every shadow with a 1px gold-tinted hairline (
#2A2620) — depth is line, not light - Set names, the wordmark, titles, and concierge notes in the display serif (Cormorant-class)
- Set credentials, body, eyebrows, buttons, and tabs in the geometric sans (Jost-class), often uppercase
- Make the prospect card read like an embossed calling card — photo, serif name, gold rule, credential stack
- Personify the concierge with italic serif notes behind a 2px gold left rule
- Show scarcity explicitly — a daily batch count, finite prospects, never infinite scroll
- Use sharp corner radii (2–6pt) — engraved-stationery geometry
- Letter-space uppercase eyebrows (+2px) and buttons (+1.6px) for black-tie restraint
- Use a gold *outline* heart and reserve the gold *fill* for the single primary CTA
- Keep motion restrained — fades and draws, never a thrown swipe or confetti
Don't
- Don't introduce a second accent color — gold is the only one; the rest is black and warm off-white
- Don't use drop shadows anywhere — they read soft/consumer; the brand is engraved and hard-edged
- Don't set a prospect name in sans or a tab label in serif — the serif/sans split IS the hierarchy
- Don't round corners generously — no pills (except the rare tier toggle), no friendly 16pt+ radii
- Don't fill buttons or cards with gold by default — gold fill is rationed to one CTA per screen
- Don't make it bright or playful — no saturated colors, no gradients beyond subtle black-to-black
- Don't present an infinite feed — the curated, finite daily batch is the entire product premise
- Don't write in sans where the concierge speaks — the italic serif voice personifies the curator
- Don't use pure white (
#FFFFFF) for text — warm off-white#EDE9E2; pure white is too clinical - Don't add a Material/iOS active-tab pill — the gold tint alone signals selection
- Don't animate aggressively — celebrations are a drawn wax seal, not a confetti burst
- Don't crowd the layout — scarcity is spatial; generous black margins are the point
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 The League design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- League Gold: #c8a35a
- Gold Bright: #dbba71
- Gold Deep: #a8863f
- League Black: #000000
- True Black Canvas: #0a0a0a
- Surface 1: #141414
- Surface 2: #1c1a17
- Gold Hairline: #2a2620
- Text Primary: #ede9e2
- Text Secondary: #9e988c
Type:
- families: Display Serif, Cormorant Garamond, UI Sans, Numerals
- scale: 9, 11, 12, 13, 15, 16, 21, 26, 34
- weights: 400, 500, 600, 700
Shape:
- radius: 3
- elevation: 1px `#2A2620` bottom hairline instead of a shadow
Spacing: 14, 15, 24
Rules:
- Use a near-true-black canvas (`#0A0A0A`) — the club after dark; treat it as the only theme
- Ration gold (`#C8A35A`) to the crest, hairlines, one CTA, and credential marks — nothing else
- Replace every shadow with a 1px gold-tinted hairline (`#2A2620`) — depth is line, not light
- Set names, the wordmark, titles, and concierge notes in the display serif (Cormorant-class)
- Set credentials, body, eyebrows, buttons, and tabs in the geometric sans (Jost-class), often uppercase
- Make the prospect card read like an embossed calling card — photo, serif name, gold rule, credential stack
Avoid:
- Don't introduce a second accent color — gold is the only one; the rest is black and warm off-white
- Don't use drop shadows anywhere — they read soft/consumer; the brand is engraved and hard-edged
- Don't set a prospect name in sans or a tab label in serif — the serif/sans split IS the hierarchy
- Don't round corners generously — no pills (except the rare tier toggle), no friendly 16pt+ radii
- Don't fill buttons or cards with gold by default — gold fill is rationed to one CTA per screen
- Don't make it bright or playful — no saturated colors, no gradients beyond subtle black-to-black
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- League Gold (
#C8A35A): The single accent — crest/wordmark, hairline rules, primary CTA, credential marks, verification seal, active tab. - Gold Bright (
#DBBA71): Hover/focus on gold elements, the brighter glint on the crest. - Gold Deep (
#A8863F): Pressed state of the primary CTA, gold dividers behind glass. - League Black (
#000000): The absolute base — splash, modal scrims, behind the canvas.
Canvas & Surfaces (Dark — the only theme in spirit)
- True Black Canvas (
#0A0A0A): Primary canvas — near-true black, the club after dark. - Surface 1 (
#141414): Cards, banners, list rows, sheets — the first lift off the canvas. - Surface 2 (
#1C1A17): Prospect-row tiles, concierge notes, inset fields — a hair warmer. - Gold Hairline (
#2A2620): The 1px gold-tinted border that does ALL the depth work.
Text
- Text Primary (
#EDE9E2): Names, headings, body — a warm off-white, never pure white. - Text Secondary (
#9E988C): Credentials, metadata, captions — a muted warm gray. - Text Tertiary (
#6B665C): Disabled, inactive tabs, very low emphasis. - Champagne (
#E8DCC0): Premium/celebration headings only — a step above primary, rarely used. - On-Gold Ink (
#1A1408): Text on a gold-filled surface (the primary CTA label) — near-black warm brown.
Accents (Rationed)
| Role | Color | Use |
|---|---|---|
| Accent / CTA / hairline | #C8A35A | Everything gold — the only accent in the system |
| Accent bright | #DBBA71 | Gold hover/focus, crest glint |
| Accent deep | #A8863F | Pressed CTA, gold dividers under glass |
| Premium / celebration | #E8DCC0 | "It's a Match" / membership-tier surfaces only |
| Success | #6FAE8A | "Introduction sent", profile-approved — muted sage |
| Error / Destructive | #C77A7A | Decline, leave-the-League, form errors — dusty rose |
Semantic
- Success (
#6FAE8A): Introduction sent, application accepted. - Error / Destructive (
#C77A7A): Pass-with-confirmation, unmatch, declined application. - Waitlist / Pending (
#9E988C): "On the waitlist", "Under review" — neutral secondary, never alarming. - Seal Glow (
#C8A35Aat 20%): Soft gold halo behind the verification seal on a confirmed prospect.
Type scaleRead the full spec
Font Family
- Display Serif: A high-contrast transitional serif in the Cormorant Garamond family (Google Fonts, SIL OFL) — the engraved-invitation voice. Carries names, the wordmark, screen titles, and concierge notes (italic).
- UI Sans: A clean geometric grotesque in the Jost / Futura family (Jost — Google Fonts, SIL OFL) — credentials, body, buttons, eyebrows, tabs. Often letter-spaced uppercase.
- Fallback Stack (serif):
'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif - Fallback Stack (sans):
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Futura', 'Helvetica Neue', sans-serif - Numerals: Old-style figures in serif names/ages where available; lining tabular in metadata and timestamps.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Wordmark | Serif | 34pt | 700 | 1.0 | 0.2pt | "The League", gold, sometimes uppercase tracked |
| Prospect Name | Serif | 26pt | 700 | 1.1 | 0.2pt | Age beside in 400 weight, secondary color |
| Screen Title | Serif | 21pt | 600 | 1.2 | 0.2pt | "Today's Batch", "Concierge" |
| Concierge Note | Serif (italic) | 16pt | 500 | 1.6 | 0pt | Italic, primary color, behind a gold left rule |
| Subtitle | Sans | 16pt | 500 | 1.4 | 0.3pt | Section intro, often title-case |
| Body | Sans | 15pt | 400 | 1.6 | 0pt | Paragraph, descriptions |
| Credential | Sans | 13pt | 400 | 1.7 | 0pt | "VP Strategy · Goldman Sachs" — secondary color |
| Eyebrow / Label | Sans | 11pt | 600 | 1.0 | 2.0pt | UPPERCASE gold — "Members Only", "Today's Batch" |
| Button | Sans | 13pt | 600 | 1.0 | 1.6pt | UPPERCASE — "Send Heart", "View Profile" |
| Caption | Sans | 12pt | 400 | 1.4 | 0pt | Timestamps, helper text |
| Tab Label | Sans | 9pt | 500 | 1.0 | 1.0pt | UPPERCASE — "Prospects", "Concierge" |
| Stat Number | Serif | 21pt | 600 | 1.0 | 0pt | "7 Prospects" — the batch count |
Principles
- Serif is the person; sans is the machine: Names and institutions get the display serif (gravitas); credentials, UI, and metadata get the quiet sans. This split *is* the hierarchy — never set a name in sans or a tab label in serif.
- Restraint over expression: Type is set with generous tracking on labels and tight, confident leading on serif headings — the rhythm of engraved stationery, not a consumer app.
- Uppercase carries the chrome: Eyebrows, buttons, and tabs are letter-spaced uppercase sans — black-tie discipline. Body and names are mixed-case.
- Gold in type is rationed: The serif wordmark and eyebrows are gold; everything else is the warm off-white. Gold never bleeds into body or credentials.
- Italic = the concierge voice: Italic serif is reserved for concierge messages — it personifies the human curator.
- Dynamic Type: Names, titles, body, credentials, concierge notes scale; eyebrows, tab labels, the batch count, and button labels stay fixed (layout-sensitive uppercase).
Components and layoutRead the full spec
Buttons
Primary Button (Send Heart / Request Introduction)
- Shape: Sharp rectangle, 3pt corner radius (engraved-plate geometry, never pill)
- Background:
#C8A35A(League Gold) - Text:
#1A1408(on-gold ink), Jost 13pt weight 600, UPPERCASE, +1.6px tracking - Padding: 15pt vertical, 30pt horizontal
- Pressed: background
#A8863F+ scale 0.98 - One per screen — the single moment of gold fill
Secondary / Outline Button (View Profile)
- Background: transparent
- Text:
#C8A35A, Jost 13pt weight 600, UPPERCASE, +1.6px tracking - Border: 1px
#C8A35A - Padding: 14pt vertical, 26pt horizontal
- Corner radius: 3pt
- Pressed: background
#C8A35Aat 10% opacity
Ghost Button (Pass / Not Now)
- Background: transparent
- Text:
#9E988C, Jost 13pt weight 600, UPPERCASE, +1.4px tracking - Border: 1px
#2A2620(gold hairline) - Corner radius: 3pt
- Pressed: border brightens to
#3A352B
Text Button (Upgrade Membership)
- Font: Jost 12pt weight 600, UPPERCASE, +1.4px tracking
- Color:
#C8A35A - No background, no underline
- Pressed:
#A8863F
Prospect Card (the core atom)
The defining component — a curated member as an embossed calling card.
- Container: full-width minus 22pt insets, 6pt corner radius, 1px
#2A2620border, background#100F0C, no shadow - Photo: top ~64% of the card, full-color, square-bottom (the only color element; framed by the hairline)
- Verification seal: 30pt circle, 1px gold border, gold star glyph, top-right over the photo, on a
rgba(10,10,10,0.6)plate - Body zone (lower 36%): 14pt/18pt padding
- Name: serif 24–26pt w700
#EDE9E2; age inline in serif 400#9E988C - Gold rule: 28pt × 1px
#C8A35Adivider beneath the name - Credentials: 3 lines, sans 13pt
#9E988C, each prefixed with a small gold◦mark — title · company / school / neighborhood - Card actions: a row at the card bottom — Pass (48pt hairline circle, gray X), Heart (56pt circle, 1px gold border, gold heart — the focal action), Message (48pt hairline circle, gold glyph)
- The Heart uses a gold *outline* circle, not a gold fill — restraint; the fill is reserved for the primary CTA
Concierge Note
The human-curation voice, recurring throughout the app.
- Container:
#1C1A17, 4pt corner radius, 1px#2A2620border, 2px#C8A35Aleft rule - Header: small gold star glyph + "YOUR CONCIERGE" eyebrow (11pt uppercase gold +1.6px)
- Body: serif *italic* 16pt
#EDE9E2, line-height 1.6 — reads as a personal note - Optional inline CTA: a text button "Make the introduction →" in gold
Batch Banner
Scarcity made visible.
- Full-width minus 22pt insets, 4pt radius, 1px
#2A2620border, background#141414 - Left: "TODAY'S BATCH" eyebrow (11pt uppercase secondary +1.5px)
- Right: serif count "7 Prospects" (serif 17pt w600 gold)
- Resets daily; an empty state reads "Your next batch arrives at 5pm"
Navigation
Bottom Tab Bar
- Height: 64pt + safe area
- Background:
rgba(10,10,10,0.96)with a 1px#2A2620top border (no blur — opaque black, club-like) - Tabs (4): Prospects, Matches, Concierge, Profile
- Icon size: 21pt, 1.7px stroke (fine-line, never filled)
- Active color:
#C8A35A; inactive#6B665C - Labels: Jost 9pt w500, UPPERCASE, +1px tracking, always shown
- No active pill/indicator — the gold tint alone signals selection (restraint)
Top Bar
- Centered serif wordmark "The League" (gold, 21pt) with a tiny uppercase "MEMBERS ONLY" eyebrow beneath
- Leading: search (fine-line gold, 22pt); Trailing: settings gear (fine-line gold, 22pt)
- 1px
#2A2620bottom hairline instead of a shadow
Input Fields
Search / Profile Fields
- Height: 46pt
- Background: transparent; 1px
#2A2620bottom rule only (no box) — engraved-form aesthetic - Focus: the bottom rule brightens to 1px
#C8A35A - Placeholder: Jost 14pt
#6B665C - Label: 11pt uppercase secondary +1.5px above the field
Message Composer (Matches thread)
- A single hairline-bordered field, 3pt radius, transparent fill
- Send affordance: a gold text "SEND" (no filled button) — restraint in conversation too
Distinctive Components
Prospect Card — see above. The embossed calling-card hero.
Concierge Note — the italic-serif, gold-left-rule personal introduction; the human voice of the product.
Batch Banner — the daily scarcity counter ("7 Prospects"); the anti-infinite-scroll statement.
Verification Seal — a gold-bordered star medallion on confirmed members; the club's stamp of vetting.
Credential Stack — the title/company/school/neighborhood dossier with gold ◦ marks; the LinkedIn-meets-Vogue résumé that replaces a bio.
Gold Hairline System — the 1px #2A2620/#C8A35A border that replaces every shadow; depth is line, not light.
Prospect Row (calling-card mini) — the list form: a gold-ringed circular avatar + serif name + gold rule + one-line credential.
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Card insets tighten to 18pt; credential stack stays 3 lines; serif name 22pt |
| iPhone 13/14/15 | 390pt | Standard layout, 22pt insets |
| iPhone 15/16 Pro | 393pt | Wordmark/eyebrow clears the Dynamic Island; hairline top bar respects safe area |
| iPhone 15/16 Pro Max | 430pt | Larger serif name (28pt); card body gains a 4th credential line |
| iPad (portrait) | 768pt | Prospect card centered max-width 460pt in a black surround (a framed portrait) |
| iPad (landscape) | 1024pt+ | Two-pane: prospect card left, profile/concierge thread right; both on true-black |
Dynamic Type
- Serif name, screen titles, body, credentials, concierge notes: full scale
- Eyebrows, tab labels, the batch count, button labels: FIXED (letter-spaced uppercase, layout-sensitive)
- The name/age serif pair scales together, preserving the weight contrast (700 / 400)
Orientation
- iPhone: portrait-locked on Prospects (the calling card is portrait by nature)
- Matches, Concierge, Profile: rotate freely
- iPad: full rotation with the two-pane split
Touch Targets
- Heart action: 56pt circle (the focal action — largest)
- Pass / Message actions: 48pt circles
- Tab bar icons: 21pt glyph, 44pt hit
- Concierge inline CTA: 44pt minimum row height
- Credential bullets: display-only (not interactive)
Safe Area Handling
- Top: the wordmark + "MEMBERS ONLY" eyebrow respect the safe area / Dynamic Island; the 1px hairline sits below
- Bottom: the opaque-black tab bar respects the home indicator; no floating elements over it
- The prospect card stays fully inside the safe area (it is a mounted object, not full-bleed)
- Keyboard: the hairline message field rises above the keyboard; the thread scrolls on true-black
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-the-league {--page-bg: #ede9e2;
--page-bg-gradient: none;
--text-color: #4f4331;
--heading-color: #4f4331;
--link-color: #795d1f;
--link-hover-color: #503e15;
--border-color: #d1cbc2;
--card-bg: #ede9e2;
--card-shadow: 0 1px 2px rgba(79,67,49,0.06);
--card-hover-shadow: 0 6px 18px rgba(79,67,49,0.12);
--header-bg: #4f4331;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ede9e2;
--footer-text-color: #655f54;
--button-bg: #dbba71;
--button-text-color: #000000;
--button-hover-bg: #d1a648;
--button-border: none;
--button-border-radius: 3px;
--button-secondary-bg: #e4dfd7;
--button-secondary-text-color: #4f4331;
--button-secondary-hover-bg: #dad5cd;
--button-secondary-border: 1px solid #d1cbc2;
--prompt-bg: #e5e1d9;
--prompt-text-color: #4f4331;
--base-font: var(--font-serif);
--heading-font: var(--font-helvetica);
--card-border-radius: 3px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- clubhouse 81.3%
- coffee meets bagel 79.7%
- nohga hotel 79.1%
- lemon8 78.0%
- hinge 77.7%
Where this came from
- Source document
ios/design-md/dating/the-league/DESIGN.md· 26.6 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.