The League DESIGN.md

1. Visual Theme & Atmosphere

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

2. Color Palette & Roles

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)

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 (#C8A35A at 20%): Soft gold halo behind the verification seal on a confirmed prospect.

3. Typography Rules

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

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).

4. Component Stylings

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 #C8A35A at 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 #2A2620 border, 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 #C8A35A divider 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 #2A2620 border, 2px #C8A35A left 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 #2A2620 border, 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 #2A2620 top 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 #2A2620 bottom hairline instead of a shadow

Input Fields

Search / Profile Fields

• Height: 46pt
• Background: transparent; 1px #2A2620 bottom 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.

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 14, 18, 22, 28, 36, 48, 64
• Screen inset: 22pt horizontal (generous club margins, wider than a typical app's 16pt)
• Card body padding: 14pt vertical, 18pt horizontal
• Gold rule under names: 28pt long, 8pt above/below
• Section gap: 24–28pt between major blocks (the app breathes; scarcity = whitespace)

Grid & Container

• Prospects: one prospect card at a time (curated, not a deck/feed) — full-width minus 22pt
• Matches / Concierge: single-column list of calling-card rows
• iPad: prospect card centered at max-width 460pt with a black surround (a framed portrait on a wall)
• Profile: single-column, hairline-divided credential sections

Whitespace Philosophy

• Scarcity is spatial: few items, lots of black around them — emptiness signals exclusivity, not lack
• Hairlines instead of fills: structure is drawn with 1px gold-tinted rules, never colored panels or shadows
• The card is a mounted object: a hairline-bordered portrait floating in black, like art in a gallery
• Generous margins: 22pt insets and 24pt+ section gaps — the layout equivalent of a quiet, well-spaced room

Border Radius Scale

• Square (0pt): hairline dividers, photo bottom edges, the verification plate
• Whisper (2pt): inline tags, the credential-mark container
• Plate (3pt): buttons, message field — engraved-stationery geometry
• Card-inner (4pt): banners, concierge notes
• Card (6pt): the prospect card, prospect rows
• Comfortable (8pt): bottom sheets, modals
• Pill (500pt): used ONLY for the membership-tier toggle (rare)
• Circle (50%): avatars, the verification seal, card-action buttons

6. Depth & Elevation

The League rejects shadow entirely. Elevation is drawn, not lit — a 1px gold-tinted hairline is the only depth cue.

Shadow Philosophy: There are no box-shadows anywhere in The League. A drop shadow would read as soft/consumer; the brand is hard-edged, engraved, black-tie. Separation between a card and the canvas comes from the 1px #2A2620 border (a gold-tinted graphite line) and the slight tonal lift of the surface (#141414 vs #0A0A0A). The "elevated" feeling of a featured item is signalled by a 2px gold left rule, not by lifting it with light. This is intentional and load-bearing — never add a shadow.

Motion

• Card advance (next prospect): the current card fades + drifts up 12pt over 280ms ease-out; the next card cross-fades in beneath — restrained, not a thrown swipe
• Heart send: the gold outline heart fills gold over 240ms, scales 1.0 → 1.12 → 1.0, then the card recedes; a single soft haptic
• Concierge note arrival: the gold left rule draws top-to-bottom (200ms) then the italic text fades in (180ms) — as if being written
• Batch refresh: the count rolls (odometer, 320ms) when a new batch lands; a brief gold underline sweep
• Match / introduction celebration: a full-screen #0A0A0A with a champagne-foil seal that draws on (stroke animation, 600ms) — no confetti; refined, like a wax seal pressed
• Tab switch: instant; the active label/icon tint cross-fades to gold over 150ms (no pill slide)
• Field focus: the bottom hairline brightens transparent → #C8A35A over 160ms (left-to-right wipe)
• Page push: iOS-native horizontal push, 300ms; backgrounds stay true-black so transitions feel seamless
• Haptics: one soft impact on heart-send and on introduction-accepted (success); a light tick on tab change; nothing buzzy — restraint extends to touch

7. 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas: #0A0A0A
• Surface 1: #141414
• Surface 2: #1C1A17
• Gold hairline (the only "border"/depth): #2A2620
• Text primary: #EDE9E2
• Text secondary: #9E988C
• Text tertiary / inactive: #6B665C
• League Gold (the only accent): #C8A35A
• Gold bright (hover): #DBBA71
• Gold deep (pressed): #A8863F
• On-gold ink (CTA label): #1A1408
• Champagne (premium only): #E8DCC0
• Success (sage): #6FAE8A
• Error (dusty rose): #C77A7A

Example Component Prompts

• "Build The League prospect card in SwiftUI: full-width minus 22pt insets, 6pt corner radius, 1px #2A2620 border, background #100F0C, NO shadow. Top 64% is a full-color photo with a square bottom edge; a 30pt circular verification seal (1px #C8A35A border, gold star glyph) top-right on a rgba(10,10,10,0.6) plate. Lower 36%: name in Cormorant Garamond 26pt w700 #EDE9E2 with the age inline in Cormorant 400 #9E988C; a 28pt × 1px #C8A35A rule beneath; then three credential lines in Jost 13pt #9E988C, each prefixed with a small gold ◦ — title · company / school / neighborhood. Card-bottom action row: Pass (48pt circle, 1px #2A2620 border, gray X), Heart (56pt circle, 1px #C8A35A border, gold heart — focal), Message (48pt circle, 1px #2A2620 border, gold glyph)."

• "Create The League concierge note: container #1C1A17, 4pt radius, 1px #2A2620 border, a 2px #C8A35A left rule. Header: a small gold star + 'YOUR CONCIERGE' in Jost 11pt w600 UPPERCASE #C8A35A +2px tracking. Body: Cormorant Garamond italic 16pt #EDE9E2, line-height 1.6 — a personal introduction. Optional gold text CTA 'Make the introduction →'. On arrival: draw the gold left rule top-to-bottom over 200ms, then fade the italic text in over 180ms."

• "Build The League batch banner: full-width minus 22pt insets, 4pt radius, 1px #2A2620 border, background #141414. Left: 'TODAY'S BATCH' in Jost 11pt w600 UPPERCASE #9E988C +1.5px. Right: '7 Prospects' in Cormorant Garamond 17pt w600 #C8A35A. Empty state: 'Your next batch arrives at 5pm'. On refresh: roll the count like an odometer over 320ms with a brief gold underline sweep."

• "Render The League primary button: sharp 3pt-radius rectangle, background #C8A35A, label in Jost 13pt w600 UPPERCASE #1A1408 +1.6px tracking, 15pt/30pt padding. Pressed: background #A8863F + scale 0.98. One per screen. Secondary variant: transparent fill, 1px #C8A35A border, #C8A35A label."

• "Build The League bottom tab bar: 64pt + safe area, opaque background rgba(10,10,10,0.96) with a 1px #2A2620 top border (NO blur, NO shadow). 4 tabs — Prospects, Matches, Concierge, Profile — 21pt fine-line icons (1.7px stroke, never filled), labels Jost 9pt w500 UPPERCASE +1px, always shown. Active tint #C8A35A, inactive #6B665C. No active pill — the gold tint alone signals selection."

• "Create The League match celebration: full-screen #0A0A0A, centered. A champagne #E8DCC0 wax-seal medallion draws on via a 600ms stroke animation (no confetti). Serif headline 'An Introduction' in Cormorant Garamond 28pt w700 #E8DCC0. Subtitle in Jost 13pt #9E988C. One gold primary CTA 'Send a Message'. A single soft success haptic on appear — refined, like a wax seal pressed."

Iteration Guide

1. Canvas is near-true-black #0A0A0A — the club after dark; treat it as the only theme
2. Gold #C8A35A is the SINGLE accent — crest, hairlines, one CTA, credential marks; nothing else gets color
3. NO shadows anywhere — depth is the 1px #2A2620 gold-tinted hairline, never light
4. Serif (Cormorant Garamond–class) = names / wordmark / titles / concierge; sans (Jost-class) = credentials / UI / labels
5. The prospect card is an embossed calling card — photo, serif name, gold rule, credential stack — not a swipe-app photo
6. The concierge speaks in italic serif behind a 2px gold left rule — personify the human curator
7. Scarcity is the product — a finite daily batch with a visible count, never infinite scroll
8. Corner radii are sharp (2–6pt) — engraved-stationery geometry; no pills, no friendly rounding
9. Gold fill is rationed to one CTA per screen; the Heart action is a gold outline, not a fill
10. Restraint everywhere — uppercase tracked labels, fades not throws, a drawn wax seal not confetti, warm off-white text never pure white