Foundations
The rules and tokens every Pod Engine marketing page is built from. Values on this page are read from tokens.css, so it can’t drift from the code.
Eleven rules, in order of priority
- 01
Show, don’t tell
Every claim is a real number, a real show or a real quote. If we can’t show it, we cut it.
- 02
Real data only
Real covers, real sponsors, real chart positions. Estimates say they are estimates.
- 03
One action colour
Blue is for things you can click. Nothing else is blue.
- 04
Colour marks chapters
Lemon, lilac, mint, coral and sky sit behind ink. Text is never in them.
- 05
Ink and offset
Cards that matter get an ink border and a hard offset shadow. No blur, no gradients.
- 06
Phone first
Designed at 375px, then widened. Tap targets are 44px. Nothing scrolls sideways by accident.
- 07
One theme
Light only. The dark band is a section style, not a mode.
- 08
Fast by default
Zero JS unless a ticket says why; 30KB cap per page; fonts under 100KB.
- 09
Plain English
Outcome first, names who it’s for. US spelling. No “customers asked for this”.
- 10
Accessible
AA contrast on every pair, real headings, focus rings, reduced motion respected.
- 11
SEO built in
One h1, ordered headings, content in the HTML, schema from the same props as the page.
One light theme, one action colour
The default Tailwind palette is switched off. These are the only colours that exist.
Surfaces
-
paper#faf7f0 page background -
panel#ffffff cards, white bands -
soft#f4efe4 table headers, footers of cards, quiet fills -
line#e7e1d3 dividers inside cards -
line-strong#d4ccb9 card borders -
band#16181d the dark section band -
band-panel#1b1d22 -
band-line#3a3d45
Text
-
ink#16181d all body text and borders that carry the offset shadow -
muted#565a63 secondary text, ≥ 4.5:1 on every surface -
subtle#62666f captions and mono labels, ≥ 4.5:1 on paper and panel -
on-band#eceae4 text on the dark band -
on-band-muted#a9a59c
Action: the only colour on buttons and links
-
action#1d4ed8 -
action-soft#dbe6ff search-term highlight
Chapter marks: fills behind ink, never text, never buttons
-
lemon#ffd23f -
lemon-soft#fff4c2 -
lilac#c9b6ff -
lilac-soft#ebe4ff -
mint#3ddc97 -
mint-soft#dcf8ea -
coral#ff5a36 -
coral-soft#ffe4dc -
coral-text#c2410c coral when it has to be text -
sky#7cc5ff
Data
-
up#1f7a4d -
down#b3261e -
audio#3ddc97 -
youtube#ff5a36
Every text pair we allow, measured
A pair not on this list is not allowed as text.
| Sample | Text on background | Ratio | Used for |
|---|---|---|---|
| Aa 532K | ink on paper | 16.60 | Body text |
| Aa 532K | ink on panel | 17.76 | Text in cards |
| Aa 532K | ink on soft | 15.49 | Table headers, card footers |
| Aa 532K | muted on paper | 6.46 | Secondary text |
| Aa 532K | muted on panel | 6.91 | Secondary text in cards |
| Aa 532K | muted on soft | 6.03 | Secondary text on soft fills |
| Aa 532K | subtle on paper | 5.38 | Captions, mono labels |
| Aa 532K | subtle on panel | 5.75 | Captions in cards |
| Aa 532K | action on paper | 6.26 | Links |
| Aa 532K | action on panel | 6.70 | Links in cards |
| Aa 532K | white on action | 6.70 | Action button label |
| Aa 532K | paper on ink | 16.60 | Primary button label |
| Aa 532K | ink on lemon | 12.30 | Labels, stickers, chapter discs |
| Aa 532K | ink on lilac | 9.83 | Labels, stickers, chapter discs |
| Aa 532K | ink on mint | 10.05 | Labels, stickers, chapter discs |
| Aa 532K | ink on coral | 5.72 | Stickers (never white on coral) |
| Aa 532K | ink on sky | 9.55 | Labels, chapter discs |
| Aa 532K | ink on lemon-soft | 16.04 | Soft labels |
| Aa 532K | ink on lilac-soft | 14.44 | Soft labels |
| Aa 532K | ink on mint-soft | 15.78 | Soft labels |
| Aa 532K | ink on coral-soft | 14.70 | Soft labels |
| Aa 532K | ink on action-soft | 14.19 | Search-term highlight |
| Aa 532K | coral-text on paper | 4.84 | Stamps, coral words |
| Aa 532K | up on panel | 5.32 | Chart movement up |
| Aa 532K | down on panel | 6.54 | Chart movement down |
| Aa 532K | on-band on band | 14.76 | Text on the dark band |
| Aa 532K | on-band-muted on band | 7.23 | Secondary text on the dark band |
| Aa 532K | on-band on band-panel | 14.02 | Cards on the dark band |
Never: white on coral (3.1), coral on paper (2.9), any chapter colour as text. Use coral-text when coral must be words.
Two fonts, eleven sizes
Bricolage Grotesque for headings and numbers, Instrument Sans for reading. Labels and code use the system monospace font. Self-hosted, latin only, about 70KB in total.
text-h1 44 → 72 · Bricolage 600 text-h2 30 → 46 · Bricolage 600 text-big 28 → 44 · hero numbers text-stat 28 · numbers in tiles text-h3 18 → 20 · Bricolage 600 text-lead 18 · Instrument Sans text-body 16 · Instrument Sans text-ui 14 · buttons, tabs, rows text-small 13 · meta lines text-caption 12 · system mono text-micro 11 · mono labels, uppercase A 4px grid, two breakpoints
Phone is the base style. tablet: applies from 768px, desktop: from 1200px. Content is 1200px wide at most; reading text 680px.
1 4px 2 8px 3 12px 4 16px 6 24px 8 32px 12 48px 16 64px 28 112px - phone
- base styles · designed at 375px · gutter 16px · sections 64px apart
- tablet:
- 768px and up · gutter 32px · sections 112px apart
- desktop:
- 1200px and up · full multi-column layouts
- @container
- components that sit in different widths (cards, scenes) respond to their container, not the window
- page
- max-w-(--container-page), 1200px
- prose
- max-w-(--container-prose), 680px
Ink edges, hard offsets
The offset shadow is the signature. It is never blurred and never coloured except the one blue offset on the main call to action.
rounded-chip rounded-control rounded-card rounded-feature rounded-pill shadow-offset-sm shadow-offset shadow-offset-lg shadow-offset-action shadow-lift CSS only, and it stops when asked
Three durations, two easings, one reduced-motion rule that turns every animation off. No animation library ships to the browser.
Hover and press states.
Pops, tabs, menus. animate-pop
Things entering the page. reveal runs on scroll with no JS.
Product scenes loop every 12s (--duration-loop). Easing: ease-standard for everything, ease-emphasised (a small overshoot) for pops only.