The system behind the desk: how TCG Study looks, moves, and signals trust. Every token here is live — this page renders from the same variables the site ships. Colour is validated, not chosen by eye.
The shell is lamplit dark — the room the library sits in. Long-form reading can flip to paper, a warm off-white that behaves like a printed volume. Paper is not a colour inversion: every value is re-derived and re-validated against its own surface. Try the toggle above.
Assigned in fixed order, never cycled. A sixth series folds into Other or becomes small multiples — it is never a generated hue. Both sets clear the full six-check audit: lightness band, chroma floor, colour-blind separation, normal-vision floor, and contrast. Worst adjacent CVD pair on dark: ΔE 14.9, comfortably above the 8.0 floor.
The house rule made visible. Every price carries its provenance, and the distinction survives greyscale, print, and colour-blindness: filled disc = verified close, hollow ring = estimate, diamond = stale, dashed = untracked. Status hues are reserved and never reused as a sixth series.
Fraunces carries the scholarship — headlines, set names, prose. IBM Plex Mono carries every number, label, stamp, and serial, always with tabular-nums so digits never shift as prices update. Nothing else. Two voices is the whole system.
Four durations, three curves, one rule: motion explains structure, never decorates it. If an animation does not tell you where something came from or that the data is settled, it is cut. Tap the buttons — these are the real timings.
cubic-bezier(.22,.61,.36,1) · 120–220ms. Hovers, taps, tooltips. Decelerating, never springy.
cubic-bezier(.33,.02,.18,1) · 640ms. Volume opens, wing transitions. Heavy start, soft landing — paper has mass.
cubic-bezier(.2,.9,.3,1.08) · 220ms. The only curve permitted a hint of overshoot, and only on spines leaving a shelf.
Depth is lighting, not drop shadow. Every raised surface carries a 1px warm inner highlight on its top edge — the way lamplight catches a board or a cover.
Rules, dividers, resting rows
Cards, panels, shelf boards
Lifted spines, plaques, popovers
Catalog drawer, modals
Publisher marks live in /logos/<slug>.svg and are loaded by a single shared script. Any element marked data-brand shows the official artwork when the file exists and the engraved hex mark when it doesn't — so a missing or not-yet-added logo never leaves a hole. The loader never recolours, stretches, or outlines the artwork; it only scales and, on dark surfaces, sets it on a warm plate so a mark drawn for white paper stays legible.
Three of these four slots are empty right now, which is exactly the point — the layout is identical either way. Drop pokemon.svg into /logos/ and every mast, shelf spine, and set header across all 30 volumes shows it on the next deploy.