@r1z4x/tezgah 1.9.0 → 1.11.0

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

@@ -0,0 +1,106 @@
+---
+name: Sticker
+slug: sticker
+genre: playful
+paper: light 95.7 82
+display: display-heavy Bowlby One SC
+accent: chromatic-magenta 2
+posture: full-palette
+keywords: stickers, print, merch, shop, maker, creator, diy, craft, vinyl, packaging, labels, small business, ecommerce, fun, loud, pink, cut, ship, order
+material: warm off-white paper, warm black ink, Bowlby One SC over Sofia Sans, white die-cut borders on hard offset shadows, hot pink, lime and ink fills set with type
+photo: natural vib=15 con=5
+pictured: Bento Grid, Stage hero
+---
+
+# Sticker
+
+A print shop's material: a warm off-white sheet, warm black ink, Bowlby One SC capitals over Sofia Sans, hot pink and lime fills, every raised surface edged in a thick white die-cut on a hard offset shadow. It feels loud and handmade because the depth is printed and the colours are fills, never tints. It is not a soft pastel shop with blurred shadows, and not a cartoon toy page.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(95.7% 0.013 82); --color-paper-2: oklch(92.8% 0.021 79); --color-paper-3: oklch(99.4% 0.007 89);
+  --color-ink: oklch(21% 0.011 81); --color-ink-2: oklch(30% 0.013 78); --color-muted: oklch(50% 0.017 64);
+  --color-rule: oklch(89.7% 0.02 80); --color-white: oklch(99.5% 0.003 82);
+  --color-accent: oklch(56% 0.225 2); --color-accent-deep: oklch(49% 0.205 2); --color-accent-2: oklch(87.6% 0.179 119); --color-slot: oklch(95% 0.021 355);
+  --color-accent-ink: oklch(99.5% 0.003 82); --color-focus: oklch(56% 0.225 2);
+  --font-display: "Bowlby One SC", "Arial Black", sans-serif; --font-body: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;
+  --radius-card: 18px; --radius-pill: 999px; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: 5px 6px 0 var(--color-ink); --shadow-press: 1px 1px 0 var(--color-ink);
+  --tracking-display: 0.005em; --display-weight: 400;
+}
+```
+
+Two colourways, stated in the stamp (`sticker: sheet`).
+
+| Colourway | Paper, ink, fills |
+| --- | --- |
+| `sheet` (default) | the block above |
+| `vinyl` | ground `oklch(21% 0.011 81)`, cards `oklch(25.5% 0.013 72)`, ink `oklch(95.7% 0.013 82)`, rule `oklch(33% 0.016 75)`; pink and lime unchanged, the borders still white |
+
+## Type
+
+- **Display:** Bowlby One SC 400, capitals only by design, `--tracking-display`, line-height 1.02. It is wide and heavy, so the `h1` caps at 4.5rem and section heads at 3.25rem. Never a paragraph.
+- **Figures:** prices, counts and step numbers set in Bowlby, and a lone figure on a fill may run to 12rem; it is the loudest thing the theme owns, so one a screen.
+- **Body:** Sofia Sans 400 and 600, line-height 1.5, `tabular-nums`.
+- **Labels, tags, captions, table heads:** Sofia Sans 700 a step smaller, sentence case, untracked, `--color-muted`. No third face: the outlier token is Sofia Sans.
+
+## Surfaces
+
+- The die-cut: a raised surface (a card, a fill that holds a fact, a tag, a photograph, the primary control) carries a 6px `--color-white` border and `--shadow-card`, a hard offset with no blur. Surfaces that are the sheet itself (a table, a band) stay borderless, parted by the dashed rule.
+- A raised surface may tilt between -6 and 6 degrees, never all one way; tables and inputs stay square.
+- Radii: `--radius-card` on cards, 22px on photographs, pills on controls and tags; a `--rule-bar` dashed `--color-rule` is the divider and the edge of a drop zone.
+- Bands: a `--color-paper-2` band, a `--color-ink` band with paper type, or one lime field with ink type; two a page at most.
+- Photographs: the product in use or held to the lens, close, colour kept loud; 22px radius inside the white die-cut, one a screen tilted 3 degrees or less. A tag may overlap a corner with a fact; type never sits on a picture.
+- No texture, no gradient behind type: depth is the hard offset alone.
+
+## Range
+
+- **Facts as die-cut fills:** a Bento whose tiles are pink, lime, ink and white fills, each one fact in Bowlby with one Sofia line, edged white on the hard shadow and tilted a degree or two in alternate directions; the lead tile carries the lone figure.
+- **Steps as stuck-down cards:** three or four `<ol>` cards in a row, the numeral in Bowlby on a lime disc, the cards tilted against each other and overlapping the dashed rule they sit on.
+- **A working control on the lime field:** a stepper, a running total in Bowlby and a bar that fills toward a threshold the prompt gave, on a white die-cut card beside a dashed price ladder.
+- **A statement in Bowlby on the ink band**, ten columns wide, with one pink or lime tag stuck across its corner carrying the fact it argues.
+
+## Controls
+
+- The control pair: a pink pill with a 5px white ring and `--shadow-card`, beside a ghost pill with an inset 2px ink border. Chips are pills with a 2px inset rule, the chosen one ink-filled.
+- Links are ink with a pink underline on hover; inputs take a 2px ink edge at `--radius-card`.
+- Colour in thirds: pink for the fills that act (the primary, a price), lime for the fills that mark (a tag, a count, a highlight), ink for the type.
+
+## Motion
+
+Sticker physics: a hover lifts a clickable raised surface 2px and turns it a degree; a press pushes it onto its shadow. `--dur-micro` on `--ease-out`, nothing on scroll.
+
+## Voice
+
+Cheerful and exact: the price, the quantity, the size, the ship day. It sounds like the person at the cutter.
+
+## Do-nots
+
+- Never a soft blurred drop under a raised surface; the shadow is a hard offset or there is no shadow.
+- Never a die-cut border thinner than 4px, or in any colour but white.
+- Never pink text on the paper; pink is a fill with white on it.
+- Never a drawn sticker, mascot or doodle; the die-cut edges a real surface, a fact or a photograph, never a shape drawn to stand for a design.
+- Never a photograph that only stands near the subject (a bottle, a stapler, a pencil pot); without the product's own pictures, the fills carry the page.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Sofia+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.02; }
+h1 { font-size: min(var(--text-display), 4.5rem); } h2 { font-size: min(var(--text-section), 3.25rem); }
+.diecut { border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
+.diecut--photo { border-radius: 22px; overflow: hidden; background: var(--color-slot); }
+.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-md); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 5px var(--color-white), 5px 6px 0 var(--color-ink); transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
+.btn--primary:hover { background: var(--color-accent-deep); }
+.btn--primary:active { translate: 4px 5px; box-shadow: 0 0 0 5px var(--color-white), var(--shadow-press); }
+.fill { border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-accent); color: var(--color-accent-ink); }
+.rule { border-top: var(--rule-bar) dashed var(--color-rule); }
+::selection { background: var(--color-accent-2); color: var(--color-ink); }
+```

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

@@ -0,0 +1,99 @@
+---
+name: Studio
+slug: studio
+genre: editorial
+paper: light 97.2 215
+display: roman-serif Hedvig Letters Serif
+accent: warm 52
+posture: restrained
+keywords: design studio, creative studio, branding, brand identity, art direction, agency, portfolio, case study, selected work, editorial design, typography, creative direction, graphic design, considered, curatorial
+material: cool studio-white proof paper with an ink dot grid and grain, blue-black ink, Hedvig Letters Serif heads over Geist, crop marks on every printed piece, orange construction guides, the work photographed in true colour, one cadmium-orange signal
+photo: natural
+pictured: Portfolio Index, Ledge hero
+---
+
+# Studio
+
+A design studio's proof sheet, caught mid-build: cool studio-white paper with an ink dot grid and a fine grain, blue-black ink, Hedvig Letters Serif for the heads (a contemporary serif with a calligraphic hand in its joins), a clean Geist body, crop marks at the corners of every printed piece, and one cadmium orange that both fills the action and draws the construction: metric guides, clear-space boxes, redlines. It reads as considered because the type is shown being measured. It is not a warm cream portfolio with a terracotta accent, and not a grey minimal template.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(97.2% 0.006 215); --color-paper-2: oklch(94% 0.009 215); --color-paper-3: oklch(90.5% 0.011 215); --color-paper-hi: oklch(99% 0.004 215);
+  --color-ink: oklch(16% 0.032 250); --color-ink-2: oklch(34% 0.022 245); --color-muted: oklch(49% 0.018 240);
+  --color-rule: oklch(84% 0.010 225);
+  --color-accent: oklch(68% 0.172 50); --color-accent-ink: oklch(16% 0.032 250); --color-focus: oklch(52% 0.15 48);
+  --color-dot: color-mix(in oklab, var(--color-ink) 20%, transparent); --color-mark: color-mix(in oklab, var(--color-ink) 72%, transparent);
+  --font-display: "Hedvig Letters Serif", ui-serif, Georgia, serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: "Sofia Sans Extra Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
+  --radius-card: 3px; --radius-pill: 3px; --rule-hair: 1px;
+  --shadow-card: none;
+  --shadow-sheet: 1px 2px 0 color-mix(in oklab, var(--color-ink) 7%, transparent), 10px 18px 36px -14px color-mix(in oklab, var(--color-ink) 32%, transparent);
+  --tracking-display: -0.022em; --display-weight: 400;
+}
+```
+
+## Type
+
+- **Display:** Hedvig Letters Serif 400, its one weight, `--tracking-display`, line-height 0.98 to 1.04, sentence case, `font-optical-sizing: auto`. The hand holds from a 200px wordmark down to a 25px item title (tracking -0.005em there). Heads, figures and the wordmark only.
+- **Body:** Geist 400 and 500, line-height 1.55, ink-2 for running text.
+- **Labels, captions, guide readouts:** Geist 500 a step smaller, sentence case, `--color-muted`, tabular figures for any measurement. No mono.
+- **Specimen face:** Sofia Sans Extra Condensed 500, only inside a specimen that shows an alternative system; never a head or label of the page itself.
+
+## Surfaces
+
+- The ground is a generated proof, never a picture: a 24px radial-gradient dot grid in `--color-dot` under an `feTurbulence` grain (`--grain`), on the hero, nav and footer, masked to fade before the next section; the rest of the page is clean paper.
+- Crop marks on every printed piece (a sheet, a photograph, a card, a control, a focused field): eight 1px `--color-mark` ticks drawn with background gradients on a `::before`, set off the corners by a small gap, larger on a sheet. Registration targets may sit at a sheet's sides.
+- Orange draws construction: 1px `--color-accent` guides at the font's real ascender, cap height, x-height, baseline and descender with their readouts in the label voice, a clear-space box in x units, redlines with dimensions. Rules only, never orange type.
+- Two rules: 1px `--color-rule` between rows; 1px `--color-ink` opening a set. Radius 3px.
+- One shadow, for paper objects only (a card, a sheet), lit from the top left: `--shadow-sheet`. Everything else lies flat.
+- Bands: paper-2, or one ink band with paper type; never an orange field.
+- Photographs: the work where it is used, level, daylight, verticals straight, true colour, crop-marked, a ratio redline beside it; never a mockup.
+
+## Range
+
+- **A wordmark under construction:** the name set huge in Hedvig with its metric guides, clear-space box and readouts on the dot grid; the pointer measures a letter's advance in font units.
+- **Systems as specimen cards:** two or three alternatives as crop-marked cards (face line, `Aa Gg Rr 0123456789`, hex swatches) that switch one board set by type, colour or grid.
+- **An index that opens:** rows under an ink rule, Hedvig at item size, each opening into a case with its photograph held at a stated ratio.
+- **A size test:** one line at falling sizes (banner, poster, ticket), each on its own orange guides with its live size beside it.
+
+## Controls
+
+- Printed controls: a 1px ink border at 2px radius, a second rule inset 2px inside it, crop marks at the corners that open slightly on hover; the primary is filled orange with ink text. Geist 500, 48px.
+- Fields: 3px, a 1px `--color-muted` border, crop marks appear on focus. Links take an orange underline on hover.
+- Orange fill stays on the one action; orange lines are construction and may be many but thin.
+
+## Motion
+
+Guides draw in once along their length. A set of systems may turn every few seconds while in view and stops on any choice. State changes at `--dur-short` on `--ease-out`. Reduced motion: the full construction, still.
+
+## Voice
+
+Spare and exact, a little literary. Verbs over adjectives; name the work, the institution, the surface it lives on, the measurement. Never "creative solutions" or "brands brought to life".
+
+## Do-nots
+
+- Never Hedvig in running text, never the specimen face outside a specimen.
+- Never an orange flood, orange type or a second warm colour.
+- Never warm paper; the ground is cool, hue 215.
+- Never a guide that is not true to the font's metrics or a dimension that is not the real one.
+- Never the dot grid behind a whole page or running text.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=Geist:wght@400;500&family=Sofia+Sans+Extra+Condensed:wght@500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); color: var(--color-ink); font-optical-sizing: auto; line-height: 1.0; }
+.proof { background-image: var(--grain), radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px); background-size: 160px 160px, 24px 24px; }
+.crop { position: relative; --l: 8px; --o: 12px; }
+.crop::before { content: ""; position: absolute; inset: calc(-1 * var(--o)); pointer-events: none; background: linear-gradient(var(--color-mark), var(--color-mark)) 0 var(--o) / var(--l) 1px no-repeat, linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 0 / 1px var(--l) no-repeat; }
+.btn { border: var(--rule-hair) solid var(--color-ink); border-radius: 2px; min-height: 48px; padding: 0 var(--space-lg); font-weight: 500; color: var(--color-ink); }
+.btn::after { content: ""; position: absolute; inset: 2px; border: var(--rule-hair) solid var(--color-mark); }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
+.guide { height: var(--rule-hair); background: var(--color-accent); }
+.set { border-top: var(--rule-hair) solid var(--color-ink); } .set > * { border-bottom: var(--rule-hair) solid var(--color-rule); }
+```

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

@@ -0,0 +1,96 @@
+---
+name: Terminal
+slug: terminal
+genre: atmospheric
+paper: dark 12.5 150
+display: mono Martian Mono
+accent: chromatic-green 142
+posture: committed
+keywords: cli, terminal, shell, command-line, tui, self-hosted, open-source, binary, ssh, sysadmin, devops, homelab, install script, package manager, repl, dotfiles, developer tool, phosphor
+material: a near-black ground with a green cast in three lightness steps, pale phosphor ink and one bright phosphor signal with a dim wash of itself, every glyph Martian Mono with heads wide and text narrow, and pictures printed in the page's own glyphs: a photograph rendered as a grid of characters taken from the product's own text, dim cells small, bright cells full, stirred by the cursor
+photo: duotone paper accent con=20
+pictured: Session, Split hero
+---
+
+# Terminal
+
+The page is the terminal surface, and its pictures are printed in type. A near-black ground with a green cast, pale phosphor ink, one bright phosphor green and a dim wash of it for what is added or selected, and Martian Mono for every glyph: heads wide, text narrow. A picture is printed as a grid of characters from the product's own text. It reads as a tool made by people who live in a shell. It is not the CRT costume and not a dark product page holding a screenshot of a terminal.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(12.5% 0.012 150); --color-paper-2: oklch(16% 0.016 150); --color-paper-3: oklch(20.5% 0.022 150);
+  --color-ink: oklch(94% 0.03 140); --color-ink-2: oklch(82% 0.05 142); --color-muted: oklch(64% 0.06 145);
+  --color-rule: oklch(27% 0.028 148); --color-rule-2: oklch(38% 0.045 146);
+  --color-accent: oklch(87% 0.2 142); --color-accent-ink: oklch(14% 0.02 150); --color-focus: oklch(87% 0.2 142);
+  --color-accent-wash: oklch(23% 0.06 145);
+  --glyph-0: oklch(30% 0.06 146); --glyph-1: oklch(38% 0.08 145); --glyph-2: oklch(47% 0.11 144); --glyph-3: oklch(57% 0.14 143);
+  --glyph-4: oklch(67% 0.17 142); --glyph-5: oklch(77% 0.19 142); --glyph-6: oklch(86% 0.2 141); --glyph-7: oklch(94% 0.12 138);
+  --font-display: "Martian Mono", ui-monospace, monospace; --font-body: var(--font-display); --font-outlier: var(--font-display);
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --shadow-card: none;
+  --tracking-display: -0.02em; --display-weight: 500; --stretch-display: 112.5%; --stretch-body: 87.5%;
+}
+```
+
+## Type
+
+- **Every glyph is Martian Mono,** in three weights at most: 400, 500, 700. Display 500 at `--stretch-display`, line-height 1.12, `h1` at most 3.75rem in two or three lines. Body 400 at `--stretch-body`, 15 to 16px, line-height 1.65. Labels and meta a step smaller in `--color-muted`, sentence case, untracked.
+- **Figures** set wide and light against the narrow text: 400 at `--stretch-display` from `--text-display-s` up, tabular, the unit or a `#` comment beneath in `--color-muted`.
+- Prompt glyphs (`$`, `~ $`) in `--color-muted` mark real commands and only those; arguments in a reference take the accent.
+- Martian Mono has no box-drawing or block glyphs. Diagrams are typed in `+ - |` and wordmarks printed as glyph pictures, so no fallback face slips into a line.
+
+## Surfaces
+
+- One hue, a ramp of lightness: ground, `--color-paper-2` for a session or an install well, `--color-paper-3` for hover and selection. Raised surfaces take a 1px `--color-rule` border, square, never a shadow; `--color-rule-2` is the firmer line under a table head or a diff's file header.
+- Rules: 1px `--color-rule` between sections, rows and tabs.
+- **Pictures as glyphs:** a picture with a strong silhouette on black, reduced to a grid of brightness levels (about 130 columns, cells 1.85 times as tall as wide) and drawn on a canvas, each lit cell one character of the product's text in `--glyph-0` to `--glyph-7`, dim cells at 62% size; a static `<pre>` stands in without script. One or two a page, big.
+- When a glyph grid cannot be made, one photograph stands in, in the `photo:` duotone with a 1px `--color-rule` border: the machines themselves, never a screen showing an interface.
+- No scanline, glow, bezel, title bar or traffic lights.
+
+## Range
+
+- **A comparison as a diff:** a unified diff across ten or twelve columns, a `--- a/` and `+++ b/` header over a `--color-rule-2` line, removed lines in `--color-muted` behind `-`, added lines in ink on `--color-accent-wash` behind a green `+`, a gutter of line numbers in `--color-rule-2`.
+- **Figures as a tool's output:** three or four of the prompt's numbers at display size, wide and light, parted by vertical rules, each labelled by a `# comment` beneath, as `wc` or `du` would print them.
+- **The session at size:** a session in a `--color-paper-2` well across eight columns or more, typed once, its output lighting a `+ - |` diagram beside it.
+- **A reference as rows:** a command per row at `--text-title`, wide, its arguments in the accent, its line on the right, like a man page's synopsis; or a table of hosts, flags or exit codes.
+
+## Controls
+
+- Primary: an accent block with `--color-accent-ink` text, square. Secondary: a 1px `--color-ink-2` border. Hover and state switch in `steps(1)`.
+- Install lines: a `--color-paper-2` well with tabs (brew, cargo, curl) underlined in the accent, the command at `--text-lg`, and a 16px copy icon at the right that turns into a tick in the accent for 1.4s.
+- Links in `--color-ink-2`, underlined dotted, accent on hover; a selected row or tab takes `--color-accent-wash`.
+
+## Motion
+
+Stepped where it is state, alive where it is a picture: a glyph picture resolves row by row from noise over about 1.5s, once, and under the cursor its cells flare to the accent, then settle. A session types itself once when it enters the view. A caret blinks five times and holds. Reduced motion shows every final state.
+
+## Voice
+
+Commands, flags, paths and exit codes. Declarative and short: name the command, never the adjective.
+
+## Do-nots
+
+- Never a proportional face, and never a box-drawing glyph from a fallback font.
+- Never a second hue: no amber, no cyan, no red for a removed line.
+- Never a rounded corner, a pill or a soft card, and never a light section.
+- Never more than one photograph, and only where glyphs cannot be made.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,wght@75..112.5,400..700&display=swap" rel="stylesheet">
+```
+
+```css
+body { font-stretch: var(--stretch-body); font-variant-numeric: tabular-nums; }
+h1, h2, h3 { font-weight: var(--display-weight); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); line-height: 1.12; }
+.figure { font-weight: 400; font-stretch: var(--stretch-display); font-size: var(--text-display); line-height: 1; }
+.art { position: relative; } .art canvas { position: absolute; inset: 0; }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-radius: 0; transition: background-color var(--dur-micro) steps(1); }
+.well { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
+.diff .add { background: var(--color-accent-wash); color: var(--color-ink); } .diff .add::before { content: "+"; color: var(--color-accent); }
+.diff .del { color: var(--color-muted); } .diff .del::before { content: "-"; }
+```
+
+To make a glyph picture: crop the subject, autocontrast, resize to `cols` by `round(cols * h / w / 1.85)`, quantise brightness to levels 0 to 8 (0 is blank), and ship the rows as strings; the canvas sets each lit cell's glyph from the product text in order and its colour from `--glyph-(level - 1)`.

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

@@ -0,0 +1,106 @@
+---
+name: Terrazzo
+slug: terrazzo
+genre: modern-minimal
+paper: light 96 82
+display: geometric-sans Syne
+accent: warm 38
+posture: restrained
+keywords: materials, library, architects, samples, catalogue, surfaces, stone, timber, terrazzo, ceramic, tile, interiors, interiors studio, showroom, specification, swatches, supplier, drawer, photography, tactile
+material: off-white paper, white card surfaces ruled in ink over a hard offset, wide Syne heads over Onest, JetBrains Mono for codes and millimetres, surfaces photographed flat-on in true colour, rust the one signal
+photo: natural con=4
+pictured: Sample Drawer, Ledge hero
+---
+
+# Terrazzo
+
+A materials library's specification voice: off-white paper, near-black ink, wide Syne heads over a plain Onest body, JetBrains Mono for the codes and the millimetres, and white card surfaces ruled in 2px ink over a hard offset, holding the surfaces themselves photographed flat-on and close. Controls are ink; colour arrives only in aggregate, in the stone, timber, terrazzo and glaze the photographs show, with rust as the one signal. It is organised like a sample drawer and reads like a spec sheet. It is not a pastel lifestyle page and not confetti.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(96% 0.009 82); --color-paper-2: oklch(92% 0.012 82); --color-paper-3: oklch(87.5% 0.014 80);
+  --color-plate: oklch(99.5% 0.003 82);
+  --color-ink: oklch(16% 0.006 60); --color-ink-2: oklch(27% 0.006 60); --color-muted: oklch(46% 0.01 60);
+  --color-rule: oklch(81% 0.012 80);
+  --color-accent: oklch(53% 0.15 38); --color-accent-soft: oklch(91% 0.035 45); --color-accent-ink: oklch(99.5% 0.003 82); --color-focus: oklch(50% 0.16 38);
+  --font-display: "Syne", ui-sans-serif, sans-serif; --font-body: "Onest", ui-sans-serif, sans-serif;
+  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: 14px 14px 0 var(--color-paper-3); --shadow-card-hover: 14px 14px 0 var(--color-ink);
+  --tracking-display: -0.025em; --display-weight: 700;
+}
+```
+
+Three colourways, stated in the stamp (`terrazzo: off-white`).
+
+| Colourway | Paper and ink | Signal and controls |
+| --- | --- | --- |
+| **Off-white** (default) | the tokens above | rust; ink controls |
+| **Black** | `oklch(14% 0.005 60)` under bone ink `oklch(96% 0.01 80)`; cards stay white | rust lifted to `oklch(68% 0.14 40)`; bone controls with ink text |
+| **Stone** | warm grey `oklch(85% 0.012 80)` under the same ink | rust; ink controls |
+
+## Type
+
+- **Display:** Syne 700, `--tracking-display`, line-height 1.0, sentence case. The face sets wide, so heads stay short rather than drop a step; 800 turns clumsy and is never used. A figure at display size takes -0.04em.
+- **Body:** Onest 400 and 500, line-height 1.5. Three weights a page: 400, 500, 700.
+- **Labels, captions, table heads:** Onest 500 a step smaller, sentence case, untracked.
+- **Codes and measures:** JetBrains Mono 500 for a sample code (`ST-0412`), a size in millimetres, a count in a table; the size of the text beside it, never a label or a head.
+
+## Surfaces
+
+- Rules: `--rule-bar` ink on the top of a table, along a band's edge and around a card; `--rule-hair` in `--color-rule` between rows. Radius 0 everywhere.
+- Cards: `--color-plate` inside a `--rule-bar` ink border over the hard `--shadow-card` (paper-3, no blur), the page's one container; nothing else casts. A linked card swaps its offset to ink on hover.
+- Bands: a `--color-ink` band with paper text, or a `--color-paper-2` band; never a coloured field, two a page at most.
+- Photographs: the surface itself, flat-on and close in even daylight, so grain, chips, veins and joints read near one to one; a set of four runs as a true set at one ratio. True colour, a little sharpened. Each sits in a card, edge to edge with its caption beneath naming the family and the finish; type never sits on a photograph.
+- No texture and nothing drawn on the paper: the surfaces in the photographs are the pattern.
+
+## Range
+
+- **Specification table:** the stock as a full-width table under a `--rule-bar` ink rule: the code and the size in mono, the surface's name in Onest 500 at title size, family and finish in muted; a hovered or selected row takes `--color-accent-soft` and a rust code.
+- **Figure on the ink band:** the library's one big number in Syne at twice `--text-display`, paper on ink, with the families or the terms set beside it as a short ruled list.
+- **Steps on rules:** a real ordered list hung from hairlines, each numeral in Syne at section size, the stage in Onest 500 and one line beside it.
+- **Form as a request card:** the booking on a white card with its hard offset, inputs square on the plate colour, choices as square cells joined edge to edge, the checked cell ink with paper text.
+
+## Controls
+
+- An ink-filled primary with paper text beside a `--rule-bar` inset ink outline, both square, Onest 500. On the ink band the primary turns plate with ink text.
+- Links are ink with a hairline underline that turns rust on hover; inputs are square on `--color-plate` with a 1px ink border.
+- Rust reaches a code, a selected row or chip, a hover underline and the focus ring; colour otherwise comes only from the photographs.
+
+## Motion
+
+Still. A linked card swaps its offset from paper-3 to ink over `--dur-micro`; a filtered row leaves without animation.
+
+## Voice
+
+A catalogue's plainness: the family, the finish, the code, the size at one to one. Never sells the feeling of stone.
+
+## Do-nots
+
+- Never a drawn chip, speck or confetti; a surface's colour comes from its photograph.
+- Never a photograph as a background or under type; it lives in a card.
+- Never a coloured primary on off-white paper; controls are ink.
+- Never a rounded corner, on a card, a control or a photograph.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&family=Onest:wght@400;500&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 700; line-height: 1; }
+.btn { border-radius: 0; padding: var(--space-md) var(--space-lg); font-weight: 500; color: inherit; }
+.btn--primary { background: var(--color-ink); color: var(--color-paper); }
+.btn--secondary { box-shadow: inset 0 0 0 var(--rule-bar) currentColor; }
+.card { background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); }
+a.card { transition: box-shadow var(--dur-micro) var(--ease-out); }
+a.card:hover { box-shadow: var(--shadow-card-hover); }
+.band--ink { background: var(--color-ink); color: var(--color-paper); }
+.band--ink .btn--primary { background: var(--color-plate); color: var(--color-ink); }
+.spec { border-top: var(--rule-bar) solid var(--color-ink); } .spec tr:hover { background: var(--color-accent-soft); }
+.code { font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
+::selection { background: color-mix(in oklab, var(--color-accent) 25%, transparent); }
+```

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

@@ -0,0 +1,106 @@
+---
+name: Ultraviolet
+slug: ultraviolet
+genre: modern-minimal
+paper: light 95 300
+display: geometric-sans Outfit
+accent: cool 290
+posture: committed
+keywords: music, audio, stems, remix, dj, producer, player, streaming, tempo, playlist, creator, app, consumer, lowercase, violet, sound, beats, recording studio
+material: lavender paper or a violet-black night, Outfit set lowercase over Onest, hairline pills, one saturated violet in two strengths, photographs pulled into the violet
+photo: tint accent con=10
+pictured: Workbench, Stage hero, in the night colourway
+---
+
+# Ultraviolet
+
+A producer's tool in one pigment: a paper tinted the same hue as the ink, one saturated violet in two strengths, Outfit set lowercase on every head and control, pills throughout, depth held to a hairline, photographs pulled into the violet. It reads quick, exact and young without raising its voice. It is not a purple-gradient startup page and not a neon club flyer.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(95% 0.02 300); --color-paper-2: oklch(92% 0.03 300); --color-paper-3: oklch(89% 0.035 300);
+  --color-ink: oklch(18% 0.02 300); --color-ink-2: oklch(28% 0.03 300); --color-muted: oklch(46% 0.05 300);
+  --color-rule: oklch(84% 0.04 300); --color-rule-2: oklch(70% 0.08 295);
+  --color-accent: oklch(50% 0.25 290); --color-accent-deep: oklch(43% 0.22 290); --color-accent-soft: oklch(86% 0.08 295);
+  --color-accent-ink: oklch(97% 0.01 300); --color-focus: oklch(50% 0.25 290);
+  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif; --font-body: "Onest", ui-sans-serif, sans-serif;
+  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
+  --radius-card: 16px; --radius-pill: 999px; --rule-hair: 1px;
+  --shadow-card: 0 1px 2px oklch(18% 0.02 300 / 0.06);
+  --tracking-display: -0.03em; --display-weight: 500;
+}
+```
+
+Three colourways, set once per page and stated in the stamp (`ultraviolet: lavender`). A nocturnal prompt takes `night`, which may carry one band in the `record` colours.
+
+| Colourway | Paper, ink, accent |
+| --- | --- |
+| `lavender` (default) | the block above |
+| `record` | ground `oklch(50% 0.25 290)`, ink `oklch(95% 0.02 300)`, the accent turns white `oklch(99% 0.005 300)` with violet text on it, rule `oklch(72% 0.14 292)` |
+| `night` | ground `oklch(14% 0.02 290)`, paper-2 `17.5% 0.025 290`, paper-3 `21% 0.03 290`, ink `92% 0.04 300`, ink-2 `80% 0.05 300`, muted `68% 0.06 300`, rule `28% 0.04 290`, rule-2 `44% 0.07 292`, accent `55% 0.25 290`, deep `48% 0.24 290`, soft `36% 0.09 293`, focus `62% 0.22 290` |
+
+## Type
+
+- **Display:** Outfit 500, lowercase, `--tracking-display`, line-height 1. Lowercase is the material: heads, nav links, buttons and pills never carry a capital.
+- **Figures:** Outfit 300 at `--text-display` and over, lowercase units beside them in the label voice, tabular; the thin geometric numeral is the one place the display goes light.
+- **Body:** Onest 400, sentence case, line-height 1.55. Prose is the one place a capital appears.
+- **Labels, captions, table heads:** Outfit 500 a step smaller, lowercase, untracked, in `--color-muted`. Mono only inside code.
+
+## Surfaces
+
+- Hairlines: 1px `--color-rule` between rows; pills and outlined controls carry 1.5px of `--color-rule-2`. No borders on cards; a surface is a step to `--color-paper-2`.
+- Radius: `--radius-pill` on every control and tag, 16px on surfaces, screens and photographs; nothing square.
+- Depth: none on paper, the whisper `--shadow-card` under a raised surface. No blur, no glow, no gradient.
+- Bands: a `--color-paper-2` band, an ink band, or one violet field in the `record` colours; two a page at most.
+- The product sits plain on `--color-paper-2` or bleeds off its edge, never in a bezel; a waveform is real line work, its played part in the violet, its rest in `--color-accent-soft`.
+- Photographs: the night around the music (hands on a mixer, a booth, a crowd lit from the stage seen from behind), tinted violet, 16px radius, a 1px inset ring of ink at 8%; type over one only on an ink scrim. Faces never lead. No texture.
+
+## Range
+
+- **Lanes as the picture:** the product's own waveforms across ten or twelve columns, one stem to a row under hairlines, a bar ruler above in the label voice; the played part violet, the rest soft. It carries a section with no photograph and no frame.
+- **Figures in light Outfit:** the prompt's real numbers at display size in the 300, parted by hairlines, one of them in the violet, each unit lowercase beside it.
+- **A table of uses:** a full-width Table in lowercase, the use at title size, the stems it takes as small pills, one line of what you hear; a price list takes the same rows.
+- **The record field:** one band in the violet holding a working drop zone or a form, the white pill its only fill.
+
+## Controls
+
+- A violet-filled pill (`--color-accent-ink` on `--color-accent`, `--color-accent-deep` on hover) beside an inset-outlined one (1.5px of `--color-ink`), both Outfit 500 lowercase; inside a violet field the filled pill turns white with violet text.
+- Links underline in violet on hover; inputs are pills with a 1.5px `--color-rule-2` inset ring that turns ink on focus. Toggles (solo, mute) are small pills that fill violet when pressed.
+- The violet is one pigment: one filled control, the focus ring, a link's hover, a progress fill, a played waveform, one figure.
+
+## Motion
+
+Quick and dry: `--dur-micro` colour transitions on pills over `--ease-out`, a lane that dims or lights as a toggle moves, and at most one settle on load over `--dur-long` from an already-visible default. Nothing spins or loops.
+
+## Voice
+
+Lowercase, short, exact: the stem, the bar, the minute, the track count. It talks like a producer, not a label.
+
+## Do-nots
+
+- Never a capital in a head, a nav link or a button.
+- Never a second chromatic colour, in a photograph either; the violet is the only one.
+- Never a purple-to-pink gradient, a mesh behind text or a glow.
+- Never square controls or 4px radii; Ultraviolet is round.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500&family=Onest:wght@400&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 500; line-height: 1; text-transform: lowercase; letter-spacing: var(--tracking-display); }
+.figure { font: 300 var(--text-display)/0.9 var(--font-display); font-variant-numeric: tabular-nums; }
+.btn, .pill { display: inline-flex; align-items: center; border-radius: var(--radius-pill); font: 500 var(--text-sm)/1 var(--font-display); text-transform: lowercase; transition: background-color var(--dur-micro) var(--ease-out); }
+.btn { min-height: 48px; padding: 0 var(--space-lg); } .pill { padding: var(--space-xs) var(--space-md); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
+.btn--primary:hover { background: var(--color-accent-deep); }
+.btn--secondary { box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; }
+.well { background: var(--color-paper-2); border-radius: var(--radius-card); }
+.band--violet { background: var(--color-accent); color: var(--color-accent-ink); }
+.wave__rest { fill: var(--color-accent-soft); } .wave__played { fill: var(--color-accent); }
+::selection { background: color-mix(in oklab, var(--color-accent) 25%, transparent); }
+```

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

@@ -0,0 +1,105 @@
+---
+name: Vellum
+slug: vellum
+genre: editorial
+paper: light 94 82
+display: blackletter Grenze Gotisch
+accent: cool 268
+posture: committed
+keywords: roastery, coffee, bakery, wine, cellar, apothecary, bookshop, press, letterpress, guild, heritage, artisan, manuscript, parchment, edition, tasting, vintage, craft, old world, slow
+material: parchment paper, a long tan fibre wash on bands, umber ink, Grenze Gotisch heads over Hanken Grotesk with Grenze roman for statements, hairline and double rules, one ultramarine pigment
+photo: warm con=6
+pictured: Trade Ledger, Poster hero
+---
+
+# Vellum
+
+An old printing house: a parchment ground, umber ink, Grenze Gotisch for the heads, its roman sibling Grenze for a sentence set large, a plain Hanken Grotesk for everything read, hairlines and double rules, and ultramarine as the one pigment. The gothic face carries the age, so nothing else is ornamented: no tavern, no distressed pastiche, no cream-and-serif editorial page.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(94% 0.024 82); --color-paper-2: oklch(90% 0.032 80); --color-paper-3: oklch(86% 0.036 78);
+  --color-ink: oklch(23% 0.025 55); --color-ink-2: oklch(31% 0.024 58); --color-muted: oklch(46% 0.024 64);
+  --color-rule: oklch(75% 0.035 72);
+  --color-accent: oklch(43% 0.17 268); --color-accent-deep: oklch(35% 0.15 268); --color-accent-soft: oklch(89% 0.035 268); --color-accent-ink: oklch(95% 0.02 82);
+  --color-focus: oklch(50% 0.18 268); --color-field: var(--color-accent);
+  --font-display: "Grenze Gotisch", ui-serif, Georgia, serif; --font-body: "Hanken Grotesk", ui-sans-serif, sans-serif;
+  --font-outlier: "Grenze", ui-serif, Georgia, serif;
+  --radius-card: 2px; --radius-pill: 2px; --rule-hair: 1px; --rule-double: 4px; --shadow-card: none;
+  --tracking-display: -0.01em; --display-weight: 600; --fibre: 0.5;
+}
+```
+
+Three colourways, stated in the stamp (`vellum: parchment`).
+
+| Colourway | Ground, ink, pigment |
+| --- | --- |
+| **parchment** (default) | the tokens above |
+| **oxblood, reversed** | ground `oklch(27% 0.09 20)`, ink `oklch(94% 0.02 80)`, pigment gold `oklch(84% 0.11 85)` texted in the ground, rule `oklch(44% 0.08 20)`, fibre at 0.25 |
+| **indigo, the ledger** | ground `oklch(93% 0.012 240)`, ink `oklch(24% 0.035 265)`, the same ultramarine, rule `oklch(76% 0.02 250)`, fibre at 0.14 |
+
+## Type
+
+- **Display:** Grenze Gotisch 600 for `h1` and `h2`, line-height 0.92, `--tracking-display`, sentence case. It closes up below 30px, so `h3` and smaller set in Hanken Grotesk 600.
+- **Outlier, Grenze 400:** the roman sibling, for one sentence set at `--text-display-s` and for figures at display size, line-height 1.02. Never for running text.
+- **Body:** Hanken Grotesk 400 and 500, line-height 1.55; nav links at 600. Three weights a page at most: 400, 500, 600.
+- **Labels, captions, table heads, meta:** Hanken Grotesk 500 a step smaller, sentence case, untracked. Figures that a table compares (weights, lots, dates) take Hanken's tabular figures, right-aligned.
+
+## Surfaces
+
+- Rules: 1px `--color-rule` hairlines between rows, 1px ink along a section's top, and a `--rule-double` double ink rule where a printer would double one: over a table's head, under the masthead, along the top of a band.
+- Radius 2px everywhere, no pills, no shadows: the page is printed flat.
+- Bands: a `--color-paper-2` band carrying the fibre wash, and one ultramarine `--color-field`; two a page at most, never touching.
+- Photographs: the trade in its own light (the drum, the cooling tray, sacks, the counter, hands at the bench), close, no face to the lens; warmed, 2px radius, a 1px `--color-rule` edge. Captions beneath carry a fact; a head sits on one only over an umber scrim.
+- Texture, the fibre wash: long tan fibres of SVG turbulence, stitched so they never tile, multiplied at `--fibre` (`texture.md`, the low-frequency wash), on a band or a well only.
+
+## Range
+
+- **Table as a day book:** the week's list as a full-width ruled table under a double rule, pigment numerals indexing the rows, the name in Hanken 600 at title size, values in tabular figures; a hovered row takes `--color-accent-soft`.
+- **Statement with figures:** one sentence of the prompt in Grenze 400 across nine or ten columns on the fibre band, and beneath it, parted by a hairline, the prompt's own numbers in Grenze Gotisch at display size in pigment with a plain label under each.
+- **Form on the field:** the ultramarine band holding a working choice (a size, a frequency) as square cells joined edge to edge, the running answer in Grenze Gotisch at section size.
+- **Rows as an index:** three to five ruled rows, the title in Grenze Gotisch at section size, one line of Hanken beside it: terms, visits, ways to buy.
+
+## Controls
+
+- A pigment-filled primary (`--color-accent-ink` on `--color-accent`) that deepens to `--color-accent-deep` on hover, beside a ghost with a 1px ink border, both 2px radius, Hanken Grotesk 500.
+- Links underline in pigment on hover; inputs take 2px radius and a 1px ink border.
+- Ultramarine is the one pigment: the primary, a link's hover, the focus ring, the numerals that index a list, the figures, one band.
+
+## Motion
+
+Still. A hover underline in pigment, a row's soft wash and the primary deepening over `--dur-micro`; no reveal, no parallax.
+
+## Voice
+
+Ledger-plain and dated: the item, the weight, the year, the town, as a clerk would enter them. Never *artisanal*, *curated*, or a story the prompt did not give.
+
+## Do-nots
+
+- Never clay, terracotta or oxblood as the pigment on parchment; oxblood is a ground only.
+- Never Grenze Gotisch below 30px, at paragraph length, or opening a head on a capital I, which reads as J.
+- Never a deckled edge, a vignette, a coffee ring, a burn or a second texture.
+- Never the founding year alone as the hero's head; it sits in a sentence, a row or a figure with its label.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@600&family=Grenze:wght@400&family=Hanken+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2 { font-weight: 600; line-height: 0.92; }
+h3 { font-family: var(--font-body); font-weight: 600; }
+.statement { font: 400 var(--text-display-s)/1.02 var(--font-outlier); }
+.btn { border: var(--rule-hair) solid currentColor; border-radius: var(--radius-card); padding: var(--space-sm) var(--space-lg); font-weight: 500; color: inherit; background: transparent; transition: background-color var(--dur-micro) var(--ease-out); }
+.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
+.btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
+.band--pigment { background: var(--color-field); color: var(--color-accent-ink); }
+.rule-double { border-top: var(--rule-double) double var(--color-ink); }
+.ledger tbody tr:hover { background: var(--color-accent-soft); }
+.fibre { position: relative; isolation: isolate; }
+.fibre::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--fibre); mix-blend-mode: multiply; pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.02' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.52 0 0 0 0 0.36 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
+```