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
19tokens
10type steps
1radius steps
4pxspacing base
Feeld, in one page
Feeld's iOS app is the dating app for the open-minded — non-monogamy, kink, queer, exploratory — and its design language is deliberately the opposite of the candy-bright, photo-heavy mainstream dating apps. The app is dark-native: there is no light mode in the shipping product. The canvas is true black (#000000), profile photography is the only large field of color, and the entire interface floats over that black like neon on velvet. The single brand accent is an electric acid-yellow (#E8FF63) — a color that reads as energetic, queer-coded, and intentionally un-romantic (no soft pinks-as-default here). A warm desire pink (#FF5C8A) is the secondary emotional color, and a soft lilac (#C9B8FF) handles the "Wink"/super-interest gesture.
The signature screen is the Discover stack: a single, deeply-rounded (28pt) profile card filling most of the screen, with a heavy bottom gradient so the name, age, and the person's Desires chips read against any photo. Below the card sits a three-button action row — a circular Pass (outline), a large acid-yellow Like (the only acid fill on the screen), and a lilac Wink/super-like. Feeld supports couples and groups, so the card frequently shows two names ("Robin & Sky"), two ages, and shared desires — the design must never assume a single-person profile. Above the card is a minimal top bar with a hamburger (filters) and a settings glyph.
The other defining concept is Desires: Feeld lets members tag what they're into (Non-monogamy, Kink, ENM, specific orientations, pronouns) and these appear everywhere as pill chips — selected (acid fill, black text), unselected (dark surface, hairline border), or emotional (pink-tinted). The profile, the filter sheet, and the onboarding all revolve around these chips. The second core surface is Connections — Feeld's word for matches/chats — a list of round avatars, names (often paired), and last-message snippets.
Typography is a quirky-humanist geometric: Space Grotesk for display, names, and headings (its irregular letterforms feel human and a little subversive, matching the brand), with Inter for body and metadata where neutral legibility matters. Weights stay in the 400/500/600/700 band — no hairline, no black. Hierarchy is product-UI (display → name → section → body → meta → chip), not editorial. Everything is rounded: cards at 28pt, buttons are full pills (500pt), avatars are circles. The result reads as confident, adult, inclusive, and a little underground.
Key Characteristics:
- True-black canvas (
#000000) — dark-native, no light mode in the shipping app - One rationed accent: acid-yellow
#E8FF63— lands on exactly one primary action per screen - Desire pink
#FF5C8A(emotional/secondary) + lilac#C9B8FF(Wink/super-interest) - Discover stack: one full-bleed 28pt-rounded profile card with heavy bottom gradient
- Couples/groups first-class — cards show paired names, paired ages, shared desires
- Three-button action row: outline Pass · acid Like (the only acid fill) · lilac Wink
- "Desires" pill-chip system everywhere — selected / unselected / emotional states
- "Connections" (not "Matches") — list of round avatars + paired names + snippets
- Space Grotesk (display/names) + Inter (body/meta) — quirky-humanist over editorial
- Fully rounded geometry: 28pt cards, 500pt pill buttons, circular avatars
- Verified badge as a small acid-checkmark glass pill on the photo
- Minimal chrome — black bar, hamburger filters, no tab-bar tint pill
Do's and don'ts
Do
- Use true black (
#000000) as the canvas — Feeld is dark-native, not "dark mode" - Ration acid-yellow
#E8FF63to exactly one primary action per screen - Design couple/group-first — name area must hold two names + two ages gracefully
- Use the Desire chip system for identity and intent — togglable pills, three states
- Put the only glow on the acid Like button — it signals THE action
- Say "Connection", not "Match", everywhere (vocabulary is part of the brand)
- Round everything: 28pt cards, 500pt pill buttons, circular avatars
- Set personality type (display, names, sections, buttons) in Space Grotesk
- Set legibility type (body, meta, snippets) in Inter
- Surface the verified glass pill on the photo — verification is a trust pillar
- Keep the tab bar untinted except for the acid icon + 5pt dot on active
Don't
- Don't introduce a light theme as a first-class mode — the app ships dark-only
- Don't use acid-yellow as a background behind paragraphs or as a second CTA fill
- Don't assume single-person profiles — never truncate the second name in a couple
- Don't use dropdowns/radio lists for desires — they are chips by design
- Don't add drop shadows to cards on black (invisible; the radius + photo carry it)
- Don't tint the whole active tab (pill/label block) — only the icon + small dot
- Don't set body text in Space Grotesk — Inter carries legibility
- Don't soften the pink toward romantic pastel —
#FF5C8Astays saturated and adult - Don't fill the screen with a grid of faces — Discover is one card at a time
- Don't replace "Connection" with "Match" — it changes the brand voice
- Don't use thin/black font weights — stay in 400–700
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 Feeld design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- acid-yellow: #e8ff63
- desire pink: #ff5c8a
- lilac: #c9b8ff
- Acid Yellow: #e8ff63
- Acid Pressed: #d4eb4f
- Pink Deep: #e0447a
- Canvas Black: #000000
- Surface 1: #121212
- Surface 2: #1c1c1e
- Surface 3: #262626
Type:
- families: Space Grotesk, Inter, Fallback Stack, Dynamic Type
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 26
- weights: 400, 600, 700
Shape:
- radius: 16
- elevation: Like: 64pt circle, `#E8FF63`, heart 28pt filled `#000`, acid glow shadow
Spacing: 4, 7, 9, 13, 15, 22
Rules:
- Use true black (`#000000`) as the canvas — Feeld is dark-native, not "dark mode"
- Ration acid-yellow `#E8FF63` to exactly one primary action per screen
- Design couple/group-first — name area must hold two names + two ages gracefully
- Use the Desire chip system for identity and intent — togglable pills, three states
- Put the only glow on the acid Like button — it signals THE action
- Say "Connection", not "Match", everywhere (vocabulary is part of the brand)
Avoid:
- Don't introduce a light theme as a first-class mode — the app ships dark-only
- Don't use acid-yellow as a background behind paragraphs or as a second CTA fill
- Don't assume single-person profiles — never truncate the second name in a couple
- Don't use dropdowns/radio lists for desires — they are chips by design
- Don't add drop shadows to cards on black (invisible; the radius + photo carry it)
- Don't tint the whole active tab (pill/label block) — only the icon + small dot
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Acid Yellow (
#E8FF63): The single brand accent — primary Like button, active tab indicator, selected chips, verified checkmark. Rationed to one primary action per screen. - Acid Pressed (
#D4EB4F): Pressed state of acid surfaces. - Desire Pink (
#FF5C8A): Secondary emotional action — "Send a Wink"/secondary CTA, pink-tinted chips, liked-you affordances. - Pink Deep (
#E0447A): Pressed state of pink surfaces. - Lilac (
#C9B8FF): Wink / super-interest gesture, premium accents.
Canvas & Surfaces (Dark — the only mode)
- Canvas Black (
#000000): Primary canvas. True black so photography and accent feel like neon. - Surface 1 (
#121212): Cards-on-black, top-bar icons, list rows. - Surface 2 (
#1C1C1E): Elevated chips, action buttons (Pass), bottom sheets. - Surface 3 (
#262626): Pressed/hover surface, input fields. - Divider (
#2A2A2A): Hairline dividers between connection rows and sections. - Scrim (
rgba(0,0,0,0.72)): Bottom gradient on profile cards so text reads on any photo.
Light Mode
Feeld ships dark-only. There is no first-class light theme. If a host platform forces a light surface (e.g., a share sheet), keep accents identical (#E8FF63, #FF5C8A) on white #FFFFFF with text #1A1A1A — but this is a system surface, not the Feeld UI.
| Role | Dark Mode (shipping) | Forced-Light (system surfaces only) |
|---|---|---|
| Canvas | #000000 | #FFFFFF |
| Surface 1 | #121212 | #F4F4F2 |
| Surface 2 | #1C1C1E | #EAEAEA |
| Divider | #2A2A2A | #E2E2E2 |
| Text Primary | #FFFFFF | #1A1A1A |
| Text Secondary | #A8A8A8 | #6E6E6E |
| Acid Yellow | #E8FF63 | #E8FF63 |
| Desire Pink | #FF5C8A | #FF5C8A |
Text
- Text Primary (
#FFFFFF): Names, headings, primary body on black. - Text Secondary (
#A8A8A8): Metadata ("Couple · 31 & 29 · 2 km away"), message snippets. - Text Tertiary (
#6E6E6E): Timestamps, disabled, very low emphasis. - On-Acid (
#000000): Text/icon on acid-yellow fills — always black for contrast. - On-Pink (
#FFFFFF): Text on pink fills.
Semantic
- Success (
#66E0A3): Verification success, "Connected" confirmation. - Error (
#FF6B6B): Form errors, blocked/report confirmation. - Warning (
#E8FF63): Reuses acid for caution callouts (consistency over a separate amber). - Liked-You Glow (
rgba(232,255,99,0.5)): Drop-shadow halo behind the acid Like button.
Type scaleRead the full spec
Font Family
- Display / Names / Headings:
Space Grotesk(by Florian Karsten, derived from Colophon's Space Mono, SIL OFL) — a proportional grotesque with irregular, slightly mechanical letterforms that feel human and subversive — on-brand for Feeld's non-mainstream identity. - Body / Metadata / UI:
Inter(by Rasmus Andersson, SIL OFL) — neutral, highly legible at small sizes for message snippets, metadata, form fields. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Feeld's production app uses a custom grotesque; Space Grotesk is the closest free, well-hinted match for the quirky-geometric character.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Space Grotesk | 32pt | 700 | 1.15 | -0.5pt | Onboarding / empty-state hero |
| Profile Name | Space Grotesk | 26pt | 700 | 1.15 | -0.4pt | On card, supports paired names ("Robin & Sky") |
| Section Title | Space Grotesk | 22pt | 600 | 1.2 | -0.3pt | "Your Desires", "Connections" |
| Subsection | Space Grotesk | 18pt | 600 | 1.3 | -0.1pt | "About this connection" |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Bio text, prompt answers |
| List Title | Space Grotesk | 15pt | 600 | 1.3 | 0pt | Connection name in list |
| Card Meta | Inter | 14pt | 400 | 1.4 | 0pt | "Couple · 31 & 29 · 2 km away" |
| Message Snippet | Inter | 13pt | 400 | 1.4 | 0pt | Last message in Connections list |
| Chip | Inter | 12pt | 600 | 1.0 | 0.1pt | Desire / identity pill text |
| Button | Space Grotesk | 16pt | 600 | 1.0 | 0pt | Primary / secondary CTA |
| Caption | Inter | 12pt | 400 | 1.3 | 0.1pt | Timestamps, helper text |
| Tab Label | Inter | 10pt | 600 | 1.0 | 0.2pt | (icons-only is also valid; dot indicator) |
Principles
- Two-font system: Space Grotesk carries personality (display, names, sections, buttons); Inter carries legibility (body, meta, snippets). Never set body in Grotesk.
- Weights 400/500/600/700 only — no thin, no black; the grotesque is expressive enough without weight extremes.
- Paired-name aware: name styles must gracefully wrap two names + "&" (couples) without truncating mid-name.
- Negative tracking on display: tighten -0.3 to -0.5pt on 22pt+ Grotesk for the confident, condensed feel.
- Dynamic Type: display, name, section, body, snippet scale; chip text, tab labels stay fixed (layout-sensitive pills).
Components and layoutRead the full spec
Buttons
Primary Button (Like / Continue)
- Shape: Full pill, 500pt corner radius
- Background:
#E8FF63(Acid Yellow) — the only acid fill on the screen - Text/Icon:
#000000 - Padding: 15pt vertical, 30pt horizontal (pill) — or 64pt circle in the Discover action row
- Font: Space Grotesk 16pt weight 600
- Pressed: background
#D4EB4F+ scale 0.98 - Discover variant: 64pt circle with
0 12px 30px -8px rgba(232,255,99,0.5)glow
Secondary Button (Send a Wink / Pink CTA)
- Background:
#FF5C8A(Desire Pink) - Text:
#FFFFFF - Shape: pill, 500pt
- Padding: 15pt / 30pt
- Pressed:
#E0447A+ scale 0.98
Outline Button (Skip / Pass)
- Background: transparent
- Text:
#FFFFFF - Border: 1pt
rgba(255,255,255,0.28) - Shape: pill 500pt (or 52pt circle in action row, bg
#1C1C1E, 1pt#2A2A2A) - Padding: 13pt / 24pt
- Pressed: background
#1C1C1E
Text Button (Edit Desires / inline action)
- Background: none
- Text:
#E8FF63(acid), Space Grotesk 15pt weight 600 - No underline
- Pressed: opacity 0.7
Icon Button (top-bar hamburger / settings)
- Size: 17pt glyph in 34pt circular
#1C1C1Ehit area - Color:
#FFFFFF, stroke 2pt - Pressed: background
#262626
Profile Card (the core atom)
- Shape: rounded rect, 28pt corner radius, full-bleed photo
- Fills most of the screen between top bar and action row
- Bottom gradient:
linear-gradient(180deg, transparent, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.92))over bottom ~56% - Body overlay (bottom-left, 20pt/22pt padding):
- Name: Space Grotesk 26pt w700
#FFFFFF— supports "Robin & Sky" - Sub: Inter 14pt
rgba(255,255,255,0.78)— "Couple · 31 & 29 · 2 km away" - Desire chips row: 7pt gap, wrapping
- Verified badge: top-right glass pill —
rgba(0,0,0,0.5)+ blur, 6/10pt padding, 999pt radius, acid checkmark 12pt + "Verified" Inter 11pt w600#FFFFFF - Photo dots (multi-photo): top, 4pt gap, active
#FFFFFF, inactivergba(255,255,255,0.45)
Action Row (Discover)
- Centered, 22pt gap, padding 4/12pt
- Pass: 52pt circle,
#1C1C1E, 1pt#2A2A2A, X glyph 22pt#A8A8A8 - Like: 64pt circle,
#E8FF63, heart 28pt filled#000, acid glow shadow - Wink: 52pt circle,
#1C1C1E, 1pt#2A2A2A, star 22pt filled#C9B8FF
Desire / Identity Chips
- Shape: full pill 999pt
- Padding: 9pt vertical, 15pt horizontal (12pt size on card)
- States:
- Selected: bg
#E8FF63, text#000000, Inter 12pt w600 - Unselected: bg
#1C1C1E, text#FFFFFF, 1pt#2A2A2Aborder - Emotional/Exploring: bg
rgba(255,92,138,0.16), text#FF5C8A, 1ptrgba(255,92,138,0.4) - Used in: profile card overlay, filter sheet, onboarding desire-picker
Connections List
- Row: 12pt vertical padding, 1pt
#2A2A2Abottom divider - Avatar: 48pt circle (radial gradient placeholder)
- Name: Space Grotesk 15pt w600
#FFFFFF(supports paired) - Snippet: Inter 13pt
#A8A8A8, single line - Timestamp: Inter 11pt
#6E6E6E, trailing - Unread: small acid dot or acid name weight bump
Navigation
Top Bar
- Height: 44pt + safe area
- Leading: hamburger (filters) 17pt in 34pt circle
#1C1C1E - Center: screen title — Space Grotesk 22pt w700
#FFFFFF("Discover") - Trailing: settings/sort glyph in matching circle (acid dots accent)
- Background: transparent over black canvas
Bottom Tab Bar
- Height: 64pt + safe area
- Background:
rgba(0,0,0,0.92)+saturate(180%) blur(20px), 0.5pt top border#2A2A2A - Tabs (4): Discover · Likes · Connections · Profile
- Icon: 23pt, stroke 2pt
- Active: icon stroke
#E8FF63+ a 5pt acid dot under it — no tint pill, no label color block - Inactive:
#6E6E6E - Labels optional (icons-only is valid Feeld pattern); dot is the active signal
Input Fields
Text Field (bio / message)
- Height: 52pt (single-line) / auto (multiline)
- Background:
#1C1C1E - Border: none (focus: 1pt
#E8FF63) - Corner radius: 16pt
- Text: Inter 16pt
#FFFFFF; placeholder Inter 16pt#6E6E6E
Filter Sheet
- Bottom sheet,
#121212, 24pt top corner radius - Grab handle: 36pt × 4pt
#2A2A2A - Contents: desire chips grid, distance slider (acid track), age range
- Apply button: full-width acid pill at bottom
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Card height compresses; chips wrap to 2 rows; action buttons 56/48pt |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island; top bar respects island, card starts below |
| iPhone 15/16 Pro Max | 430pt | Larger card; action buttons 68/56pt; name 28pt |
| iPad (portrait) | 768pt | Card max-width 520pt centered; black margins; Connections 600pt |
| iPad (landscape) | 1024pt+ | Discover card centered 520pt; optional split with Connections list |
Dynamic Type
- Display, profile name, section, body, message snippet: full scale
- Desire chip text, tab labels, verified-pill text: FIXED (layout-sensitive pills)
- Card meta scales one step then truncates with ellipsis (never wraps past 2 lines)
Orientation
- Discover stays portrait-locked on iPhone (card-swipe gesture)
- iPad supports landscape — card stays centered, Connections list can sit beside it
- Chat view rotates freely
Touch Targets
- Action-row buttons: 52–64pt (well above 44pt)
- Desire chip: ≥ 32pt tall hit area
- Tab icon: 23pt glyph, 48pt hit
- Top-bar icon: 34pt circle hit
- Photo-advance tap zones: left/right 40% of card each
Safe Area Handling
- Top: top bar + first card respect Dynamic Island / notch
- Bottom: tab bar + home indicator respected; action row sits above tab bar
- Sides: 16pt card inset
- Keyboard (chat): message bar rises with keyboard; list scrolls above it
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-feeld {--page-bg: #000000;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #e8ff63;
--link-hover-color: #e0ff30;
--border-color: #2e2e2e;
--card-bg: #000000;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #141414;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #000000;
--footer-text-color: #a6a6a6;
--button-bg: #e8ff63;
--button-text-color: #000000;
--button-hover-bg: #e0ff30;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #0f0f0f;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #1f1f1f;
--button-secondary-border: 1px solid #2e2e2e;
--prompt-bg: #0d0d0d;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- happn 77.9%
- revolut 73.9%
- airbnb 73.2%
- spotify 72.8%
- tripadvisor 72.7%
Where this came from
- Source document
ios/design-md/dating/feeld/DESIGN.md· 23.5 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.