register v1.1 · 2026-08-29 MIT · template repository · GitHub Pages
A stylesheet for pages that show their work
For research programs, evidence dossiers, pipeline boards, changelogs, benchmarks, and any page that is really a projection of a repository. One CSS file, one grammar, no build step. Every component flattens to plain text.
A page is a view of a repository. Style it like one: identifiers first, rules not boxes, color as data, and nothing that can't be written as text.the whole system follows from that sentence
five rules
the grammar is small on purposethe grammar
a class names the component · data attributes pick the variantEverything you can do to a component is one of seven attributes. You never learn a second class name for a variant, and adding a variant never adds a class.
- data-surface
- tint · wash · deep · s1–s4 · s1w–s4w · ok · open · stop · info · duo
- data-series
- 1 · 2 · 3 · 4
- data-state
- done · active · waiting · blocked · parked · optional · live · reserved · superseded
- data-style
- a component's own variants, listed with it
- data-size
- sm · lg · wide
- data-kind
- what a register lists: claims · relations · log · edges · refs · cmds · lexicon · theorems · notes · forecasts · rules
- data-theme · data-display
- on <html>: neutral · forest · parchment · slate · signal, and mono · serif
the same panel, four ways · one class, one attribute
the same row, three kinds
For every finite N ≥ 2 the optimum is uniquely one reader when q > p.
tokens
13 colors · 4 series with deep and wash cuts · 2 faces · 1 measureseries · each has a plain, deep, and wash cut · used only where the numbers are series
Knowledge that can show its work
Unit tests for how knowledge goes wrong
Information tells you what was said. The evidence shows what it earns, and where it stops.
Pooling raises the accuracy of the best single recommendation, but repeating that recommendation lowers group discovery. The failure is in the protocol, not the information.
surfaces
the whole color system in one rowAny band, panel, row, section line, page header, plate, tab, or chart body takes data-surface. Deep and series surfaces re-assign the tokens inside them, which is why a receipt, a status glyph, or a bar chart dropped into one just works.
engine and skins
v1.1 · every opinion about looks is a tokenregister.css is an engine plus a default skin. The engine is the grammar, the components, and the rules that keep a page readable. The skin is 61 tokens: faces, label case, corners, line weight, shadow, density, motion, and the whole palette including what sits on the dark block. A skin is one CSS block and cannot change the grammar, so it can be hand-written or generated from a mood with prompts/skin.md.
Four ship: register (this page, the default and the most finished), seventies, gothic (a dark paper with a bone-colored deep block), and terminal (no sans face at all). All four score 0/14. The skins page shows the same specimen in each, the schema, the image treatments, and the prompt templates.
seventies
done 01gothic
open 01terminal
active 01register
default 01what bootstrap has, and what we do with it
a check against the most complete framework| bootstrap | register | note |
|---|---|---|
| responsive grid, containers, breakpoints | .grid data-cols · .shell · 880 and 600 | two breakpoints on purpose; the register column is the third |
| navbar with collapse | .topbar + .menu-toggle | no JavaScript; a checkbox folds the nav |
| forms, validation, input groups, switches | .field data-state · .check · .input-group · fieldset.group | added in v1.1 |
| alerts, badges, progress, accordion, list group | .note · .status and .chip · .pbar and .meter · details.disclosure · .register | same jobs, rule-drawn |
| cards | none | deliberate; panels and registers do the work |
| modal, toast, tooltip, offcanvas, carousel | dialog.dialog · abbr[title] | native dialog only; the rest need scripts and a page should be complete without them |
| images, figures, thumbnails | figure.image data-ratio data-treatment · .image-grid | added in v1.1, with provenance lines and prompt templates |
| icons (separate library) | icons.svg · 12 line icons | no emoji |
| color modes, theming via sass | data-skin · data-theme · 61 css tokens | no build step; skins are one selector |
| utilities (hundreds) | .stack · .cluster · data-align · .hide-sm · .show-md · .sticky | six; the grammar carries the rest |
| rtl, print, reduced motion, focus rings | print · reduced motion · focus · logical properties in most places | rtl not yet verified |
use it
five steps · ten minutesUse this template → name your repo → Settings → Pages → Deploy from branch (main, /)the repo is already a site; nothing to buildpick a skin: <link href="skins/gothic.css"> and data-skin on <html>, or generate one with prompts/skin.mdfour skins ship; register is the defaultcopy examples/program.html, dossier.html, or board.html and replace the sample dataevery example is complete without JavaScriptkeep DESIGN.md in the repo rootit is the rules in the form your coding agent reads; Claude Code and Codex honor it by defaultnpx design-slop-cop https://you.github.io/your-repo/deterministic AI-tell scorer; the template scores 0/14 and yours should toowhy "register"
the name is the signaturethe column · the marks · the ledger
The register is the left column every identifier sits in. Registration marks are the crop corners a printed proof carries. A register is a ledger of record. All three are what these pages are: an indexed, proofed record of a repository. The stylesheet is register.css; the family bar at the top is how a group of sites declares they share it.
ai-tell audit
checked against Krebs, Sikora, and 925 Studios · re-run with design-slop-cop- No Inter, no Space Grotesk, no Instrument Serif; Plex Sans + Plex Mono with system fallbacks
- No uppercase, letter-spaced labels or eyebrow badges anywhere
- No colored edge stripes on cards; state lives in a glyph-labelled title
- No purple, gradients, glows, glassmorphism, radius, or dark mode as a theme; deep surfaces are blocks inside a light page
- No stat banner rows; number strips hold exact results in 20px mono, readouts at 18px, filled blocks never in a row; the banner tell starts at 22px
- No emoji icons, no numbered 1·2·3 steps unless order is real, no em dashes in system copy
- All patterns are SVG masks, not CSS gradients; searcher labels in grids are never in reading order0/14 on every page