Apple's system design language with the Pay Phone brand laid over it. This was never art directed, it accumulated. That is not an insult, it is an accurate description, and it is why the product reads as trustworthy but not as anything in particular.
Take Apple's stock iOS appearance, keep every one of its greys, blues, greens and reds, set headings heavy, and add two brand things: true black instead of Apple's near-black, and a gold coin. That is the whole system. It is on all 25 pages of the live app.
Its strength is that nothing feels foreign. A person who uses an iPhone already knows how to read it. Its weakness is that it has no signature, no type personality, and no single point of view, so it is indistinguishable from any other competent app.
Six of these are Apple's own system values, used unchanged. Two are yours.
#F5F5F7, cards
become white, and gold darkens to #9A7B1E for text.One treatment, used everywhere: San Francisco at weight 900,
Black, with tracking pulled to -.045em. There is no second voice. Nothing is condensed,
nothing is light, nothing is mono. This was unified on 08/02/2026: the homepage used to be 900 and every
other screen 800, so the same brand line was set two different ways.
h1.big
-.045em, scaling
clamp(40px, 8vw, 84px). The gold span is the only accent the headline gets.h2.big
clamp(28px, 4.4vw, 40px)..eyebrow
1.6px, gold. The one label style..sublede
The one piece of the system that is yours rather than Apple's. It is built in CSS, not an image, so it stays sharp at any size and picks up the page colour through its slot.
.coin
.coin{border-radius:50%;
background:radial-gradient(circle at 36% 30%, #F5D889 0%, #E8A61A 48%, #B8901E 100%);
box-shadow:0 24px 60px rgba(232,166,26,.28)}
.coin::after{width:56%;height:24%;border-radius:3px;background:var(--bg)}.btn
980px, weight 700, three sizes at
.sm / .md / .lg, and .block for full width. The
blue variant exists in the stylesheet but is used exactly once in the whole product, so treat gold as
the only real primary..card
.stat
.field
.moneyfld
$
$ sits inside the field, in front of
the number, never in the label..pill
.tm
.notice
.acard .listrow .qrow .qcard .opt
.chip .daychip .menurow .kpi
.divider .fine .otp .summ .rail
.steps .gatescreen, plus the whole operator console set
.opside .optabs .opmain .opstat
.tblwrap .cellu.A guide that only shows the good parts is marketing. These are real, measured, and worth fixing whichever direction you eventually pick.
The site used to carry a flat coin in every nav and footer and a glossy one in the homepage hero, and it set the brand line at weight 900 on the homepage and 800 everywhere else. Both are now single values, documented above, applied across all 28 screens.
5, 7, 9, 10, 12, 14, 16, 18, 20, 22, 980 and 999px are all declared. The 980 and 999 are the same intention written twice. A card is 22px but a stat tile beside it is 18px, and nothing decides which.
styles.css has 255 lines, admin.css has 232, and another 76 sit inline
inside index.html. .notice, .empty and the whole call screen
are only in that inline block, which is why this guide has to restate a few of them by hand.
.pill was defined solely as .qrow .pill. Used anywhere outside a
.qrow it rendered as bare text: no background, no padding, and the faintest colour in
the palette. Found and fixed on 08/01/2026, and the specimens above are the repaired version.
There are now three light-mode values for gold text across the codebase: this app uses
#9A7B1E, Dial Tone uses the full brand #E8A61A by decision on 08/02/2026,
and The Operator and Private Line use #8A6D14. Whichever direction wins, this collapses
to one value.
If you are building inside the live app today, this is what you inherit.
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="/admin.css">
<!-- plus the inline <style> block already in index.html -->.btn.gold for the primary action, .card
for a surface, .field for input, .notice to tell someone something, and
.eyebrow to label a section. When you need a corner, pick the one already used by the
nearest component rather than inventing a thirteenth.