Design guide·Dial Tone· the look on BookHomeCallStudioConsole ·All designs

Dial Tone

A phone that rings, and somebody actually answers. Heavy condensed uppercase, full pill buttons, soft 20px corners, and money set larger than anything else on the screen.

The ruleColourType The ringMoneyComponents LayoutOn a phoneVoiceHow to use it
01

One loud thing per screen

Dial Tone spends all of its boldness in a single place and keeps everything else quiet. On the booking screen that is the price. On the call it is the countdown. In the studio it is the money you have coming. A screen with three loud things has none.

Before you design a Dial Tone screen, answer one question in a sentence: what is the one thing this screen is about? That thing gets the condensed display face at its largest. Everything else drops to body weight and stays out of the way.
What is locked and what is free. Locked: true black, the gold coin #E8A61A, the wordmark, "Money talks. They actually pick up.", dark by default with a light toggle. Free to vary: the hero thesis, the type treatment, the signature, the layout. Dial Tone is one answer to the free half. Do not change the locked half to serve it.
02

Colour

Six values carry the whole system. Gold is the only accent, and it is never decoration: gold means either money or the one action you want taken. Green appears only on money that has actually moved. Red appears only on something destructive.

Ink#000000The page. True black, not a dark grey.
Card#141416Anything raised off the page.
Gold coin#E8A61AMoney, and the one action that matters.
On gold#241800Text sitting on a gold fill. Never white.
Paid green#30D158Money that has already moved.
Red#FF453AEnding a call. Nothing else.
Hairlinergba(255,255,255,.10)Every border and divider.
BANNED
Gold washrgba(232,166,26,.13)Banned 08/02. It renders as brown. Gold is never translucent: selected states are a gold border on the flat card surface.
Light mode is a considered palette, not an inversion
The page becomes warm paper #F5F5F8 and cards become white. The gold is the same #E8A61A in both themes, fills and text alike. ONE gold, never darkened. Use --gold for fills and --goldText for type, always. Never hard-code a hex in a component: every value here is a token.
Ghost, hairline border Gold as text
03

Type does the shouting

Four roles, and only four. The personality lives entirely in the first one: a heavy condensed uppercase face, set tight and large. If you find yourself reaching for a fifth role, you are solving a layout problem with type instead of with space.

Role 1 · Display
Money talks.
Condensed, uppercase, weight 900, letter-spacing -.03em, line-height .94. Class .cond. Page titles, card headings, option titles, prices, stat values. This is the voice of the direction, so use it for the one loud thing and for headings, and nowhere else.
Role 2 · Body
Live 1:1 video with people who don't pick up for anyone. There's no directory. A payphone is a private link, and you get it from the person it belongs to.
System sans, weight 400 to 700, 14.5px to 16px, line-height 1.6. Never below 16px for anything a person has to read on a phone, and never below 16px in an input, because iOS zooms the page when they tap it.
Role 3 · Label
Pick a length
11.5px, weight 800, letter-spacing 1.5px, uppercase, colour --tert. Class .tag. Section labels and small captions. It is deliberately quiet: it names a thing, it never competes with it.
Role 4 · Figures
$100 · 08:37 · 80%
Condensed with tabular-nums. Class .fig. Anything that counts or ticks: prices, countdowns, percentages. Tabular figures stop numbers jittering as they change, which matters on a live countdown.
04

The ring

The signature element. A gold receiver with rings pulsing off it, because the whole promise of the product is that somebody picks up. It carries the brand on its own, so a screen needs at most one.

The full ring, with the receiver
The homepage hero, and nowhere else on that page. Three waves, each delayed .87s, scaling from .6 to 1.8 as they fade.
The ring holding a person
WP
On a person's page and on the call, the receiver is replaced by their initials. It is the same component, so a person you are calling reads as a ringing phone.
<div class="ring" style="width:92px;height:92px">
  <span class="w"></span><span class="w"></span><span class="w"></span>
  <span class="rc">WP</span>
</div>
When not to use it. Not in the operator console, which is a tool and should stay calm. Not more than once on a screen. Not as a loading spinner. And the animation must respect prefers-reduced-motion, which the stylesheet already handles for you.
05

Money is the hero

Prices are set in whole dollars in this direction, never to the cent. Cents are the Operator's idea and they read as clerical here. A price is a statement, so it is the largest thing in its row and it never wraps.

A price inside an option row
Tap either one. The selected row takes a gold border and a gold wash, and its price turns gold. Selection is carried by aria-pressed, not by a class, so it is announced correctly to a screen reader.
A price as the one loud thing on the screen
Due on connect
$100
Used in the booking summary. Label small and quiet above, number enormous below. Nothing else on that panel competes.
06

Components

Every specimen below is the real component pulled from the stylesheet. Copy the class, not the pixels.

Buttons · .btn
Full pills, always. One gold button per screen: it is the thing you want done. Ghost is the alternative, fill is a quiet save, red is only for ending a call. Minimum height is 46px, and 54px for the large size, so every one clears the 44pt touch target.
Chips · .chip in .chips
Two across on a phone, four from 620px. Selected fills gold with dark text. Use for times and for day pickers, never for navigation.
Stat tiles · .stat
$128
Upcoming calls
2 scheduled
$40
Earned today
2 video calls
Two across on a phone, four on a desktop. Never four across on a phone: that is decoration, not information.
Money rows · .ledger
DonePaid out
07/23 · jump onGuest+$20
All time$40
Green for money already received, gold for money owed or coming. The total row takes the .tot fill.
Fields · .inp
Pill shaped, 52px tall, 17px text. Money fields carry a gold $ prefix inside the field, never in the label. Every field declares its inputmode and autocomplete so the right keyboard opens.
Pills, badges and notices
Paid (test) Not charged yet Live Most booked
Verification pending. The badge appears on your page once Pay Phone confirms you.
Pills state a status. The badge marks one option out of a set. The notice .note is a neutral card with a hairline border, for something the person needs to know. Never a gold-wash slab, never a gold left border, never decoration.
Cards · .card

Live calls

What a fan pays to jump on while you're live, and the longest each caller gets.

20px corners, hairline border, a condensed uppercase heading and a body-weight hint underneath. A card holds one job. If it needs two headings, it is two cards.
07

Layout, corners, space

The corner scale
999px
24px
20px
16px
999px for anything you tap: buttons, chips, pills, inputs. 20px for cards, stat tiles, ledgers and option rows. 24px for the one panel that is the point of the screen. 16px for notices. There is no 4px, 8px or 12px corner in this direction, and a sharp corner is always a mistake.
Container and breakpoints
Content sits in .wrap, max 1140px, with padding that breathes from 18px to 40px. Reading columns use .wrap.narrow at 780px. The breakpoints are 620px for chip grids, 760px for the nav collapsing and two-column blocks, 820px for four-across stats, and 940px for a page splitting into a main column plus a sticky side panel.
Sections breathe with clamp(40px,6vw,72px) between them. Space is how this direction stays calm while the type shouts, so when a screen feels loud, add space before you shrink type.
08

On a phone

The design is not finished until it has been looked at on a phone. Not checked for overflow, looked at.

The thumb owns the bottom. The action that ends a flow is a full-width button low on the screen, in a sticky dock if the page is long. The dock shows what you are about to pay above the button, so nobody taps blind.
10 min, Tue 8/4 · 7:00 PM$100
Book this call
The rest of the rules. The nav is a wordmark and at most two icon buttons; everything else goes in a menu sheet. A wide table becomes one card per row with label and value lines, never eight squeezed columns. A row of controls that cannot fit gets boxed and wrapped, so a Remove button plainly belongs to the row above it. Check 320, 375 and 390: those three widths catch nearly everything. Body text never drops below 16px and neither does an input.
09

Voice

Short, plain, and confident. The product is about money and access, so the writing is direct about both. It never oversells and it never apologises.

Write this
  • "Money talks." Footer signature: gold Money, white talks. The old tail "They actually pick up." is retired.
  • "You are only charged when the call actually happens."
  • "A payphone is a private link, and you get it from the person it belongs to."
  • Buttons say what happens: "Book this call", "Save live price", "Go live".
  • Dates as 07/28/2026. Money as $100.
Never write this
  • Em dashes. Use a comma, a period or a colon.
  • Anything that implies a directory: no "browse", no "who is on tonight".
  • Invented vocabulary. There are exactly two call concepts, Live and Scheduled calls, and the money page is Earnings.
  • Engine words in front of a person: no "webhook", no "endpoint", no "sweep".
  • Apologetic filler, or a button that says "Submit".
10

How to use it

One stylesheet and one script. The class vocabulary is shared across all the directions, so a screen written for Dial Tone can be re-skinned by swapping the stylesheet alone.

<script>(function(){try{if(localStorage.getItem('pp-theme')==='light')
  document.documentElement.setAttribute('data-theme','light');}catch(e){}})();</script>
<link rel="stylesheet" href="/lang-dialtone.css">
<script defer src="/lang.js"></script>
The inline script runs before paint so a person who chose light mode never sees a black flash. lang.js gives you the theme toggle (data-theme-toggle), the menu sheet (data-menu), radio groups (data-pick="name") and toggles (data-toggle), all driven by aria-pressed.
Do
  • Pick the one loud thing before you open an editor.
  • Use tokens, never a raw hex, so light mode comes free.
  • Build both themes and look at both.
  • Render at 390px and look at the picture with your own eyes.
  • Keep the class names shared, so the screen can be re-skinned.
Don't
  • Put two shouting elements on one screen.
  • Use the ring more than once, or in the console.
  • Print money to the cent. That is a different direction.
  • Invent a corner radius outside the four above.
  • Call a screen done from the code. A clean overflow check is not a look.
11

Locked in practice

Rulings made while setting the language live, 08/02/2026. These override anything above that disagrees with them.

Locked
  • The homepage is a SPECIAL page. The splash stays exactly as approved, outside this language. Every other screen is Dial Tone.
  • ONE gold, #E8A61A, in BOTH themes. Light mode never darkens it.
  • Gold is NEVER translucent. No washes, no soft fills: they render as brown. Selected state = gold border, flat surface. Highlight pill = gold hairline border, transparent fill.
  • The price wears no chrome. On an option row the price is bare gold numerals: no pill, no fill, no border, tabular figures. The price is the loudest thing on the screen, so nothing is allowed to box it in. Locked 08/04/2026 after the last gold-wash chip came off .opt .p. This holds in the base stylesheet AND in Dial Tone, so the two cannot drift.
  • Footer on every page: gold Money + white talks. Nothing else.
  • Form pages: one 600px column. The headline fills the line, one line, clamp(36px,5.6vw,54px), no forced breaks.
  • Notices are neutral: card background, hairline border. Post-submit states live behind the action, not on the default view.
  • Onboarding is ONE page: name, what you do, photo, handle, email only when signed out, one submit, with a sticky live preview of the public page beside the form.
  • Booking time is day-then-time: two-line day chips (condensed day over date), every open time that day as chips, with a count.
  • Buttons are plain verbs about the object: "Claim your line", "Book 10 min for $100".
Banned
  • The gold left border on a card. It screams template.
  • Monospace anywhere a person reads. SF only.
  • Compound button labels that explain the next screen ("Claim it, open your studio").
  • Columns narrower than the live page they replace. Measure the live one first.
  • "Studio", anywhere. Brian picked the name 08/02: it is your LINE. Nav says My line, the header says (Name)'s line.
Living guide: every specimen on this page is the real component from lang-dialtone.css, so it cannot drift from the product. Written 08/01/2026, section 11 added 08/02/2026, from the booking screen at /dt-book. The other directions and their screens are at /designs.