@r1z4x/tezgah 1.9.2 → 1.11.0

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

@@ -0,0 +1,102 @@
+---
+name: Newsprint
+slug: newsprint
+genre: editorial
+paper: light 94 92
+display: slab-serif Zilla Slab
+accent: warm 32
+posture: restrained
+keywords: newspaper, broadsheet, journalism, publication, magazine, newsletter, local news, op-ed, opinion, essay, longform, column, reportage, press, gazette, review, dispatch, literary
+material: pale newsprint stock, warm black ink, Zilla Slab heads over a Spectral body with Libre Franklin agate for listed figures, justified columns under hairline column rules, a double rule, one dried-brick signal
+photo: mono
+pictured: Broadsheet Front, Stage hero
+---
+
+# Newsprint
+
+A broadsheet in a browser: pale newsprint stock, warm black ink, a blunt Zilla Slab head over a calm Spectral book serif, hairlines and column rules for ordinary breaks, a double rule for the major ones, and a dried-brick signal that never fills anything. Photographs run in black and white with a caption, as a paper prints them. It reads reported and edited, not decorated. It is not a magazine of rounded cards, not a sans-serif blog, and not the cream editorial template with a terracotta button.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(94% 0.011 92); --color-paper-2: oklch(90.5% 0.015 88); --color-paper-3: oklch(87% 0.017 86);
+  --color-ink: oklch(17% 0.012 60); --color-ink-2: oklch(27% 0.012 58); --color-muted: oklch(46% 0.014 60);
+  --color-rule: oklch(68% 0.016 75); --color-rule-2: oklch(34% 0.012 60);
+  --color-accent: oklch(44% 0.13 32); --color-accent-ink: oklch(95% 0.012 90); --color-focus: oklch(48% 0.17 32);
+  --font-display: "Zilla Slab", ui-serif, Georgia, serif; --font-body: "Spectral", ui-serif, Georgia, serif;
+  --font-outlier: "Libre Franklin", ui-sans-serif, sans-serif;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px;
+  --shadow-card: none;
+  --tracking-display: -0.02em; --display-weight: 700;
+}
+```
+
+## Type
+
+- **Display:** Zilla Slab 700, `--tracking-display`, line-height 1.05, sentence case, roman, for heads, decks and the masthead. Bracketed serifs at nearly stem weight: hold the one weight and let the shared scale make the hierarchy.
+- **Body:** Spectral 400 and 500 at 1.0625rem, line-height 1.55. The blunt slab over the calm book serif is the voice; Spectral italic is emphasis in running text only.
+- **Bylines, datelines, captions, table heads, meta:** Spectral 500 a step smaller, sentence case, untracked, `--color-muted`.
+- **Agate, Libre Franklin 500:** the paper's listings face, only for figures in a ruled list or table (times, prices, counts, results), tabular and right-aligned, the size of the text beside it. Never a label, a head or running text. Three weights a page: 400, 500, 700.
+- **Columns:** running text of more than one paragraph may set in two or three justified columns with `hyphens: auto` and a hairline column rule, each 28 to 40ch.
+- **Drop cap:** may open one long passage, a Zilla Slab initial about three lines tall in ink or brick, once a page at most.
+
+## Surfaces
+
+- Hairlines in `--color-rule` carry ordinary breaks, and text set in columns takes a hairline column rule; the double rule, two 1px lines in `--color-rule-2` 2px apart, is the heaviest divider the theme owns and marks the major breaks.
+- Rules, never boxes: radius 0 and no shadow anywhere. A well is a `--color-paper-2` field ruled top and bottom, never a bordered card.
+- Bands: `--color-paper-2`, or one `--color-ink` band with paper type; two a page at most, never a brick field.
+- Photographs: black-and-white documentary, the place and its people at a working distance or from behind, in available light, the tones running from paper white to ink; the lead picture wide, the rest cropped to the story. Square, a 1px `--color-rule` border, no shadow. Every picture takes a one-line caption beneath it in the byline voice, a fact; type never sits on a photograph.
+- Texture, if any: the faintest fibre grain (`texture.md` § 1) on one band, off by default and never under running text.
+
+## Range
+
+- **Front page in columns:** one head at `--text-display-s` across the full measure over three justified columns of Spectral, a drop cap, a dateline in the byline voice; a 1px column rule between, a double rule above.
+- **Listings as agate:** a week, a programme or a price list as ruled rows, the day or item in Zilla Slab at title size, the line in Spectral, the figure in Franklin agate at the right edge.
+- **Figures as a box score:** the publication's own numbers in Zilla Slab at display size between two double rules, each over one Spectral line, parted by column rules.
+- **The ink band:** a notice reversed in paper on `--color-ink` (a price, a call to subscribe) with its form; the brick becomes a hairline on it, never a fill.
+
+## Controls
+
+- The control pair: an ink-filled rectangle with paper type beside one ruled top and bottom in ink, both square, set in Zilla Slab 700 a step smaller.
+- Links in brick with a 1px brick underline that thickens on hover; inputs are square with a 1px `--color-rule-2` border on `--color-paper-2`.
+- The brick stays under 5%: links, the focus ring, a short tick on a rule; never a fill.
+
+## Motion
+
+State only: a link's underline thickens on hover. No reveal, no counter, nothing that types or scrolls itself.
+
+## Voice
+
+Specific and declarative, with a dry editorial wit: name the place, the day and the fact, and write heads a sub-editor would pass, in sentence case and full stops.
+
+## Do-nots
+
+- Never a sans-serif body or a sans label voice; Spectral does all the small work.
+- Never a cool or bright accent; dried brick is furniture, not a shout.
+- Never boxed cards, shadows or rounded corners; rules carry the structure.
+- Never Zilla Slab under 700 or in italic; one blunt roman weight.
+- Never a colour, toned or tinted photograph, and never one without its caption.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@700&family=Spectral:ital,wght@0,400;0,500;1,400&family=Libre+Franklin:wght@500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: var(--display-weight); }
+.rule--double { box-sizing: content-box; height: 2px; border: 0; border-block: var(--rule-hair) solid var(--color-rule-2); }
+.cols { columns: 3 18rem; column-gap: var(--space-xl); column-rule: var(--rule-hair) solid var(--color-rule); text-align: justify; hyphens: auto; }
+.agate { font: 500 1em/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
+.dropcap::first-letter { float: left; font: 700 3.4em/0.8 var(--font-display); padding-right: 0.06em; }
+.btn { border: 0; background: none; border-radius: 0; padding: var(--space-md) var(--space-lg); font: 700 0.9375rem/1 var(--font-display); }
+.btn--primary { background: var(--color-ink); color: var(--color-paper); }
+.btn--secondary { border-block: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); }
+.well { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
+figure img { border: var(--rule-hair) solid var(--color-rule); }
+figcaption { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); padding-top: var(--space-xs); }
+a { color: var(--color-accent); text-decoration-color: var(--color-accent); text-underline-offset: 0.16em; }
+a:hover { text-decoration-thickness: 2px; }
+::selection { background: color-mix(in oklab, var(--color-accent) 20%, transparent); }
+```

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

@@ -0,0 +1,101 @@
+---
+name: Overprint
+slug: overprint
+genre: playful
+paper: light 91.5 92
+display: grotesk-heavy Anybody
+accent: cool 212
+posture: full-palette
+keywords: venue, gigs, live music, festival, music, label, print studio, bar, club, poster, tickets, events, nightlife, two-colour, screenprint, punk, zine, loud, listings, door
+material: grey newsprint stock, near-black ink, wide heavy Anybody capitals over Archivo, flat square fills, a teal pass and an orange pass that print moss where they cross, photographs pulled through one pass
+photo: mono con=30
+pictured: Marquee Hero, Poster hero
+---
+
+# Overprint
+
+A two-colour screenprint on cheap stock: grey newsprint, near-black ink, wide heavy Anybody capitals over a plain Archivo body, and two transparent flat inks, teal and orange, that print a deep moss where they cross. Photographs print hard through one pass, as a bill prints them. All in register, flat and square: the noise is scale and two inks, never effects. It is not a retro poster pastiche, a misregistered print or a neon flyer.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(91.5% 0.014 92); --color-paper-2: oklch(87.5% 0.018 90); --color-paper-3: oklch(83% 0.021 88);
+  --color-ink: oklch(17% 0.008 60); --color-ink-2: oklch(29% 0.01 60); --color-muted: oklch(42% 0.012 70);
+  --color-rule: oklch(78% 0.02 85);
+  --color-accent: oklch(65% 0.12 212); --color-accent-ink: oklch(17% 0.008 60); --color-focus: oklch(44% 0.1 220);
+  --color-accent-2: oklch(71% 0.19 50); --color-accent-2-ink: oklch(17% 0.008 60);
+  --color-mix: oklch(35.5% 0.121 142);
+  --blend: multiply; --texture-opacity: 0.06;
+  --font-display: "Anybody", ui-sans-serif, sans-serif; --font-body: "Archivo", ui-sans-serif, sans-serif;
+  --font-outlier: "Archivo Narrow", ui-sans-serif, sans-serif;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 4px;
+  --shadow-card: none;
+  --tracking-display: -0.01em; --display-weight: 900; --display-stretch: 140%;
+}
+```
+
+Both passes are fills under ink type, never type, and the moss is what the multiply prints where they cross, never painted. Two stocks, stated in the stamp (`overprint: newsprint`): newsprint, the tokens above; or black stock, `oklch(20% 0.01 280)` under `oklch(95% 0.01 90)`, the blend flipped to screen so the overlap goes pale, passes in yellow `oklch(88% 0.17 95)` and aqua `oklch(78% 0.13 200)`, focus in the aqua.
+
+## Type
+
+- **Display:** Anybody 900, set wide (`--display-stretch`, 130 to 150%), uppercase, line-height 1.0 to 1.02, `--tracking-display`. Figures, times and prices take it at 150% with `tabular-nums`.
+- **Body:** Archivo 400 and 600, 16 to 17px, line-height 1.5, in ink.
+- **Small print:** Archivo Narrow 600 a step smaller, sentence case, untracked, for days, hours and table heads: the label face. Captions are Archivo. No mono.
+
+## Surfaces
+
+- Two passes: everything coloured is pass 1 or pass 2, a flat fill at `mix-blend-mode: var(--blend)`, so where the two cross the stock prints `--color-mix`; type never sits on the moss.
+- Rules: the 4px ink `--rule-bar` across the top of a list, a table, a figure row or the nav; `--rule-hair` in `--color-rule` between rows.
+- Radius 0, no shadow, no gradient but a photograph's scrim: depth by overprint, never a lift.
+- Bands: `--color-paper-2`, the ink with paper type, or one pass field with ink type; two a page.
+- Photographs: the night, close or from behind, in the light it was played under (a crowd under one wash, hands on a fretboard, the bar at doors); never posed, never a face to the lens. Grey and hard, multiplied onto one pass field so lights print teal or orange and shadows ink; square, full-bleed or to a column edge, no frame. Type sits beside a picture, or knocks out to the stock over its darkest part on an ink scrim.
+- Texture: grain (`texture.md` § 1) at `--texture-opacity` on a band, a pass field or a photograph, never under running text.
+
+## Range
+
+- **Figures as a bill:** the prompt's own times, capacity or price set at poster scale in wide Anybody, each figure on its own pass field; two fields cross by a column so the overlap prints moss, and no letter stands in it.
+- **The listing as a ruled table:** under the 4px bar, heads in Archivo Narrow, the act in wide capitals at title size, nights and prices in tabular figures; an on-sale cell takes pass 1, a sold-out cell pass 2.
+- **Steps as numbered bills:** a process as three or four cells under the bar, each numeral wide and heavy, each cell flooded in one pass, alternating.
+- **A band of ink:** the black field with stock type and grain, holding one statement in wide capitals or a form with a pass-1 control.
+
+## Controls
+
+- The control pair: a pass-1 fill with `--color-accent-ink` type in Archivo Narrow 600 capitals, untracked (67 allows it under an uppercase display), beside a 2px inset ink outline (paper on the ink).
+- Pass 1 takes the primary and an open state; pass 2 the closed state (sold out). Links are ink with a 2px pass-1 underline that turns ink on hover; inputs square in the 2px inset ink outline.
+
+## Motion
+
+The press does not tween: hover pulls the primary through the other pass (teal to orange) at once, press darkens it by an ink step, and nothing reveals, floats or loops.
+
+## Voice
+
+The bill on the wall: who plays, which night, doors, the price, and whether it has sold out.
+
+## Do-nots
+
+- Never a third ink; the moss is printed by the overlap, never mixed into a fill, a control or a letter.
+- Never out of register or set apart: no echo, no offset copy, no recoloured word, no ghosted second head.
+- Never a photograph in colour, or one printed through both passes.
+- Never shapes drawn to show the overprint off; the passes print surfaces the page already has.
+- Never lowercase or narrow display; the heavy grotesk is shouted and wide.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@100..150,900&family=Archivo:wght@400;600&family=Archivo+Narrow:wght@600&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 900; font-stretch: var(--display-stretch); text-transform: uppercase; line-height: 1.02; }
+.btn { border: 0; border-radius: 0; padding: var(--space-md) var(--space-lg); font: 600 var(--text-sm) var(--font-outlier); text-transform: uppercase; }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); } .btn--primary:hover { background: var(--color-accent-2); }
+.btn--secondary { box-shadow: inset 0 0 0 2px var(--color-ink); color: var(--color-ink); }
+.pass-1 { background: var(--color-accent); color: var(--color-accent-ink); mix-blend-mode: var(--blend); }
+.pass-2 { background: var(--color-accent-2); color: var(--color-accent-2-ink); mix-blend-mode: var(--blend); }
+.pass-1 > img, .pass-2 > img { filter: grayscale(1) contrast(1.3); mix-blend-mode: var(--blend); }
+.figure { font: 900 var(--text-display)/1 var(--font-display); font-stretch: 150%; font-variant-numeric: tabular-nums; }
+.grain { position: relative; isolation: isolate; }
+.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--texture-opacity); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px; }
+::selection { background: color-mix(in oklab, var(--color-accent-2) 40%, transparent); }
+```

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

@@ -0,0 +1,100 @@
+---
+name: Paste-up
+slug: pasteup
+genre: playful
+paper: mid 73 70
+display: display-condensed League Gothic
+accent: chromatic-yellow 112
+posture: committed
+keywords: zine, fair, market, festival, print fair, book fair, exhibitors, punk, diy, collective, gig, poster, workshop, night market, flea, indie, community, launch, loud, photocopy, flyer
+material: kraft board, a fibre wash, near-black toner, League Gothic capitals over a Newsreader galley, white copy paper on paper lifts, hard ink offsets, one sheet of fluorescent yellow
+photo: mono con=45
+pictured: Bento Grid, Stage hero
+---
+
+# Paste-up
+
+A hand-made flyer: kraft board, near-black toner, League Gothic capitals at poster size over a Newsreader galley, white copy paper on real paper shadows, controls on hard ink offsets, one sheet of fluorescent yellow. Photographs come off the copier, black and white, the greys crushed. The paste-up lives in the paper, the tilt and the lift, never in props. It is not a grunge texture pack, a scrapbook of stickers and tape, or a clean modern poster.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(73% 0.068 70); --color-paper-2: oklch(66% 0.072 68); --color-paper-3: oklch(97% 0.008 90);
+  --color-ink: oklch(17% 0.01 60); --color-ink-2: oklch(24% 0.014 60); --color-muted: oklch(28% 0.026 62);
+  --color-rule: oklch(50% 0.055 68); --color-rule-2: oklch(84% 0.012 85);
+  --color-accent: oklch(93% 0.2 112); --color-accent-ink: oklch(17% 0.01 60); --color-focus: oklch(17% 0.01 60);
+  --font-display: "League Gothic", Impact, sans-serif; --font-body: "Newsreader", Georgia, serif;
+  --radius-card: 0; --radius-pill: 999px; --rule-hair: 1px;
+  --shadow-card: 0 1px 0 oklch(18% 0.01 60 / 0.2), 0 4px 10px oklch(18% 0.01 60 / 0.12);
+  --shadow-sheet: 0 14px 30px oklch(18% 0.01 60 / 0.26), 0 2px 4px oklch(18% 0.01 60 / 0.14);
+  --tracking-display: 0.01em; --display-weight: 400;
+}
+```
+
+The fluorescent is a paper, not an ink: it carries toner type and is never type itself. Three boards, stated in the stamp (`pasteup: kraft`): kraft, the tokens above, fibre at 0.5 multiply; black wall, ground `oklch(21% 0.012 60)`, toner `oklch(94% 0.012 90)`, muted `oklch(70% 0.015 80)`, fibre at 0.35 screen; sugar paper, ground `oklch(84% 0.035 150)`, toner `oklch(22% 0.02 160)`, muted `oklch(42% 0.03 160)`, fibre at 0.4 multiply.
+
+## Type
+
+- **Display:** League Gothic 400, uppercase, `--tracking-display`, never under 28px, so item titles (`h3`) set in Newsreader 500 instead. It is a poster face: a flyer head or a figure takes up to twice `--text-display` at line-height 0.92; a section head takes one step up from `--text-section` at 1.0.
+- **Body:** Newsreader 400 and 500 at 18px, line-height 1.5; italic is emphasis in running text only. On a sheet, text sits on copy white; on the board it takes `--color-ink`, never `--color-muted`, under 18px.
+- **Labels, captions, table heads, meta, controls:** Newsreader 500 a step smaller, sentence case, untracked. No mono.
+
+## Surfaces
+
+- Paper lifts, not boxes: a well is a sheet of copy paper (`--color-paper-3`) on `--shadow-card`, a raised sheet takes `--shadow-sheet`. Radius 0; hairlines in `--color-rule` part rows on the board, `--color-rule-2` on a sheet.
+- Tilt is the paste: a sheet or a photograph may sit 0.5° to 2° off square, three tilted surfaces a screen at most; inputs, tables and long reading stay square.
+- The fluorescent sheet fills the primary control and one sheet a screen, with toner type on it; never a band, a head or a word on the board.
+- Bands: `--color-paper-2` (a deeper kraft) or the toner with board-coloured type; two a page at most.
+- Photographs: zines, hands, copiers, staplers and fair tables, close and flat-lit, a crowd from behind at most; through the copier (the `photo:` line), hard black and white. Printed multiply on a copy sheet with a 10 to 16px margin and lifted, or straight onto the board so the kraft shows through the whites; never colour, never full-bleed. A caption sits on the sheet's foot.
+- Texture: the fibre wash (`texture.md` § 1, a low-frequency tan tint) on a kraft band at the board's opacity and blend, never on a sheet or under running text.
+
+## Range
+
+- **The facts as a wall of flyers:** the prompt's date, count, price and deadline each on its own sheet in League Gothic at poster size, mixed spans and heights, overlapping by a few pixels, two or three tilted, one on the fluorescent; no photograph among them.
+- **A typed sheet:** a timetable, a price list or the where-and-when as a ruled table on one copy sheet at a slight tilt, the left column in League Gothic, the rest in Newsreader.
+- **The toner band:** one line in League Gothic at `--text-display` or larger, board-coloured on toner, across ten columns.
+- **The form as a sheet:** fields on copy paper, square, on a hard offset, beside its head and the deadline set big on the board.
+
+## Controls
+
+- The control pair: a fluorescent primary with toner type on a hard `4px 4px 0` ink offset, beside a copy-paper secondary on the same offset, both Newsreader 500 at 15px.
+- Links are toner with a 1px underline, thicker on hover; inputs are copy paper, square, a 1px ink border; the focus ring is toner.
+
+## Motion
+
+Paper physics only: a button drops 1px into its offset on hover and 4px on press over `--dur-micro`. Nothing floats, nothing reveals.
+
+## Voice
+
+Flyer voice: the date, the door, the price, the table number.
+
+## Do-nots
+
+- Never paste-up props: no tape, stickers, stamps or scrawled notes.
+- Never a word set apart in a head: no cut-out word, no yellow word, no italic word.
+- Never a soft shadow on a control; controls sit on a hard ink offset.
+- Never a grunge overlay, a torn edge or a photograph in colour.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=League+Gothic&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2 { font-weight: 400; text-transform: uppercase; line-height: 1; } h1 { line-height: 0.92; }
+h3 { font: 500 var(--text-title)/1.2 var(--font-body); }
+.btn { border: 0; border-radius: 0; padding: var(--space-sm) var(--space-md); font: 500 15px/1.2 var(--font-body); color: var(--color-ink); box-shadow: 4px 4px 0 var(--color-ink); transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
+.btn:hover { translate: 1px 1px; box-shadow: 3px 3px 0 var(--color-ink); }
+.btn:active { translate: 4px 4px; box-shadow: none; }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
+.btn--secondary { background: var(--color-paper-3); }
+.sheet { background: var(--color-paper-3); box-shadow: var(--shadow-sheet); rotate: var(--r, 0deg); }
+.sheet--fluoro { background: var(--color-accent); color: var(--color-accent-ink); }
+.sheet img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.3); }
+.fibre { position: relative; isolation: isolate; }
+.fibre::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; mix-blend-mode: multiply; pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
+::selection { background: color-mix(in oklab, var(--color-accent) 70%, transparent); color: var(--color-ink); }
+```

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

@@ -0,0 +1,99 @@
+---
+name: Piste
+slug: piste
+genre: playful
+paper: light 98.5 260
+display: display-condensed Barlow Condensed
+accent: cool 265
+posture: committed
+keywords: ski, mountain, resort, snow, winter, outdoor, sport, trail, lift, race, alpine, tickets, season pass, conditions, weather, club, active, bold
+material: snow-white paper, cold near-black ink, Barlow Condensed 800 caps over Barlow, square edges on 2px ink rules, one cobalt for signal and field
+photo: natural con=10 vib=15
+pictured: Morning Report, Poster hero
+---
+
+# Piste
+
+A mountain morning in print: snow-white paper, cold near-black ink, Barlow Condensed 800 in capitals for every head and figure, square edges on 2px ink rules, and one cobalt doing all the colour work, from the primary control to a full field. Photographs bring the mountain in, crisp and in full colour, cut square, and the paper is the snow they open onto. It reads bold because the type is loud and the colour one cold blue; it is not a lens-flare resort brochure, a sporty gradient or a rounded app.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(98.5% 0.005 260); --color-paper-2: oklch(95.5% 0.008 260); --color-paper-3: oklch(91% 0.01 260);
+  --color-ink: oklch(16% 0.012 260); --color-ink-2: oklch(30% 0.014 260); --color-muted: oklch(48% 0.016 260);
+  --color-rule: oklch(88% 0.01 260);
+  --color-accent: oklch(52% 0.25 265); --color-accent-deep: oklch(40% 0.2 266); --color-accent-ink: oklch(98.5% 0.004 260); --color-focus: oklch(58% 0.22 28);
+  --color-field: var(--color-accent);
+  --font-display: "Barlow Condensed", ui-sans-serif, sans-serif; --font-body: "Barlow", ui-sans-serif, sans-serif; --font-outlier: var(--font-display);
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: none;
+  --tracking-display: -0.005em; --display-weight: 800;
+}
+```
+
+Committed: cobalt is `--color-field` and may fill a band; on controls and links it is the signal, `--color-accent-deep` its hover and pressed step. Three grounds, stated in the stamp (`piste: snow`): `snow` (the block above), `blue-run` (the page is the cobalt field under white ink; white takes the controls and focus) and `night-piste` (`oklch(14% 0.01 260)` under white ink, 2px white rules, cobalt at 56%, focus red at 60%).
+
+## Type
+
+- **Display:** Barlow Condensed 800, uppercase, roman, `--tracking-display`; line-height 1.0 on any head that can wrap, 0.9 only on a single line that cannot. Condensed, so it sets one step larger than the shared scale: a section head at `--text-display-s` and up, the hero head up to 8rem.
+- **Figures:** the display face at 800, tabular, from `--text-display` to twice it; a figure on paper takes cobalt, a figure on the field takes paper. The label beneath is Barlow 500.
+- **Body:** Barlow 400 and 500, 17 to 19px, line-height 1.5; it is read outdoors, so never lighter.
+- **Buttons:** Barlow Condensed 800 in capitals at 18px, untracked (legal under 67 on an uppercase display). Nav links, table heads, captions: Barlow 500 a step smaller, sentence case.
+
+## Surfaces
+
+- Rules: `--rule-bar` ink above a list, a figure row or a table's head, and under a floating bar; `--rule-hair` in `--color-rule` between rows. Ruled, never boxed.
+- Radius 0 on everything: wells, photographs, inputs, controls and tags are cut square. Depth is flat: a raised surface is a paper step or the cobalt field, never a shadow.
+- Bands: the cobalt field with `--color-accent-ink` type, or `--color-paper-2` under a form or a dense table; two a page at most.
+- Photographs: the mountain in daylight and colour: a group on a slope seen from behind, a line of children after an instructor, skis standing in fresh snow, a lift against the sky; crisp and high-key, never a dusk grade or a flare. Cut square with an inset ink hairline at 8%. Ink sits straight on bright snow; paper sits on sky only over a cold ink scrim.
+- No texture, no gradient but a scrim, no blur.
+
+## Range
+
+- **A figure row as a lift board:** the prompt's numbers in the condensed face at up to twice `--text-display`, cobalt on snow, under a `--rule-bar` ink rule and parted by hairlines, each with one Barlow line.
+- **Statement on the field:** one short line in condensed capitals at display size and beyond, paper on cobalt edge to edge, the line the morning report would shout.
+- **Steps or a timetable:** an `<ol>` with each numeral in the condensed face at `--text-display` in cobalt over a 2px ink rule, a capital title and one line; or a ruled table of times and groups with the head rule in ink.
+- **Forms as a ticket desk:** square 52px inputs and ink steppers on paper-2, the cobalt primary the only colour on the band.
+
+## Controls
+
+- The pair: a cobalt fill with `--color-accent-ink` text beside a 2px inset ink outline, both square, in condensed capitals; on a scrim or the field the outline turns paper. Hover takes `--color-accent-deep`; active takes ink.
+- Links are ink and underlined, cobalt on hover; inputs square, 52px, a 1px ink border; a stepper is two square ink-bordered buttons around a tabular count.
+- Cobalt sits on the primary, a link's hover, a field band and figures; red is the focus ring and nothing else.
+
+## Motion
+
+Still. A control steps one shade on hover over `--dur-micro` on `--ease-out`; nothing draws in, loops or follows the scroll.
+
+## Voice
+
+The morning report: the hour, the group, the week booked, called across the snow. Never a slogan about freedom or powder.
+
+## Do-nots
+
+- Never lowercase display or a light condensed; Barlow Condensed at 800.
+- Never a rounded corner, a pill or a soft card.
+- Never a second accent hue, never cobalt on running text or as a card fill on snow paper.
+- Never a sky gradient, a sunset grade, or a drawn mountain, snowflake or piste map.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&family=Barlow:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 800; text-transform: uppercase; line-height: 1; }
+h2 { font-size: var(--text-display-s); }
+.fig { font: 800 var(--text-display)/0.9 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
+.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
+.btn--primary:hover { background: var(--color-accent-deep); }
+.btn--secondary { background: none; box-shadow: inset 0 0 0 var(--rule-bar) var(--color-ink); color: var(--color-ink); }
+.band--field { background: var(--color-field); color: var(--color-accent-ink); }
+.photo { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
+th { border-bottom: var(--rule-bar) solid var(--color-ink); font: 500 var(--text-sm) var(--font-body); text-align: left; }
+td { border-bottom: var(--rule-hair) solid var(--color-rule); }
+::selection { background: color-mix(in oklab, var(--color-accent) 30%, transparent); }
+```

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

@@ -0,0 +1,106 @@
+---
+name: Ribbon
+slug: ribbon
+genre: atmospheric
+paper: light 98.5 85
+display: grotesk-sans Instrument Sans
+accent: chromatic-teal 190
+posture: committed
+keywords: sleep, sound, soundscape, audio, night, rest, calm, wellness, meditation, white noise, ambient, listen, headphones, wind down, bedtime, quiet, breathing, app, subscription
+material: warm off-white or blue-black night, Instrument Sans at a quiet weight over Figtree, machined parts lit from above, the hour drawn as light on a generated canvas, one signal
+photo: muted sepia=14
+pictured: Night Notes, Stage hero, in the two-in-the-morning colourway
+---
+
+# Ribbon
+
+The hour before sleep, set quietly: Instrument Sans at 400, upright and tightly set, for every head, Figtree in a soft grey for reading, hairline rules instead of boxes, and the night itself drawn as slow light behind a machined instrument that really sets the levels. The calm comes from light type, slow light and well-made parts. It is not a glossy wellness app and not a sky of stars and moons.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(98.2% 0.008 82); --color-paper-2: oklch(95.8% 0.011 82); --color-paper-3: oklch(92.3% 0.014 82);
+  --color-ink: oklch(18% 0.006 80); --color-ink-2: oklch(30% 0.008 80); --color-muted: oklch(47% 0.012 80);
+  --color-rule: oklch(89.5% 0.011 82); --color-rule-2: oklch(93.5% 0.009 82);
+  --color-accent: oklch(44% 0.075 190); --color-accent-soft: oklch(92% 0.028 190); --color-accent-ink: oklch(98% 0.006 85); --color-focus: oklch(52% 0.09 190);
+  --color-band: oklch(26% 0.045 195); --color-band-ink: oklch(94% 0.012 85);
+  --color-slot: oklch(69% 0.07 80);
+  --metal-hi: oklch(97% 0.006 85); --metal-lo: oklch(85% 0.01 85);
+  --edge-light: inset 0 1px 0 oklch(100% 0 0 / 0.5);
+  --shadow-part: 0 1px 0 oklch(20% 0.01 80 / 0.25), 0 10px 18px -6px oklch(20% 0.01 80 / 0.3);
+  --shadow-panel: 0 1px 0 oklch(20% 0.01 80 / 0.2), 0 24px 48px -16px oklch(20% 0.02 80 / 0.35);
+  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
+  --radius-card: 20px; --radius-part: 6px; --radius-pill: 999px; --rule-hair: 1px;
+  --shadow-card: none;
+  --tracking-display: -0.035em; --display-weight: 400;
+}
+```
+
+One dial, the colourway, stated in the stamp (`ribbon: two-in-the-morning`). The accent is the one lit thing; `--color-slot` is the photo wash; `--color-accent-soft` is a fader's track or a pressed pill, never type.
+
+| Colourway | Paper | Ink | Accent, metal |
+| --- | --- | --- | --- |
+| `dawn` (default) | `oklch(98.2% 0.008 82)` | `oklch(18% 0.006 80)` | teal `oklch(44% 0.075 190)`; aluminium as above, the night drawn on `--color-band` |
+| `two-in-the-morning` | blue-black `oklch(13.2% 0.022 258)`, paper-2 16.4%, rule 27% | `oklch(93.5% 0.012 85)`, muted `oklch(72% 0.02 255)` | a lit window, amber `oklch(82% 0.095 68)` with `oklch(20% 0.03 62)` text; metal `oklch(44% 0.012 255)` to `oklch(25% 0.014 255)`, shadows from black |
+| `moss` | sage `oklch(89% 0.034 140)` | `oklch(22% 0.03 150)` | ochre `oklch(48% 0.115 70)`; wash deep teal `oklch(46% 0.07 195)` |
+
+## Type
+
+- **Display:** Instrument Sans 400, upright, `--tracking-display`, line-height 1.04, sentence case, one colour; 500 for small titles (a panel's name, the wordmark). Big figures and levels take the display face too, lining and tabular.
+- **Body:** Figtree 400 at 17px, line-height 1.6, in `--color-muted`; Figtree 500 for a part's name and value.
+- **Labels:** Figtree 500 a step smaller, sentence case, untracked, `--color-muted`, tabular figures on values.
+
+## Surfaces
+
+- The hero ground is the hour drawn as light on one generated canvas (in dawn, on `--color-band`): fine slow streaks for rain, long soft lines for wind, a far row of lit points on a low horizon, whatever the prompt's sounds are, over a CSS sky-to-land gradient. Never a photograph behind the head, never a star or a moon.
+- Machined parts lit from above: panels in a top-to-bottom gradient with `--edge-light` and `--shadow-panel`; a recessed bed (inset shadow) holding vertical faders with knurled caps (`--metal-hi` to `--metal-lo`, fine striped grip, a lit accent index line), a sunk slot whose glow fills to the level, tick scales either side; a draggable curve for anything timed, with a metal handle.
+- Texture is generated: a 160px canvas noise tile set as `--grain` by script, `soft-light` at 0.35 to 0.55, on the night and in panels only.
+- Rules, not boxes, in reading sections: 1px `--color-rule` hairlines. Radius: controls pill, parts `--radius-part`, panels `--radius-card`.
+- Photographs: the night held still and close (a window, a lamp, a far train); low light, no person. `--radius-card`, no border.
+
+## Range
+
+- **The instrument as the hero:** the product's controls built as a machined panel that really works, beside a one-line head, over the drawn night.
+- **Rows as a list of levels:** each part's name in the display face on hairlines, its line in Figtree, its level as a display figure; the same panel in the app's frame beside it, synced.
+- **Time as a drawn curve:** what changes over the night drawn as lines falling together across the width, columns marking the moments, levels in tabular Figtree beneath.
+- **Price under the horizon:** the figure in the display face at 8 to 10rem over the same land and lit row, one Figtree line, the lit pill.
+
+## Controls
+
+- Machined pills, 52px: a top-to-bottom gradient with `--edge-light` and `--shadow-part`, a 1px border; the primary is the accent, lit from inside with an inset highlight. Active presses 1px down. A switch is a pill track with a metal knob that lights the accent when on.
+- Faders and curves are real inputs (`role="slider"`, keyboard steps). Sound plays only after a press of Listen, and Stop or Esc ends it.
+- The accent sits on the primary, the focus ring, fader glows, the index lines and one figure.
+
+## Motion
+
+Slow and breathing, `--dur-long` on `--ease-in-out`. One ambient canvas and one CSS loop at most, both paused off screen; levels ease, never jump. Reduced motion and no script: a still night, every part at its sample level.
+
+## Voice
+
+Calm and specific: the hour, the sound, how loud. Never a promise of perfect sleep.
+
+## Do-nots
+
+- Never an italic or a heavy head; the display stays upright at 400 and 500.
+- Never a starfield, a moon, a navy-to-violet gradient or a stock sleeper.
+- Never a plastic or flat control on the instrument; parts are machined, lit from above, one light.
+- Never a drawn waveform or equaliser; levels live on faders and lines.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500&family=Figtree:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 400; font-synthesis: none; line-height: 1.04; }
+.btn { min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: linear-gradient(var(--color-paper-2), var(--color-paper-3)); box-shadow: var(--edge-light), var(--shadow-part); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); }
+.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
+.btn:active { transform: translateY(1px); }
+.panel { border-radius: var(--radius-card); background: linear-gradient(var(--color-paper-2), var(--color-paper-3)); box-shadow: var(--edge-light), var(--shadow-panel); }
+.cap { border-radius: var(--radius-part); background: linear-gradient(var(--metal-hi), var(--metal-lo)); box-shadow: var(--edge-light), var(--shadow-part); }
+.grain { background-image: var(--grain); background-size: 160px; mix-blend-mode: soft-light; opacity: 0.4; }
+a:hover { text-decoration-color: var(--color-accent); }
+```

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

@@ -0,0 +1,96 @@
+---
+name: Rim
+slug: rim
+genre: modern-minimal
+paper: dark 9 75
+display: grotesk-sans Switzer
+accent: warm 45
+posture: committed
+keywords: space, satellite, earth observation, orbit, imagery, ground station, telemetry, hardware, schedule, utc, infrastructure, mission, sensor, monitoring, instrument, night, dark, measured
+material: warm black paper, warm off-white ink, Switzer 500 with Geist Mono for every measurement, square hairline surfaces, the earth photographed straight down, an orange signal and a sky-blue second
+photo: natural sat=-20 con=10
+pictured: Map / Diagram, Ledge hero
+---
+
+# Rim
+
+An instrument at night: warm black paper, warm off-white ink, Switzer at a medium weight for every head, Geist Mono for every number that measures something, square surfaces parted by hairlines, an orange signal and a sky-blue second, and the earth shown the way an instrument sees it, from straight above. It reads as exact because every edge is hard and every time carries its zone. It is not a glowing sci-fi page of starfields and halos, and not a neon dashboard.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(9% 0.008 75); --color-paper-2: oklch(12.5% 0.009 75); --color-paper-3: oklch(6.5% 0.007 75);
+  --color-ink: oklch(94% 0.010 80); --color-ink-2: oklch(84% 0.011 80); --color-muted: oklch(68% 0.012 80); --color-muted-2: oklch(50% 0.010 80);
+  --color-rule: oklch(25% 0.010 78); --color-rule-2: oklch(16% 0.009 78);
+  --color-accent: oklch(72% 0.17 45); --color-accent-ink: oklch(10% 0.02 45); --color-accent-2: oklch(74% 0.12 250); --color-focus: oklch(78% 0.15 45);
+  --font-display: "Switzer", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
+  --font-outlier: "Geist Mono", ui-monospace, monospace;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --shadow-card: none;
+  --tracking-display: -0.04em; --display-weight: 500;
+}
+```
+
+Two colourways, both dark, stated in the stamp: `rim: night` (the block above) or `rim: station` (navy `oklch(19% 0.055 262)`, rules `oklch(32% 0.060 262)`, the signals swapped to ice `oklch(84% 0.10 200)` and amber `oklch(76% 0.14 55)`).
+
+## Type
+
+- **Display:** Switzer 500, `--tracking-display` on the hero head and -0.03em on section heads, line-height 1.02, sentence case, roman. Medium, never bold; one colour per head.
+- **Body:** Switzer 400 at 16 to 17px, line-height 1.55, in `--color-ink-2`; labels, captions and table heads are 500 a step smaller in `--color-muted`, sentence case, untracked, never mono.
+- **Measurements (mono as material):** Geist Mono 400, tabular, for every time, coordinate, area, price and duration. A time always carries its zone, UTC by default. A measurement that is the point sets at `--text-display-s` to `--text-display` at -0.03em, its unit or zone at half the size in `--color-muted`. Mono never sets a head, a label or a paragraph.
+
+## Surfaces
+
+- Hairlines do the dividing: 1px `--color-rule` above every section head, around wells and under a table's head; rows on `--color-rule-2`.
+- Zero radius on everything; nothing on the page is round. Depth by lightness only: `--color-paper-2` lifts a well, `--color-paper-3` sinks one. No shadow, glass, blur or halo.
+- A well or a photograph may drop its border for two 12px corner ticks, 1px L shapes in `--color-muted` at opposite corners, set just outside the frame.
+- Bands: `--color-paper-2` or `--color-paper-3`, edged by hairlines; two a page at most, never a light band.
+- Photographs: the earth straight down at the scale a capture delivers: a field, a coastline, roofs, a river mouth, sharp edge to edge, with no horizon, no sky and no planet. Square, a 1px inset ring of ink at 8%. Its measurements (the site, the pass, the delivery) ride on a strip of `--color-paper` at 78% along its foot, in Geist Mono with the zone.
+
+## Range
+
+- **Measurements as figures:** two to four real quantities in Geist Mono at display size across the twelve columns, parted by vertical hairlines, the unit half size in muted: a range, a window, a price.
+- **A diagram of real time:** a horizontal UTC axis in hairlines with ticks, the window as a 10px sky-blue band and each event a 1px pin in its signal with its time in mono beside it; a chart of the system, never decoration.
+- **The product built:** the order or the queue on a `--color-paper-2` well with corner ticks, fields in mono, the chosen row on `--color-paper-3` with an orange square.
+- **Ruled rows and a form-first close:** hairline rows with a Switzer title on the left and the line on the right; a form on paper-2 whose values type in mono.
+
+## Controls
+
+- The pair: a square orange-filled primary with `--color-accent-ink` text beside a square secondary outlined in 1px `--color-rule`, both Switzer 500.
+- Links are ink, underlined on hover; inputs square on `--color-paper` with a 1px `--color-muted` border, a value that measures typed in Geist Mono.
+- Orange marks the action and the current state, sky-blue the second state or a window; nothing else is coloured.
+
+## Motion
+
+Steady and exact: a state changes over `--dur-short` on `--ease-out`; a live time ticks once a minute. Nothing pulses, loops or reveals.
+
+## Voice
+
+Measured and exact: the site, the pass, the time in UTC, the area in square kilometres. No wonder, no frontier.
+
+## Do-nots
+
+- Never anything round: no pill, no avatar circle, no rounded button or frame.
+- Never a bare time; `09:30` without a zone is the theme lying.
+- Never bold display; Switzer 500 is the ceiling and the black does the weight.
+- Never the planet from space, a starfield, a glow or an orbit traced round a globe.
+
+## Build hint
+
+```html
+<link href="https://api.fontshare.com/v2/css?f[]=switzer@400,500&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); line-height: 1.02; }
+h2 { letter-spacing: -0.03em; }
+.measure { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
+.btn { border-radius: 0; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: none; color: var(--color-ink); font-weight: 500; }
+.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
+.well { position: relative; background: var(--color-paper-2); }
+.photo { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
+.ticks::before, .ticks::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--color-muted); pointer-events: none; z-index: var(--z-raised); }
+.ticks::before { top: calc(-1 * var(--space-xs)); left: calc(-1 * var(--space-xs)); border-width: 1px 0 0 1px; }
+.ticks::after { right: calc(-1 * var(--space-xs)); bottom: calc(-1 * var(--space-xs)); border-width: 0 1px 1px 0; }
+::selection { background: color-mix(in oklab, var(--color-accent) 35%, transparent); color: var(--color-ink); }
+```