The TIER EVERYTHING design system

An accent pair, a five-rung ramp, and six tones

The palette is the accent pair (cyan → blue) plus the five-rung tier ramp, and that is the whole colour story. Every label, button, link, glow, focus ring and the page's radial wash is written against var(--cyan) / var(--tier-*) — never a literal — which is what makes a tone switch repaint the entire site from nine values.

Five rungs, one vocabulary: GOATED → Top Tier → Chad → NPC → Cooked, short forms GOAT / TOP / CHAD / NPC / COOK. Rating maps linearly: index 0 = GOATED, 4 = Cooked; a 1–5 score of r lands on index 5−r. Anything that paints a rung asks tierColor(i) — a JS copy of these colours is a bug by definition.

Rungs bright enough carry the dark label #04121b; the rest carry #dfe7f5. The ramp always keeps that near-white-to-near-background shape, so both label colours stay legible in every tone.

A tone is not a theme: it is the accent pair plus the five rungs, and nothing else. The user's choice lives in localStorage['tierhq.tone.v1'] and lands on <html data-tone> before first paint, so a saved tone never flashes the default. Swatch menus reuse the same nine values through .tone-sw[data-tone] — one source of truth, no JS copy.

Two families, one dense scale

This is an instrument panel, not a magazine: the scale runs from 9.5px to 19px in half-pixel steps, because a board full of tiles cannot afford 14px body copy. Both families ship as self-hosted variable woff2 with font-display:swap — no third-party font requests, no layout jank.

Weights in active use: 400 (body), 600 (emphasis), 700 (display). Anything above 19px belongs to the hero, which is the only place the scale may be broken.

One wrap, two radii, an honest ladder

The page is a single centred column; density changes at five breakpoints and nowhere else. Grids use minmax(0,1fr) tracks because a flex/grid item that refuses to shrink below its content is how a board ends up wider than the phone it is on.

hover:none and pointer:coarse are treated as first-class: things that only exist for a mouse (hover reveals, drag hints) are replaced by always-visible touch affordances, not left broken.

Official marks only, inlined

Every social icon is the platform's own artwork, inlined as SVG paths from the single icon set (cdp-tools/icons/inline.json, 24×24 grid, fill:currentColor). No redrawn logos, no mixed stroke weights, no icon fonts. Where a brand needs an alias for a region, the alias points at the official mark: douyin → tiktok, CWS → googlechrome.

Icons outside this set are product-drawn UI glyphs (chevrons, dice, stars) and follow the same rule: geometric, currentColor, no fills outside the tier ramp.

The machine nods

The delight layer answers one question per interaction: did that land? Every animation is short (240–700ms), spring-eased, decorative nodes clean themselves up, and none of them ever change state — state changes first, motion reports it. Press the demos; they are the product's own classes.

Parts, not pages

Every interactive part of the product is a class in app.css, composed from the tokens above. The specimens below are the real components — the same markup the product ships.

Each family above is one commented chapter in app.css — the stylesheet is organised as the system's table of contents.

Talk like a person who built it

How to change the system without breaking it

These are the rules that came from real incidents. Each one exists because breaking it once cost something.

A change is not done when it looks right — it is done when a probe has failed at least once proving it can fail.