The card system, buttons, tags, forms, data, and callouts. Pick from the menu instead of drawing a new part every time. Everything is squared, low-radius, and never a pill.
Every card this system allows, with its number, its name, and the rule it follows. The eight static styles are TJ's picks of 2026-06-06, each shown on the stages it is allowed on. Two rulings hold across all of them: no white card ever sits on cream, and nothing is a pill.
No. 11
Arched Header
A rust cap with a rounded underside and a gold medallion breaking the line. The cap is the identity; the body is the reading.
Where: cream takes the navy body with a rust cap. Navy flips the cap to rust on a white body. Rust keeps the original navy cap.
Approved 2026-06-06
On cream · navy body
145K verified readers
Subscriber counts pulled weekly across all 27 local brands.
On navy · cap flips rust
145K verified readers
Subscriber counts pulled weekly across all 27 local brands.
No. 12
Ribbon Header
A floating ribbon with a drop shadow carries the title; the body sits quiet beneath it. The ribbon never echoes the section color.
Where: cream takes the navy body with the rust ribbon. Rust takes a white body with the navy ribbon and a gold icon.
Approved 2026-06-06
On cream · navy body
Sponsor pipeline
Every open slot, every renewal date, one ledger the whole team reads.
On rust · navy ribbon
Sponsor pipeline
Every open slot, every renewal date, one ledger the whole team reads.
No. 13
Glass Deck, color-fixed
Three white bodies in a row, three different header colors: rust, gold, navy. Never repeat a header color across the row. The all-navy original is banned.
Where: dark sections only. No cream placement.
Approved 2026-06-06 · with condition
On navy · one of each
Capture
Turns how your best people work into tools the whole team can use.
Brief
Each person gets a rundown. You get a summary of what got done.
Compound
Every meeting and task makes it sharper. Worth more every week.
No. 14
Index Tab
A file-folder tab overlaps the top edge and names the card. The tab must contrast both the section it hangs into and the body it sits on.
Where: cream takes the navy body with a rust tab. Navy flips the tab to rust on a white body. Rust keeps the navy tab.
Approved 2026-06-06
On cream · navy body
Ledger
This week in one page
Revenue, renewals, and the two numbers that actually moved.
On navy · tab flips rust
Ledger
This week in one page
Revenue, renewals, and the two numbers that actually moved.
No. 15
Duotone Panel
A solid header cut by a diagonal seam into the body. Header and body can never share a color.
Where: cream takes the navy body with a rust header. Navy flips the header to rust on a white body. Rust keeps the navy header.
Approved 2026-06-06
On cream · navy body
Weekly brief
One page, five minutes, zero meetings. The operator stays current.
On navy · header flips rust
Weekly brief
One page, five minutes, zero meetings. The operator stays current.
No. 8
Split Header
A full-width solid head with an icon, then a plain body. The plainest of the boxed styles; use it when the content is the point.
Where: cream takes the navy body with a rust head. Navy flips the head to rust on a white body. Rust keeps the navy head.
Approved 2026-06-06
On cream · navy body
Operator notes
What the person running the brand needs to know this week, in one place.
On navy · head flips rust
Operator notes
What the person running the brand needs to know this week, in one place.
No. 6
Numbered Ledger
Boxless. A hairline top rule, a rust numeral, a mono label, then the headline. The one TJ called out by name.
Where: legal straight on cream because there is no box. On navy the numeral goes gold and the text goes paper.
Approved 2026-06-06
On cream · boxless
01Capture
How your team works
Turns how your best people do their jobs into tools everyone can use.
On navy · gold numeral
01Capture
How your team works
Turns how your best people do their jobs into tools everyone can use.
No. 20
Magazine
Boxless and editorial. An italic index numeral with a rust dot, an ink rail that grows rust on hover. For the one section per page that earns it.
Where: cream, sparingly. On rust the text goes solid white with a gold hover rail. Never the default card.
Conditional · use sparingly
On cream · boxless
01.
Captures how your team works
Turns how your best people do their jobs into tools the whole team uses.
On rust · white text
01.
Captures how your team works
Turns how your best people do their jobs into tools the whole team uses.
Not on the menuThree machine-built holdovers exist for jobs nothing above covers: a stat face, a pull quote, and a key-value ledger. They need TJ's sign-off before they appear anywhere, and then they get a number here.
§ 4.1 · Showpiece
The Collectible Card
Click a card to open the drawer
A trading-card front with a colored lane bar, medal, card number, optional photo, serif title, reason, squared chips, and a brutalist offset shadow that lifts on hover. Click one and the full Detail Drawer flies open. Two front variants: with photo, and centered without.
Front · with photo
Front · no photo, centered
§ 4.2
The card system
Flip · modal · unfold · stat
The signature interactive cards. A baseball-card flip with three faces, an expand-to-modal teaser, an inline unfold, and a dark stat tile. Each lands where its contrast is correct.
Yes. Cream sections carry navy or boxless cards; navy and rust sections carry paper or white cards. Two dark sections never sit adjacent.
One to three deliberate moments per page: a tape strip, a Caveat caption, a hard offset shadow, or an animated button. The rest stays in structural mode.
No radius above 8px on any non-circular element. Buttons, tags, and stickers use 2 to 4px. Only a circular icon button or a status dot may be round.
1D · Dark stat cards (numbers count up on scroll)
0
Local brands
▲ 3 this quarter
0
Subscribers
▲ 11.2% MoM
42¢
Blended CPA
▼ under 50¢ target
0
Brands served
one design system
§ 4.3
The approved pattern menu
8 styles · cream + dark
The locked card menu agents pick from for static content. Two boxless editorial styles sit straight on cream; the rest come out on dark sections.
6 Numbered Ledger · 20 Magazine
01Capture
Pick from the menu
Choose an approved card style instead of inventing a new one.
02.
Editorial and quiet
An ink rail that grows rust on hover. Boxless, legal on cream.
03Contrast
Card vs section
A card never shares its color with the section behind it.
11 Arched · 12 Ribbon · 14 Index Tab
Arched header
Curved cap with a floating gold medallion.
Ribbon header
A floating ribbon with a drop shadow over the body.
Ledger
Index tab
A file-folder tab that names the section.
15 Duotone · 8 Split Header · 13 Glass Deck
Duotone panel
A solid header with a diagonal clip-path seam.
Split header
A header zone over a warm body. The seed style.
Glass deck
Three in a row get three different headers.
§ 4.4
Buttons
Variants · sizes · states
Rust for the primary action, navy for structure, gold to celebrate, ghost for secondary. Hover always moves to the matching secondary token, never an invented color.
Variants
One primary per view. Everything else is navy, gold, or ghost.
Sizes and states
Small, base, large. With an icon. Disabled drops to 45 percent.
§ 4.5
Tags and status
Squared chips, status dots
Squared chips at a 3px radius for labels. A soft rust-tint for a quiet badge. Status uses a small dot, never a colored pill.
Tags
For labels, categories, and featured states.
FeaturedLocalProLiveDraft
Status
A dot plus a mono label. Pine for live, gold for attention, deep rust for down.
Live Needs review Down
§ 4.6
Forms
Squared inputs, rust focus ring
Inputs are low-radius with a rust focus ring. The switch is squared, not a pill. Labels are mono uppercase so a form reads as part of the system.
Text inputs
Input, select, and textarea share one squared style.
Toggles
Checkbox and a squared switch. No pills, even here.
Live mode
Maintenance mode
§ 4.7
Data
Stat, ledger, bar list
The pieces an operator dashboard is built from: a navy stat face, a hairline ledger table, and a ranking bar list.
Subscribers
145,210
Across the portfolio, verified this week
Newsletter ledger
Brand
Subs
7d
Henderson HQ
24,610
+177
West Vegas HQ
14,456
+157
Athens Scoop
9,417
+195
Top brands
Henderson24.6k
West Vegas14.5k
Athens9.4k
§ 4.8
Callouts
Four states, warm only
Soft-fill callouts for the four system signals, each a warm tint of its color with a matching hairline. Navy for info, pine for success, gold for caution, deep rust for danger. No cool blue ever enters a status.
Info
The machine layer is regenerated from the tokens on every deploy.
Success
All four contrast checks passed at desktop and mobile.
Caution
This brand has no signature accent assigned yet.
Danger
A card is sharing its color with the section behind it.
§ 4.9
The rules that hold
What breaks the component system
Never
Never invent a card style. Pick from the system, or get a new one approved and add it.
Never run one card style for every grid on a page. Vary at least two.
Never put a card on a section of the same color, or a box on a matching surface.
Never use a pill. Radius is 2 to 8px. Only an icon button or a status dot is round.
Never let a header, ribbon, or tab match the card body or the section behind it.