How to read each card
Palette swatches show the variant’s core colors. Hover for hex codes. The palette is meant to be domain-evocative — warm woods for synthesis, copper for engineering, vellum cream for civics, furnace orange for ops, and so on.
Font + structure tell you the typographic identity. Almost every variant uses Newsreader (serif) for body + IBM Plex Mono (monospace) for technical details — the family resemblance comes from this. Differences live in how heavily each font dominates the layout.
Example labs are the variants in the wild. Click any chip to open that lab in its variant’s natural habitat.
Download blank template gives you a stripped HTML file with the current house standard already wired up — the three full-bleed bars, the single centered wrap, the canonical hero with its instructor card, the scrolling boxed tab bar (with the opa-tabscroll edge-fade drop-in), per-tab prev/next steppers, the About & Sources tab, the global every-tab footer, and the contact snippet. Everything you must replace is marked {{like this}}. Just fill in the placeholders and add your tabs, sims, content. (All seven blanks now ship WITH a genre-bar. Only the deep-space Space-Node labs — the-burn, what-comes-down, the-redstone-node, the-space-weather-lab — are blessed to drop it and fold the metadata into the hero. See the Center-of-Gravity note.)
The standard, in short — what every blank already does
1 · Three full-bleed bars, in order. #opa-cluster-nav (cross-links only) → .opa-topbar (brand only) → .opa-genre-bar (the ONE home for section · building · college, with a one-line italic slogan). These three are the only edge-to-edge elements on the page.
2 · One centered wrap. Everything below the bars — hero, tab bar, body — lives in a single centered .wrap and shares its one left edge. Nothing below the bars is full-bleed. Body text is never centered.
3 · The hero: kick → h1 → dek. A mono uppercase .kick eyebrow (dot + DOMAIN · College · Building), then the lab name as an <h1> with one word in <em> for the accent color, then an italic one-line .dek, then a .hero-instructor card naming the course + teacher. Left-aligned. No masthead.
4 · The tab bar is a single row that scrolls sideways — it NEVER wraps. flex-wrap:nowrap; overflow-x:auto; with .tab-btn{flex-shrink:0;white-space:nowrap;}. A wrapping tab bar looks fine on a desktop and breaks into overlapping rows on a phone. This is the bug the old templates carried.
5 · Boxed .tab-btn + prev/next steppers. Bordered, rounded, mono, 44px min-height. Every panel ends with a Prev/Next pair so a reader can walk the lab without touching the tab bar.
6 · About & Sources is a TAB, and the footer is GLOBAL. The provenance receipt lives in a standard last tab (not a hidden modal); the footer’s About link jumps to it. And <footer id="net-standard-footer"> sits after the wrap, outside every .view, so it shows at the bottom of every tab — carrying the canonical mono credit line (CLAUDEDEV v1.2).
7 · The contact snippet. The shared “A note from the builder” block just before </body> — it auto-links “Travis Jenkins” in the footer. Paste it verbatim; don’t rewrite it.
The two bugs to never reintroduce: a wrapping tab bar (phone overhang), and a full-bleed masthead over a centered body column — the “Kelly’s Colony” anti-pattern, where the tabs and the body don’t share a left edge. Full checklist: _OPA_LAB_STANDARD.md (in this folder).
3 bars · hero+instructor · scrolling tabs · About tab · steppers · global footer
capstone footer pattern included
Used by
most-used family in the suite
civic-document typography
Used by
operations + simulation feel
Used by
preserves modal-popup pattern
ships WITH the genre-bar — drop it only if you’re a deep-space node (Center-of-Gravity)
If you ship a new variant, name it.
The seven variants emerged from the work, not from preference. That is the rule. Future variants come from new domains where the existing seven don’t fit — not because someone wanted a different palette. The Heart Lab, ENT Lab, Orthopedics Lab, and The Call are all running on emerging variants (clinical burgundy, wave-mechanics teal, ivory structural, Sentinel cyber navy) that haven’t yet stabilized into named families. When they do, they’ll be added here.
Inheritance rule: every variant carries the canonical CLAUDEDEV footer line, the brass attribution color (#d4a24c), and IBM Plex Mono for technical details. That’s the seam that ties anything you build to OPA regardless of which family you picked.
If you make a lab using one of these — or you invent an eighth and ship it — tell us. We’ll add it to the index. The whole point of putting this page up is so the styling stops being a barrier to entry. Take the gift. Make something.
If you build a lab using one of these — let me see it.
Email info@hydraulictoybox.com with a link, a screenshot, or just "hey I made a thing." I’m a sole builder — reply time depends on real life — but I want to see what you make. The whole point of putting this page up is that the styling stops being a barrier to entry. If you ship something good, I’ll add it to the example chips on the appropriate variant.
— Travis Jenkins / User Zero 🦄
More on the methodology: the building-it-itself part is covered in Lester’s Method (4.10.10) — nine steps for turning a shelf-year idea into a shipped tool. The templates here are the styling part of that pipeline.