Pay Phone · Design Guide · v1 · 07/17/2026 · governs the iOS/Android app, the website, and every mockup
One system. Money is loud, chrome is quiet.
Locked upstream and inherited here: D2 Coin O wordmark · slogan "Money talks." · gold #E8A61A (beat the ΑΦΑ old golds) · splash = wordmark alone on pure black · logo at entrances only. This guide turns those into the rules every screen must pass. If a screen violates a numbered rule below, it doesn't ship.
1 — Brand atoms
The wordmark carries the name; the coin alone carries the icon at small sizes. Nothing else represents the brand.
PAYPHNEMoney talks.
The switchboard principle (locked, stated wherever a number is collected): phone numbers identify you to Pay Phone, never to the other side of the call. A fan never sees a celebrity's number; a celebrity never sees a fan's as a dialable thing. Every call — video or audio — happens ON the platform. Asking to take it off-platform is a conduct violation. Canonical copy (the founder, locked): "All calls happen in the Pay Phone app. Dre can't call you, you can't call him." + "So he can text you when new times open. Unsubscribe anytime."
Placement law (locked): brand appears at entrances only — splash, sign-in, discovery masthead, notifications, web nav. Never on: the call, the celebrity's Today/register, the payment sheet. The payday moment gets the coin alone. Splash is the wordmark on pure black with nothing else, ever.
2 — Color
A dark, layered system. Gold means money or the primary action, nothing else. Green means live/confirmed, nothing else. If a screen has gold on something that isn't money or the one main action, it's wrong.
Background
#0B0D11
App base. Web base is #0A0C10. Splash alone uses pure #000.
Surface 1
#15181E
Cards, list groups, sheets.
Surface 2
#1C2027
Nested elements, pressed states, icon wells.
Gold
#E8A61A
Money figures, the ONE primary button per screen, active tab. Tint at 12% for gold cards.
Green
#30D158
Payphone open, paid, on-time, success. Tint at 12% for chips/strips.
Red
#FF453A
Destructive + recording dot + no-show only. Tint at 14% for chips.
Text tiers
#FFF · 62% · 38%
Primary white; secondary rgba(255,255,255,.62); tertiary .38. Never other grays.
Hairline
rgba(255,255,255,.08)
All separators, 1px. No borders heavier than this inside cards.
3 — Type
SF Pro (system). Six sizes, no others. Money and times always use tabular numerals so columns never wobble.
Large title — Today31 / 800 / -0.022em · one per screen
Title — Jordan M.19 / 700 · hero names, sheet titles
Row title — The call · 10 minutes15.5 / 600 · list rows, buttons 15–16/700
Secondary — ran the full 10:00 · both joined on time13 / 400 / 62% white
4pt grid. Page margin 20. Card padding 16. Row height ≥ 52. Radii: cards 16, buttons 13, chips 6, icon wells 8. Full-screen sheets 22 top. One shadow in the whole system (sheets only) — depth comes from surface color, not shadows.
5 — Iconography
Emoji are banned from product UI. Permanently. Icons are drawn strokes: 1.7pt, round caps, 22px box in rows, 24px in the tab bar. One weight everywhere.
TodayHoursEarningsAudienceArchiveCallExportReport
6 — Components
The five building blocks. If a screen needs a sixth, the screen is probably wrong.
Buttons — one primary per screen
Open the lobbyAdd to calendarEnd call
Chips — states, never decoration
PAIDOPENNO-SHOW · REFUNDEDRECORDED
The row — time · who/what · money · state
7:45PM
Jordan M.
10-min call · 3rd call with you
$100 PAID
8:40PM
Open slot
unsold · list texted 6:12 PM
OPEN
7 — Data & copy law
The rules that make screens self-answering. These came directly from review failures; they are not optional.
✕ WRONG
next caller 7:45
✓ RIGHT
Next call · 7:45 PM tonight
RULE 7.1
Every time carries AM/PM and a day word (tonight, Tue Jul 28). No exceptions, including chips and captions.
✕ WRONG
Jordan M. · 10:00
✓ RIGHT
Jordan M. · 10-min call· ran the full 10:00
RULE 7.2
Durations are labeled ("10-min call"), outcomes are stated ("ran the full 10:00"). A number never stands alone.
✕ WRONG
extended
✓ RIGHT
extended 5 min mid-call (+$50)
RULE 7.3
Money is always gold, always tabular, always attributed. Celeb-facing figures are post-split ("what you see is what lands").
Voice — rule 7.4, the literal test: the product explains itself in one sentence, and that sentence is the copy: "People pay to call your phone." If a stranger can't parse a payphone in one read, rewrite it literally (the ban was earned by "Your payphone came with you" — meaningless, killed 07/17/2026). Confident, short, second person. No anxious over-explaining, no platform name-dropping, no engine jargon, no metaphors that outrun the payphone itself. The one free thing is the ring — copy never promises anything else free. Inherited bans: em dashes in product copy, real names in samples.
8 — Web
Same tokens on a 1140px container. Web type scales up (hero 78/800/-0.035em, section 34/800), spacing doubles (sections 64px), and the booking module reuses the app's row/chip/button components verbatim — a fan should feel zero seam between the celeb's page and the app. Nav: wordmark left, one gold CTA right. Footer carries every policy link. Live site: /site/ is the reference implementation.
9 — The screen checklist
Every screen answers these before it ships: What's the one thing this screen wants me to do? (one gold element says it) · Is every number self-explanatory? (rules 7.1–7.3) · Does it compose at full height? (no dead half-screens) · Do icons come from §5? · Would a Booksy barber and a Cameo fan both find it obvious?