skins the engine stays, the skin changes register is the default skin
Same grammar, any look
register.css is an engine plus a default skin. Every opinion about looks is a token: faces, case, corners, line weight, shadow, density, motion, and the whole palette including what sits on the dark block. A skin sets tokens and nothing else, so it can be written by hand or generated from a mood in one prompt. It cannot break the grammar.
how it works
two lines of html<link rel="stylesheet" href="register.css"> <link rel="stylesheet" href="skins/gothic.css"> … <html lang="en" data-skin="gothic">
A skin is one selector, [data-skin="name"], so it also works on a wrapper: skin one section, one example, or the specimens below, inside an unskinned page. The engine never reads a skin; it only reads tokens.
What a skin cannot do: add components, remove the register column, put color on something without a glyph or a word beside it, use gradients or blur, go below the contrast floors in the schema. The rules that make a page readable are the engine's. The rules that make it look a certain way are the skin's.
the parameters
from skins/_schema.md · every one has a defaultpaper ×3, ink ×4, rules ×2, deep plus twelve tokens for what sits on it, accent, three states with washes, four series with deep and wash cuts, on-series, selection. Contrast floors: ink 7:1, muted and faint 4.5:1, deep-ink on deep 7:1.
sans, mono, serif; display face with weight, tracking, leading; label face with case and tracking; the type scale. Labels are lowercase mono by default, spaced caps in seventies and gothic, mono again in terminal.
radius (0–12px), three line weights, shadow (none or a hard offset, never a blur).
a spacing multiplier (0.85–1.25) and a motion multiplier (0 or 1).
body[data-texture]: dots, grid, dither, hatch. One per site.
Seven lines at the top of every skin file: mood, palette, series, materials, composition, type feel, avoid. It is the only thing an image model sees about the skin; the prompt templates paste it in.
four skins
the same specimen, four token sets · scroll each cardRegister is the default and the most finished. Seventies, gothic, and terminal are proofs that the engine holds under very different tokens, including a dark paper with a light deep block and a skin with no sans face at all. Each ships with its image brief. Each scores 0/14 on the AI-tell scorer; the dark ones because they are chosen skins with 7:1 body text, not a default with grey text.
generate your own
prompts/skin.md · paste the schema and one skin, then a moodYou are writing a skin for register.css. A skin is one CSS block,
[data-skin="{{name}}"] { … }, that sets only the tokens in the schema.
It cannot add components or change the grammar.
Mood: {{mood}}
Produce skins/{{name}}.css with: a seven-line image brief in a comment;
one @import for at most three Google Fonts (not Inter, Space Grotesk,
Instrument Serif, Geist, Syne, or Fraunces); the [data-skin] block setting
every color token, both faces, display and label parameters, radius,
lines, shadow, space, motion. Meet every contrast floor and state the
ratios you checked. If the paper is dark, make --deep a light block.Moods that work well are specific objects, not adjectives: a 1980s consumer-electronics manual, a Bauhaus exhibition catalog, a NASA mission patch, a Victorian seed catalog, a Swiss railway timetable. The model picks faces, hexes, and shape from the object; the schema keeps it inside the floors.
Then: drop the file in skins/, set data-skin on <html>, open components.html, and run the scorer. If a skin fails the scorer, the fix is nearly always contrast or a font on the default list.
npx design-slop-cop https://you.github.io/site/components.htmldeterministic; no model in the loopimages, generated or not
<figure class="image"> · treatments make any image sit inside the palette · every image carries provenanceImage generation is native here in two ways. The prompt templates in prompts/ (hero, motif, diagram, texture, share card) paste the skin's brief in, so a generated image already speaks the skin. And the image component's treatments (data-treatment) pull any image the rest of the way: grayscale, a series duotone, a paper halftone, or high-contrast ink. Below, one sample image, five ways.
1 · 4/3 · 3/2 · 16/9 · 2/1 · card (1200/630). The frame reserves the space so nothing shifts while the image loads.
plain · mono · duo (+ data-series) · halftone · ink.
bare (no frame) · corners (crop marks).
generated or photo · prompt id · model · date · seed · treatment. The image's run id. See prompts/provenance.md.
data-cols 2 · 3 · 4; collapses to two at 880px and one at 600px.
prompt templates
prompts/ · each pastes the skin brief and asks for one thingGenerate a skin from a mood
Outputs the css file with its image brief and a three-sentence note on what it keeps and changes.
One hero image per site
16:9, one subject, empty left third for text, no letters, palette limited to the brief.
The one object a site is about
Square, flat, two colors plus ink, reads at 32px; for corners and share cards.
A mechanism a chart cannot show
Schematic, labeled parts left as empty boxes so the page sets them in type.
A seamless material tile
Only when the skin's material needs one; the engine ships dots, grid, dither, hatch.
No image model needed
The card is HTML at 1200×630, screenshotted.
The line every image carries
Fields and order.