Feeld DESIGN.md

1. Visual Theme & Atmosphere

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

2. Color Palette & Roles

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.

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.

3. Typography Rules

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

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

4. Component Stylings

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 #1C1C1E hit 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, inactive rgba(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 #2A2A2A border
  • Emotional/Exploring: bg rgba(255,92,138,0.16), text #FF5C8A, 1pt rgba(255,92,138,0.4)
• Used in: profile card overlay, filter sheet, onboarding desire-picker

Connections List

• Row: 12pt vertical padding, 1pt #2A2A2A bottom 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

Distinctive Components

Desire Chip System — see Chips above. The defining Feeld component: identity and intent are expressed as togglable pills, never as dropdowns or radio lists.

Paired Profile Header — name area renders one OR two names with "&" and two ages; the design is couple/group-first, not single-first.

Wink Gesture — lilac star (super-interest) distinct from the acid Like; sends a soft signal before a full match.

Verified Glass Pill — frosted rgba(0,0,0,0.5) blur pill with acid checkmark; identity verification is a trust pillar for the audience.

Liked-You Glow — the acid Like button alone carries a soft acid drop-shadow halo, drawing the eye to the single primary action.

Connections (not Matches) — vocabulary and component naming use "Connection" throughout; the list, the empty state, and the chat header all say "Connection".

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 22, 24, 28, 32, 40, 48, 64
• Card-to-edge inset: 16pt
• Action row gap: 22pt
• Chip gap: 7pt (on card) / 10pt (in lists)

Grid & Container

• iPhone: single full-bleed card column, 16pt side insets
• Card height: flexes to fill space between top bar and action row
• iPad: card max-width 520pt centered; Connections list max-width 600pt
• No multi-column content — Feeld is a single focused stack

Whitespace Philosophy

• One thing at a time: Discover shows exactly one profile; no grid of faces
• Black breathes: generous true-black padding around the single card makes the photo and acid pop
• Chips wrap, never truncate: desire chips flow to multiple rows rather than clip
• Action row isolated: clear vertical space isolates Pass/Like/Wink from the card

Border Radius Scale

• Square (0pt): full-bleed photo edges that meet the screen
• Medium (8pt): inline tags, small affordances
• Standard (12–16pt): input fields, small cards, sheet sub-cards
• Comfortable (24pt): bottom-sheet top corners
• Card (28pt): the signature profile card
• Pill (500pt): all buttons, all desire chips
• Circle (50%): avatars, action-row buttons

6. Depth & Elevation

Feeld is mostly flat — depth comes from the photo, the black canvas, and one glow.

Shadow Philosophy: On a true-black canvas, conventional drop shadows are invisible — so Feeld doesn't fake them. Elevation reads from the 28pt rounded card sitting over black and from the single acid glow on the primary Like, which doubles as a visual "this is THE action" cue. Bottom sheets get a top-corner radius + a soft upward shadow as their only elevation tell.

Motion

• Card swipe (like/pass): 1:1 finger tracking; rotation ±8° tied to horizontal drag; release past 35% width commits with 220ms spring (damping 0.8); card exits in the swipe direction
• Like tap (button): button scales 0.92 → 1.0 in 180ms ease-out; acid glow pulses; soft success haptic
• Wink tap: lilac star bounces (scale 1.0 → 1.25 → 1.0) 260ms; light haptic
• Match/Connection made: full-screen takeover, two avatars slide together from edges 320ms ease-out, acid confetti burst, "It's a Connection" Space Grotesk 32pt
• Chip toggle: instant fill swap + 120ms scale 0.96 → 1.0; selection haptic
• Sheet present: bottom sheet slides up 300ms ease-out; scrim fades in parallel
• Tab switch: active dot slides under new icon 200ms ease-out; no cross-fade of icons
• Photo advance: tap left/right edge → instant photo swap; dots update with no animation
• Haptics: soft impact on Like commit, light on Wink, selection on chip toggle, success on Connection

7. Do's and Don'ts

Do

• 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)
• 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 — #FF5C8A stays 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas: #000000 (dark-native, only mode)
• Surface 1 / 2 / 3: #121212 / #1C1C1E / #262626
• Divider: #2A2A2A
• Text primary / secondary / tertiary: #FFFFFF / #A8A8A8 / #6E6E6E
• Accent (acid): #E8FF63 (pressed #D4EB4F) — one per screen
• Desire pink: #FF5C8A (pressed #E0447A)
• Lilac (Wink): #C9B8FF
• On-acid text: #000000
• Success / Error: #66E0A3 / #FF6B6B

Example Component Prompts

• "Build the Feeld Discover card in SwiftUI: full-bleed photo, 28pt corner radius, 16pt side insets, filling the space between top bar and action row. Bottom gradient linear-gradient(transparent → rgba(0,0,0,0.72) at 60% → rgba(0,0,0,0.92)) over the bottom 56%. Overlay at bottom-left (20/22pt padding): name in Space Grotesk 26pt w700 #FFFFFF supporting two names ('Robin & Sky'); sub in Inter 14pt rgba(255,255,255,0.78) ('Couple · 31 & 29 · 2 km away'); a wrapping row of Desire chips (7pt gap). Top-right: a glass pill rgba(0,0,0,0.5) + blur, 999pt radius, acid checkmark 12pt + 'Verified' Inter 11pt w600."

• "Create the Feeld action row: centered, 22pt gap. Pass = 52pt circle #1C1C1E + 1pt #2A2A2A, X glyph 22pt #A8A8A8. Like = 64pt circle #E8FF63, filled heart 28pt #000000, drop-shadow 0 12px 30px -8px rgba(232,255,99,0.5). Wink = 52pt circle #1C1C1E + 1pt #2A2A2A, filled star 22pt #C9B8FF. On Like tap: scale 0.92→1.0 over 180ms ease-out + soft haptic."

• "Render a Feeld Desire chip: full pill (999pt), Inter 12pt w600, padding 9/15pt. Selected = bg #E8FF63 text #000000. Unselected = bg #1C1C1E text #FFFFFF 1pt #2A2A2A border. Emotional = bg rgba(255,92,138,0.16) text #FF5C8A 1pt rgba(255,92,138,0.4). Toggle: instant fill swap + 120ms scale 0.96→1.0 + selection haptic."

• "Build the Feeld Connections list row: 12pt vertical padding, 1pt #2A2A2A bottom divider. Leading 48pt circular avatar. Name in Space Grotesk 15pt w600 #FFFFFF (supports paired names). Snippet in Inter 13pt #A8A8A8 single line. Trailing timestamp Inter 11pt #6E6E6E. Unread state: small acid #E8FF63 dot."

• "Create the Feeld bottom tab bar: height 64pt + safe area, background rgba(0,0,0,0.92) + saturate(180%) blur(20px), 0.5pt top border #2A2A2A. Four tabs: Discover, Likes, Connections, Profile, icons 23pt stroke 2pt. Active = icon stroke #E8FF63 + a 5pt acid dot beneath; inactive #6E6E6E. No tint pill, no colored label block."

• "Build the Feeld filter sheet: bottom sheet #121212, 24pt top corner radius, 36×4pt #2A2A2A grab handle. Contents: a wrapping grid of Desire chips, a distance slider with acid #E8FF63 track, an age range. Bottom: full-width acid pill 'Apply' (Space Grotesk 16pt w600 #000000). Present: slide up 300ms ease-out + scrim rgba(0,0,0,0.45) fade-in."

Iteration Guide

1. Canvas is true black #000000 — dark-native; do NOT build a light theme
2. Acid-yellow #E8FF63 is rationed to ONE primary action per screen — never a paragraph background
3. Couples/groups are first-class — the name area holds two names + two ages, never truncated
4. Desires are togglable pill chips with three states (selected / unselected / emotional) — never dropdowns
5. The only glow in the UI is on the acid Like button — it marks THE action
6. Vocabulary is "Connection", not "Match" — list, empty state, chat header all say it
7. Type is two-font: Space Grotesk for personality (display/name/section/button), Inter for legibility (body/meta/snippet)
8. Everything is rounded — 28pt card, 500pt pill buttons, circular avatars/action buttons
9. Tab bar active = acid icon + 5pt dot only (no pill, no label block)
10. Pink #FF5C8A is the adult secondary emotional color — keep it saturated, not pastel