@r1z4x/tezgah 1.9.2 → 1.11.0

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

@@ -0,0 +1,108 @@
+---
+name: Broadside
+slug: broadside
+genre: editorial
+paper: light 92 88
+display: display-condensed Six Caps
+accent: warm 33
+posture: committed
+keywords: auction, sale, market, fair, event, one night, announcement, town, notice, poster, bill, lots, machinery, tools, festival, fete, hammer, date, venue, tickets
+material: grained buff stock, near-black ink, Six Caps and Bevan wood capitals over Archivo Narrow, ink rules at one point or five, one vermilion
+photo: duotone ink paper con=20
+pictured: Marquee Hero, Settled hero
+---
+
+# Broadside
+
+A printer's bill: grained buff stock, near-black ink, Six Caps fitted to the measure over Bevan, Archivo Narrow small print, rules at one point or five, one vermilion. It is loud because the capitals are tall and the rules heavy, never because anything is drawn; photographs print plainly in the ink, like the plate on a sale bill. Not a western pastiche, nor a soft cream editorial page.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(92% 0.028 88); --color-paper-2: oklch(88.5% 0.032 88); --color-paper-3: oklch(85% 0.036 86);
+  --color-ink: oklch(18% 0.01 50); --color-ink-2: oklch(30% 0.012 50); --color-muted: oklch(43% 0.02 62);
+  --color-rule: oklch(75% 0.028 82);
+  --color-accent: oklch(53% 0.19 33); --color-accent-ink: oklch(95.5% 0.018 88); --color-focus: oklch(53% 0.19 33);
+  --font-display: "Six Caps", "Impact", sans-serif; --font-display-2: "Bevan", Georgia, serif;
+  --font-body: "Archivo Narrow", "Arial Narrow", ui-sans-serif, sans-serif;
+  --font-outlier: var(--font-body);
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 5px; --rule-frame: 3px;
+  --shadow-card: none;
+  --tracking-display: 0.02em; --display-weight: 400;
+  --grain: 0.08;
+}
+```
+
+One dial, the colourway, stated in the stamp (`broadside: bill`).
+
+| Colourway | Stock | Ink | Accent |
+| --- | --- | --- | --- |
+| `bill` (default) | the block above | ink | vermilion |
+| `inked` | oklch(17% 0.01 60), grain screened | buff oklch(92% 0.028 88) | vermilion at oklch(63% 0.19 33); paper band dark |
+| `red-bill` | the vermilion | buff oklch(95.5% 0.018 88), 5.5:1 | buff; posture drenched |
+
+## Type
+
+- **Six Caps** 400, uppercase, line-height 0.88, `--tracking-display`, for the h1, big figures and fitted lines. It is fitted, not stepped: each line its own element that never wraps (`white-space: nowrap`, the 55b guard), its size set from its measured width in `cqi` so it fills its column exactly; lines stacked in one block differ in size, as type set by hand does.
+- **Bevan** 400 for section heads, item titles, the wordmark and short lines of fact; uppercase, untracked, line-height 1.
+- **Archivo Narrow** 400 and 600, line-height 1.5, for everything read; labels, table heads, captions and meta in its 500 a step smaller, sentence case, untracked, `--color-muted`. Figures are Six Caps, or Archivo Narrow tabular in a row.
+- Three families, no outlier: one case of wood type, the gothic for scale and the slab for weight.
+
+## Surfaces
+
+- Rules: `--rule-bar` in ink above a section, a table or between two columns of a bill, `--rule-hair` in ink under a running head, `--rule-hair` in `--color-rule` between rows. Nothing between one and five.
+- Square corners everywhere, no shadow. A frame is a double rule, a `--rule-frame` ink border with a 1px ink keyline 3px inside it, round a well or a photograph.
+- Bands: `--color-paper-2`, ink with buff type, or one vermilion band with buff type; two a page at most.
+- Photographs: plain daylight documentary at eye level, the thing for sale whole and side-on, a detail at arm's length; nobody facing the lens. Printed in the ink on the stock (the `photo:` duotone), square, in the double-rule frame; type never sits on one, and a caption under it carries a fact.
+- Grain, the only texture: the speck layer (`texture.md` § 1) at `--grain`, multiplied on buff and screened on ink, on bands, wells and photograph frames, never under running text.
+
+## Range
+
+- A timetable as a bill: each day a column under a five-point rule, its name fitted in Six Caps to the column, the hour in Bevan, the small print under a 1pt rule; columns parted by a five-point vertical rule.
+- A count or a date fitted to the full measure in Six Caps, the one vermilion line of its screen, its small print beneath.
+- Particulars as rows: a Bevan label on the left, the fact in Archivo Narrow 600 on the right, hair rules between, a five-point rule over the first; a fact not yet known prints as a muted fill, never invented.
+- A form on the vermilion band: buff fields with an ink keyline, the ink block as its action, the head in Bevan.
+
+## Controls
+
+- An ink-filled block in Archivo Narrow 600, untracked capitals (legal under an uppercase display), beside the same block as an unfilled double-rule frame; square, 48px, one fill a page.
+- Links in ink, underlined, vermilion on hover; inputs square, 48px, a 1px ink border.
+- Vermilion sets one whole display line (its own element, never part of a head) or one figure a screen, on buff or `--color-paper-2`.
+
+## Motion
+
+Printed, so still: a live figure updates in place, a fitted line fits once when the fonts load. No marquee, no hover growth, no reveal.
+
+## Voice
+
+A sale bill read aloud: the date, the place, the lot and the hour, each said once. Shouted in capitals, explained in the small print, in the words of the trade it sells to.
+
+## Do-nots
+
+- Never a ragged big line; a Six Caps line that does not fill its measure is fitted or cut.
+- Never a fourth face outside code: the case is Six Caps, Bevan and the narrow.
+- Never a rounded corner; frames, controls and photographs are square.
+- Never a second colour, in type or in a picture; photographs print in the ink.
+- Never a drawn gavel, star or ornament; the capitals and the photograph are the loud things.
+- Never a photograph on every fold; half the bill is type, and the type is the loud half.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Six+Caps&family=Bevan&family=Archivo+Narrow:wght@400;500;600&display=swap" rel="stylesheet">
+```
+
+```css
+h1, .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.88; letter-spacing: var(--tracking-display); }
+.fit { display: block; white-space: nowrap; }
+h2, h3, .wordmark { font-family: var(--font-display-2); font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: 0; }
+.rule-bar { border-top: var(--rule-bar) solid var(--color-ink); }
+.frame, .btn--frame { border: var(--rule-frame) solid var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-paper), inset 0 0 0 4px var(--color-ink); }
+.frame { padding: var(--space-lg); } .frame--photo { padding: var(--space-2xs); }
+.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-xl); border: 3px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-sm)/1 var(--font-body); text-transform: uppercase; }
+.btn--frame { background: transparent; color: var(--color-ink); }
+.grained { position: relative; isolation: isolate; }
+.grained::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain); mix-blend-mode: multiply; } /* the speck SVG, texture.md § 1 */
+::selection { background: color-mix(in oklab, var(--color-accent) 30%, transparent); }
+```

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

@@ -0,0 +1,95 @@
+---
+name: Brutal
+slug: brutal
+genre: editorial
+paper: light 97.5 95
+display: grotesk-heavy Libre Franklin
+accent: chromatic-yellow 105
+posture: committed
+keywords: brutalist, raw, bold, high-contrast, statement, agency, design studio, portfolio, streetwear, drop, zine, type-forward, graphic design, poster, festival, collective, no-nonsense, uncompromising
+material: near-white poster stock, near-black ink as 3px rules, boxed cells and solid fills, uppercase Libre Franklin 900 over its 400, zero radius, one acid-yellow fill
+photo: duotone ink paper con=24
+pictured: Marquee Hero, Poster hero
+---
+
+# Brutal
+
+A raw, engineered sheet: near-white poster stock, near-black ink that arrives as 3px rules, boxed cells and solid fills, Libre Franklin at its blackest in tight capitals, zero radius, and one acid yellow that only ever fills. The grid is drawn, not implied: cells share their rules, and a number or a word set big inside a box is the page's ornament. Photographs print hard in the ink. It is not a dark hacker page, not a decorated zine and not a sticker sheet of offset shadows.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(97.5% 0.006 95); --color-paper-2: oklch(94% 0.007 95); --color-paper-3: oklch(89.5% 0.008 95);
+  --color-ink: oklch(10% 0.006 95); --color-ink-2: oklch(16% 0.006 95); --color-muted: oklch(40% 0.008 95);
+  --color-rule: oklch(10% 0.006 95);
+  --color-accent: oklch(90% 0.19 105); --color-accent-ink: oklch(10% 0.006 95); --color-focus: oklch(48% 0.1 110);
+  --font-display: "Libre Franklin", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
+  --font-outlier: var(--font-display);
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 3px; --shadow-card: none;
+  --tracking-display: -0.03em; --display-weight: 900;
+}
+```
+
+## Type
+
+- **Display:** Libre Franklin 900, uppercase, `--tracking-display`, line-height 1.0 (the floor for capitals that wrap), one weight per head. A statement or the hero head may run to the display cap and past it; set it to fill the measure, not to sit politely inside it. Uppercase belongs to heads, the wordmark and a word or number set as a cell's whole content.
+- **Body:** Libre Franklin 400 at 17 to 18px, line-height 1.5, sentence case, in ink; item titles and controls at 700, sentence case. Three weights in all: 400, 700, 900.
+- **Numbers:** index numbers, counts and dates in 900 with `tabular-nums`, at `--text-section` or larger when they carry a row.
+- **Labels, captions, table heads:** Libre Franklin 400 a step smaller, sentence case, in `--color-muted`; mono appears only inside code.
+
+## Surfaces
+
+- Two rule weights and no others: `--rule-bar` in `--color-rule` boxes a well, a table, a cell or a photograph; `--rule-hair` splits rows inside them. Neighbouring cells share one 3px rule, never two.
+- Zero radius on everything. Depth is fill and border, never shadow: bordered paper, an ink fill with paper text, or the one yellow fill under ink; nothing floats above the paper.
+- Bands: an `--color-ink` band with paper text, or a `--color-paper-2` band ruled top and bottom with `--rule-bar`; two a page at most. The yellow never runs as a band.
+- Photographs: raw documentary of the thing in use, lit by whatever was there (stage light, flash, a street at night): the crowd from inside it, a room before doors, a stage screen; never a posed face. They print hard in the ink (the `photo:` duotone), cropped tight and flush inside a `--rule-bar` frame, or full-bleed where the page is loudest. Type meets a photograph only on a solid ink or paper block set flush against the frame; never a scrim.
+- No texture, no ornament, no gradient.
+
+## Range
+
+- **An index as a boxed table:** rows inside one 3px box, hairlines between, the number in 900 at section size in its own cell, the entry in 700 at title size, one line in 400; the hovered or current row fills yellow under its ink.
+- **A statement:** one blunt sentence in 900 capitals across all twelve columns at display size or larger, sitting on a 3px rule, nothing else on the screen but its attribution.
+- **Cells as a bento:** facts set as words or numbers in 900 capitals inside boxed cells that share their rules, one lead cell twice the size, an ink cell for contrast, a photograph flush in one cell.
+- **The form as the grid:** fields as boxed cells sharing their rules, a choice set as two big word cells that fill yellow when chosen, the send button an ink cell.
+
+## Controls
+
+- The pair: a `--rule-bar` bordered paper button beside a solid ink button with paper text, Libre Franklin 700 in sentence case, 48 to 52px; hover inverts either in one frame.
+- Links are ink, underlined; hover fills yellow under the ink. Inputs: zero radius, a `--rule-bar` border, ink on paper, 52px.
+- The yellow is a fill, never type, a rule or a ring: a chosen option, a `mark` in running text, a hovered row or link. Always under ink, never over a photograph, under 5% of a screen. Focus takes the deep olive `--color-focus`.
+
+## Motion
+
+Nothing glides. State flips in one frame: a surface inverts to ink with paper text, or fills yellow under its ink. No reveal, no bounce, no parallax.
+
+## Voice
+
+Blunt, declarative: capitals in the heads, sentence case everywhere else; the trade's own words, no hedging, no hype. Say the thing flat.
+
+## Do-nots
+
+- Never a rounded corner or a shadow, blurred or hard-offset; depth is border and fill.
+- Never an ornament, a fleuron or a layered offset stack; Brutal is raw, not decorated.
+- Never black paper; this is a light sheet with black structure.
+- Never a second colour: photographs print in the ink, and the yellow only fills.
+- Never two rules where cells meet; a doubled 6px seam reads as a mistake, not as structure.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700;900&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, .display { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1; }
+h3 { font-family: var(--font-display); font-weight: 700; }
+.btn { border: var(--rule-bar) solid var(--color-rule); border-radius: 0; padding: var(--space-xs) var(--space-lg); background: var(--color-paper); color: var(--color-ink); font-weight: 700; transition: none; }
+.btn:hover, .btn--ink { background: var(--color-ink); color: var(--color-paper); } .btn--ink:hover { background: var(--color-paper); color: var(--color-ink); }
+.cells { display: grid; gap: 0; border: var(--rule-bar) solid var(--color-rule); }
+.cells > * { margin: calc(var(--rule-bar) * -1) 0 0 calc(var(--rule-bar) * -1); border: var(--rule-bar) solid var(--color-rule); }
+.well--ink, .band--ink { background: var(--color-ink); color: var(--color-paper); }
+.is-chosen, p mark, a:hover { background: var(--color-accent); color: var(--color-accent-ink); }
+.photo { display: block; border: var(--rule-bar) solid var(--color-rule); border-radius: 0; }
+::selection { background: var(--color-accent); color: var(--color-accent-ink); }
+```

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

@@ -0,0 +1,104 @@
+---
+name: Carnival
+slug: carnival
+genre: editorial
+paper: light 92 50
+display: display-heavy Big Shoulders Display
+accent: chromatic-yellow 95
+posture: full-palette
+keywords: record label, podcast, comedy, indie, zine, poster, illustrator, games, hot sauce, merch, streetwear, cassette, vinyl, live show, festival, loud, maximalist, scrappy
+material: tinted paper, deep warm ink, Big Shoulders Display 800 capitals set poster-large over Golos Text, 2px rules, a hard 4px ink shadow, two accents that compete as whole fields
+photo: natural vib=20 con=10
+pictured: Label and Ledger, Stage hero
+---
+
+# Carnival
+
+A loud, screen-printed register: tinted paper, deep warm ink, Big Shoulders Display capitals over Golos Text, a hard ink shadow and two accents that compete. Every surface is a flat fill with a hard edge, like a print pinned to a wall, and photographs come close and hot, framed the same way. The loudest thing on a page is a fact in the capitals at poster size, not a picture. It is not a pastel playground, a soft-shadow app or a retro costume.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(92% 0.045 50); --color-paper-2: oklch(88% 0.050 45); --color-paper-3: oklch(82% 0.060 40);
+  --color-ink: oklch(18% 0.080 20); --color-ink-2: oklch(28% 0.060 25); --color-muted: oklch(42% 0.050 30);
+  --color-rule: oklch(40% 0.21 25); --color-accent: oklch(86% 0.18 95); --color-accent-2: oklch(40% 0.21 25);
+  --color-accent-ink: oklch(18% 0.080 20); --color-focus: oklch(40% 0.21 25);
+  --font-display: "Big Shoulders Display", Impact, sans-serif; --font-body: "Golos Text", system-ui, sans-serif;
+  --font-outlier: var(--font-body);
+  --radius-card: 2px; --radius-pill: 2px; --rule-hair: 1px; --rule-bar: 2px; --shadow-card: 4px 4px 0 var(--color-ink);
+  --tracking-display: 0.015em; --display-weight: 800;
+}
+```
+
+One dial, the drop, stated in the stamp (`carnival: diner-sign`); its second accent is also the rule and focus colour. `paper-2` and `paper-3` step 4 and 10 points darker on the paper's hue, `ink-2` and `muted` lighten the ink alike, and the ink sits on every first accent.
+
+| Drop | Pick for | Paper | Ink | Accent | Accent 2 |
+| --- | --- | --- | --- | --- | --- |
+| cold-snap (default) | music, winter, cassettes, vinyl | 92% 0.045 50 | 18% 0.080 20 | mustard 86% 0.18 95 | oxblood 40% 0.21 25 |
+| citrus-riot | zines, skate, summer drops | 94% 0.040 85 | 20% 0.07 145 | lime 82% 0.20 130 | magenta 28% 0.28 350 |
+| diner-sign | food and drink, hospitality, roadside | 95% 0.035 90 | 16% 0.04 30 | cherry 60% 0.22 25 | navy 30% 0.16 250 |
+| studio-night | radio, podcasts, blue hour | 88% 0.05 25 | 20% 0.05 270 | cyan 78% 0.18 220 | plum 24% 0.18 320 |
+| aqua-park | summer, pool, surf, motels | 94% 0.040 180 | 20% 0.06 200 | turquoise 72% 0.16 195 | coral 36% 0.24 35 |
+| pressroom | journalism, newsletters, opinion | 89% 0.025 65 | 16% 0.02 60 | amber 78% 0.18 75 | slate 34% 0.10 240 |
+
+## Type
+
+- **Display:** Big Shoulders Display 800, capitals, `--tracking-display`, line-height 1.0 where a head can wrap; a lone word on one nowrap line may run at -0.005em and 0.9. The face is narrow, so it sets a step above the scale: the hero head up to about 160px at 1440, a section head at `--text-display-s`, an item title at `--text-2xl`.
+- **Body:** Golos Text 400 and 500, sentence case, full ink.
+- **Labels, captions, table heads:** Golos Text 500 a step smaller, sentence case. Never mono.
+- **Figures:** a fact that sells (a price, a volume, a count) sets in the display face at the hero's size, tabular, its unit beside it in the same capitals; small figures are Golos Text with `tabular-nums`.
+
+## Surfaces
+
+- Two accents that compete: one fills a surface, the other the next, never a gradient between them.
+- The hard offset shadow (`--shadow-card`, zero blur) on wells, controls and photographs, never clipped by an overflow; nothing else casts depth.
+- Rules: `--rule-bar` in `--color-accent-2` between sections and rows, in ink around a shadowed surface; radius 2px at most.
+- Bands: a field of either accent (the second under paper text) or `--color-paper-2`; two a page at most.
+- Photographs: the thing itself, close, in hard light or flash, colour pushed, one subject filling the frame: the bottle in a hand, the fruit cut open, a sleeve. A `--rule-bar` ink border on the hard shadow, like a print pinned up, free to tilt a degree or two; type never sits on one, though a flat accent block with a fact may overlap a corner.
+- Texture: the halftone screen (`texture.md` § 2) in ink on a well or a band, never under running text or over a photograph.
+
+## Range
+
+- **Figures** on a whole accent field: three or four facts in the display capitals at poster size, each over its line in Golos, parted by 2px ink bars, the halftone in one corner of the field and never under a figure.
+- **Rows** ruled with `--rule-bar` in the second accent: a question or a name in capitals at item-title size on the left, the answer in Golos at lead size on the right; a picked row inverts to ink with paper type.
+- **Statements** on the second accent under paper type, the line at poster size across ten columns, one action beside it.
+- **Forms** as a well on the hard shadow: options as ruled rows that invert when chosen, a live total in the capitals.
+
+## Controls
+
+- The pair: a first-accent fill beside the same block outlined in ink on paper, both on the hard shadow and in the display face's capitals, untracked.
+- Links are ink, underlined in `--color-accent-2`; inputs take a `--rule-bar` ink border on paper and no shadow.
+- The first accent fills the primary control, a band or a well; the second carries rules, focus, links and the other fill.
+
+## Motion
+
+Mostly still. Hover swaps colour and nothing else; active presses the offset to 1px; nothing lifts. The one loop a page may run is a marquee of words at 8s a cycle or slower.
+
+## Voice
+
+Loud, short, funny by being exact: the count, the price, the date, one joke a screen. Heads in capitals, six words or fewer, ending in a full stop; body in sentence case and the present tense, numerals over words.
+
+## Do-nots
+
+- Never a soft shadow; hard offset or none.
+- Never both accents inside one surface; blending kills the duo-tone read.
+- Never sentence-case heads, and never loose tracking.
+- Never a grey or ghost button; the secondary is the outlined ink block.
+- Never a drawn mascot, flame, skull or doodle; the loud thing is photographed or set in type.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800&family=Golos+Text:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1; }
+.btn { border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); padding: var(--space-sm) var(--space-lg); background: var(--color-paper); color: var(--color-ink); font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; }
+.btn--primary, .band--a { background: var(--color-accent); color: var(--color-accent-ink); }
+.btn:active { box-shadow: 1px 1px 0 var(--color-ink); }
+.well, .photo { border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-paper-2); }
+.band--b { background: var(--color-accent-2); color: var(--color-paper); }
+.halftone { background-image: radial-gradient(var(--color-ink) 1.5px, transparent 1.5px); background-size: 12px 12px; }
+```

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

@@ -0,0 +1,101 @@
+---
+name: Cobalt
+slug: cobalt
+genre: modern-minimal
+paper: light 98.5 250
+display: grotesk-sans Familjen Grotesk
+accent: cool 256
+posture: restrained
+keywords: api, sdk, cli, dev tool, developer platform, docs, documentation, infrastructure, backend, database, observability, webhooks, events, type-safe, open source, ship, deploy, developer experience, technical
+material: cool near-white paper, blue-grey ink and hairlines, Familjen Grotesk over IBM Plex Sans, a generated ASCII field on an 8 by 16 cell, keycaps and cut-corner panels, JetBrains Mono on graphite, one electric cobalt signal
+photo: duotone graphite paper
+pictured: Feature Ledger, Field hero
+---
+
+# Cobalt
+
+An exact, technical register: cool near-white paper ruled with hairlines, Familjen Grotesk heads over IBM Plex Sans, and a ground made of characters, a generated ASCII field snapped to an 8 by 16 cell that shows the product's own traffic in cobalt tints. Panels are cut on two opposite corners, buttons are keycaps with a real bottom edge, code runs on graphite. It is precise because every edge is a hairline or a cut and every glyph means something; it is not a dark developer page or a terminal costume.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(98.6% 0.005 250); --color-paper-2: oklch(96.2% 0.008 252); --color-paper-3: oklch(93% 0.011 252);
+  --color-ink: oklch(21% 0.028 262); --color-ink-2: oklch(36% 0.022 260); --color-muted: oklch(50% 0.018 258);
+  --color-rule: oklch(90% 0.009 252); --color-rule-2: oklch(83% 0.012 252);
+  --color-graphite: oklch(21% 0.024 262); --color-graphite-2: oklch(26.5% 0.026 262); --color-graphite-ink: oklch(93% 0.010 250); --color-graphite-muted: oklch(69% 0.022 256);
+  --color-accent: oklch(52% 0.19 258); --color-accent-2: oklch(76% 0.13 254); --color-accent-wash: oklch(95% 0.028 256); --color-accent-ink: oklch(98.6% 0.005 250); --color-focus: oklch(52% 0.19 258);
+  --color-accent-deep: oklch(43% 0.2 262); --color-accent-edge: oklch(39% 0.16 260);
+  --color-glyph-1: oklch(89% 0.025 254); --color-glyph-2: oklch(81% 0.045 255); --color-glyph-3: oklch(70% 0.085 256); --color-glyph-4: oklch(60% 0.13 257);
+  --color-graphite-glyph-1: oklch(33% 0.03 262); --color-graphite-glyph-2: oklch(41% 0.05 260); --color-graphite-glyph-3: oklch(53% 0.1 258);
+  --color-key-face: oklch(99.4% 0.003 250); --color-key-edge: oklch(80% 0.016 254);
+  --font-display: "Familjen Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif;
+  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
+  --radius-card: 8px; --radius-input: 6px; --radius-pill: 999px;
+  --cell-w: 8px; --cell-h: 16px; --cut: 8px; --cut-l: 16px;
+  --rule-hair: 1px; --shadow-card: 0 1px 2px oklch(21% 0.028 262 / 0.06);
+  --shadow-key: 0 3px 0 0 var(--color-key-edge), 0 6px 8px -4px oklch(21% 0.028 262 / 0.28), inset 0 1px 0 oklch(100% 0 0 / 0.9);
+  --shadow-key-accent: 0 3px 0 0 var(--color-accent-edge), 0 6px 8px -4px oklch(30% 0.12 260 / 0.45), inset 0 1px 0 oklch(100% 0 0 / 0.22);
+  --shadow-key-press: inset 0 1px 2px oklch(21% 0.028 262 / 0.14);
+  --tracking-display: -0.028em; --display-weight: 600;
+}
+```
+
+## Type
+
+- **Display:** Familjen Grotesk 600 on heads and figures, 500 on item titles, `--tracking-display`, line-height 1.02, sentence case, tabular figures; a count at 60px and over is the loudest type.
+- **Body:** IBM Plex Sans 400 and 500.
+- **Labels, table heads, status:** Familjen Grotesk 500 a step smaller, `--color-muted`. Never mono.
+- **Code and glyphs:** JetBrains Mono for code, machine values and the field; never a label, head or chip.
+
+## Surfaces
+
+- A 1px `--color-rule` edges every surface and splits every row; neutrals tilt to hue 250 to 260.
+- Panels, chips and fields are cut on two opposite corners: `border-radius: var(--cut-l) 4px` with `corner-shape: bevel round bevel round` inside `@supports`, `--cut` on small parts, plain 8px and 6px radius as the fallback. Depth is `--shadow-card` and a paper step; only keys have an edge.
+- The ground is a generated ASCII field on one canvas, never a picture: noise sampled per 8 by 16 cell into a character ramp, tinted `--color-glyph-1` to `-4` with `--color-accent-deep` for the densest cells, shaped by the product's own flow (raw on one side, resolved on the other). It sits behind the hero; one divider row and one graphite panel (graphite glyph tints) may repeat it, four places at most; a dot grid on the cell stands in without script.
+- Graphite is the dark material: `--color-graphite` under `--color-graphite-ink`, `--color-graphite-2` for a selected line or header strip, `--color-graphite-muted` for comments. Syntax takes `--color-accent-2`, never a rainbow. Two bands a page at most, one graphite.
+- Photographs are rare: one at most, a real system seen from a distance, in the duotone, no type on it.
+
+## Range
+
+- **A table that is the API:** ruled full width, machine values in mono, one row on the cobalt wash.
+- **A mapping:** two graphite panes, input and output, matched lines joined by hairline elbows.
+- **A timeline as a ruler:** real seconds on one hairline, attempts as notched ticks with their status in Familjen 600 at display size, waits as dimension lines, failure in the error colour.
+- **A working control on the prompt's numbers:** its result as one large figure over a meter of fifty mono cells.
+
+## Controls
+
+- Keycaps: a key-face button on a 3px bottom edge that lifts 1px on hover and sinks on press; the one primary is a solid cobalt key. Options are keys on a sunken paper-3 tray, the chosen one pressed.
+- A command is a cut chip with a working copy key. Links take a cobalt underline on hover. Inputs are cut, `--color-muted` border, cobalt focus.
+- Status is text with one icon, never a filled chip. Cobalt stays under 5% of a screen outside the field.
+
+## Motion
+
+The field runs at 30 fps with a pointer lens, pauses off screen, and is one composed still under reduced motion. Keys travel over `--dur-micro`; connectors draw in once. No bounce, no parallax.
+
+## Voice
+
+Declarative and specific, like a good changelog: the event, the endpoint, the status code. No hype adjectives.
+
+## Do-nots
+
+- Never a warm accent, a pill or a gradient button.
+- Never noise for its own sake: the field maps traffic or state the product has, and no type sits on its densest cells.
+- Never fake code: a snippet compiles or returns; with no host in the prompt, call `example.com`.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@500;600&family=IBM+Plex+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); color: var(--color-ink); } h3 { font-weight: 500; }
+.key { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); padding: 0 var(--space-lg); min-height: 48px; background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
+.key:hover { transform: translateY(-1px); } .key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
+.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
+.cut { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
+@supports (corner-shape: bevel) { .cut { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
+.graphite { background: var(--color-graphite); color: var(--color-graphite-ink); } .graphite .token { color: var(--color-accent-2); }
+a { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; } a:hover { text-decoration-color: var(--color-accent); }
+```

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

@@ -0,0 +1,99 @@
+---
+name: Console
+slug: console
+genre: modern-minimal
+paper: dark 17 250
+display: grotesk-sans Host Grotesk
+accent: chromatic-amber 80
+posture: restrained
+keywords: lab, laboratory, protocol, experiment, notebook, science, research, observability, monitoring, version control, audit, compliance, instruments, data, devtools, engineering, telemetry, record, operations, dark, developer
+material: graphite ground in three lightness steps, pale ink, hairline panels cut from one surface, Host Grotesk 500 for reading, Atkinson Hyperlegible Mono for what was measured, amber for a person and cool blue for an instrument
+photo: duotone paper-3 ink
+pictured: Audit Trail, Stage hero
+---
+
+# Console
+
+An instrument kept by careful people: a graphite ground stepped in three lightnesses, hairline panels cut from one surface, Host Grotesk for what a person reads, Atkinson Hyperlegible Mono for what an instrument measured, amber for a person and cool blue for an instrument. The ground is neutral so both meanings sit on it at equal weight, and nothing glows. It is not a neon terminal, a glass dashboard or a science-fiction control room.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(17% 0.008 250); --color-paper-2: oklch(21% 0.009 250); --color-paper-3: oklch(13.5% 0.007 250);
+  --color-ink: oklch(95% 0.005 250); --color-ink-2: oklch(83% 0.008 250); --color-muted: oklch(71% 0.01 250);
+  --color-rule: oklch(31% 0.01 250); --color-rule-2: oklch(42% 0.012 250);
+  --color-accent: oklch(82% 0.15 80); --color-accent-ink: oklch(18% 0.04 75); --color-accent-soft: oklch(29% 0.05 80); --color-focus: oklch(82% 0.15 80);
+  --color-cool: oklch(77% 0.12 245); --color-cool-soft: oklch(29% 0.05 245);
+  --color-ok: oklch(76% 0.15 150); --color-ok-soft: oklch(24.5% 0.03 150); --color-bad: oklch(70% 0.17 25); --color-bad-soft: oklch(24.5% 0.035 25);
+  --font-display: "Host Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
+  --font-outlier: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
+  --radius-card: 10px; --radius-pill: 6px; --rule-hair: 1px;
+  --shadow-card: none;
+  --tracking-display: -0.03em; --display-weight: 500;
+}
+```
+
+One dial, the colourway, stated in the stamp (`console: graphite`): `graphite`, the tokens above; `paper`, ground oklch(98% 0.006 85) under ink oklch(19% 0.010 60), amber oklch(54% 0.14 70) and cool oklch(52% 0.14 250), the paper band turning light; `amber-room`, ground oklch(15% 0.022 70) under ink oklch(95% 0.012 85), amber oklch(82% 0.15 82) and the cool turned to ice oklch(82% 0.08 200). In every colourway amber means a person and cool means an instrument.
+
+## Type
+
+- **Display:** Host Grotesk 500, `--tracking-display`, line-height 1.02 to 1.05, sentence case, roman; calm at size, never 700.
+- **Body:** Host Grotesk 400 at 16 to 17px, line-height 1.55, in `--color-muted`; the lede in `--color-ink-2`.
+- **Labels, captions, table heads, chips:** Host Grotesk 500 a step smaller, sentence case, in `--color-muted`.
+- **Measured:** Atkinson Hyperlegible Mono 400 and 500 at 14 to 15px for what an instrument or the system wrote: a reading with its unit, an id, a diff, a timestamp, every figure tabular. Its slashed zero and tailed one are the point; at display size it is the theme's loudest thing. Never a label, a head or a control.
+
+## Surfaces
+
+- Hairline panels: a surface is a 1px `--color-rule` with `--color-paper-2` inside, radius 10px (6px on controls). Panels that sit together are one surface divided by 1px rules; `--color-rule-2` marks the selected row or the spine of a trail.
+- Three steps, no lamp: the ground, a panel one step up, the deepest step for code, logs, a changed row and photographs. No shadow, glow, bloom or spotlight.
+- Bands: a `--color-paper-3` or `--color-paper-2` band, never an amber field; two a page at most.
+- Photographs: one or two, of the bench and never a face (gloved hands at a pipette, a rack of tubes), dark and close, black and white from the deepest step to the ink, radius 10px, a 1px rule edge, a caption beneath.
+- No texture, no gradient on a surface.
+
+## Range
+
+- **Diffs:** a comparison set as two versions in one panel, a gutter of plus and minus in ok and bad, the changed rows on the soft tints, the reason in the person's words beside them.
+- **Readings:** a single value at display size in the measured face, the struck value it replaced above it, and who, when and why beneath in amber, cool and ink; a statement made of a record.
+- **Trails:** rows as an audit trail on a 1px `--color-rule-2` spine, each entry a version, a person in amber, a time in cool, a reason in ink; a timetable or changelog reads the same way.
+- **Panels:** a bento or a comparison cut from one surface with 1px seams, one panel the lead, each panel holding the product at full fidelity rather than a picture of it.
+
+## Controls
+
+- The pair: an amber fill with `--color-accent-ink` beside a 1px `--color-rule-2` outline on `--color-paper-2`, both at 6px, Host Grotesk 500.
+- A chip carries state only: the label face inside a 1px rule at 4px radius, tinted `--color-accent-soft` or `--color-cool-soft` by meaning. A version picker is a row of such chips, the chosen pair on the cool tint. Inputs sit on `--color-paper-3` inside a 1px rule at 6px; links underline in `--color-rule-2` and turn amber on hover.
+- Two meanings: amber is a person (an operator, a deviation, the current step, the one primary control); cool is an instrument (a reading, a trace, a version). Ok and bad exist for diffs and status only.
+
+## Motion
+
+A value changes when its source does, over `--dur-short` on `--ease-out`; a chart may draw once. No reveal, parallax or hover lift.
+
+## Voice
+
+A lab notebook kept by a careful person: the value, its unit, the time, who signed. A number without a unit or a time is nothing.
+
+## Do-nots
+
+- Never swap the meanings; an amber reading or a cool deviation is the theme lying.
+- Never a floating card with a shadow under it.
+- Never a third signal or a photograph in colour.
+- Never mono on a label, a head or a button; mono is what an instrument wrote.
+- Never a page of small panels only; one value or one record a page is set large.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500&family=Atkinson+Hyperlegible+Mono:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.04; }
+.panels { display: grid; gap: var(--rule-hair); background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
+.panels > * { background: var(--color-paper-2); }
+.measured { font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums slashed-zero; }
+.reading { font-family: var(--font-outlier); font-size: var(--text-display); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--color-ink); }
+.row--minus { background: var(--color-bad-soft); } .row--plus { background: var(--color-ok-soft); }
+.btn { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); color: var(--color-ink); font-weight: 500; transition: background-color var(--dur-short) var(--ease-out); }
+.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
+::selection { background: color-mix(in oklab, var(--color-accent) 25%, transparent); }
+```

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

@@ -0,0 +1,102 @@
+---
+name: Coral
+slug: coral
+genre: modern-minimal
+paper: light 97 55
+display: grotesk-sans General Sans
+accent: warm 30
+posture: restrained
+keywords: saas, platform, billing, payments, invoicing, dashboard, b2b, startup, product, pricing, analytics, fintech, workflow, team, onboarding, trust, warm, human, calm
+material: warm grey paper and a felt desk, cotton stationery lit from the left, General Sans throughout with Geist Mono figures, letterpress card controls, coral pressed into the stock for the one settled state
+photo: muted sepia=8
+pictured: Conversational FAQ, Desk hero
+---
+
+# Coral
+
+A warm, plain product voice made physical: fine stationery on a felt desk, seen from above in one daylight from the left. Records are cotton sheets, envelopes and index cards with real edges; controls are letterpress cards; one coral ink is pressed in where something is settled. General Sans throughout. Not a cream editorial page, not a skeuomorphic toy, not a blue SaaS template.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(97% 0.006 55); --color-paper-2: oklch(94.5% 0.007 55); --color-paper-3: oklch(91.5% 0.009 55);
+  --color-ink: oklch(21% 0.012 38); --color-ink-2: oklch(29% 0.013 40); --color-muted: oklch(47% 0.013 45);
+  --color-rule: oklch(87% 0.009 55); --color-rule-2: oklch(81% 0.011 55);
+  --color-accent: oklch(74% 0.125 30); --color-accent-ink: oklch(21% 0.012 38); --color-accent-2: oklch(54% 0.165 29); --color-focus: oklch(54% 0.17 30);
+  --color-cotton: oklch(98.8% 0.0045 80); --color-desk: oklch(94.3% 0.008 64); --color-print: oklch(23% 0.012 38);
+  --color-board: oklch(22% 0.011 40); --color-board-type: oklch(96.5% 0.006 70); --color-paid: oklch(55.5% 0.15 33);
+  --tex-cotton: url("cotton.svg"); --tex-desk: url("felt.svg");
+  --shade: 32% 0.03 50; --lit: 100% 0.005 80; --deep: 7% 0.01 40;
+  --font-display: "General Sans", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
+  --font-outlier: "Geist Mono", ui-monospace, monospace;
+  --radius-card: 8px; --radius-input: 6px; --radius-pill: 999px; --radius-stock: 8px; --rule-hair: 1px;
+  --shadow-card: 0 1px 2px oklch(20% 0.01 35 / 0.05);
+  --edge-stock: inset 0 1px 0 oklch(var(--lit) / 0.9), inset 0 -1px 0 oklch(var(--shade) / 0.07), 0 0 0 0.5px oklch(var(--shade) / 0.22), 0 1px 0 oklch(var(--shade) / 0.12);
+  --cast-stock: 6px 5px 10px -6px oklch(var(--shade) / 0.3); --cast-stock-lift: 12px 10px 18px -8px oklch(var(--shade) / 0.3);
+  --press-groove: inset 1px 1.5px 2px oklch(var(--shade) / 0.16), inset -1px -1px 0 oklch(var(--lit) / 0.9), 0 0 0 0.5px oklch(var(--shade) / 0.2);
+  --tracking-display: -0.03em; --display-weight: 600;
+}
+```
+
+## Type
+
+- **Display:** General Sans 600, `--tracking-display`, line-height 1.02 to 1.08, sentence case, roman. A lone price sets at two to three times `--text-display`, tracked -0.05em, line-height 0.85, its unit beside it at `--text-title` in 500.
+- **Body:** General Sans 400 and 500. On stock, `--color-print`; on board, `--color-board-type`.
+- **Labels:** General Sans 500 a step smaller, sentence case, `--color-muted`.
+- **Figures in a column:** Geist Mono 400 (General Sans has no tabular figures). A price in a sentence or a head stays General Sans.
+
+## Surfaces
+
+- One light, from the left: each paper object takes a lit edge top and left, a shade edge bottom and right, and a cast falling right (`--edge-stock`, `--cast-stock`).
+- The hero ground is a desk: `--color-desk` under a daylight radial from the left and a generated felt texture. Records the product handles are built as stationery on it: invoices, letters and statements on cotton sheets, a window envelope with glassine showing the address, replies as correspondence index cards, a groove pressed into a card. Each is CSS on `--color-cotton`, sized from one unit so it scales whole.
+- Texture is generated, never a picture: the build writes `cotton.svg`, a 360px tile of two stitched feTurbulence layers (cloud 0.011, grain 0.92, warm and faint) with short fibre strokes, under a lit-to-shade gradient on every paper object; `felt.svg` the same at 0.018. Sections stay plain.
+- The settled state (paid, signed, booked) is pressed into the stock: the word in General Sans 600 in `--color-paid`, through an SVG filter that offsets a shade wall into the letterforms and lets a noise mask leave the ink uneven, tilted a few degrees.
+- One `--color-ink` band, the board; stationery on it casts from `--deep`.
+- Photographs are rare: work at arm's length in daylight, muted; built stationery answers first.
+
+## Range
+
+- **The job played as paperwork:** the product's task told in its own documents on the desk (a sheet into an envelope, a reply card tucked under, the outcome pressed in), built in the hero and reused below.
+- **Records as an index:** replies, bookings or clients as cotton index cards stacked with offset tabs, beside their record on a full sheet.
+- **The price on the board:** the lone figure huge in paper beside a ruled list of what it pays for; the action sits on stationery laid on the band (an envelope flap, a card).
+- **The other side:** what the recipient sees, built on cotton, a groove control rewriting it live.
+
+## Controls
+
+- Letterpress cards, not pills: 8px radius, 48px tall, cotton stock with `--edge-stock` and `--cast-stock` and the label pressed in (a lit text shadow below it); the primary is ink board with the label pressed the other way. Hover lifts 1px into `--cast-stock-lift`; active presses 1px down.
+- A choice of two to four is a groove pressed into cotton (`--press-groove`, 12px radius) with a cotton card riding in it to the chosen stop.
+- Inputs 48px, 6px radius, 1px `--color-muted` border, deep coral focus. Status is an ink outline; coral is spent only on the pressed settled state, link underlines and focus.
+
+## Motion
+
+Once, after fonts load and in view: the job plays on the desk in about six seconds, transforms and opacity only, paused off screen, then still. Reduced motion and no script show the finished state.
+
+## Voice
+
+Plain, warm second-person sentences about the work and the money: who, how much, when, what the product did. Never cute.
+
+## Do-nots
+
+- Never cool paper, a blue signal or a second light; every shadow falls right.
+- Never a pill button or a flat square button; controls are pressed cards.
+- Never a photograph of paper; stationery is built in CSS.
+- Never coral as a band, a fill behind text or a head; it is the pressed ink of one settled state.
+
+## Build hint
+
+```html
+<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: var(--display-weight); }
+.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
+.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }
+.btn { min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-weight: 500; transition: transform var(--dur-short) var(--ease-out); }
+.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
+.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
+.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); } .btn:active { transform: translateY(1px); }
+.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
+a:hover { text-decoration-color: var(--color-accent-2); }
+```