At a glance
Raya, in one page
Raya's iOS app is the most uncompromisingly monochrome interface in consumer dating. There is no brand color — none. The canvas is pure black #000000 (not a warm near-black, not a charcoal) and the only "accent" is pure white #FFFFFF. Every UI element — buttons, bars, icons, type — is black, white, or a gray between. The single source of color in the entire experience is the *member's own photography and video*, which the interface deliberately recedes behind. Raya treats itself like a gallery frame: the art is the person, and the frame is rendered in the quietest possible chrome so nothing competes with the member's curated images. This radical restraint *is* the brand — exclusivity expressed as the absence of decoration.
The signature object is the full-bleed slideshow profile. A member's profile is not a static card; it is a sequence of full-screen photos and short videos that auto-advances like an Instagram story, set to the member's chosen song. At the top: segmented story bars (2.5pt, white-active, dimmed-inactive) that fill as the slideshow plays and let you tap left/right to scrub. Just below: a small white music ticker — a tiny vinyl/note glyph, the artist and track ("Frank Ocean — Pink + White"), and a 4-bar equalizer animating to the beat. At the bottom, over a black gradient scrim: an editorial caption — the member's first name in 28pt, an uppercase role line ("DIRECTOR · FILM & MUSIC"), a short bio, and a location. The slideshow + song is the emotional core: Raya is curating a *vibe*, not a profile, and the music makes it feel cinematic.
The color system has, functionally, two colors. Pure black #000000 is the canvas; pure white #FFFFFF is the wordmark, the single primary button, the active story bar, the heart outline, and primary text. Everything else is a gray on the black-to-white axis: surfaces lift only to #0D0D0D/#161616, dividers are #242424, hairlines #2E2E2E, secondary text #9A9A9A, tertiary #5E5E5E. There is no success green, no like-red, no premium gold — a destructive #E5484D exists but is used rarely and reluctantly. Depth is drawn with 1px hairlines, never with shadow or tint. The discipline is total: if it isn't the member's photo, it has no hue.
Typography is a clean, low-contrast neo-grotesque (the app uses a custom face; Inter is the closest free substitute) set with restraint. The wordmark is lowercase raya, weight 600. Profile names are 28pt semibold white. Role lines are 13pt uppercase, letter-spaced — the editorial-masthead tic that signals "this person is a creative professional." Body and bio sit at 15pt regular. Eyebrows and any labels are 11pt uppercase tracked +1.6px. There is no display serif, no flourish — the type is as quiet as the palette, because the member's images are the only thing meant to be loud.
Key Characteristics:
- Pure black
#000000canvas (not warm, not charcoal) — a gallery frame for the member's images - Zero brand color — the ONLY accent is pure white
#FFFFFF; all UI is black/white/gray - The only color anywhere is the member's own full-bleed photography and video
- Slideshow profile — full-screen photos/videos auto-advancing like a story, set to the member's chosen song
- Segmented story bars (2.5pt, white-active) at the top — tap left/right to scrub
- Music ticker — tiny note glyph + artist/track + animated 4-bar equalizer over the photo
- Editorial caption — first name 28pt + UPPERCASE role line + short bio + location, over a black scrim
- No drop shadows — depth is 1px hairlines (
#2E2E2E) and tonal surface lifts only - Minimal action affordances — Skip / a white-outline Heart / Note; no big colored swipe deck
- Lowercase
rayawordmark; uppercase letter-spaced role lines and eyebrows (editorial-masthead voice) - Permanently dark — there is no light mode, by design
- Restraint as exclusivity — the absence of decoration is the brand statement
Do's and don'ts
Do
- Use pure black
#000000as the canvas — true black, never warmed or charcoal - Treat pure white
#FFFFFFas the only accent — wordmark, one button, active bar, heart outline - Let the member's photography/video be the ONLY color in the entire experience
- Build the profile as a full-bleed slideshow paced by segmented white story bars
- Score the slideshow with the member's chosen song and show a small white music ticker
- Set the role line in UPPERCASE letter-spaced Inter ("DIRECTOR · FILM & MUSIC") — the editorial tic
- Anchor the caption low over a
transparent → rgba(0,0,0,0.92)scrim - Replace every shadow with a faint surface lift + 1px
#2E2E2Ehairline - Keep the wordmark lowercase and quiet; let it fade so media is unobstructed
- Keep the white heart an OUTLINE, never a fill — restraint is the brand
- Use one neo-grotesque family for everything — the typographic mirror of the one-color rule
- Keep it permanently dark — there is no light mode, and that is intentional
Don't
- Don't introduce ANY brand color — no like-red, no premium gold, no success green
- Don't warm the black —
#000000exactly;#0A0A0A/#121212are too soft for Raya - Don't add drop shadows — depth is black-on-black with hairlines, never light
- Don't tint, filter, or colored-border the member's media — it is the only color and must stay untouched
- Don't make the profile a static card — it is a music-scored, story-paced slideshow
- Don't drop the music ticker — the song is core to the curated-vibe experience
- Don't set role lines in mixed-case — they are UPPERCASE letter-spaced, always
- Don't fill the heart or any control with white by default — white fill is rationed to one CTA
- Don't introduce a serif or display face — one neo-grotesque, like one color
- Don't add a Material/iOS active-tab pill — the white tint alone signals selection
- Don't use a saturated success/like state — confirmation is white text + a subtle check, never green
- Don't crowd the media with chrome — let the wordmark and ticker recede; black is the whitespace
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 Raya design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Pure White: #ffffff
- White Pressed: #d8d8d8
- Pure Black: #000000
- Pure Black Canvas: #000000
- Surface 1: #0d0d0d
- Surface 2: #161616
- Divider: #242424
- Hairline: #2e2e2e
- Text Primary: #ffffff
- Text Secondary: #9a9a9a
Type:
- families: Inter, Wordmark, Fallback Stack, Numerals
- scale: 10, 11, 12, 13, 14, 15, 16, 20, 28
- weights: 400, 500, 600
Shape:
- elevation: Replace every shadow with a faint surface lift + 1px `#2E2E2E` hairline
Spacing: 14, 15
Rules:
- Use pure black `#000000` as the canvas — true black, never warmed or charcoal
- Treat pure white `#FFFFFF` as the only accent — wordmark, one button, active bar, heart outline
- Let the member's photography/video be the ONLY color in the entire experience
- Build the profile as a full-bleed slideshow paced by segmented white story bars
- Score the slideshow with the member's chosen song and show a small white music ticker
- Set the role line in UPPERCASE letter-spaced Inter ("DIRECTOR · FILM & MUSIC") — the editorial tic
Avoid:
- Don't introduce ANY brand color — no like-red, no premium gold, no success green
- Don't warm the black — `#000000` exactly; `#0A0A0A`/`#121212` are too soft for Raya
- Don't add drop shadows — depth is black-on-black with hairlines, never light
- Don't tint, filter, or colored-border the member's media — it is the only color and must stay untouched
- Don't make the profile a static card — it is a music-scored, story-paced slideshow
- Don't drop the music ticker — the song is core to the curated-vibe experience
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Pure White (
#FFFFFF): The single accent — wordmark, primary button, active story bar, heart outline, primary text, all active icons. - White Pressed (
#D8D8D8): Pressed state of the white primary button. - Pure Black (
#000000): The canvas; also the text/ink on a white surface (the primary button label).
Canvas & Surfaces (the only theme — permanently dark)
- Pure Black Canvas (
#000000): Primary canvas — true black, never warmed. - Surface 1 (
#0D0D0D): Sheets, cards, settings rows — the first, barely-perceptible lift. - Surface 2 (
#161616): Inset fields, pressed rows, secondary surfaces. - Divider (
#242424): Hairline dividers between settings rows and sections. - Hairline (
#2E2E2E): The 1px border on chips, fields, and the tab strip — the only depth cue.
Text
- Text Primary (
#FFFFFF): Names, headings, primary copy — pure white. - Text Secondary (
#9A9A9A): Metadata, captions, inactive labels. - Text Tertiary (
#5E5E5E): Disabled, placeholder, very low emphasis. - On-Photo White (
rgba(255,255,255,0.92)): Caption text over a photo (slightly softened so it doesn't glare). - On-Photo Dim (
rgba(255,255,255,0.6)): Location / least-emphasis text over a photo.
Accent (there is, by design, only one)
| Role | Color | Use |
|---|---|---|
| Accent (the only one) | #FFFFFF | Wordmark, primary CTA, active story bar, heart outline, active tab/icons |
| Accent pressed | #D8D8D8 | White button pressed |
| Scrim | linear-gradient(transparent → rgba(0,0,0,0.92)) | Bottom of every slideshow photo for caption legibility |
Semantic
- Error / Destructive (
#E5484D): Used reluctantly — leave-Raya / report / payment-failed confirmation only. The only non-monochrome pixel in the UI, and it should appear rarely. - Success: There is no success color — confirmation is communicated with white text and a subtle check, never a green.
- Disabled:
#5E5E5Eon#0D0D0D— a dim gray, never a tinted state. - Member Media: full-color, full-bleed — the *only* intentional color in the product; the UI must never tint, filter, or frame it with a colored border.
Type scaleRead the full spec
Font Family
- Primary: A clean, low-contrast neo-grotesque (the app ships a custom face in the Inter / Söhne / Neue Haas Grotesk family). Use
Inter(Google Fonts, SIL OFL) as the closest free substitute. - Wordmark: Lowercase
raya, weight 600 — a fixed brand asset, never re-typeset. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif - No second family: there is no serif, no mono, no display face — one neo-grotesque does everything (mirroring the one-color discipline).
- Numerals: tabular in distance and timestamps; proportional elsewhere.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Wordmark | Inter | 30pt | 600 | 1.0 | -0.5pt | Lowercase raya, pure white |
| Profile Name | Inter | 28pt | 600 | 1.1 | -0.4pt | On-photo, white, the caption headline |
| Section Title | Inter | 20pt | 600 | 1.2 | -0.2pt | "Discover", "Messages" |
| Subtitle | Inter | 16pt | 500 | 1.3 | 0pt | Section intro copy |
| Body / Bio | Inter | 15pt | 400 | 1.55 | 0pt | Bio text, message body |
| Role Line | Inter | 13pt | 500 | 1.3 | 0.4pt | UPPERCASE — "DIRECTOR · FILM & MUSIC" |
| Music Ticker | Inter | 11pt | 500 | 1.0 | 0.2pt | "Frank Ocean — Pink + White" over photo |
| Meta | Inter | 13pt | 400 | 1.3 | 0pt | "Los Angeles · 4 mi" |
| Eyebrow / Label | Inter | 11pt | 600 | 1.0 | 1.6pt | UPPERCASE — "MEMBERS ONLY" |
| Button | Inter | 14pt | 600 | 1.0 | 0.3pt | Primary / secondary label |
| Caption | Inter | 12pt | 400 | 1.3 | 0pt | Timestamps, helper text |
| Tab Label | Inter | 10pt | 500 | 1.0 | 0.4pt | If a tab strip is shown |
Principles
- One family, like one color: a single neo-grotesque carries everything — the typographic equivalent of the monochrome discipline. Never introduce a serif or display face.
- Uppercase role lines are the editorial tic: the letter-spaced uppercase role ("DIRECTOR · FILM & MUSIC") is what makes Raya feel like a curated creative directory — always uppercase, always tracked.
- Lowercase wordmark, uppercase chrome: the wordmark is intentionally lowercase and quiet; eyebrows and role lines are uppercase. Names and bios are mixed-case.
- No bold drama: weights stay in the 400–600 band — there is no 800/900 heavy. Restraint in weight mirrors restraint in color.
- On-photo text is softened white: caption text over an image uses
rgba(255,255,255,0.92)(and0.6for least-emphasis), never pure#FFFFFF, so it sits *in* the image rather than glaring over it. - Dynamic Type: name, body, section titles, bio scale; story-bar text, music ticker, eyebrows, role lines, tab labels stay fixed (layout-sensitive over media).
Components and layoutRead the full spec
Buttons
Primary Button (Like / Continue / Request Membership)
- Shape: Fully rounded pill, 999pt corner radius
- Background:
#FFFFFF(the only filled element in the UI) - Text:
#000000, Inter 14pt weight 600, +0.3px tracking - Padding: 15pt vertical, 30pt horizontal
- Pressed: background
#D8D8D8+ scale 0.99 - One per screen — white fill is rationed exactly like a brand color would be
Secondary / Outline Button (Skip)
- Background: transparent
- Text:
#FFFFFF, Inter 14pt weight 600 - Border: 1px
#FFFFFF - Padding: 14pt vertical, 28pt horizontal
- Corner radius: 999pt (pill)
- Pressed: background
rgba(255,255,255,0.08)
Ghost Button (Maybe Later)
- Background: transparent
- Text:
#9A9A9A, Inter 14pt weight 600 - Border: 1px
#2E2E2E(hairline) - Corner radius: 999pt
- Pressed: border brightens to
#3E3E3E
Text Button (View Profile)
- Font: Inter 12pt weight 600, UPPERCASE, +1.4px tracking
- Color:
#FFFFFF - No background, no underline
- Pressed:
#9A9A9A
Slideshow Profile (the core atom)
The defining component — a member presented as a music-scored full-screen slideshow.
- Full-bleed: each slide is a full-screen photo or short video, edge to edge
- Story bars: row of segmented 2.5pt bars at the top safe-area (16pt insets, 5pt gaps); active/played =
#FFFFFF, unplayed =rgba(255,255,255,0.3); each segment fills over the slide's duration; tap left/right thirds to scrub - Music ticker: directly under the bars — a 13pt vinyl/note glyph + artist/track in Inter 11pt w500
rgba(255,255,255,0.85)+ a 4-bar white equalizer animating to the beat - Bottom scrim: linear gradient
transparent → rgba(0,0,0,0.92)over the lower ~62% - Caption (over the scrim, ~96pt up from bottom):
- Name: Inter 28pt w600 white
- Role line: Inter 13pt w500 UPPERCASE
rgba(255,255,255,0.92)+0.4px — "DIRECTOR · FILM & MUSIC" - Bio: Inter 15pt
rgba(255,255,255,0.72), 1–2 lines - Location: a 12pt pin glyph + Inter 13pt
rgba(255,255,255,0.6)— "Los Angeles · 4 mi" - Actions (bottom-center, ~18pt from edge): Skip (26pt white-90% X, no circle), Heart (60pt circle, 1px white border, white heart — the focal action), Note (24pt white-90% message glyph, no circle)
Music Ticker
The signature flourish that makes Raya feel cinematic.
- Position: top of the slideshow, under the story bars
- Glyph: a 13pt vinyl-record or musical-note icon, white, 2px stroke
- Text: "{Artist} — {Track}" in Inter 11pt w500
rgba(255,255,255,0.85) - Equalizer: 4 white bars (2px wide, 1px radius), heights animating in a loop to imply playback
- Tapping it can expand to the full track / open in the linked music service
Member Chip
Interest / scene tags on the expanded profile.
- Pill, 999pt radius, 8pt/16pt padding, Inter 12pt w500
- Default: transparent fill, 1px
#2E2E2Eborder,#FFFFFFtext - Selected/primary: solid
#FFFFFFfill,#000000text (the only place a chip inverts) - No color states — selection is the black/white inversion only
Navigation
Top Nav (Slideshow)
- Effectively chromeless — the story bars *are* the top nav
- Optional: a lowercase
rayawordmark centered for 1.5s on entry, then fades out so the media is unobstructed - Trailing (on tap-hold/expand): a fine-line ⋯ for profile actions (report, share, hide)
Bottom Tab Bar (when shown — Messages/Profile screens)
- Height: 56pt + safe area
- Background:
#000000opaque (no blur — true black is its own surface) with a 1px#2E2E2Etop hairline - Tabs: Discover, Messages, Profile (minimal — 3, not 5)
- Icon size: 22pt, 1.5px fine-line stroke, never filled
- Active:
#FFFFFF; inactive:#5E5E5E - Labels: Inter 10pt w500, +0.4px; no active pill (the white tint alone signals selection)
Input Fields
Message Composer
- A single transparent field with a 1px
#2E2E2Ebottom rule only (no box) - Focus: the rule brightens to 1px
#FFFFFF - Placeholder: Inter 14pt
#5E5E5E - Send affordance: a white text "SEND" (uppercase, +1px) — no filled button in conversation
Settings / Profile Fields
- Grouped on
#0D0D0Dwith 1px#242424dividers (no card fill, no rounding on rows) - Row: label left
#FFFFFF, value/chevron right#9A9A9A - Editable: a
#2E2E2Eunderline that brightens to#FFFFFFon focus
Distinctive Components
Slideshow Profile — the music-scored, story-paced full-screen member presentation. The product.
Music Ticker — the white note glyph + artist/track + equalizer; the cinematic signature.
Story Bars — the segmented 2.5pt white progress bars that pace the slideshow and enable scrubbing.
Editorial Caption — the name + UPPERCASE role line + bio + location over the black scrim; the curated-creative voice.
Monochrome Inversion Chip — interest pills whose only "state" is black-on-white vs white-outline; the system's single interaction color cue.
The White Heart — the single white-outline circular focal action; the only "brand" moment, kept as an outline, never a fill.
Hairline System — the 1px #2E2E2E borders that replace every shadow; the black-on-black depth language.
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Caption bio truncates to 1 line; story bars stay 2.5pt; name 26pt |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Story bars + music ticker clear the Dynamic Island (sit below it) |
| iPhone 15/16 Pro Max | 430pt | Larger name (30pt); bio gets a 2nd line |
| iPad (portrait) | 768pt | Slideshow centered in a max-width 560pt frame on a pure-black surround |
| iPad (landscape) | 1024pt+ | Two-pane: slideshow left, expanded profile / message thread right, both pure black |
Dynamic Type
- Profile name, bio, section titles, message body: full scale
- Story-bar text, music ticker, role line, eyebrows, tab labels: FIXED (layout-sensitive over media)
- The caption block reflows upward if the bio scales, never overlapping the action row
Orientation
- iPhone: portrait-locked on Discover (the slideshow is portrait/full-screen by nature)
- Messages, Profile, settings: rotate freely
- iPad: full rotation with the two-pane split
Touch Targets
- Heart action: 60pt circle (the focal action — largest)
- Skip / Note: 44pt hit (26/24pt glyph, no circle but generous tap area)
- Story-bar scrub: full left / right thirds of the screen; center press-hold to pause
- Music ticker: 44pt minimum tap height to expand
- Tab icons: 22pt glyph, 44pt hit
Safe Area Handling
- Top: story bars + music ticker sit below the safe area / Dynamic Island (never under it)
- Bottom: the action row and any tab strip respect the home indicator; the media is full-bleed *behind* them
- The slideshow media extends into all safe areas (full-bleed); all chrome stays inside
- Keyboard: the hairline message composer rises above the keyboard; the thread scrolls on pure black
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-raya {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #df242b;
--link-hover-color: #b51b20;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #e5484d;
--button-text-color: #000000;
--button-hover-bg: #db1f25;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- vsco 95.4%
- shiseido 89.4%
- onitsukatiger 88.2%
- takashimaya 85.0%
- amadana 83.4%
Where this came from
- Source document
ios/design-md/dating/raya/DESIGN.md· 26.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.