At a glance
21tokens
10type steps
3radius steps
14pxspacing base
Okcupid, in one page
OkCupid's iOS app is a bright, friendly, question-driven matchmaker. The canvas is clean white (#FFFFFF) with a soft neutral surface (#F2F2F2) for grouped sections and cards. The brand voice is playful and editorial — illustrated empty states, rounded everything, and warm copy — but the underlying structure is data: every profile is annotated with a match percentage, and matching is powered by the answers people give to thousands of personality questions. The product thesis ("substance over swipe") shows up visually as profiles that lead with text and questions, not just photos.
The accent system is anchored by OkCupid Magenta (#E2024F) — the exact hot pink-red of the brand wordmark. It owns the primary action (the "Like" heart, the primary CTA pill, the active tab) and the match-percentage badge. A secondary brand indigo (#0500FF) is used sparingly for the "Pass" affordance, secondary links, and accents in illustrations. Everything else is ink, gray, or the soft neutral surface. The magenta is energetic and unmistakable; the indigo keeps the like/pass duality balanced.
Typography is Larsseit (OkCupid's brand typeface), rendered here with Inter as the closest free substitute, at weights 400 / 600 / 700. The hierarchy is rounded and confident: 12–30pt, with the match percentage getting its own oversized treatment (the circular badge number can run 18–22pt bold in magenta). Screen titles are 28–30pt bold; question prompts — the heart of the app — get a generous 20pt semibold so they read like a friendly interview. The most expressive type moment is the DoubleTake profile card, where the name + age + match-% headline stacks over the photo with rounded, high-contrast type.
Key Characteristics:
- Bright white canvas (
#FFFFFF) with a soft neutral surface (#F2F2F2) - OkCupid Magenta (
#E2024F) as the primary accent — Like, primary CTA, active tab, match-% - Brand indigo (
#0500FF) as a secondary accent — Pass, links, illustration detail - Match-percentage circular badge — the signature data ornament on every profile
- DoubleTake profile stack — full card UI, swipe-like browsing with substance
- Match-question cards — answer prompts that drive compatibility, the core loop
- Playful illustrated empty states — friendly, on-brand line art
- Like / Pass round buttons — magenta heart, indigo pass, anchored to the card
- Larsseit typeface (Inter fallback), rounded grotesque, weights 400/600/700
Do's and don'ts
Do
- Use a bright white canvas (
#FFFFFF) with the soft neutral surface (#F2F2F2) behind cards - Reserve OkCupid Magenta (
#E2024F) for the Like, primary CTA, active tab, and match-% badge - Use indigo (
#0500FF) for Pass, secondary links, and illustration detail — keep the like/pass duality balanced - Show a circular match-% badge on every browsable profile, color-tiered by fit
- Animate the match number with a quick count-up the first time a profile appears
- Make question prompts large and friendly (20pt semibold) — substance is the brand
- Round everything generously — 20–24pt cards, full-pill buttons and answer options
- Use friendly two-color (magenta + indigo) illustrations for empty and success states
- Use Larsseit (Inter fallback) at weights 400/600/700 only
Don't
- Don't use a thin/industrial substitute font — pick a rounded grotesque (Inter), Larsseit is warm
- Don't add accent colors beyond magenta + indigo to UI chrome — match-tier colors are derived from magenta
- Don't make the match % small or gray when it's high — when it's a great match, it must be loud and magenta
- Don't reduce profiles to thin swipe cards — DoubleTake is rich and internally scrollable
- Don't ship a sterile blank empty state — always use the playful illustration language
- Don't use sharp corners — the brand is rounded; minimum card radius is 16pt
- Don't use thin font weights — the ramp is 400/600/700
- Don't put magenta and indigo in equal weight on the same control — magenta leads, indigo supports
- Don't skip the "It's a Match" celebration — it is a signature emotional beat
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 Okcupid design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- OkCupid Magenta: #e2024f
- Magenta Pressed: #c00244
- Magenta Tint: #fce3eb
- Brand Indigo: #0500ff
- Indigo Tint: #e5e4ff
- Canvas White: #ffffff
- Surface Neutral: #f2f2f2
- Surface Raised: #ffffff
- Divider: #e5e5e5
- Text Primary: #14171a
Type:
- families: Larsseit, Inter, Fallback Stack, Tone
- scale: 10, 11, 13, 14, 16, 17, 20, 22, 26
- weights: 400, 600, 700
Shape:
- radius: 14, 20, 24
- elevation: Background: `#FFFFFF` with a 1pt `#E5E5E5` ring and a soft shadow | Background: `#FFFFFF` with a 1pt `#E5E5E5` ring and a soft shadow | Full-width card, ~96% of screen, rounded 24pt corners, soft shadow
Spacing: 14, 15, 20, 24
Rules:
- Use a bright white canvas (`#FFFFFF`) with the soft neutral surface (`#F2F2F2`) behind cards
- Reserve OkCupid Magenta (`#E2024F`) for the Like, primary CTA, active tab, and match-% badge
- Use indigo (`#0500FF`) for Pass, secondary links, and illustration detail — keep the like/pass duality balanced
- Show a circular match-% badge on every browsable profile, color-tiered by fit
- Animate the match number with a quick count-up the first time a profile appears
- Make question prompts large and friendly (20pt semibold) — substance is the brand
Avoid:
- Don't use a thin/industrial substitute font — pick a rounded grotesque (Inter), Larsseit is warm
- Don't add accent colors beyond magenta + indigo to UI chrome — match-tier colors are derived from magenta
- Don't make the match % small or gray when it's high — when it's a great match, it must be loud and magenta
- Don't reduce profiles to thin swipe cards — DoubleTake is rich and internally scrollable
- Don't ship a sterile blank empty state — always use the playful illustration language
- Don't use sharp corners — the brand is rounded; minimum card radius is 16pt
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- OkCupid Magenta (
#E2024F): Primary CTA, "Like" heart, active bottom-tab item, match-% badge ring + number, selected toggles. - Magenta Pressed (
#C00244): Active/pressed state for magenta CTAs. - Magenta Tint (
#FCE3EB): Like-flash background, selected chip fill, focused-field ring wash.
Secondary
- Brand Indigo (
#0500FF): "Pass" affordance, secondary links, illustration accents, info highlights. - Indigo Tint (
#E5E4FF): Pass-flash background, indigo chip fill.
Canvas & Surfaces (Light)
- Canvas White (
#FFFFFF): Primary canvas — card backgrounds, sheets, nav bar. - Surface Neutral (
#F2F2F2): Grouped sections, the screen background behind cards, question shelves. - Surface Raised (
#FFFFFF+ shadow): Cards lift via soft shadow on the neutral surface. - Divider (
#E5E5E5): Hairline between list rows and section groups. - Text Primary (
#14171A): Names, screen titles, primary UI text (near-black, slightly cool). - Text Secondary (
#6B6B6B): Metadata, subtitles, placeholders, question helper text. - Text Tertiary (
#9B9B9B): Disabled labels, very low-emphasis captions.
Match Percentage
- Match High (
#E2024F): 90–100% — full magenta ring + number. - Match Mid (
#F0578A): 70–89% — lighter magenta ring. - Match Low (
#9B9B9B): below 70% — neutral gray ring (de-emphasized).
Semantic
- Success Green (
#1CAA6A): "It's a Match!" confirmation, verified badge. - Warning Amber (
#F5A623): Incomplete-profile nudge, "Answer more questions" prompt. - Error Red (
#D0021B): Failed action, blocked-user, sign-in error.
Dark Mode (Limited)
OkCupid's iOS app is primarily light. A dark variant exists for system-dark users.
- Dark Canvas (
#15151A) - Dark Surface (
#1F1F26) - Dark Text (
#FFFFFF) - Magenta stays
#E2024F— it reads well on dark; ring de-emphasis uses#5C5C66.
Type scaleRead the full spec
Font Family
- Primary:
Larsseit(OkCupid brand typeface, by Type Dynamic) - Substitute / Fallback:
Inter— closest free rounded-grotesque match - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Tone: Friendly rounded grotesque — geometric but warm; never a hard industrial sans
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title (Large) | Larsseit | 30pt | 700 | 1.15 | -0.4pt | "DoubleTake", "Matches", nav large title |
| Profile Name (Hero) | Larsseit | 26pt | 700 | 1.15 | -0.3pt | Name + age on the profile card hero |
| Section Header | Larsseit | 22pt | 700 | 1.2 | -0.2pt | "Your matches", "Questions" |
| Match % (Badge) | Larsseit | 20pt | 700 | 1.0 | 0pt | The circular percentage number |
| Question Prompt | Larsseit | 20pt | 600 | 1.3 | -0.1pt | A match-question's text — the core loop |
| Card / List Title | Larsseit | 17pt | 600 | 1.3 | -0.1pt | Match-card name, list row title |
| Body | Larsseit | 16pt | 400 | 1.5 | 0pt | Profile bio, question explanations |
| Answer Option | Larsseit | 16pt | 600 | 1.3 | 0pt | Selectable answer in a question card |
| Metadata | Larsseit | 14pt | 400 | 1.35 | 0pt | "Last online today", subtitle |
| Caption / Count | Larsseit | 13pt | 400 | 1.3 | 0pt | "12 new likes", small counts |
| Label (UPPER) | Larsseit | 11pt | 700 | 1.2 | 0.6pt | "MATCH QUESTIONS" section labels |
| Button (Primary) | Larsseit | 17pt | 700 | 1.0 | 0.2pt | Magenta primary pill |
| Tab Label | Larsseit | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
Principles
- Weights at 400 / 600 / 700: Regular for body, semibold for prompts/options/titles, bold for headlines and the match number — no thin
- Rounded warmth, not industrial: Larsseit's soft terminals carry the friendly brand voice; pick Inter (not a hard grotesque) as the substitute
- The match % is typographically loud: it always gets bold, large, and magenta when high
- Negative tracking on large titles only: -0.4pt at 30pt; body and questions sit at 0 / -0.1pt
- Dynamic Type respected: titles, questions, body scale; the badge number and tab labels are pinned
Components and layoutRead the full spec
Buttons
Primary Pill (Send Like / Continue / It's a Match)
- Background:
#E2024F - Text:
#FFFFFF - Padding: 15pt vertical, 32pt horizontal
- Corner radius: 500pt (full pill)
- Font: Larsseit, 17pt, weight 700, +0.2pt tracking
- Pressed: background
#C00244, scale 0.97, soft haptic - Disabled:
#E2024Fat 35% opacity
Like Button (The Magenta Heart)
- Shape: Circle, 64pt diameter (on the profile card action bar)
- Background:
#FFFFFFwith a 1pt#E5E5E5ring and a soft shadow - Icon: heart glyph 28pt,
#E2024F - Pressed: scale 0.90, a
#FCE3EBflash fills the circle, success haptic - Liked state: heart fills solid
#E2024Fwith a 1.0 → 1.2 → 1.0 bounce
Pass Button (The Indigo X)
- Shape: Circle, 56pt diameter
- Background:
#FFFFFFwith a 1pt#E5E5E5ring and a soft shadow - Icon: X glyph 24pt,
#0500FF - Pressed: scale 0.90, an
#E5E4FFflash, light haptic; card slides away
Secondary / Outline Pill
- Background: transparent
- Text:
#14171A - Border: 1.5pt solid
#14171A - Padding: 14pt vertical, 28pt horizontal, corner radius 500pt
- Font: Larsseit, 16pt, weight 600
- Pressed: background
#F2F2F2
Text Button ("Skip", "See more")
- Font: Larsseit, 15pt, weight 600
- Color:
#0500FF - No background, no underline, 44pt hit area
Cards & Containers
DoubleTake Profile Card (The Signature)
- Full-width card, ~96% of screen, rounded 24pt corners, soft shadow
- Top: hero photo (4:5), name + age (26pt w700) and a match-% badge overlaid bottom-left on a subtle scrim
- Scrollable below: bio, prompt answers, photo gallery, "the two of us agree" question highlights
- Bottom action bar pinned: Pass (56pt indigo), Like (64pt magenta, centered/larger), Star/Boost
- Card swipes/slides on Pass; Like triggers the magenta flash + bounce
Match-% Circular Badge
- Diameter: 48pt (on cards) / 36pt (in list rows)
- Ring: 3pt stroke; color by tier —
#E2024F(90+),#F0578A(70–89),#9B9B9B(<70) - Center: the number (e.g., "94%") in Larsseit 20pt w700, color matching the ring tier
- Background fill:
#FFFFFF(96% opacity over photos) so it always reads - Subtle count-up animation on first appearance (0 → value over 600ms)
Match-Question Card
- White card, rounded 20pt, soft shadow, 20pt internal padding
- Prompt: 20pt w600
#14171A(the question) - Answer options: stacked full-width pills, 16pt w600, 1.5pt
#E5E5E5border; selected =#E2024Ffill + white text - Footer: an "importance" segmented control + a magenta "Answer" primary pill
- Optional explanation field below for free-text context
Match List Row
- Height: 76pt
- Layout: 56pt circular avatar (with a small match-% badge clipped bottom-right) → name (17pt w600) + last activity (14pt w400
#6B6B6B) → trailing chevron or unread magenta dot - Background:
#FFFFFF; Pressed:#F2F2F2
Illustrated Empty State
- Centered friendly line illustration (~160pt) using magenta + indigo strokes
- Headline 22pt w700, supportive body 16pt w400
#6B6B6B - A magenta primary pill CTA ("Answer questions" / "Browse matches")
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
rgba(255,255,255,0.96)with.regularMaterialblur, 0.5pt top divider#E5E5E5 - Tabs: Discover, Likes, Matches, Messages, Profile
- Icon size: 26pt
- Active color:
#E2024F(icon + label) - Inactive:
#6B6B6B - Labels: Larsseit 10pt w600, always shown
- Badge: magenta
#E2024Fpill with white count on Likes / Messages
Top Bar
- Height: 44pt + safe area
- Large title (30pt w700
#14171A) collapsing to inline 17pt on scroll - Trailing: filter icon (22pt) + settings (22pt),
#14171A - Translucent white blur on scroll
Input Fields
Text Field (Bio / Free-text answer)
- Background:
#FFFFFF - Border: 1.5pt solid
#E5E5E5, corner radius 14pt - Min height: 52pt, 16pt padding
- Placeholder: 16pt w400
#9B9B9B - Focused: border
#E2024F2pt, subtle#FCE3EBring - Error: border
#D0021B, helper text#D0021B13pt
Message Composer
- Background:
#F2F2F2, corner radius 24pt, min height 48pt - Placeholder: "Say something", 16pt w400
#9B9B9B - Trailing send:
#9B9B9Bwhen empty → filled#E2024Fcircle when text present
Importance Segmented Control (on questions)
- Pill segments: "A little" / "Somewhat" / "Very"
- Unselected:
#F2F2F2fill,#6B6B6Btext; Selected:#E2024Ffill, white text - Corner radius 500pt, 13pt w600 labels
Distinctive Components
Match Percentage System
- Every browsable profile and match carries a circular % badge whose color tier signals fit at a glance (magenta = great, light magenta = good, gray = low)
- The number animates with a quick count-up the first time a profile is seen — the data is the hook
DoubleTake Stack
- A full-card browsing experience (not a thin Tinder swipe): one rich profile at a time with bio, questions, and photos; Pass slides the card out, Like flashes magenta and advances
- The card is scrollable internally so substance (answers) is reachable before deciding
Match-Question Loop
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Profile card ~98% width; smaller hero (4:5 maintained) |
| iPhone 13/14/15 | 390pt | Standard ~96% DoubleTake card |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the large title nav |
| iPhone 15/16 Pro Max | 430pt | Larger hero, match-% badge scales to 52pt |
| iPad | 768pt+ | Two-pane: match list + profile detail; questions in a 2-column grid |
Dynamic Type
- Titles, question prompts, body, list text: full scale
- Match-% badge number: pinned (badge is a fixed ornament)
- Tab labels: fixed 10pt
- Profile hero name: scales up to 30pt before clamping
Orientation
- Discover / DoubleTake / Matches: portrait-locked (the card is tuned for portrait)
- Photo viewer: rotates to fit landscape images
- iPad: all orientations, two-pane layout persists
Touch Targets
- Like button: 64pt circle — the primary, largest action
- Pass button: 56pt circle
- Answer-option pills: full-width, 52pt min height
- List rows: 76pt height, full-row tappable
- Tab bar icons: 26pt glyph, 44pt effective hit
Safe Area Handling
- Top: large title respects safe area + Dynamic Island
- Bottom: tab bar + the floating action bar respect the home indicator
- DoubleTake card: respects safe area; the action bar floats above the tab bar
- "It's a Match" takeover: full-bleed, controls inside safe area
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-okcupid {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #14171a;
--heading-color: #14171a;
--link-color: #0500ff;
--link-hover-color: #0400cc;
--border-color: #d5d5d6;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(20,23,26,0.06);
--card-hover-shadow: 0 6px 18px rgba(20,23,26,0.12);
--header-bg: #14171a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #66686a;
--button-bg: #0500ff;
--button-text-color: #ffffff;
--button-hover-bg: #0400cc;
--button-border: none;
--button-border-radius: 20px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #14171a;
--button-secondary-hover-bg: #e3e3e4;
--button-secondary-border: 1px solid #d5d5d6;
--prompt-bg: #f3f3f4;
--prompt-text-color: #14171a;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 20px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/dating/okcupid/DESIGN.md· 21.0 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.