# Skin schema

A skin is a CSS file with one block, `[data-skin="<name>"] { … }`, that sets tokens. It changes how pages look; it cannot change the grammar (components, attributes, kinds) or the rules that keep pages readable. Load it after `register.css` and set `data-skin="<name>"` on `<html>`, or on any wrapper to skin one zone.

Every parameter has a default in `register.css`. Set only what you change.

## Color

| token | role | constraint |
| --- | --- | --- |
| `--paper` `--paper-2` `--paper-3` | page, tint, wash | paper-2 and paper-3 step away from paper in one direction |
| `--ink` `--ink-2` `--muted` `--faint` | text, secondary, descriptions, identifiers | ink on paper ≥ 7:1 · muted ≥ 4.5:1 · faint ≥ 4.5:1 (ids are text, not decoration) |
| `--rule` `--rule-2` | hairlines, strong hairlines | visibly distinct from paper-2; low saturation (a colored 2px top border on a container is the card-stripe tell) |
| `--deep` + `--deep-ink` `--deep-ink-2` `--deep-muted` `--deep-faint` `--deep-accent` `--deep-ok` `--deep-open` `--deep-stop` `--deep-s1`–`--deep-s4` | the inverted block and everything on it | deep-ink on deep ≥ 7:1; on a dark skin, deep is a light block |
| `--accent` `--accent-wash` | links, current, info | accent on paper ≥ 4.5:1; not purple or violet |
| `--ok` `--open` `--stop` + washes | done, waiting, blocked | three distinct hues; never the only carrier of meaning |
| `--s1`–`--s4` + `-deep` + `-wash` | four data series | distinguishable in grayscale by lightness; deep cuts pass 4.5:1 on paper |
| `--on-series` | text on a solid series block | ≥ 4.5:1 on every series |
| `--selection` | text selection | any |

## Faces

| token | role | default |
| --- | --- | --- |
| `--sans` | prose | Plex Sans |
| `--mono` | identifiers, numbers, code, hashes | Plex Mono |
| `--serif` | optional display face | Source Serif 4 |
| `--display` `--display-weight` `--display-tracking` `--display-leading` | headings | sans · 600 · -.02em · 1.12 |
| `--label` `--label-case` `--label-tracking` | eyebrows, section lines, table heads, chips, status | mono · none · 0 |
| `--fs-xs` … `--fs-2xl` `--fs-display` | the scale | 11 · 12.5 · 14 · 15.5 · 18 · 22 · 28 · clamp(30, 4vw, 44) |

Fonts load with an `@import` at the top of the skin. Prefer faces that are not on the AI-default lists (Inter, Space Grotesk, Instrument Serif, Geist, Syne, Fraunces).

## Shape, density, motion

| token | role | range |
| --- | --- | --- |
| `--radius` | corners on panels, buttons, inputs, chips, plates | 0–12px |
| `--line` `--line-2` `--line-3` | hairline, strong, chapter | 1–2 · 2–3 · 3–4 px |
| `--shadow` | panels, buttons, prompt, image frames | `none`, or a hard offset like `3px 3px 0 var(--ink)`; never a blur |
| `--space` | multiplies every spacing token | 0.85–1.25 |
| `--motion` | multiplies every transition | 0 or 1 |
| `body[data-texture]` | dots · grid · dither · hatch | one per site |

## What a skin cannot do

- Add or remove components, attributes, or kinds.
- Put color on an element without a glyph or a word beside it.
- Use gradients, blur shadows, glassmorphism, or a purple accent.
- Drop below the contrast constraints above.
- Set `--label-case: uppercase` and also set a tracking of 0; caps need air (`.06em`–`.1em`).

## The image brief

Every skin file starts with a comment block: mood, palette, series, materials, composition, type feel, avoid. The prompt templates in `prompts/` paste that block in. Keep it under 120 words; it is the only thing an image model sees about the skin.