@r1z4x/tezgah 1.9.2 → 1.11.0

package/skills/hallmark/references/themes/README.md

@@ -0,0 +1,58 @@
+# Writing a theme file
+
+Read only when creating or editing a theme. A build never needs it. `node scripts/theme.mjs validate <file>` checks the contract below and must pass before a theme ships.
+
+**A theme is a material, nothing else.** It says what a page is made of: paper, ink, faces, rules, radius, depth, texture, controls, motion, voice. It never says what the page contains, in what order, in what shape, or how much room anything gets, and it never ships a component: no signature object, no drawn thing, no named part a page must include. Space, section composition and the hero's size belong to `layout.md` and bind every theme alike; a theme that says "air carries the page" or "whitespace does the structure" is overriding them. Every rule the Floor, `craft.md` or `layout.md` already binds is left out.
+
+## The header block
+
+Every file opens with this block, which `scripts/theme.mjs index` compiles into `index.json` (the deal reads the index, never the files):
+
+```
+---
+name: Coral
+slug: coral
+genre: modern-minimal
+paper: light 96.5 50
+display: grotesk-sans General Sans
+accent: warm 28
+posture: restrained
+keywords: saas, platform, billing, payments, dashboard, b2b, startup, pricing, analytics, fintech, workflow, onboarding, trust, warm, human
+material: warm grey paper, warm charcoal ink, General Sans throughout, soft pills, one coral signal
+photo: muted
+---
+```
+
+- `paper`: band (`light` over 85% L, `mid` 30 to 85, `dark` under 30), then L and hue of `--color-paper`.
+- `display`: class, then the face. Classes: `roman-serif`, `high-contrast-serif`, `slab-serif`, `grotesk-sans`, `grotesk-heavy`, `geometric-sans`, `rounded-sans`, `display-condensed`, `display-heavy`, `mono`, `pixel`, `handwritten`, `blackletter`.
+- `accent`: band (`warm` 10 to 60°, `cool` 200 to 300°, `neutral` chroma under 0.05, or `chromatic-<name>` for anything else), then the hue.
+- `posture`: `restrained`, `committed`, `full-palette` or `drenched`.
+- `keywords`: the words in a prompt that route here, lowercase, comma-separated, ten to twenty-five.
+- `material`: one line, the deal prints it: paper, ink, faces, surface, signal. Materials only, no objects.
+- `photo`: the treatment every photograph on a page takes, written into `base.css` by the scaffold as CSS on every image in a slot: `natural`, `warm`, `muted`, `mono`, `duotone <dark> <light>` or `tint <colour>` (token names without `--color-`, so `duotone ink paper`), optionally followed by `con=`, `sat=`, `vib=`, `exp=`, `sepia=`, `high=` or `shad=` with a whole number. Pick what the material would do to a photograph: a newsprint prints it black, a riso pulls it in two inks, a warm studio keeps it natural.
+- `pictured`: written by `scripts/picture.mjs`, the shape and hero posture of the page in the theme's picture, so a build knows which composition is already taken.
+
+## The picture
+
+Every theme ships `<slug>.jpg` beside its file: the first screen and one lower screen of a finished page built in the theme with the skill, each at 1440 x 900, scaled to 960 wide and stacked (`node scripts/picture.mjs <slug> <page.html> <y of the lower screen>`). The page must sweep clean, pass `layout.md` on every screen, and be one a designer would sign; its lower screen shows the material at work in a full section, and its pictures are real (photographs or the product built), never an empty slot. A build reads the picture for palette balance, type voice and surfaces, never for layout. A theme without a picture validates with a warning.
+
+## The body, in order, 3,000 to 8,000 bytes
+
+1. **One paragraph:** what the theme feels like and what it is not. No brand names: describe the register, never the sites that have it.
+2. **Tokens:** a `:root` block with the real values in OKLCH: paper, paper-2, paper-3, ink, ink-2, muted, rule, accent, accent-ink, focus; the three font tokens; `--radius-card`, `--radius-pill`, `--rule-hair`, `--shadow-card`; `--tracking-display`, `--display-weight` (the weight every head takes). Optional: `--color-slot` when the slot wash should take a second hue rather than the accent. No comments inside the block: `theme.mjs scaffold` copies it verbatim into a page's `tokens.css`. A theme with colourways lists the alternates in a short table under the block, and the page states its choice in the stamp.
+3. **Type:** display, body, and the outlier if any, with weights, tracking, case and leading; sizes come from the shared scale (`layout.md` § 2), so a theme names a step only where its face needs one (a condensed face may set one step larger). Labels, captions, table heads, tags and nav links are the body face a step smaller, sentence case, untracked, or one label face the theme names, never mono unless mono is this theme's material. A head is one weight and one colour; a theme built on an accented word names it and says it appears once.
+4. **Surfaces:** four to six bullets: rule weight and where rules run, radius, depth stance, the bands a page may use (which paper, how many), photographs (what kind of picture suits the material, how it is framed and cropped, how it meets the type), the texture budget (naming the `texture.md` recipe if any).
+5. **Range:** three or four bullets on what this material makes without a photograph: which compositions of `layout.md` § 5 it sets best and with what (a figure in the display face, rules drawn into a table, the accent as a band that holds a form, a line set as a specimen, the product's own surface). A page in the theme alternates pictures with sections only this material could make (83), so the range is what keeps it from reading as a stock gallery. These are treatments of the shared compositions, never a component a page must include, and never a section order.
+6. **Controls:** two or three bullets: the control pair, links, inputs, and where the accent may sit.
+7. **Motion:** one to three lines: how fast, how it eases, what may move.
+8. **Voice:** one or two lines on the copy's register.
+9. **Do-nots:** three to five bullets specific to this theme's own failure modes, never restatements of a gate.
+10. **Build hint:** at most 20 lines of CSS carrying the rules that make the material recognisable (the head setting, the control pair, a well or band surface, a texture if any), every colour, duration, easing and space a token (validate refuses raw milliseconds, a bare `ease`, named colours and raw spacing). Font links as one line.
+
+## What a theme may not carry
+
+A component or object of any kind (a plate, a sign, a disc, a drawer, a sticker sheet, a ticket, a drawn product, a folio column, a mark the page must draw), a section sequence, a page outline, a mandated nav, footer, hero or imagery, HTML scaffolds, page-part class names, rules about space or density, verbatim copy, invented brand names or people, an eyebrow in any form, a label in tracked capitals or small caps, a stamp or a badge that carries no fact, counts that fix a layout, neighbour comparison tables (the deal computes distance from the header block), or a list of reference sites.
+
+## Contradictions to avoid
+
+The field's calibration of the AI look, which the gates enforce: cream paper with a high-contrast serif and a terracotta accent (65); a monospace label voice on a theme whose material is not mono (64); labels, tags or controls in tracked capitals (67); one coloured or bold word inside a head (38iii); middle-dot meta strings and arrow suffixes (63); italic display as a flourish (38); glow shadows and radial halos on dark themes (29). A theme that wants one of these declares it as its material in the header and the file, with the Reflex it waives named once, or it does not have it.

package/skills/hallmark/references/themes/almanac.md

@@ -0,0 +1,103 @@
+---
+name: Almanac
+slug: almanac
+genre: editorial
+paper: mid 84 245
+display: grotesk-sans Hanken Grotesk
+accent: chromatic-magenta 350
+posture: restrained
+keywords: almanac, yearbook, field guide, reference, handbook, manual, index, catalogue, encyclopedia, data, figures, tables, statistics, research, dataset, records, directory, glossary, specifications
+material: cool slate stock with a pale printed sheet, blue-black ink, Hanken Grotesk heads over Newsreader prose with mono figures, two rule weights and square corners, one chart magenta
+photo: muted
+pictured: Workbench, Stage hero
+---
+
+# Almanac
+
+The register of a reference book: cool slate stock, blue-black ink, Hanken Grotesk heads over Newsreader prose, figures in mono lined up to the decimal, rules in two weights, and one deep magenta, the colour a sea chart prints its lights in, kept small. It reads as exact because the rules and the numerals hold the authority, not colour or ornament. It is not a dashboard on grey and not a warm editorial page.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(84% 0.012 245); --color-paper-2: oklch(81% 0.012 245); --color-paper-3: oklch(77% 0.012 245);
+  --color-ink: oklch(16% 0.020 245); --color-ink-2: oklch(24% 0.018 245); --color-muted: oklch(38% 0.016 245);
+  --color-rule: oklch(73% 0.013 240); --color-rule-2: oklch(32% 0.018 240);
+  --color-accent: oklch(45% 0.180 350); --color-accent-2: oklch(37% 0.160 350); --color-accent-ink: oklch(97% 0.006 245); --color-focus: oklch(46% 0.190 350);
+  --color-sheet: oklch(93.5% 0.008 245);
+  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-body: "Newsreader", ui-serif, Georgia, serif;
+  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;
+  --radius-card: 0; --radius-pill: 2px; --rule-hair: 1px; --rule-bar: 2px; --shadow-card: none;
+  --tracking-display: -0.02em; --display-weight: 600;
+}
+```
+
+## Type
+
+- **Display:** Hanken Grotesk 600 for every head, `--tracking-display`, line-height 1.05, sentence case, roman; the hero head tightens to -0.035em at line-height 0.95. The grotesk sets structure; the serif never sets a head.
+- **Body:** Newsreader 400 and 500 with optical sizing, line-height 1.55; italic is in-paragraph emphasis only.
+- **Labels, captions, table heads, meta:** Newsreader 500 a step smaller, sentence case, `--color-muted`. Never mono.
+- **Figures:** IBM Plex Mono 400 and 500 with `tabular-nums`, right-aligned in a column, decimals lined up. Mono sets numerals and nothing else; a lone figure (a price, a count) may run to `--text-display` in Plex Mono 500 at -0.04em.
+
+## Surfaces
+
+- Two rule weights: `--rule-hair` in `--color-rule` parts rows and divisions; `--rule-bar` in `--color-rule-2` draws one firm line under a head or a table head. Nothing heavier.
+- Square corners on every surface, 2px at most on a control. No boxed cards, no shadows: depth is a rule and a paper step (`--color-paper-2` on a well or an alternate row).
+- The sheet: `--color-sheet` is the printed page, a pale stock laid on the slate with a 2px ink rule at its head and hairlines inside; the product's own pages and tables sit on it, never a paragraph.
+- Bands: a `--color-paper-2` band, or one `--color-ink` band with paper text and mono in the sheet colour. Two bands a page at most; never a magenta field.
+- Photographs: the subject at working distance (a harbour at low water, a slipway, the sea under weather), mid to far, flat overcast or first light, no face to the lens. Square, an inset 1px `--color-rule-2` outline, full-bleed or across ten columns; a caption beneath carries a fact; type never sits on a photograph.
+- No texture: ruled paper, never a card surface.
+
+## Range
+
+- **The page itself:** a table set as the printed book sets it, on the sheet: a dated head over a 2px rule, the row names in Newsreader, times and heights in Plex Mono right-aligned, one row in magenta where the page points; it carries a hero or a split on its own.
+- **One chart, set large:** a single series in magenta at 2px across twelve columns, the night or the off-hours shaded in paper steps, every turning point labelled in mono; with a control it becomes the page's one working thing.
+- **The file on the ink band:** a header row and a handful of sample lines in Plex Mono in the sheet colour, the column names in magenta, a caption that says what the full file holds.
+- **A comparison of editions or plans:** a Table of two or three columns, the firm rule under the head, prices as mono figures, the actions in the last row.
+
+## Controls
+
+- A magenta filled control (`--color-accent-ink` on `--color-accent`) beside a hairline-outlined control in ink, both Hanken Grotesk 500 at the 2px radius.
+- Links in ink with a 1px magenta underline at a 0.15em offset that thickens on hover; inputs square with a 1px `--color-muted` edge.
+- Magenta stays under 5% of a screen: the filled control, link underlines, the one series a chart argues from.
+
+## Motion
+
+Nothing moves except state: a row that links tints on hover, a link's underline thickens. No reveal, no count-up, no marquee.
+
+## Voice
+
+Declarative, dated, exact: cite the figure, the edition, the source, the unit. Never a hype adjective.
+
+## Do-nots
+
+- Never a hot pink or a violet; the magenta holds at L 44, hue 350, deep enough to read as a chart's print.
+- Never warm or white paper; slate at hue 245, always tinted.
+- Never a boxed card or a drop shadow; two rule weights carry every surface.
+- Never a giant count as the hero, a page of small charts, or one mark for each day or port: one chart, set large, carries the data.
+- Never a decorative wave or line drifting behind the type; a curve appears only as a chart with its axes.
+- Never proportional figures in a column; numerals that compare are Plex Mono, tabular, right-aligned.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+body { color: var(--color-ink-2); }
+h1, h2, h3 { font-weight: 600; color: var(--color-ink); }
+.num, td.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; }
+thead th, .rule-firm { border-bottom: var(--rule-bar) solid var(--color-rule-2); }
+th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; }
+td { border-top: var(--rule-hair) solid var(--color-rule); }
+.btn { border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink); background: transparent; }
+.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); } .btn--primary:hover { background: var(--color-accent-2); }
+.well { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); }
+.sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); }
+.band--ink { background: var(--color-ink); color: var(--color-paper); }
+.chart .series { fill: none; stroke: var(--color-accent); stroke-width: 2; }
+.photo > img { outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
+a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; }
+```

package/skills/hallmark/references/themes/arcade.md

@@ -0,0 +1,102 @@
+---
+name: Arcade
+slug: arcade
+genre: playful
+paper: dark 14 312
+display: pixel Silkscreen and Bungee
+accent: chromatic-ember 40
+posture: full-palette
+keywords: game, indie, game studio, launch party, demo night, hackathon, festival, meetup, retro, pixel, arcade, nostalgia, synth, lo-fi, toy, zine, club night, loud
+material: aubergine CRT ground, lilac-white ink, Bungee capitals split in RGB over Chivo, Silkscreen figures, hard offset shadows, ember and acid signals
+photo: tint accent
+pictured: Marquee Hero, Stage hero
+---
+
+# Arcade
+
+A late-night cabinet: an aubergine ground under a CRT screen, Bungee capitals split in RGB over Chivo, Silkscreen figures, hard offset shadows, two loud inks that take turns like two players. Photographs come through the screen, tinted in the lead. It is loud through colour, lettering, light and press physics, never drawn props; not a neon synthwave poster, not a pixel-art game page.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(14% 0.04 312); --color-paper-2: oklch(18.5% 0.042 312); --color-paper-3: oklch(23% 0.045 312);
+  --color-ink: oklch(95% 0.014 315); --color-ink-2: oklch(87% 0.018 315); --color-muted: oklch(71% 0.024 315);
+  --color-rule: oklch(34% 0.05 312);
+  --color-accent: oklch(66% 0.215 40); --color-accent-2: oklch(88% 0.195 115); --color-accent-ink: oklch(14% 0.04 312);
+  --color-focus: oklch(88% 0.195 115);
+  --color-crt-r: oklch(63% 0.24 25); --color-crt-g: oklch(80% 0.25 140); --color-crt-b: oklch(60% 0.24 265); --color-crt-c: oklch(78% 0.14 200); --color-shade: oklch(8% 0.02 315);
+  --font-display: "Bungee", "Impact", sans-serif; --font-body: "Chivo", ui-sans-serif, sans-serif; --font-outlier: "Silkscreen", monospace;
+  --radius-card: 4px; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: 6px 6px 0 var(--color-accent-2);
+  --tracking-display: 0; --display-weight: 400;
+}
+```
+
+Two dials, each stated in the stamp (`arcade: ember/grille`). Colourway, lead over answer on ground: `ember` (the block above), `sodium` (80% 0.165 72 over 60% 0.145 242 on 14% 0.030 300) or `oxblood` (83% 0.150 90 over 58% 0.200 25 on 16% 0.028 330). Screen: `grille` (1px vertical RGB stripes at low alpha) or `mask` (a triad dot lattice on a 3px pitch). Never mix two on a page.
+
+## Type
+
+- **Display:** Bungee 400, uppercase, untracked, line-height 1.02, for the h1, one statement line and the wordmark, each under 28 characters. It carries the RGB split: 1 to 2px of `--color-crt-r` one way and `--color-crt-c` the other, zero blur, one split line per screen.
+- **Heads and body:** Chivo; section heads 900 at -0.02em and line-height 1, sentence case; prose 400 at 1.6.
+- **Figures:** Silkscreen 700, untracked, tabular, at 40px and up only (it smears smaller), in the two inks, with the unit beside it in Chivo 700. Never a word in Silkscreen but a unit like PM.
+- **Labels:** Chivo 700 a step smaller, sentence case.
+
+## Surfaces
+
+- `--rule-bar` on wells and anything pressable, `--rule-hair` in `--color-rule` between rows; 4px radius, square tags and inputs.
+- Depth: the zero-blur acid offset on anything pressable, a ground step on a well, the cursor row (a row filled ember with `--color-accent-ink` type, like a selected menu line) for the one thing a list wants chosen. Never blur.
+- Bands: `--color-paper-2` under the screen, or one ember field with `--color-accent-ink` type and no RGB split. Two a page at most.
+- Photographs: the night from inside the room: hands on a stick, keys lit from below, players from behind, nobody facing the lens. Tinted, a `--rule-bar` border, under the screen; big and few.
+- The screen (`texture.md` § 4): the dial's layer and a `--color-shade` scanline, static, on bands, wells and photographs; never under running text, never a bezel.
+
+## Range
+
+- **Figures as a score line:** the prompt's real numbers in Silkscreen at `--text-display-s` and up, ember and acid alternating, parted by `--rule-bar` verticals across the twelve columns.
+- **Two-player comparison:** two wells side by side, one keyed ember and one acid (a top bar and the figure ink), rows matched across them for two audiences or two choices; the inks are the players, nothing is drawn.
+- **A timetable or price list as a menu:** Rows of Silkscreen times or prices against Chivo 900 titles on hairlines, one cursor row lit ember.
+- **Statement and working control:** one Bungee line at display size on the ember field; or the press surface as a stepper with a running total in Silkscreen at display size.
+
+## Controls
+
+- The press surface: an ember fill, Chivo 700, a `--rule-bar` ink border and the acid offset, beside the same surface unfilled. Hover moves away from the shadow, active slams toward it; a stepper button is the same surface square.
+- Links in ink with a 2px acid underline; inputs 52px, square, a `--rule-bar` border in `--color-muted`.
+- Ember leads and acid answers across controls and figures; never a third ink.
+
+## Motion
+
+Press physics on `--dur-micro` and `--ease-out`. A cursor row lights on `steps(1)`, no fade; the RGB split may widen 1px on a display line that links.
+
+## Voice
+
+Coin-op plain, said over the noise: the night, the hour, the door price, the machines. Short lines, verbs first, no nostalgia.
+
+## Do-nots
+
+- Never magenta and cyan as the pair, never a starfield; the screen is the texture.
+- Never a soft shadow, a phosphor glow or a gradient on a button.
+- Never a drawn sprite, joystick, controller or pixel character; the night is photographed.
+- Never a page of tinted photographs back to back: an ember picture beside an ember picture is one orange wall.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Chivo:wght@400;700;900&family=Silkscreen:wght@700&display=swap" rel="stylesheet">
+```
+
+```css
+h1, .display { font-family: var(--font-display); font-weight: 400; line-height: 1.02; text-transform: uppercase; text-shadow: -1.5px 0 0 var(--color-crt-r), 1.5px 0 0 var(--color-crt-c); }
+h2, h3 { font-family: var(--font-body); font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
+.figure { font-family: var(--font-outlier); font-weight: 700; color: var(--color-accent-2); font-variant-numeric: tabular-nums; }
+.btn { background: var(--color-accent); color: var(--color-accent-ink); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); padding: var(--space-sm) var(--space-lg); font-weight: 700;
+  box-shadow: var(--shadow-card); transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
+.btn:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--color-accent-2); }
+.btn--secondary { background: transparent; color: var(--color-ink); }
+.row:hover, .row[aria-current] { background: var(--color-accent); color: var(--color-accent-ink); transition: background-color var(--dur-micro) steps(1); }
+.well { background: var(--color-paper-2); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-card); }
+.crt { position: relative; isolation: isolate; }
+.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none;
+  background-image:
+    repeating-linear-gradient(to right, color-mix(in oklab, var(--color-crt-r) 5%, transparent) 0 1px, color-mix(in oklab, var(--color-crt-g) 5%, transparent) 1px 2px, color-mix(in oklab, var(--color-crt-b) 5%, transparent) 2px 3px),
+    repeating-linear-gradient(to bottom, transparent 0 2px, color-mix(in oklab, var(--color-shade) 16%, transparent) 2px 3px); }
+```

package/skills/hallmark/references/themes/atelier.md

@@ -0,0 +1,98 @@
+---
+name: Atelier
+slug: atelier
+genre: editorial
+paper: light 94.5 76
+display: roman-serif Sentient
+accent: cool 248
+posture: restrained
+keywords: fashion, atelier, couture, fragrance, gallery, exhibition, museum, ceramics, furniture, homeware, architecture, design studio, lookbook, collection, craft, small-batch, made by hand, brand story, luxury, object, hotel, boutique hotel, hospitality, stay
+material: limewash paper under a slow luminous air, deep umber ink, Sentient light over Hanken Grotesk, cotton card stock with fibre and pressed type, hairlines, matted prints in warm daylight, one cool slate signal
+photo: warm con=-6 vib=-10
+pictured: Gallery Hang, Diffusion hero
+---
+
+# Atelier
+
+The register of a maker's catalogue held in still air: limewash paper with a slow, luminous haze moving behind it, deep umber ink, Sentient light in heads and statements, Hanken Grotesk for reading, hairlines, one slate signal nearly as dark as the ink. The things a house hands you (a sample strip, a card, a numbered print) are built on cotton stock, lit from the top left, with pressed type and fibre. Not a cream page with a thin luxury serif, not a product page with a blue button.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(94.5% 0.010 76); --color-paper-2: oklch(91.8% 0.013 74); --color-paper-3: oklch(88% 0.015 72);
+  --color-ink: oklch(19% 0.024 52); --color-ink-2: oklch(31% 0.018 54); --color-muted: oklch(47% 0.014 60);
+  --color-rule: oklch(81% 0.011 70);
+  --color-accent: oklch(41% 0.075 248); --color-accent-ink: oklch(96% 0.008 76); --color-focus: oklch(50% 0.095 248);
+  --color-card: oklch(97.6% 0.007 82); --color-card-edge: oklch(86% 0.012 72); --color-pencil: oklch(52% 0.010 62);
+  --card-lit: oklch(98.4% 0.006 84); --card-shade: oklch(96.4% 0.008 78); --lit: oklch(99.6% 0.004 85 / 0.9);
+  --stain-1: oklch(70% 0.075 14); --stain-2: oklch(66% 0.055 132); --stain-3: oklch(60% 0.080 58); --stain-4: oklch(68% 0.045 206);
+  --font-display: "Sentient", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif;
+  --font-outlier: var(--font-body);
+  --radius-card: 0; --radius-pill: 3px; --rule-hair: 1px; --rule-head: 1px;
+  --shadow-card: 0 0 0 1px oklch(30% 0.03 55 / 0.05), 0.5px 1px 1px oklch(30% 0.03 55 / 0.08), 3px 8px 14px -6px oklch(30% 0.03 55 / 0.14), 14px 36px 64px -28px oklch(30% 0.03 55 / 0.3);
+  --tracking-display: -0.018em; --tracking-statement: -0.022em; --display-weight: 300; --statement-weight: 300; --serif-small: 400;
+}
+```
+
+## Type
+
+- **Display and statement:** Sentient 300 for every head and for a sentence or a figure at `--text-display-s` or larger, line-height 1.02 to 1.1, sentence case, roman. One weight and one colour a head.
+- **Small serif:** Sentient 400 for `h3`, a name on a card, a day, an entry numeral; never under 16px, never a paragraph.
+- **Body:** Hanken Grotesk 400, line-height 1.6, `--color-ink-2`. Three weights a page: Sentient 300 and 400, Hanken 400.
+- **Labels:** the wall label: Hanken 400 a step smaller, sentence case, untracked; the object in ink, the material or number in `--color-muted`. A numbered edition is pencilled: a blank rule for the hand, then the run, in `--color-pencil`.
+
+## Surfaces
+
+- The air: one fixed WebGL field behind the page, domain-warped noise drifting upward in cream and pale amber veils, mixed in linear light, rendered at half size; the pointer's recent path parts it and a chosen item tints it. It shows through the hero and one or two zones; paper sections cover it. A still frame of the same field is the fallback. Never a gradient blob, never a photograph.
+- Texture is generated as feTurbulence data URIs: `--grain` (180px, 1.15) multiplied at 0.16 over the air, `--fibre` (220px, 0.85) on all card stock.
+- Card stock: cotton in `--color-card`, 2px corners, `--shadow-card`, an inset lit edge top left, an inner hairline frame inset 14px in `--color-card-edge`; type on it is pressed (a 1px lit text shadow below).
+- Sample strips: slim cotton blotters with a pointed tip, the item's stain wicking up from the tip, the name printed small and vertical. They fan from a rivet beside a head, hang from a rail as tabs (the chosen one let down on a thread), or tuck behind a card.
+- Hairlines on rows; a table or list opens on an ink `--rule-head` rule. Photographs: still life and rooms in warm daylight, hung square with a wall label; the lead picture is a print on a thin cotton mat with a fine bevel and its edition pencilled beneath.
+
+## Range
+
+- **Statement:** one sentence of the prompt in Sentient 300 across nine or ten columns, the pencilled edition line and a wall-text paragraph opening on a slate drop cap.
+- **The choice as strips:** the collection as blotters on a rail, each a real tab; the chosen one drops, its picture and wall label beside it.
+- **Timetable:** days or hours as a ruled table under the ink rule, names in Sentient 400, a closed row muted, never struck through.
+- **The booking as a card:** the form as a letterpress card on cotton: the house name pressed, a ringed day picker (a blind impression around the chosen day), engraved time chips, ruled lines to write on, strips tucked behind.
+
+## Controls
+
+- A hairline-outlined control in ink at 3px (hover fills ink, paper text) beside an underlined link with a slate underline. No colour-filled control.
+- Choices on card stock are pressed in: inset shade top left, lit edge below; chosen takes a 1px ink ring. Fields on a card are a label over a ruled line.
+- The slate stays under 4% of a screen: underlines, the drop cap, the focus ring.
+
+## Motion
+
+Fade-in after fonts; strips unfurl once on `--ease-out` over `--dur-long`; the air drifts, parts and tints, paused off screen. Reduced motion and no script: a still air, the first item chosen.
+
+## Voice
+
+Hand-set, object-precise: the object, the material, the number made, the days the door is open. No superlatives, never "shop now" or "discover".
+
+## Do-nots
+
+- Never a warm accent; the signal is cool slate under chroma 0.09.
+- Never a bold or high-contrast head; Sentient light carries the voice.
+- Never serif running text.
+- Never a flat white card or a blurred glass panel; card stock has fibre, a lit edge and one light from the top left.
+- Never two still lifes side by side at one size.
+
+## Build hint
+
+```html
+<link href="https://api.fontshare.com/v2/css?f[]=sentient@300,400&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400&display=swap" rel="stylesheet">
+```
+
+```css
+body { color: var(--color-ink-2); line-height: 1.6; }
+h1, h2 { font-weight: var(--display-weight); color: var(--color-ink); } h3 { font-weight: var(--serif-small); }
+.ruled { border-top: var(--rule-head) solid var(--color-ink); } .ruled > * + * { border-top: var(--rule-hair) solid var(--color-rule); }
+.dropcap::first-letter { float: left; font: var(--serif-small) 3.3em/0.8 var(--font-display); padding: 0.1em 0.1em 0 0; color: var(--color-accent); }
+.btn { min-height: 52px; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); padding: 0 var(--space-lg); color: var(--color-ink); background: transparent; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
+.btn:hover { background: var(--color-ink); color: var(--color-paper); }
+.stock { border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); text-shadow: 0 1px 0 var(--lit); }
+.stock::before { content: ""; position: absolute; inset: 0.875rem; border: var(--rule-hair) solid var(--color-card-edge); }
+.air::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; opacity: 0.16; mix-blend-mode: multiply; }
+```

package/skills/hallmark/references/themes/bloom.md

@@ -0,0 +1,102 @@
+---
+name: Bloom
+slug: bloom
+genre: atmospheric
+paper: light 97 72
+display: grotesk-sans Ranade
+accent: warm 36
+posture: committed
+keywords: generative, ai creative, music, song, video, image, voice, art, make, create, compose, render, imagine, prompt, creative studio, playground, expressive, warm, daylight, consumer creative, portrait, headshot, selfie, retouch
+material: warm off-white paper with grain and a generated working grid, two quiet terracotta blooms, warm umber ink, Ranade with one roman Gambarino figure, rubber and cased parts lit from above, part tones on rounded clips
+photo: warm exp=4
+pictured: Workbench, Stage hero
+---
+
+# Bloom
+
+Daylight on a working sheet: warm off-white paper with a faint grain, the medium's own grid (a piano roll, a timeline, a ruler) printed into the ground and fading out from the stage, umber ink, Ranade with one roman Gambarino moment. The making happens on the grid in rounded clips; the parts you touch are physical: a rubber cap in a bezel, cases slid from a stack. It is not a dark generative canvas with neon glows, not a cream editorial page, not a terracotta poster.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(97% 0.010 72); --color-paper-2: oklch(94.6% 0.013 70); --color-paper-3: oklch(91.5% 0.016 66);
+  --color-ink: oklch(21% 0.024 40); --color-ink-2: oklch(31% 0.022 46); --color-muted: oklch(49% 0.02 56);
+  --color-rule: oklch(88% 0.014 64); --color-sheet: oklch(98.7% 0.007 78);
+  --color-accent: oklch(53% 0.145 36); --color-accent-2: oklch(66% 0.10 55); --color-accent-soft: oklch(53% 0.145 36 / 0.11);
+  --color-accent-ink: oklch(98.5% 0.008 72); --color-focus: oklch(53% 0.145 36);
+  --lane-1: oklch(50% 0.04 55); --lane-2: oklch(48% 0.105 28); --lane-3: oklch(70% 0.115 72); --lane-4: oklch(65% 0.085 12);
+  --grid-16: oklch(21% 0.024 40 / 0.035); --grid-beat: oklch(21% 0.024 40 / 0.075); --grid-bar: oklch(21% 0.024 40 / 0.15); --grid-row: oklch(21% 0.024 40 / 0.045);
+  --rubber: oklch(55% 0.15 34); --rubber-hi: oklch(66% 0.125 42); --rubber-lo: oklch(43% 0.125 31);
+  --umber: oklch(30% 0.03 45); --bezel: oklch(92.5% 0.014 68); --case: oklch(93.5% 0.012 70);
+  --hi: oklch(99.6% 0.006 80 / 0.75); --shade-1: oklch(21% 0.024 40 / 0.08); --shade-2: oklch(21% 0.024 40 / 0.16); --shade-3: oklch(30% 0.06 40 / 0.28);
+  --font-display: "Ranade", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
+  --font-outlier: "Gambarino", Georgia, serif; --font-code: "Geist Mono", ui-monospace, monospace;
+  --radius-card: 18px; --radius-inner: 10px; --radius-clip: 6px; --radius-pill: 999px; --rule-hair: 1px;
+  --shadow-card: 0 1px 2px oklch(21% 0.024 40 / 0.06), 0 18px 36px -18px oklch(21% 0.024 40 / 0.26);
+  --shadow-lift: 0 2px 4px oklch(21% 0.024 40 / 0.07), 0 36px 72px -32px oklch(45% 0.1 40 / 0.34);
+  --tracking-display: -0.024em; --display-weight: 600;
+}
+```
+
+## Type
+
+- **Display:** Ranade 600 for every head, `--tracking-display`, line-height 1.04 to 1.08, sentence case, one colour: the ink.
+- **Body:** Ranade 400 at 17 to 18px, line-height 1.55; 500 for labels and controls. Three weights in all.
+- **The serif moment:** Gambarino 400, roman, once a page: one figure at 160px or more, or one lede. Never a head, never italic.
+- **Labels:** Ranade 500 a step smaller, sentence case, `--color-muted`. Geist Mono only for a ruler's fine numerals and timecodes inside the built product.
+
+## Surfaces
+
+- The ground is the medium's grid, generated in CSS: stacked linear gradients for bars, beats, sixteenths and rows (black-key rows tinted every octave for a piano roll), on `--color-sheet` behind the stage, then continued faintly past it and masked to fade out radially. The same grid returns in small crops beside steps and at the close.
+- On the grid, the work: four part lanes in `--lane-*` tones as rounded clips (`--radius-clip`, a tinted gradient, an inset hairline in the lane tone, a lit top edge) carrying bar waveforms or notes; a hairline playhead; a key strip and a fine-numeral ruler.
+- Texture is generated: a 180px feTurbulence grain at 5% over the paper, and at 30% soft-light on rubber.
+- Light from above on every part. Two warm blooms stay, quieter: `--color-accent` near 8% top right, `--color-accent-2` near 5% bottom left, fixed.
+- Raised warm surfaces, never hairline boxes: `--shadow-card`, `--shadow-lift` for the one that matters. Two bands at most, never terracotta.
+- Photographs: daylight at home, hands, an instrument by a window; never a studio at night.
+
+## Range
+
+- **The input becoming the output on one grid:** what the user gives (a hum, a sketch, a line) drawn as a trace that settles onto the grid, the result growing in lanes beneath, and Play really plays it.
+- **Choices as cased spines:** options as a stack of cases (a colour band striped with light, a card label, pips for its parts); the chosen one slides out and the grid re-arranges.
+- **One figure in the serif** beside three steps, each with a small crop of the grid.
+- **The result as one clip** on the grid at the close, downloadable.
+
+## Controls
+
+- The primary is a rubber cap in a recessed bezel: a domed `--rubber` radial gradient lit from the top, grain, set in a `--bezel` well with an inset shade; it sits at the left of a `--color-sheet` pill with its label, and its ring breathes while the product listens. Press sinks it 1px.
+- Secondary: a sheet pill with a shade ring and a lit top edge, or an `--umber` pill.
+- Links in terracotta, underlined on hover; inputs 52px pills with a 1px `--color-muted` edge.
+
+## Motion
+
+Once, in view: the input draws in (about 3 s), notes settle, the playhead glides home, lanes grow. Transforms and opacity, paused off screen. Reduced motion or no script: the finished arrangement, playhead at the start. The blooms never move.
+
+## Voice
+
+Warm, daylight, specific: the verb (hum, make, listen), the output (song, part, scene), and where.
+
+## Do-nots
+
+- Never a dark canvas, a neon glow or a third bloom.
+- Never a terracotta field or card; terracotta is rubber, a link, a lane.
+- Never a grid at full strength across a whole section; it fades from the stage.
+- Never an italic serif, and never the serif in a head or in two places.
+
+## Build hint
+
+```html
+<link href="https://api.fontshare.com/v2/css?f[]=ranade@400,500,600&display=swap" rel="stylesheet">
+<link href="https://api.fontshare.com/v2/css?f[]=gambarino@400&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: var(--display-weight); color: var(--color-ink); }
+.roll { --beat: 40px; --row: 14px; background-color: var(--color-sheet); background-image: linear-gradient(to right, var(--grid-bar) 1px, transparent 1px), linear-gradient(to right, var(--grid-beat) 1px, transparent 1px), linear-gradient(to right, var(--grid-16) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-row) 1px, transparent 1px); background-size: calc(var(--beat) * 4) 100%, var(--beat) 100%, calc(var(--beat) / 4) 100%, 100% var(--row); }
+.clip { border-radius: var(--radius-clip); background: linear-gradient(color-mix(in oklab, var(--c) 18%, var(--color-sheet)), color-mix(in oklab, var(--c) 28%, var(--color-sheet))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 42%, transparent), inset 0 1px 0 var(--hi); }
+.rec { border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--bezel), var(--color-paper-3)); box-shadow: inset 0 2px 3px var(--shade-2), 0 1px 0 var(--hi); }
+.rec__cap { border-radius: 50%; background: radial-gradient(120% 110% at 50% 18%, var(--rubber-hi), var(--rubber) 48%, var(--rubber-lo)); box-shadow: inset 0 1px 0.5px var(--hi), 0 5px 9px -3px var(--shade-3); }
+.pill { border-radius: var(--radius-pill); background: var(--color-sheet); box-shadow: 0 0 0 1px var(--shade-1), 0 8px 18px -10px var(--shade-2), inset 0 1px 0 var(--hi); font-weight: 500; }
+a { color: var(--color-accent); text-underline-offset: 0.2em; }
+```

package/skills/hallmark/references/themes/blueprint.md

@@ -0,0 +1,103 @@
+---
+name: Blueprint
+slug: blueprint
+genre: modern-minimal
+paper: mid 35 256
+display: geometric-sans Chakra Petch
+accent: neutral 240
+posture: drenched
+keywords: architecture, architect, engineering, construction, structural, interiors, planning, surveying, cad, drafting, fabrication, prefab, developer, technical, spec, permit, renovation, build, drawings, architecture studio, timber
+material: prussian-blue sheet, white line ink, Chakra Petch capitals over IBM Plex Sans with mono measurements, square double keylines and dimension strings, photographs printed as cyanotypes, the white line as the only signal
+photo: duotone paper-3 ink con=30 exp=-10
+pictured: Bento Grid, Poster hero
+---
+
+# Blueprint
+
+A drafting sheet as a material: Prussian-blue paper, a white line for ink, Chakra Petch drafted capitals over IBM Plex Sans, mono measurements with their units, keylines instead of cards, and photographs printed as cyanotypes, the sheet's blue in the shadows and its white in the light. It reads technical because everything is a line, a dimension or a print on one ground and the line is the only signal. It is not a dark product page with a blue gradient, not a neon wireframe.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(35% 0.105 256); --color-paper-2: oklch(31% 0.10 257); --color-paper-3: oklch(26.5% 0.095 258);
+  --color-ink: oklch(97% 0.012 240); --color-ink-2: oklch(90% 0.025 242); --color-muted: oklch(80% 0.045 244);
+  --color-rule: oklch(93% 0.02 240 / 0.85); --color-rule-2: oklch(93% 0.02 240 / 0.32);
+  --color-grid: oklch(97% 0.01 240 / 0.09); --color-grid-2: oklch(97% 0.01 240 / 0.2);
+  --color-accent: oklch(97% 0.012 240); --color-accent-ink: oklch(33% 0.105 256); --color-focus: oklch(97% 0.012 240);
+  --font-display: "Chakra Petch", ui-sans-serif, sans-serif; --font-body: "IBM Plex Sans", ui-sans-serif, sans-serif;
+  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-heavy: 2px; --shadow-card: none;
+  --tracking-display: -0.012em; --display-weight: 600; --sheet-inset: 20px; --tick: 14px;
+}
+```
+
+Three sheets, stated in the stamp (`blueprint: cyanotype`).
+
+| Sheet | Ground, line, muted |
+| --- | --- |
+| **cyanotype** (default) | the tokens above |
+| **whiteprint** | ground `oklch(97.5% 0.006 240)`, ink `oklch(35% 0.105 256)`, muted `oklch(52% 0.07 255)` |
+| **brownline** | ground `oklch(86% 0.045 80)`, ink `oklch(28% 0.05 50)`, muted `oklch(45% 0.05 55)`, a red pencil `oklch(45% 0.19 28)` for annotation only |
+
+## Type
+
+- **Display:** Chakra Petch 600 for every head, `--tracking-display`, roman, one weight a head: the h1 and h2 uppercase at line-height 1.02 (55a), the h3 in sentence case.
+- **Body:** IBM Plex Sans 400 for prose and 500 for labels and controls; reversed on the sheet, nothing lighter than 400.
+- **Labels, captions, table heads, meta:** IBM Plex Sans 500 a step smaller, sentence case. IBM Plex Mono 500 sets a measurement with its unit, a stage or drawing number, a year on a dimension string and code, nothing else.
+
+## Surfaces
+
+- Lines only: 1px `--color-rule` keylines on every surface, and a second keyline in `--color-rule-2` 5px inside on a figure or a photograph. Radius 0, no shadows; depth is a second line, a `--rule-heavy` line or a one-step darker ground.
+- The dimension string: a hairline with a 45° tick (`--tick` long) at each end and short extension lines, its value set above it. It measures something real, never a decoration.
+- The grid: 24px minor lines in `--color-grid`, 120px major in `--color-grid-2`, offset by `--sheet-inset`, only under a drawing, a schedule or a chart of real data.
+- Bands: `--color-paper-2` or `--color-paper-3`, two a page at most; the sheet is already the colour (drenched), so there is no other field.
+- Photographs: structures built and building, shot square-on so they read like drawings (a frame going up, a roof from below, a model on a table), printed as cyanotypes inside the double keyline; pick frames with a real white and a real shadow, since grey prints flat. Type over one sits on a `--color-paper-3` scrim from its edge.
+
+## Range
+
+- **Figures as dimensions:** the prompt's one number in Chakra Petch at display size, set on a dimension string that spans ten or twelve columns between its two real ends (a first year and now, a smallest and largest span), the ends in mono.
+- **Tables as drawing registers:** a stage schedule, a deliverables list or a price list as a keylined table, stage numbers in mono in their own column, the row title one weight heavier, a `--rule-heavy` line under the head row; on `--color-paper-2` it reads as the register sheet of a set.
+- **Forms as a title block:** fields set as cells of a keylined block, each label at the cell's top left, the cells sized by what they hold, the submit in the ink fill at the block's foot.
+- **Comparisons and steps as elevations:** two options side by side as columns parted by one heavy line, or stages as a run along one long dimension string with a tick at each stage, each stage a numeral, a title and a line.
+
+## Controls
+
+- An ink-filled primary with sheet-coloured text beside a 1px-outlined secondary in ink, both square, 48px, IBM Plex Sans 500.
+- Links in ink with a 1px underline that clears on hover; inputs square, 48px, a 1px `--color-rule` keyline on `--color-paper-2`, the white focus ring, never a glow.
+- The line is the accent: white on blue, in rules, the primary fill and the focus ring.
+
+## Motion
+
+Static, drafted. A rule or a dimension string may draw itself once a page (scaleX from its left tick over `--dur-long` on `--ease-out`); hover on a keylined surface that links darkens its ground one step.
+
+## Voice
+
+Specification voice: the building type, the stage, the year, the format, a unit on every figure; nothing a drawing note could not carry.
+
+## Do-nots
+
+- Never a filled card, a blur or a lifted panel; the sheet has lines, not layers.
+- Never a second colour on the cyanotype, in type or in a photograph; the red pencil belongs to the brownline sheet.
+- Never a building, frame or section drawn to stand in for a project, and never a dimension string with an invented value; a drawing is real project data or it is absent.
+- Never the grid as wallpaper behind prose, and never a lowercase h1 or h2.
+- Never a rounded corner, anywhere.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 600; }
+h1, h2 { text-transform: uppercase; line-height: 1.02; }
+.num { font-family: var(--font-outlier); font-weight: 500; }
+.fig { position: relative; border: var(--rule-hair) solid var(--color-rule); }
+.fig::after { content: ""; position: absolute; inset: 5px; z-index: 2; border: var(--rule-hair) solid var(--color-rule-2); pointer-events: none; }
+.dim { position: relative; height: var(--rule-hair); background: var(--color-rule); }
+.dim::before, .dim::after { content: ""; position: absolute; top: calc(var(--tick) / -2); width: var(--rule-hair); height: var(--tick); background: var(--color-rule); transform: rotate(45deg); }
+.dim::before { left: 0; } .dim::after { right: 0; }
+.btn { border: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: transparent; color: var(--color-ink); padding: var(--space-sm) var(--space-lg); font-weight: 500; }
+.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-accent-ink); }
+```