The Collectible Card
Click a card to open the drawerA 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
The card system
Flip · modal · unfold · statThe 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.
1A · Baseball flip (hover a card to flip it)
- Local titles across the portfolio
- Two SaaS audiences: lightbreak + greetform
- Operator education via Local Media HQ
One design language
Fraunces headlines, Source Serif body, mono metadata. Shared grammar, different jobs per brand.
feature · hover- The house grammar every brand inherits
- One signature accent per product
- Read by people, pulled by machines
It reads like a newsroom of record, not another dark-mode SaaS site.
- Warm paper, sharp hairline rules, low radius
- Personality moments placed, never scattered
- Quality earns credibility, personality earns attention
1B · Expand-to-modal (click a tile)
1C · Inline unfold (click a row)
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)
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.
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.
Buttons
Variants · sizes · statesRust 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.
Tags and status
Squared chips, status dotsSquared 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.
Status
A dot plus a mono label. Pine for live, gold for attention, deep rust for down.
Forms
Squared inputs, rust focus ringInputs 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.
Data
Stat, ledger, bar listThe pieces an operator dashboard is built from: a navy stat face, a hairline ledger table, and a ranking bar list.
Newsletter ledger
| Brand | Subs | 7d |
|---|---|---|
| Henderson HQ | 24,610 | +177 |
| West Vegas HQ | 14,456 | +157 |
| Athens Scoop | 9,417 | +195 |
Top brands
Callouts
Four states, warm onlyLeft-border callouts for the four system signals. Navy for info, pine for success, gold for caution, deep rust for danger. No cool blue ever enters a status.
The machine layer is regenerated from the tokens on every deploy.
All four contrast checks passed at desktop and mobile.
This brand has no signature accent assigned yet.
A card is sharing its color with the section behind it.
The rules that hold
What breaks the component system- 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.