The master kit. Two colour wheels, 8 devices, the type and
spacing scales, and the law that governs all of it. Every value on this page is read from
ptd-tokens.json — the same file the storefront, the doc covers and the social
templates are generated from. Nothing here is typed by hand, so nothing here can drift.
VersionV12 · PRISM PAPER COKE DELUXE
Locked2026-08-12
MAIN14 families
RESERVE12 tones
Devices8
Type setV10
The registered mark.
§ 01 · PUNCTUATION, NOT A SUPERSCRIPT
PAY THE DØLLS® is federally registered, Reg. No. 8,365,768. Bebas draws ® at FULL CAP HEIGHT, so the old superscript treatment makes it hang off the corner. It is set as a full stop instead: scaled to the weight of a period, sat on the period line, hugged to the S.
PAY THE DØLLS®
DISPLAY · .18 · 48px and up
hero, band, opener, OG
PAY THE DØLLS®
TEXT · .22 · 16 to 48px
card titles, footer
PAY THE DØLLS®
MICRO · .26 · under 16px
labels, receipts
PAY THE DØLLS®
MASTHEAD · .30 · 24 / 15 / 13px
the one surface with a legibility problem
Why it is not a find-and-replace
Bebas draws the two glyphs on completely different plans. Measured off
bebas.woff2, 1000 upm. ™ is drawn as a superscript, which is why the old
<sup> treatment worked for two years. ® is drawn at full cap height
and is the widest glyph in the wordmark. Superscripted it hangs off the corner like a balloon.
Glyph
Advance
Ink, bottom → top
Reads as
S
372
-10 → 710
the cap
period
188
0 → 106
the full stop
™
598
344 → 700
already a superscript — why <sup> worked
®
738
-10 → 710
a whole extra letter. the widest glyph in the wordmark
The rule
The ® is punctuation. Scale it to the weight of a full stop, sit it on the
period line, hug it to the S. It closes the sentence. That is the house voice already: the full
stop is the default beat, and now the beat is the trademark. Never raise it into a corner.
Always drawn in Bebas, whatever type surrounds it. Bebas fills
.72 of its em with ink where SF Mono fills .536, and it is a heavy condensed face,
so its ring keeps a thicker stroke at the same height. Measured at 1× / 2× / 3× across both
masthead sizes: the SF Mono ® never holds its counter at 15px on a 2× phone, and Bebas does.
One face also makes the mark a brand element rather than a shape that changes with its
surroundings.
The sit targets the period line, y=0 — not the S. The period is a
106 × 106 square sitting flat on the baseline. The S is round, and rounds overshoot: it dips to
y=-10 so it does not read small beside a flat-sided D. Aligning the ® to that overshoot hangs it
BELOW the line the D and the L sit on, which reads as not-flush. Because the target is zero, the
offset does not depend on the scale, so it is one flat number and cannot drift.
Prose takes no class. "PAY THE DØLLS® is a registered trademark" in a body
paragraph is typed bare. SF Mono and JetBrains already draw ® small and high, around .75 of cap,
which is exactly where 31 of 35 measured instances sit. .rm is for the WORDMARK.
What the field does
® ink height over dominant letter height, measured off twenty-two live brand
sites. Median of the five baseline-set marks is .195. Not one of them superscripts
it. Coca-Cola's ~.10 is right for Coke and wrong for us: their mark is detached and printed
at 50mm on a can, ours is attached and lives at 24px on a screen.
Brand
Wordmark
Ratio
Velcro
ALL CAPS
.225
Carhartt
lowercase
.205
Intel
lowercase
.195
Sharpie
script
.169
Coca-Cola
script
~.10 · detached
Weber
lowercase
.092
Never
Never superscript it
That is the ™ treatment and it is retired.
Never align to the S
The S overshoots. Align to the period line, y=0.
Never draw it in the surrounding face
It is Bebas everywhere, in every lockup.
Never go below .147
Literal period parity. A period is a solid square and the ® is a thin ring; matched at the same ink height the ring closes and reads as dirt.
Never touch the Shopify handles
Six product handles carry a literal ™. They are fetch keys, not copy. Changing them 404s the home page and the QR scanner.
Never drop the track claw-back
3px desktop, 2px at ≤900px, 1.2px at ≤400px. Without it the mark floats off the S and reads as a footnote instead of a stop.
The needlefly.
§ 02 · THE SYMBOL
The cunty butterfly dagger, locked 2026-08-13. It stands BESIDE the wordmark and never replaces it: the registration is on the words, so the ® never attaches to the symbol. Black on paper or reversed. FLAT ONLY, never traced, never recoloured.
THE PRIMARY · 6250 × 6250 · ALPHA
REVERSED · ON INK
SMALL · THE FAN STILL SEPARATES
The cunty butterfly dagger. Two opposed fans of straight ruled lines meeting at a waist, thrown between a long rising point and a long falling one. It reads soft at a glance and sharp on the second look, which is the correct order. Locked by ZØ, 2026-08-13.
The curve is made of straight lines. It is not drawn: it is the envelope those straight lines make between them, the same geometry that builds a hyperboloid out of straight rods. That is why it must never be redrawn or traced. A trace turns ruled lines into approximated beziers, and that is a different mark.
It does not replace the wordmark. The registration is on the WORDS, Reg. No. 8,365,768, so the ® keeps attaching to PAY THE DØLLS® and never to the symbol. The needlefly is a symbol beside the words, not a substitute for them. How the ® is set is §01; the wordmark itself is §03.
Never
Never recolour it
No wheel tone, no gradient, no sheen. Colour indexes what a thing IS, and the mark is not a section. It is ink, or it is reversed to paper.
Never trace it
A traced needlefly is a different mark. The whole argument is that the curve is made of straight lines.
Never on a photograph
Not without a flat ground behind it. The fan is fine line work and it disappears into texture faster than type does.
Never ARROWFLY
Tried for one afternoon on 2026-08-13 and retired. NEEDLE reads closer to the DØLLs, and to estrogen. An arrow is only a direction.
There is no vector. This blocks real work.
The mark exists only as a raster. The master is 6250 × 6250 with alpha, which is 20 inches at 300dpi, so the storefront, social, a favicon and print to about 20 inches all come off it cleanly. 1.7_source/pay the dolls logo.ai is not this artwork — it converts to a 1440 × 900 board of about 110 grey paths and renders blank. What is needed is the vector export from wherever this was drawn. Not a trace. Until it exists, a single-colour SVG favicon, an inline SVG header mark, cut vinyl, foil, embroidery and licensing are all blocked.
Still to rule on
THE LOCKUP
Needlefly left of the wordmark, above it, or standing alone. Undecided.
CLEAR SPACE
Expressed in the mark's own width, never in px. Undecided.
MINIMUM SIZE
Cannot be settled until the vector exists, because the fan closes up before the outline does.
THE STOREFRONT SWAP
Header, favicon, OG receipt, app icons. Outward-facing, so it needs an explicit go-ahead before it deploys.
Full spec: brands/01_pay_the_dolls/identity/PTD_NEEDLEFLY.md · book ch.03.
Logo & wordmark.
§ 03 · THE MARK
SF Mono 700 at 3px tracking. The slashed Ø is not decoration and is never substituted. Federally registered, Reg. No. 8,365,768.
PAY THE DØLLS
WORDMARK · SF MONO 700 · 3px TRACKING
PAY THE DØLLS
REVERSED · ON INK
PTD
SHORT MARK · SQUARE CONTEXTS
PAY THE DØLLS®
MINIMUM SIZE · 11px. BELOW THIS, USE PTD
The rules. The slashed Ø is not optional and is never substituted with O or 0. Clear space on every side is the cap height of the D. Minimum width 96px. The mark is federally REGISTERED, Reg. No. 8,365,768, so it carries the ®. Never the ™, which is retired. How the ® is set is §01.
Never. Do not outline it, do not add a gradient or a sheen, do not set it in Bebas, do not letterspace it further, do not place it on a photograph without a flat ground behind it, and do not recolour it to a wheel tone. It is INK or it is reversed to white.
Tokens.
§ 04 · THE GROUND
The base values. Ink, paper, the surfaces, the greys, the action colour, and the body ink that every page reads from.
Token
Value
--ink
#0A0A0A
--paper
#FFFFFF
--surface
#F4F4EE
--card
#FAFAF7
--line
#E2E2DA
--muted
#6B6B66
--dim
#9A9A94
--act
#00FF88
--act-ink
#06301C
--body-ink
#31312D
--mint-shadow
#007A42
--mint-p
#B8FFD9
Type.
§ 05 · THREE FACES, ELEVEN SIZES
Three faces and no fourth. Bebas displays, JB labels, SF Mono sets text. Display is fluid, text is fixed: fluid mono breaks column alignment. Condensed caps take POSITIVE tracking that opens as size comes down, with leading tightening as size goes up. A NEGATIVE ladder was tried twice and rejected twice: on Bebas it clumps into a fake bold. If it is not a token, it does not ship.
Deliverywoff2, embedded as a data URI on every kit page and served by next/font on the storefront.
Set inEvery headline. --d1 through --d6, .sec-head h2, .mast h1, and the ® glyph inside the wordmark whatever face surrounds it.
Never'Bebas Neue' as the family name in a KIT stack. The kit calls it 'Bebas'A bold. There is no bold to load, so the browser fattens the outlines and condensed caps turn to mudNegative tracking. Tried and reverted twice
DeliveryNOT embedded. A system face on Apple hardware; everywhere else the stack falls through to ui-monospace and then to JB. The specimen above is drawn in whichever of those your machine reached first.
Set inbody, --t1 through --t3, and the wordmark at 700.
NeverAssuming it is present. It is a fallback CHAIN, not a webfontSetting a headline in it. Display is Bebas
The weight guard
Bebas ships one weight, so a heading that inherits a bold ancestor has nothing to load and the browser SYNTHESISES one by fattening the outlines. Every page carries this or the condensed caps go to mud. It is the single missing line that made the kit look wrong on 2026-08-06, and the fonts were never at fault.
h1,h2,h3,h4,h5,h6{font-weight:400;margin:0;}
Two things still open. The kit declares JB at font-weight:400 only, while the kit itself asks for 700 on § numbers and chips, so those are synthesised rather than loaded. And SF Mono is Apple's, licensed for interface work, which is why the wordmark is cut twice in the logo bank. Neither is settled here.
The sizes
Token
Size
Leading
Tracking
Specimen
--d1
clamp(40px,5.5vw,100px)
.9
.01em
Ag
--d2
clamp(34px,4.6vw,82px)
.92
.01em
Ag
--d3
clamp(34px,4.4vw,60px)
.94
.015em
Ag
--d4
clamp(28px,3.2vw,44px)
.96
.015em
Ag
--d5
clamp(22px,2.2vw,30px)
.98
.02em
Ag
--d6
clamp(18px,1.7vw,22px)
1
.03em
Ag
--t1
16px
The quick brown fox
--t2
14px
The quick brown fox
--t3
12px
The quick brown fox
--t4
11px
The quick brown fox
--t5
9.5px
The quick brown fox
Spacing.
§ 06 · AIR DOES THE WORK
8px base, widened at the top for luxe. In luxury commerce size signals cheap and space signals expensive, so sections breathe on 104–160px of rhythm.
--sp18px
--sp216px
--sp324px
--sp432px
--sp548px
--sp672px
--sp7104px
--sp8160px
Applied. Where each token actually goes.
Context
Token
Value
Note
Page · max width
.v8-wrap
1400px
the STOREFRONT container
Page · side margin, desktop
.v8-wrap padding
40px
Page · side margin, mobile ≤760
.v8-wrap padding
20px
Section · vertical rhythm
--sp7
104px
the luxe step
Section head → body
--sp5
48px
Section head · gap below
--sp2
16px
padding only. NO underline
Heading → lede paragraph
--sp4
32px
Eyebrow → heading
--sp3
24px
Grid gap · tiles and products
--sp3
24px
Card or tile · inner padding
--sp3
24px
Tile · swatch band → name
--sp3
24px
Product image → name
--sp1–2
8–16px
Name → price
--sp1
8px
Button padding
16 / 32
16×32px
44px touch target
Footer · top padding
--sp5
48px
Two containers, and they are not the same thing. .v8-wrap at 1400px is the STOREFRONT. .wrap at 1140px is this kit page and brand-kit.html, which run a narrower measure because they are documents, not shopfronts. Reading one number off the wrong one is how a page ends up looking subtly off without anything being obviously wrong.
The wheels.
§ 07 · TWO WHEELS + A UNION
Every tone is a three colour stack: light · core · deep. MAIN indexes a section of the platform. RESERVE indexes what a member pays. ALL IN is both, for an all-encompassing document. The range is chosen by the DOCUMENT, never by taste.
Wheel one · MAIN · 14
Wheel two · RESERVE · 12
Wheel one · MAIN — the stacks
MINTBUY · SHOP#B8FFD9#00FF88#00A85A
GREENSELL · LIST#B7F5CE#3DD97A#12A354
LIMELIST ON SHOPIFY#E4F6BE#9BE23D#6D9E17
YELLOWLEGAL · TERMS#FFF3B0#FFE24D#C9A800
AMBERPTD CLUB#FFE6B0#FFC24D#C88A00
ORANGEFEES#FFD8B8#FF9A3D#C96A16
CORALFUNDRAISING#FFCBB8#FF7A4D#D24E22
REDMISSION#FFC2C2#FF5D5D#C62E2E
ROSELICENSING#FFC6DC#FF6BA6#C63C74
MAGENTATECH STACK#FFC2EE#FF6BD6#C32FA0
VIOLETSERVICES#E1D4FF#A98BFF#6E4CD8
INDIGOBRANDS · HOUSES#D0CCFF#7C6BFF#4B39C9
BLUEDOCS#CADAFF#5B7BFF#2A4FD0
CYANAI#BEEFFF#35E0FF#0090C9
Family
light
core
deep
Indexes
MINT
#B8FFD9
#00FF88
#00A85A
BUY · SHOP
GREEN
#B7F5CE
#3DD97A
#12A354
SELL · LIST
LIME
#E4F6BE
#9BE23D
#6D9E17
LIST ON SHOPIFY
YELLOW
#FFF3B0
#FFE24D
#C9A800
LEGAL · TERMS
AMBER
#FFE6B0
#FFC24D
#C88A00
PTD CLUB
ORANGE
#FFD8B8
#FF9A3D
#C96A16
FEES
CORAL
#FFCBB8
#FF7A4D
#D24E22
FUNDRAISING
RED
#FFC2C2
#FF5D5D
#C62E2E
MISSION
ROSE
#FFC6DC
#FF6BA6
#C63C74
LICENSING
MAGENTA
#FFC2EE
#FF6BD6
#C32FA0
TECH STACK
VIOLET
#E1D4FF
#A98BFF
#6E4CD8
SERVICES
INDIGO
#D0CCFF
#7C6BFF
#4B39C9
BRANDS · HOUSES
BLUE
#CADAFF
#5B7BFF
#2A4FD0
DOCS
CYAN
#BEEFFF
#35E0FF
#0090C9
AI
Wheel two · RESERVE — the stacks
SAGEPTD CLUB · DL · $5the everyday card#DCEFE5#9FD3B8#5C9C7C
CERULEANPTD CLUB · DL+ · $10the first step up#B4D8F5#2A86D8#1A5C99
GOLDPTD CLUB · TRADE · $25the one everybody knows#F0DFA8#C9A227#8A6B1F
ROYALPTD CLUB · TRADE PRO · $50the blue in the middle#A9C7E8#1F5FAE#143F76
PLATINUMPTD CLUB · CHASER · $100the status card#EDEEEF#C9CBCD#8E9194
CENTURIONPTD CLUB · CHASER MAX · $500invitation only#BFBFBA#0E0E0E#000000
HARRODSHELD OPENheld open. was VERS CAPITAL until 2026-08-06#C7A886#6B4A2E#43301E
CHROMEVERS CAPITAL · GROUNDthe panel the account sits on#F2F3F4#E3E5E7#B3B7BB
NECTARHELD OPENheld open. was a VERS CAPITAL pillar for one pass on 2026-08-06#C9B0F0#7B4FCF#4E2E90
VITALITYHELD OPENheld open. was a VERS CAPITAL pillar for one pass on 2026-08-06#F0A8B3#C8102E#8A0A1F
BONVOYHELD OPENheld open. was a VERS CAPITAL pillar for one pass on 2026-08-06#B6BBBF#3F4448#22262A
MIDNIGHTVERS CAPITALthe account itself, off the ladder#9AA0B0#15161C#08090C
Tone
light
core
deep
Surface
Price
Note
SAGE
#DCEFE5
#9FD3B8
#5C9C7C
PTD CLUB · DL
$5
the everyday card
CERULEAN
#B4D8F5
#2A86D8
#1A5C99
PTD CLUB · DL+
$10
the first step up
GOLD
#F0DFA8
#C9A227
#8A6B1F
PTD CLUB · TRADE
$25
the one everybody knows
ROYAL
#A9C7E8
#1F5FAE
#143F76
PTD CLUB · TRADE PRO
$50
the blue in the middle
PLATINUM
#EDEEEF
#C9CBCD
#8E9194
PTD CLUB · CHASER
$100
the status card
CENTURION
#BFBFBA
#0E0E0E
#000000
PTD CLUB · CHASER MAX
$500
invitation only
HARRODS
#C7A886
#6B4A2E
#43301E
—
—
held open. was VERS CAPITAL until 2026-08-06
CHROME
#F2F3F4
#E3E5E7
#B3B7BB
VERS CAPITAL · GROUND
—
the panel the account sits on
NECTAR
#C9B0F0
#7B4FCF
#4E2E90
—
—
held open. was a VERS CAPITAL pillar for one pass on 2026-08-06
VITALITY
#F0A8B3
#C8102E
#8A0A1F
—
—
held open. was a VERS CAPITAL pillar for one pass on 2026-08-06
BONVOY
#B6BBBF
#3F4448
#22262A
—
—
held open. was a VERS CAPITAL pillar for one pass on 2026-08-06
MIDNIGHT
#9AA0B0
#15161C
#08090C
VERS CAPITAL
—
the account itself, off the ladder
The grounds
Grounds stay white or black. Nothing else is a ground — --surface
is a card and tile fill and never a page.
WHITE#FFFFFFBLACK#0A0A0A
Ink on a core
Label ink is derived from luminance, never picked. CENTURION is
#0E0E0E and PLATINUM is #C9CBCD, so any single hardcoded label colour
is guaranteed wrong for one of them.
Tone
On core
Ink
Soft
SAGE
Aa
#10301F
rgba(16,48,31,.62)
CERULEAN
Aa
#FFFFFF
rgba(255,255,255,.7)
GOLD
Aa
#2B2007
rgba(43,32,7,.62)
ROYAL
Aa
#FFFFFF
rgba(255,255,255,.7)
PLATINUM
Aa
#17181A
rgba(23,24,26,.58)
CENTURION
Aa
#F4F4F0
rgba(244,244,240,.6)
HARRODS
Aa
#F6F0E8
rgba(246,240,232,.66)
CHROME
Aa
#17181A
rgba(23,24,26,.58)
NECTAR
Aa
#FFFFFF
rgba(255,255,255,.7)
VITALITY
Aa
#FFFFFF
rgba(255,255,255,.7)
BONVOY
Aa
#F4F4F0
rgba(244,244,240,.6)
MIDNIGHT
Aa
#F4F4F0
rgba(244,244,240,.6)
The ladder.
§ 08 · WHAT A MEMBER PAYS
Six rungs and the account. A reserve tone is assigned per tier editorially, never derived from a price band, which is why the ladder reads from across a room before a number resolves.
Tone
Tier
Price
Core
Note
SAGE
DL
$5
#9FD3B8
the everyday card
CERULEAN
DL+
$10
#2A86D8
the first step up
GOLD
TRADE
$25
#C9A227
the one everybody knows
ROYAL
TRADE PRO
$50
#1F5FAE
the blue in the middle
PLATINUM
CHASER
$100
#C9CBCD
the status card
CENTURION
CHASER MAX
$500
#0E0E0E
invitation only
The account is MIDNIGHT and sits off the ladder — never put it on a
tier, and never put a tier tone on the account. 4 tones stay open and index
nothing yet: HARRODS, NECTAR, VITALITY, BONVOY.
The devices.
§ 09 · THE LIBRARY
A device says WHAT carries the colour; the wheel says WHICH colour. If a surface needs something that is not on this list, it goes in the library first — never improvised on the page.
01
BAND
Every tone in the range, full bleed across the text measure. STACK is the full three steps, THREE SQUARES TALL: light over core over deep. CORE collapses the stack to its middle step and runs one square tall. The range is chosen by the document, not by taste.
MAIN · STACK
MAIN · CORE
RESERVE · STACK
RESERVE · CORE
ALL IN · STACK
ALL IN · CORE
Use it for
MAIN on a platform-wide document that is about the platform.
RESERVE on a membership or account document.
ALL IN on a full, all-encompassing document. The annual, the master kit, anything that covers both halves of the business.
STACK is the default. Three squares tall, always. Two steps is not a stack and is never correct.
CORE when the band sits against flat site colour, runs small, or has to read hard. It is the same range collapsed to its middle step.
A runner along the bottom of interior deck slides.
Never
Never on a section document. It says everything, and a section document is about one thing.
Never twice in one document.
Never mixing ranges by hand. If a document needs both, it is an ALL IN document and takes the full run.
Never mixing STACK and CORE in one document. Pick one and hold it.
Never a two-step band. The stack is three or it is CORE.
DOC PAGE 1: platform-wide only · DECK TITLE: platform-wide only · DECK INTERIOR: bottom runner · WEB SECTION: docs index only
02
STRIP
One tone in its own three steps. Light over core over deep.
MAIN · GREEN
RESERVE · GOLD
RESERVE · MIDNIGHT
Use it for
THE DEFAULT. Page one of any section document, in that section's family.
A membership document, in that tier's reserve tone.
The top of a web section page.
Never
Never three different tones. Three steps of ONE tone is what stops anybody picking a colour by hand.
Never on an all-encompassing document. Use BAND · ALL IN.
Never alongside another asset on the same page.
DOC PAGE 1: DEFAULT · DECK TITLE: section decks · WEB SECTION: page top
03
MARKER
A single core on the sheet edge. One colour, no gesture.
MAIN · CORAL
RESERVE · CENTURION
RESERVE · MIDNIGHT
Use it for
Legal, fee schedules, anything that must not look like marketing.
Interior running heads, where an accent has to stay out of a table's way.
Never
Never without the tone name in the meta block, until the key is published.
Never in a light or a deep step. The marker is always the CORE.
The chips broken off the grid and let move. Same tones, but the squares run at different lengths on different lanes, with bar marks behind them. It is roughly a fifth full on purpose: the rests are as much of the device as the notes. Black is a note in the run, not a ground.
MAIN
RESERVE
Use it for
Anything with a tempo. Campaigns, drops, release notes, the roadmap.
RESERVE on a membership campaign, so the drop reads as CLUB and not as the marketplace.
ALL IN on an all-encompassing campaign, the same rule as BAND.
Deck openers for the same.
Never
Never hand-drawn. The geometry is fixed and the colour is assigned by note index into the range. Place one note by eye and the whole thing becomes decoration.
Never mixing ranges inside one roll. Two black notes are pinned on purpose; everything else comes from the range in order.
NEVER compact it. Tight lanes and back-to-back notes turn a clip into a pattern swatch. If it needs to be smaller, use fewer lanes, never less air.
Never on a contract, a fee schedule, or anything legal.
DOC PAGE 1: campaigns only · DECK TITLE: campaign decks · WEB SECTION: campaign pages
Where each is allowed.
§ 10 · THE MATRIX IS THE RULE
A blank is not an invitation. The web implements four of the eight; the rest are print, decks or campaign surfaces.
Device
DOC PAGE 1
DOC INTERIOR
DECK TITLE
DECK INTERIOR
WEB SECTION
BAND
platform-wide only
—
platform-wide only
bottom runner
docs index only
STRIP
DEFAULT
—
section decks
—
page top
MARKER
legal + fees
edge rule
—
—
—
CHIP INDEX
series + handbooks
—
series decks
—
large doc sets
CHIP BAND
—
—
—
bottom runner
—
CHIP SINGLE
—
running head
—
corner mark
nav rows
SPINE
covers + breaks
—
sidebars
sidebars
—
MIDI
campaigns only
—
campaign decks
—
campaign pages
Covers.
§ 11 · APPLIED
One mark per document, and that mark is the document's identity. Never two. The range comes from what the document is, not from how it looks.
MAIN · STRIP
SHOP.
One tone, three steps. The default page opener.
PAY THE DØLLS™next question?
MAIN · BAND
THE DOCS.
Every tone in the range. Docs index only, never twice.
PAY THE DØLLS™next question?
RESERVE · STRIP
THE CLUB.
A membership document takes RESERVE, never a MAIN family.
PAY THE DØLLS™next question?
RESERVE · CHIP INDEX
TRADE.
The rung is marked by SIZE. Every chip stays at full core.
PAY THE DØLLS™next question?
ALL IN · BAND
THE WHOLE THING.
Both wheels, one run. For an all-encompassing document.
PAY THE DØLLS™next question?
RESERVE · MARKER
VERS CAPITAL.
The account sits off the ladder on its own tone.
PAY THE DØLLS™next question?
Social.
§ 12 · A TILE IS A SMALL COVER
Social is not a separate visual system. Same wheels, same devices, same type scale. Only the canvas changes. A campaign picks one range and every tile in the set holds it.
BUY · SHOP
SHOP THE BRANDS.
PAY THE DØLLS™ · MAIN
FUNDRAISING
FUND A DØLL.
PAY THE DØLLS™ · MAIN
PTD CLUB · TRADE
$25 A MONTH.
PAY THE DØLLS™ · RESERVE
VERS CAPITAL
DØLLS GET PAID FIRST.
PAY THE DØLLS™ · RESERVE
What is never done.
§ 13 · THE LAW
Ten rules. They are not style preferences; they are the reason the system reads as one thing.
FLAT ONLY
No gradients, no sheen, no metallic texture. The only exceptions are the continuous chip, which renders a whole wheel rather than a tone, and the bar marks inside a MIDI clip.
NO DIVIDER LINES
Never a horizontal rule to divide or underline content. Not under a heading, not between sections, not between rows, not a 4px slab. Space separates. Card outlines, form inputs, tabs and the header/footer chrome hairlines stay.
NOTHING IS ROUNDED
Radius 0 site-wide. A depicted object, the black CLUB card or a mock browser window, may render its own corners, because it is a picture of a thing.
SINGLE-COLOUR HEADLINES
No headline is ever two-tone. A black word plus a mint word is a half/half split and reads cheap. Mint leads on buttons, stats and markers, never inside headline type.
WHITE GROUND EVERYWHERE
Footers included. Grounds are white or black, nothing else.
THREE SQUARES TALL
Every tone is light · core · deep. Two steps is not a stack. CORE alone is its own device.
CHIPS AT FULL CORE
Inactive chips included. The active tone is marked by SIZE only. Never opacity, never a border, never a fill box.
ONE OPENER PER DOCUMENT
A page carries exactly one mark and that mark is its identity. Interiors take CHIP SINGLE only.
THE RANGE IS CHOSEN BY THE DOCUMENT
Never by taste. Section → MAIN. Membership or account → RESERVE. Annual or master → ALL IN. A document that seems to need two at once IS an ALL IN document.
MIDI MUST BREATHE
About a fifth full, tall lanes, real gaps. Compacting it turns a clip into a pattern swatch. If it must be smaller, use fewer lanes, never less air.
The social kit.
§ 14 · THE FEED IS NOT A PAGE
Three views, five card frames, twenty elements. MAIN is V10 paper with the technical register up. DAW is the clip and piano-roll language, DARK ONLY. TERMINAL is a screen. A carousel picks one view and holds it. This is the whole social kit, embedded. It is not a separate system, it is these wheels and these devices on a 1080 canvas.
Scroll inside the frame. It is the live social kit: same file, same wheels, same devices, rebuilt by build_social.py. Open it full width →
Configured, not hardcoded.
§ 15 · ONE SOURCE
CSS cannot import TypeScript and a static kit page cannot import either, so the palette has to EXIST in three languages. It is WRITTEN in one.
ptd-c-suite/brand-system/ptd-tokens.json THE source. Edit only this.
│
│ python3 ptd-c-suite/brand-system/generate.py
▼
├─ colorways-key/ptd_palette.py kit page builders
├─ ptd-social-templates/ptd_palette.py social builders
├─ ptd-storefront/lib/palette.generated.ts the app
├─ ptd-storefront/app/globals.css spliced between markers
└─ V12_PRISM_PAPER_COKE_DELUXE.md §1 the written kit
Gates.generate.py --check writes nothing and exits 1 if any
mirror is stale — that is the cross-repo gate. bun run check:tokens compares the
three in-repo copies and runs in CI. check_mirrors.py parses all four palette files
independently and compares tone by tone. Rebuild this page and the two kit pages after any
colour change.
Held-open tones emit no CSS token. A token is an invitation to put a colour
on a surface, and an unassigned tone has not earned one.
Product cards.
§ 16 · IT LAYS FLAT
The card is not an object on the page. It is a photograph with its facts underneath. Nothing frames it: no border, no fill box, no shadow, no radius. The ground does the containing.
The rule. The image sits on BONE at 5:6. The metadata sits UNDER it in JetBrains: house, name, price, each 8px apart. Nothing frames the card. No border, no fill box, no shadow, no radius. The card lays flat on the paper and the photograph does the work.
Buttons & CTA.
§ 17 · A BUTTON IS NOT A BOX
Three weights, and not one of them is a rectangle. A ring around a button reads as a box and fights the flat ground. The fill is the button.
PRIMARY is a flat block of MINT. SECONDARY is the same block in INK. QUIET is type with a single underline and no fill at all. The 1px outline a button used to carry is gone: a ring reads as a box, and a button should lay flat on the paper the way a product card does.
Stats, states, markers, filters
6%
CO-LISTING FEE
$5
CLUB · PER MONTH
∞
DØLLS GET PAID FIRST
LIVEROADMAPOPEN CALLSOLD OUT
A hue bar flags a row. Never a highlight fill-box behind the label.
Every class a page is allowed to reach for, what it is for, and which layer it lives in. If it is not here, it does not exist yet — write it into globals.css before using it, never inline.
Class
What it is for
Group
.wrap
the container. 1140px, 40px gutters. every page.
layout
.v8-sec
a section. vertical rhythm only, no border.
layout
.v8-sec-head
flex, baseline, title left, § right. NO rule under it.
layout
.v8-eyebrow
JetBrains, --t4, .2em, muted. sits above a headline.
type
.d1 – .d6
the ONLY display sizes. Bebas, uppercase, positive tracking.
type
.t1 – .t5
the ONLY text sizes. 16 / 14 / 12 / 11 / 9.5.
type
.v8-lede
52ch measure, --t1, body ink. one per section.
type
.pc
product card. FLAT. image 5:6 on bone, meta under.
commerce
.act / .act.ink
primary + secondary CTA. flat fill, NO outline.
commerce
.ghostbtn
quiet CTA. type plus one underline.
commerce
.stat
a number in Bebas mint-deep over a JetBrains label.
data
.state
status chip. full CORE saturation, white ink.
data
.marker
2px hue bar, left. flags a row without a fill box.
data
.ac
accent word. forced to inherit: headlines are ONE colour.
law
The source is _origin/ptd-storefront/app/globals.css. The colour block between the generated markers is emitted from ptd-tokens.json and must never be hand-edited. The type block is emitted from kit-type.css. Everything else is hand-authored and lives inside @layer base or @layer components. A rule written outside a layer beats every component rule and will break the surface gating.
Page development.
§ 19 · HOW A PAGE IS BUILT
The opener stack is the same on every page. Learn it once and no page needs a decision about structure again.
<section class="v8-sec" id="fees">
<div class="wrap">
<div class="v8-sec-head">
<h2 class="d3">The fee.</h2>
<span class="n">§ 04</span>
</div>
<p class="v8-lede">Flat 6%. That is the whole thing.</p>
<!-- content -->
</div>
</section>
The opener stack, in order, every page. STRIP the page mark, one tone, three steps. EYEBROW .v8-eyebrow. HEADLINE .d1–.d3, ONE colour. LEDE .v8-lede, 52ch. Then the content. No rule anywhere in that stack.
Before writing a new component, check it does not exist. House tiles are components/house-tiles.tsx. Forms are components/forms/application-form.tsx and there is exactly ONE form, ONE endpoint, ONE inbox. Brand data is lib/brands.ts and a house count is DERIVED from it, never typed. Club tiers are lib/club-tiers.ts.
Mobile.
§ 20 · ONE THING MOVES
The 6-up grid collapses to 2 × 3. Nothing else changes shape. Type rides the clamp floors it already had, so there is no second scale to maintain.
390px · 2 × 3
1440px · 6-UP
The 6-up grid is the only thing that changes shape. It collapses to 2 × 3 and nothing else moves. The type does not reflow to a different scale, it rides the clamp floors it already had.
At 390px
Value
Why
.d1
40px
the clamp floor. never smaller.
.mast h1
52px
the masthead floor.
.sec-head h2
28px
the section floor.
.wrap gutter
22px
40px is too tight under 760.
.act
14px / 24px
still a 44px touch target.
body
15px
unchanged. text does not scale.
Touch targets are never under 44px. Hover states must have a focus equivalent, because a phone has no hover. Test at 390 · 768 · 1024 · 1440 and confirm nothing scrolls horizontally at any of them.
Surfaces.
§ 21 · FLAT AND SQUARE
Six grounds and nothing else. A surface separates by tone or by air, never by a line.
PAPER · #FFFFFF
the ground. every page, footers included.
BONE · #FAFAF8
a product image well, a code block, an input.
SURFACE · #F4F4EE
a panel that must separate from paper without a border.
LINE · #E2E2DA
a card outline or an input edge. NEVER a divider.
INK · #0A0A0A
type, and the reversed ground.
BODY INK · #31312D
running copy. never pure black at 14px.
Flat, square, and nothing else. No gradient, no sheen, no metallic texture, no shadow, no radius. A surface separates by TONE or by AIR. If two blocks need dividing, raise the spacing token. Never add a border.
Social elements.
§ 22 · THE LIBRARY
All 28, parsed live out of the CMO studio so this roster cannot drift from the bench that renders it. One framing device per card. Never two.
ACCENT · 10 · framing devices. one per card, never two.
Key block
post
One tri-color block, light over core over deep, at the size of a thumbprint.
Key column
post
The tri-color stood up and set beside the headline, sized to its cap height.
Key row
post
The three steps laid on their side, sitting at the foot of a block of copy.
Key tab
post
A colour tab bracketed off the top edge, like the tab on a file.
Marker
post
A single short bar in the tone's core, set above a headline.
Spine
post
The tri-color stood on its end and run the full height of one edge.
Corner ticks
post
L-brackets at the four corners, drawn in the card's own ink.
Bracket
post
Two L-brackets at opposing corners. A partial frame, never a closed one.
Crosshair
post
Registration crosses at the four corners.
Edge keys
post
Four single core chips at the midpoint of each edge.
CHIP · 5 · the wheel, applied. always full CORE saturation.
Chip rail
post
One chip per house along the foot, the active one enlarged.
Chip ladder
post
The rail stood on end at the right margin. Exactly a DAW's key sidebar.
MINT · BUY · SHOP
Mini chip
post
A single core square at label size, set inline with mono type.
MINT · BUY · SHOP
LIME · LIST ON SHOPIFY
AMBER · PTD CLUB
CORAL · FUNDRAISING
VIOLET · SERVICES
Chip cluster
post
A stack of mini chips, each with its assignment printed beside it.
#B8FFD9 · LIGHT #00FF88 · CORE #00A85A · DEEP
Swatch stack
post
The tri-color with all three hex values printed beside it.
PANEL · 2 · a framed component. the ONE header that may span it.
FEE · CO-LISTING1 / 1
6%
Panel
post
A framed component with a coloured header bar and a body.
CRÜZØR · PRAVAHA
Viewport
post
An asset inset in its own frame with two opposing crop ticks.
DAW · 6 · the clip and piano-roll language. DARK ONLY.
PTD · CLUB · SIX TIERSFROM $5/MO
Clip header
wide
The bar that names a clip: a dot in the clip's tone, a name, a value on the right.
PTD · CLUB1 BAR · 4/4
11.21.31.422.22.32.4
MAX $500CHASER $100PRO $50TRADE $25DL+ $10DL $5
ANNUAL IS TWO MONTHS FREE
Piano roll
post
A key sidebar and notes on a grid. The data IS the notes.
ARRANGEMENT · THE HOUSES
PAY THE DØLLSMINT
STuDiØ ZØMAGENTA
CRÜZØRLIME
DESERT ETHOSAMBER
KŌR COLLECTIVBLUE
Track lane
post
One lane per house: a header block and a clip whose length carries meaning.
SESSION · AUGUST9 CLIPS
PLATFORM
PRAVAHA
CLUB
STUDIO
FEE
DESERT
KŌR
MARK
VERS
Session slots
post
The clip launcher. Filled slots are coloured and named, empty ones are outlined.
AUGSEPOCTNOVDECJAN
Ruler
wide
The bar-number strip that sits above a roll or a timeline.
CHAIN · LIST WITH USFLAT 6%
APPLYFREE
REVIEWROLLING
LISTYOUR STORE
GET PAIDFLAT 6%
Device rack
wide
A chain of devices, each with knobs and a value. The last one is lit.
TERMINAL · 5 · a screen. prompt, output, manifest.
PTD · SHELL · 80x24
Terminal header
wide
Three chips and a title. The traffic lights of a window.
A state readout with a block meter showing progress.
drwx pay-the-dolls/ FLAGSHIP
drwx studio-zo/ EST 2024
drwx cruzor/ FOOTWEAR
drwx desert-ethos/ JEWELRY
drwx kor-collectiv/ VINTAGE
drwx partner-with-us/ OPEN
Manifest
post
A directory listing. The roster as a filesystem.
All 28 are live, in any tone and on either ground, at localhost:3010/cmo/studio, each with its rule and a copy-HTML button. This page is the roster; the studio is the bench. NO full-width bands, top or bottom. A band cuts the sheet instead of holding it. The one survivor is a PANEL HEADER, which runs across a COMPONENT, never across the card.
Mockups.
§ 23 · AT TRUE CANVAS
Every surface the system is applied to, with the canvas it is drawn at and what it is allowed to carry.
Surface
Canvas
Ratio
What it takes
Post
1080 × 1350
4:5
the feed default. MAIN, TERMINAL light or dark.
Story
1080 × 1920
9:16
one message. the type goes up a step.
Wide
1920 × 1080
16:9
clip header, ruler, device rack. the DAW view.
Doc cover
1240 × 1754
A4
one opener mark, then CHIP SINGLE inside.
Deck
1920 × 1080
16:9
the print deck. same devices, more air.
OG card
1200 × 630
1.91:1
the RECEIPT. one design site-wide.
Rendered mockups live at localhost:3002/ptd-social-templates.html (three views, five frames, five spacings) and /ptd-doc-templates.html (deck and doc). Every one is generated from ptd-tokens.json, so a tone that moves there moves in all of them on the next build. A mockup is never hand-edited.
Favicons & icons.
§ 24 · AT 16 PIXELS
The short mark, never the wordmark. A full lockup at tab size is mud.
File
Size
Where it shows
favicon.ico
16 · 32 · 48
the browser tab. PTD short mark, ink on paper.
icon.svg
any
the modern tab. scales, stays crisp.
apple-touch-icon.png
180 × 180
iOS home screen. NO transparency, paper ground.
icon-192.png
192 × 192
Android / PWA.
icon-512.png
512 × 512
PWA splash and install.
og-image
1200 × 630
the RECEIPT. lib/og/receipt.tsx is the only renderer.
The icon is the short mark PTD, never the full wordmark. At 16px the full lockup is mud. Square ground, no radius: every platform rounds it themselves and a pre-rounded icon gets rounded twice.
Media library.
§ 25 · WHERE EVERYTHING LIVES
Every asset, its path, and whether it is generated or authored. If a file is generated, editing it by hand is a change that lasts until the next build.
Asset
Path
Note
Kit pages
_origin/ptd-storefront/public/*.html
generated. never hand-edit.
Tokens
ptd-c-suite/brand-system/ptd-tokens.json
THE source. edit only this.
Type layer
brand-system/generated/kit-type.css
one source, every kit page.
Palette key
colorways-key/ptd_palette.py
the wheels.
Assignments
mission-control/lib/palette.ts
what each tone indexes.
Brands
_origin/ptd-storefront/lib/brands.ts
the house registry.
Club tiers
lib/club-tiers.ts · lib/membership.ts
tones · names and prices.
Brand registry
ptd-c-suite/brands/NN_name/identity/
per-house marks.
Social elements
mission-control/lib/cmo/elements.tsx
the 28.
Changelog.
§ 26 · WHAT CHANGED
And what was tried, rejected, and must not come back.
Version
Locked
What changed
V12.1
2026-08-16
THE FACES. §05 names the three faces for the first time and draws each in itself: Bebas, JB and SF Mono, with both stacks, the weights, how each is delivered and where it is set. The section had carried the SIZE table and nothing else since V10, while BRAND_KIT_INDEX.md claimed it held the stacks and the weight guard the whole time. Third silent gap the append-only contract has caught. No token changed.
V12
2026-08-12
Prism Paper Coke Deluxe. ™ → ®, and the ® set as PUNCTUATION rather than a superscript: §01. No new colour, no new type. One font vocabulary. The inlined social primitives no longer carry their own off-canon stacks.
V10.1
2026-08-06
Two wheels plus a union. Eight devices. The social kit folded in. Six V10 sections restored after the consolidation dropped them.
V10
2026-07-30
The luxe layer. Calm hero type, single-colour headlines, white footers, no divider lines anywhere.
V9
2026-07-24
Prism Paper Luxe. Superseded by V10 in a week.
V8
2026-07-19
Paper Prism. The white ground and the mint action colour land.
V7 · V6
earlier
Chroma and liquid glass. Retired.
⛔️ Tried and rejected, twice. A NEGATIVE tracking ladder (.d1 −.015em) was specified at the V10 lock, applied on 2026-08-06 and reverted the same day. On condensed Bebas it clumps into a fake bold and reads cramped, not expensive. The literals −.015em −.012em −.008em −.004em are its fingerprint and are a build failure, not a fix.