tapps.live say hi
07 — the rulebook

THE SYSTEM

One source of truth for every screen on this site. Tokens first, components second, inks third. If it isn't here, it doesn't ship.

Palette adapted from The Verge token system · every value a CSS custom property in theme.css · contrast pairs checked live below

01

Color

live values
#050505 --bg page canvas
#111111 --surface cards, footer, inputs
#211022 --surface-warm ticker, video frames
#FFFFFF --fg headings, primary text
#E5E7EB --fg-2 body copy, nav links
#9CA3AF --muted kickers, meta, captions
#FF00A8 --accent / --meta the loud moment — links, pips, fills
#050505 --accent-on ink on accent fills
#22C55E --success live pips, good bars, lime fill
#FACC15 --warn beta pips, sun fill
#EF4444 --danger build pips, hot fill
#9A2828 --live-badge broadcast LIVE badge (white ink passes AA)
#3CFFD0 --mint duo ink — jelly mint
#5200FF --ultra duo ink — ultraviolet
#2B2B2B --border hairlines
#1D1D1D --border-soft bar tracks

Accent discipline: --accent earns at most two loud moments per screen. Everything else leans on semantic tokens and tinted surfaces. No gradients as decoration.

02

Contrast — the rule, checked

all 17 pairs pass AA

Grey on green doesn't ship. Every text/background pair the site uses is listed with its live ratio — the same math runs in the test suite, so a token change that breaks AA fails the build's tests.

pairratio · WCAG AA ≥ 4.5
body on canvas 16.46 ✓
body on surface 15.25 ✓
body on surface-warm 14.60 ✓
muted meta on canvas 8.03 ✓
muted meta on surface 7.44 ✓
muted meta on surface-warm 7.12 ✓
accent link on canvas 5.65 ✓
accent link on surface 5.23 ✓
white on live badge 7.75 ✓
accent-on ink on accent fill 5.65 ✓
fill-magenta ink 5.65 ✓
fill-lime ink 8.94 ✓
fill-sun ink 13.31 ✓
fill-hot ink 5.42 ✓
fill-tang ink 9.53 ✓
fill-mint ink 13.12 ✓
fill-grape ink 5.73 ✓
03

Typography

Space Grotesk · Inter · IBM Plex Mono
display / Space Grotesk 700 Built loud
h2 / Space Grotesk 700 Things currently being built
lead / Inter 400 A lead paragraph sits at 19px and breathes at 1.55 line-height.
body / Inter 400 Body copy at 16px — the default rhythm for everything explanatory.
kicker / Plex Mono 500 kicker · always uppercase · always tracked
display rule

Display is a shout, not a label

Space Grotesk carries the enormous headlines and the wordmark. It never labels a button or sets body copy.

mono rule

Mono is always uppercase

IBM Plex Mono handles kickers, timestamps, tags and button labels — every one with 0.1–0.18em tracking.

04

Space & radius

4px base unit
--text-xs · 12px
--text-sm · 14px
--text-base · 16px
--text-lg · 19px
--text-xl · 26px
--text-2xl · 42px
--radius-sm 4 · md 8 · lg 12 · pill
05

The duotone ink press

9 colorways · live on every image

The export baked these with ImageMagick; the live site presses them with SVG filters — same two-ink math, applied to any image at runtime. Screenshots, artwork, video thumbnails: everything foreign adopts the house style. Hover any image and hit ↻ to reroll its inks.

tapps portrait poster — magenta / lime

magenta / lime

the house duotone

tapps portrait poster — halftone

halftone

ordered dither, accent → sun

tapps portrait poster — glitch

glitch

channel split + slice tears

tapps portrait poster — ultra / mint

ultra / mint

ultraviolet + jelly mint

tapps portrait poster — hot / sun

hot / sun

hazard pair

tapps portrait poster — mint / magenta

mint / magenta

the flip side

ink pairs
magenta-limemagenta-mintultra-mintultra-sunhot-sunhot-mintmint-magentasun-ultralime-ultra
motion rules

Fast, purposeful, respectful

120–200ms transitions on controls · 620ms reveals · glitch loops on hero only. Everything collapses to still under prefers-reduced-motion — no exceptions.