.work is a two-column grid holding three items: the counter, the name, and the
description. With no placement the description auto-flowed into row 2 column 1,
so every project blurb rendered 96px wide and wrapped to seven lines. Pinning it
to column 2 puts it under the name where it belongs.
The row gap was a second bug hiding behind the first. .work__name already
declares an 8px bottom margin for exactly this pair, but the grid's 32px gap
stacked on top of it, so the two spacing systems fought and the name sat 40px
above its own description. The gap is now column-only, in both the base rule and
the narrow-viewport override, and the margin the author wrote is the one that
governs.
Checked at 1280px and 375px: name and description share a left edge, 8px apart,
no horizontal overflow. Still 0 FAIL.
Every build now derives its own visual world. Silence used to route to the
catalog; it routes to the ritual instead, and the 24 themes become a fast path
you ask for by name, by --fast, by an existing design.md, or by component scope.
custom-theme.md is promoted and renamed to direction.md, trimmed from 336 lines
to 258, and the draw runs on every build rather than on a branch that almost
never fired.
Nine themes prescribed a display face that is a training-data default, one of
them (Source Serif, on Field) already on our own ban list. All nine are re-faced:
Specimen to Bodoni Moda, Studio to Erode, Atelier to Sentient, Newsprint to Zilla
Slab over Spectral, Sport to Saira Condensed, Editorial to Bricolage Grotesque
over EB Garamond, Cobalt to Familjen Grotesk, Hum to Chillax, Field to Literata.
Atelier moving off a Didone also settles the Specimen collision the rejection
table had been arbitrating by hand. The catalog keeps the saturated faces but
now says plainly that they are the first answer, and treats them the way R.2
treats any spent default.
Repairs the flip exposed. Gate 57 tested for the presence of a catalog name, so
a derived build stamped theme: custom and sailed past the exact failure the gate
exists to catch; it now tests the absence of studied-DNA. macrostructures.md
still ordered you to pick a shape before writing code. Colour posture was scoped
to custom builds only. Two gate exceptions in the playful genre were scoped to a
theme name that a derived build cannot claim, and are now scoped to the declared
property.
The tier map had a worse bug than any of those. Thirteen gates carry a Floor
clause and a Reflex clause under one number, and the linter held one tier per
number, so six Floor clauses were quietly waivable and seven Reflex clauses were
quietly unwaivable. tierOf() now resolves the exact clause first, and gates 7,
24, 38a, 47 and 55 emit the clause they actually found. Gate 47 was also
reporting WARN for a Floor violation that reads "fail, always".
That surfaced real defects in the corpus: seven italic emphasis words inside
roman headlines, the top AI tell, sitting in our own showcase pages. They are
now roman accent spans. Two improvised absolutes in the contact sheet use the
token that was already declared beside them. The study verb's output page had
six hand-written numerals above headings, missed by the eyebrow sweep; the list
is a real ol with a counter now.
Corpus: 56 findings down to 41, zero gate 54, Floor enforced honestly.
Read-set cost of the flip: +303 lines a run (+19.3%), down from +400 (+25.4%).
That is short of the +200 target and I am not closing the gap by gutting the
palette construction or the font guidance, which is where the remaining weight
sits and what makes a derived run worth taking.
Four things the last pass left open.
Reflex findings no longer masquerade as Floor failures. They report at a new
REFLEX grade which still blocks, so nothing drifts silently, but "0 FAIL" is now
a true statement about the floor even while a build owes an argument above it.
Across every committed page that distinction turns 230 reported failures into 56
real Floor findings and 174 arguable ones, which is the number that was hiding.
The waiver cap is gone. Three-per-artifact was the restraint the tier existed to
remove: a colour-field poster that wants a black stage, achromatic neutrals, a
long measure and one face doing everything is right, and it was being blocked for
being expressive. Guards, reason quality and the log are what keep waivers honest.
Past three the build gets a NOTE saying what it now is, a house style rather than
a set of exceptions, and pointing at design.md.
The Floor has two admission criteria instead of one embarrassed exception. Door 1
is "no admired page breaks this on purpose". Door 2 is a named house rule where
admired pages do break it but a language model reaches for it unprompted on every
section. Gate 54 is the only member, listed in a table that any future addition
has to join explicitly. The apology is gone; the reasoning is in the file.
Finish findings gained a record form. `answered <check> · <reason>` parses, so a
build that reasons its way past gate 38 leaves something the next run can read
instead of prose in a comment.
Also: the skill stops mandating em and en dashes in page copy, which had it
arguing with its own house rule. The Picks block and the Step 5 preview merge into
one recital, since the same decisions were being serialised four times. The font
catalog and the per-tone voice samples become skip-unless-needed, roughly 200
lines a build. Two waiver bugs found by a cold build are fixed: "intentional
design choice" was passing the boilerplate test, and a malformed two-field waiver
was being ignored in silence.
The 18 hero captures and 14 gallery thumbnails are regenerated against the live
pages, so the README and the homepage stop advertising eyebrows the skill bans.
Hallmark was telling good models what to build. This splits it into a floor
that binds and a library that offers, and bans the eyebrow outright.
The eyebrow. Gate 54 goes from geometry to existence: short inert type before a
heading that announces it is banned in every arrangement, and no brief earns it
back. The detector inverts from CSS-first to DOM-first, so it now sees flex and
block stacks, heads declared inside a media query, class-less headings, and the
word "overline". Small type before a heading survives only when it carries a
fact, a destination, or an identifier, which keeps captions, field labels,
datelines, unit labels and linked chips legal. references/section-entry.md is the
replacement: twelve ways into a section, ten of them pointing at material the
skill already had.
Themes stay themes. A written contract in theme-axes.md says a theme carries
material and never a page plan, and all 24 are trimmed to it: 4,070 lines down to
2,861. Lumen loses a mandatory hero apparatus and a fixed section sequence; hum
loses 45 lines of global layout rules filed under a theme. Fake brands, invented
people and shippable taglines come out. Genre files stop mandating nav and footer
archetypes they disagreed with the themes about.
Tiers. All 58 gates gain one: 34 carry a Floor clause nothing ships through, 18
are Reflex gates a build with an argument can waive on the record, 6 never block.
Fifteen gates split so a real floor stops dragging a taste threshold behind it.
Gates 42 and 43 stop ordering a rotation through the catalog and instead ask that
the default be named rather than defaulted into. A waiver declares itself in the
stamp with guard evidence the linter re-derives; three per artifact, one per
gate, Floor never waivable, and an over-cap waiver lets its gate fire so waiving
twelve is worse than waiving none.
The catalogs stop being a mandatory pick. Step 2 asks for a designed page shape
stated in plain words; the named shapes are there when a starting point helps.
Anti-repetition moves from "rotate the codes" to "differ from your last three and
say how", which constrains sameness without constraining invention.
Contradictions. Display line-height had three ranges and now has one owner. The
outlier face was capped at two slots by one line and uncapped by the next. Gate
39 hard-coded 44px against finish.md's 32-40px allowance. Gate 14 banned padding
animation that floating-nav.md prescribes. Gate 57's theme list had drifted to 20
of 24. F3 and gate 51 fought over overflow-wrap; break-word settles it.
Evidence. 201 eyebrows removed across 38 example pages and 32 across the archived
test builds, each replaced with a real opening rather than deleted; aggregate
failures fell while doing it. The marketing site drops its own section labels and
moves hero labels below the lede. A cold build through the revised skill lands
0 FAIL / 0 WARN, names its own structure instead of picking a code, and argues
with a Reflex gate rather than waiving it.
Unify every version string: skill frontmatter and preview block, package.json,
the four preview-examples samples, the eval direction note, the ROADMAP opener,
and the site badges/captions (which were still stamped v1.1/v1.3). The PR is
retitled to match and sits as a draft on the renamed v1.2 branch.
Carnival: fixed the three palette drops whose second accent failed contrast,
tightened the display tracking, and added section-rhythm, alignment, and
drop-selection guidance so the theme lands well-aligned and readable by
default. Lightened and tightened the Carnival headers on the landing.
Anti-slop guards (skill references): heading-to-body alignment coherence as a
principle rather than a rigid rule; centered overlays and command palettes must
center via their container; and a hero headline is never only a number, a lead
figure always pairs with words.
Worked Examples: added three generated pages to the landing carousel, a
small-batch honey farm, a risograph print fair, and an experimental type
studio, after fixing their nav centering and section alignment.
Media: removed the Soroe example card along with the unused scroll-videos,
poster stills, and orphaned thumbnails it left behind, and bumped the asset
cache-bust so the restyled CSS reloads.
Replace the carousel's inconsistent scroll-videos with one CSS image hover-scroll
across all twelve cards. Each thumb is a tall full-page screenshot that pans top
to bottom on hover, with a per-card duration scaled to page height so they all
move at the same brisk, readable pace; captured Retina-sharp at 1400px wide.
Touch and reduced-motion get a static crop. Drop the Slow Pour card.
Bump the version to v1.1 on the landing (banner + footer), package.json, SKILL.md,
and the preview-block examples.
Give the five image cards (the four new themes and the Mend Assembly) a
hover-scroll: each thumb is now a tall full-page screenshot, and CSS pans
object-position top to bottom on hover so the page scrolls itself. No video,
no JS, GPU-light; touch and reduced-motion get a static top crop. Cache-bust
the regenerated thumbs.
Trim the README Custom section to the single Mend Assembly feature (matching
the landing) and de-dash the whole README. Fix three pre-existing dead doc
links in the component cookbook (floating-nav, custom-craft, hero-enrichment
were linked without the ../ that reaches the references root).
Swap the Hum carousel card from Sprout (hum-02) to Bubble (hum-07), the
guided sourdough Narrative Workflow build. Keep only one custom example in
the showcase, the Mend Assembly repair-cafe poster; the other bespoke pages
stay in the repo but off the landing. Untrack hum-02 so only featured builds
ship, refresh the scroll-demos manifest, and bump the cache version.
Adds Carnival, Lumen, Hum, and Cobalt to the catalogue (now 20 themes),
each with its own tokens block, hero archetype, landing copy, and spec doc.
Introduces Custom as a first-class route: when a brief carries real
creative intent, Hallmark designs the whole page from first principles —
palette, type, and structure — rather than recolouring a catalogue theme.
Ships five worked custom examples and a README section.
Rewrites the per-theme landing copy and reconciles every catalogue count
across the site and the skill (20 themes · 21 macrostructures · 50
component archetypes · 70 slop-test gates). Drops the last competitor
references from the CSS comments, fixes the genre rosters, and ignores
the local example explorations so only the featured builds ship.
The skills CLI copies everything under the directory containing SKILL.md.
With SKILL.md at the repo root, installs were pulling in docs/, site/,
package.json, README, ROADMAP, vercel.json, LICENSE. Moving the skill
into skills/hallmark/ scopes the install to just SKILL.md + references/.
The CLI's priority search hits skills/ first, so `npx skills add
nutlope/hallmark` is unchanged. Updated README install paths,
package.json (entry/references/files), and the internal links that
crossed the new boundary.
Remove the "refuses competitor pages" policy from the study verb.
Touches the verb summary in README and SKILL.md, both refusal tables
in study.md, the URL refuse list, the schema's refusal enum, the
emission-attestation parenthetical, and the worked examples plus the
test fixtures.
Paid-template refusal and the signature-work soft-refusal stay —
those carry real copyright weight.
The published install command in the README — npx skills add nutlope/hallmark — was failing for users because the skills CLI looks for SKILL.md at the repo root, not at skill/SKILL.md where Hallmark kept it. The clone succeeded but the CLI reported "No skills found." Manual cp was the only working install path.
Flattened the layout:
- skill/SKILL.md → SKILL.md
- skill/references/ → references/
- (skill/ directory removed; was empty after moves)
git mv preserved rename history for all 76+ files (SKILL.md + 28 reference files + 21 macrostructures + 46 components + 7 verb/genre subfolders).
Updated every cross-reference (36 occurrences across 9 files):
- README.md — 4 links (SKILL.md + references/ + the install snippet still reads the same)
- ROADMAP.md — 4 links to reference files
- package.json — "files" field + "skill" entry/references paths
- site/js/main.js — 3 source comments
- references/design-md.md — one broken link (was pointing skill/references/export-formats.md from inside references/ — now just export-formats.md as a sibling)
- site/_tests/verbs/study/notes.md, diagnosis.md and verbs/audit/audit-report.md, custom/README.md — test-artifact relative paths shortened by one segment (e.g. ../../../skill/SKILL.md → ../../../SKILL.md)
No skill content changes. After this lands, 'npx skills add nutlope/hallmark' should clone + install correctly without any manual cp fallback.
The before/after demo in the comparison gallery (Section 06) was
broken because the on-disk files had drifted from the HTML refs:
- HTML: <img src="_tests/_thumbs/before-quiet-hour.png" />
- Disk: before-quite-hours.jpeg (JPEG, typo "quite", plural "hours")
- HTML: <img src="_tests/_thumbs/after-quiet-hour.png" />
- Disk: after-quite-hour.png (typo "quite")
Re-encoded the before file from JPEG to PNG via sips and renamed
both to the correct singular "quiet-hour" spelling that the HTML
references. The Quiet Hour DevForge before/after now renders.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The README and SKILL.md had drifted out of sync with the current
slop-test.md (now 65 gates) and the verb state (refine was removed;
audit · redesign · study + default = four verbs total).
- README: revert lingering "refine" references; verb count 5 → 4
- README: gate count 55/60 → 65 across body + side notes
- README: section title "Eight pages, eight different shapes" →
"Different briefs, different shapes" — the old phrasing implied
the skill could only produce these eight specific sites
- README: replace eight <video src=...mp4> tags with <img> stills
(first-frame extracts via ffmpeg from the existing .mp4 files;
no autoplay overhead, faster page render on the readme view)
- SKILL.md: drop "refine" from the frontmatter trigger description;
sync "55-gate" → "65-gate" across routing file + stamp examples
No version bump — pure documentation drift catching up to the
current rule-set state.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Orphan thumbs (referenced nowhere): 8 example PNGs, 5 hero JPGs,
4 verb-* PNGs, audit-slop.png, 2.2 MB crypto-example.mp4.
Dead pages: refine verb test (verb removed earlier), v0 example
specimens (_example-bakery, _example-cmdk), docs/img theme PNGs,
skill/_tests/nav-footer-variety. Updated verbs/README and ROADMAP
to drop the now-broken references.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Examples-rail order: SaaS → wayfare → slow-pour → BananaStudio (moved
from 1st to 4th) → tracejam → anya-loop video (was static) → Najm-loop
(was Foundry static) → Soroe-loop (was Cohort static). Five videos +
three statics now. Five MP4s re-encoded to web (CRF 23–27, +faststart,
no audio).
· Audit demo: swapped the gradient slop placeholder for the new
audit-example.png. Caption removed (no longer reads as "actual slop").
· Redesign uractivation video: dropped data-hover-play so it autoplays
on every device (was hover-only on desktop).
· Footer: "Powered by" → "Made by" (re: the Together AI credit). Base
credit line now left-aligned across all viewports.
· Section labels: forced single-column section heads in every theme via
`.section__head, [data-theme] .section__head { grid-template-columns:
1fr !important }`. Linen + Almanac left-gutter overrides removed —
every section reads label-above-title now.
· Section pulls: deleted every `<a class="section__pull">` ("See the
verbs", "Read the rules", etc.) plus 67 lines of associated CSS. The
banner already provides Install + GitHub; no per-section nav needed.
· Per-theme demo captions ("Lap 1", "Plate I", "Frame 01", etc.)
removed — they appeared in the wrong section ("Lap 1" showed under
Study) and added clutter.
· Display max font sizes tightened across every theme token. Largest
caps were 13rem (Manifesto Anton) → 9rem; multiple 7.5–8rem caps
pulled down to 6.25–6.5rem. Skill-side typography.md now emits
`clamp(2.75rem, 5vw + 1rem, 5.25rem)` as the default --text-display.
· New section: Before / After Hallmark, after Foundations.
Same prompt ("/hallmark build a landing page for The Quiet Hour — a
weekly natural-wine dispatch from Lisbon") run two ways:
- Sonnet 4.6 alone → gradient AI slop (before-quiet-hour.png)
- Sonnet 4.6 + Hallmark → editorial dispatch (after-quiet-hour.png)
Hairline-framed panels with mono prompt at top, italic-serif captions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Examples cards: dropped 01–08 numbers, dropped Banana Studio / Modern SaaS /
etc. titles + subheaders, dropped the 5-row hover trail popover. Each card
now shows a single mono line: "$ /hallmark build <prompt>". Removed the
"Open any card →" hint from the section intro.
· Replaced cards 03 (Maple) + 04 (Meridian) with the new wayfare-loop.mp4
+ slow-pour-loop.mp4 videos. Re-encoded all four MP4s for web (CRF 23,
+faststart, no audio). wayfare downscaled from 4K to 1080p (9.3 MB → 2 MB).
· Audit demo: swapped the inline CSS gradient slop card for a static
audit-slop.png (1024×640 capture of the same card). Cleaner DOM, same
visual. Caption "Specimen — actual AI slop, untouched" stays.
· Redesign demo: before = example-redesign-uractivation.png, after =
uractivation-after-loop.mp4 (looped video). Diptych CSS extended to
style <video> identically to <img>.
· Hover-play behaviour: videos with data-hover-play start paused on
hover-capable devices (desktop) and only play while hovered/focused.
On touch devices (no hover), the autoplay attribute keeps them
looping continuously — pages read as moving showcases on mobile.
· Specimen: section-pull CTAs ("Read the rules", "See named tells")
now flush left like every other CTA on that theme. Override only on
[data-theme="specimen"]; other themes keep right-aligned pulls.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Each is a self-contained HTML, no shared CSS, no shared layout. Five
different macrostructures, five different themes, no overlap with the
existing 8 tests (01–08) or with each other.
· 09 Slow Pour — Marquee Hero · Atelier (italic Cormorant + bean SVG)
small-batch coffee subscription · warm, hand-set, editorial
· 10 Owl Hours — Manifesto · Aurora (Geist + cyan accent on dark)
late-night writing app · austere, after-dark
· 11 Soroe — Long Document · Studio (italic Fraunces + 6 vessel SVGs)
ceramics studio in Nara · quiet, handmade, archival
· 12 Loafer — Bento Grid · Pastel (Geist + indigo on cream, leaf SVG)
plant-care app · soft, friendly, restrained
· 13 Alma — Quote-Led · Halo (Geist + amber on charcoal, pulsing dot)
voice journal · atmospheric, intimate
All five pass the pre-emit critique (P5+ across all 6 axes), use real
metrics only (no fabricated stats), reference tokens by name, and have
mobile breakpoints. None re-draw browser/phone chrome.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Footer: stripped Ft1–Ft4 archetypes (.foot--masthead, .foot--inline,
.foot--index, .foot--dense) + their helper classes (.foot__tagline,
.foot__links, .foot__powered, .foot__col-head, .foot__wordmark-small,
.foot__sep, .foot__credits) — every theme uses .foot--colophon now.
· Hero: dropped H6 Photographic, H7 Clipped, H8 Specimen archetype
blocks (404 lines of CSS) plus per-theme overrides on .hero__photo,
.hero__photo-grid, .hero__mock, .hero--clipped — no theme references
any of these archetypes after the recent reroutes.
· Templates: removed `<template id="section-04-archive-without-with">`,
`<template id="section-05-archive-foundations-tabs">` (revertibility
archives — superseded), and the three dead hero templates.
· Local fonts: deleted site/fonts/the-future-*.woff2 (8 files) and the
empty site/fonts/ directory. Geist + Geist Mono cover all type roles.
· Media: dropped the unprocessed BananaStudio-example.mp4, Podcast-example.mp4,
SaaS-example.mp4 — only the -loop.mp4 versions are referenced.
· main.js: removed buildDenseColophon() helper (dense colophon never
rendered after the unified footer rework).
Total: ~930 lines removed. No visual regression.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace The Future + The Future Mono everywhere with Geist + Geist Mono — both
local fonts had a single-storey hooked "a" by design, not by faux italic. Strip
the @font-face declarations + preload links. Halo dropdown z-index leak fixed.
Editorial hero proof block strips down to just the CTA. Atelier + Salon now
left-aligned. Skill-row / hero / examples ledes unified to roman serif (italic
removed from every body / lede / intro role to kill the curly italic "a").
Refine verb removed everywhere: SKILL.md, README, landing site, references.
Ask-questions discipline strengthened — Step 1 now always asks, optional answers.
Build subsection wires Podcast loop video; Study uses Calendly screenshot with
re-written DNA fields; Worked-examples 1+2 use Banana Studio + Modern SaaS
loops in place of static thumbs. Landing-page rebrand reverted everywhere.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Section 03 ships as the five-skills showcase (Build · Study · Audit ·
Refine · Redesign), each row with its own structurally-distinct demo.
SKILL.md and references — new disciplines that hold across every verb:
· Pre-emit self-critique on six axes (Philosophy · Hierarchy · Execution
· Specificity · Restraint · Variety) — anything <3 triggers revision
· Honest copy — no fabricated metrics, real numbers or labelled
placeholder, never invent "+47% conversion"
· Locked tokens — no mid-render colour or font-family improvisation
· Re-drawn UI chrome forbidden — never hand-build fake browser bars,
phone frames, code-block windows, IDE chrome
· Clickable text never wraps to two lines on shrink
Slop test grows from 55 to 60 gates (gates 56–60). Pre-emit critique
block sits above the gate sweep. anti-patterns.md gains five new named
entries; responsive.md gains "Clickable text — never wraps" with the
4-step fix order.
Site:
· Studio photographic hero — empty 3x3 placeholder grid replaced with
a 3x2 showcase of six real Hallmark output thumbnails (Static Hour,
NAJM, Tally hero, Nexus, Tracejam, Tally process)
· Studio — strip "· selected work" suffix from section labels
(::after rule removed) and from hero eyebrow COPY
· FAQ section dropped from landing page · CSS removed · Install
renumbered 07 → 06, footer reveal index 7 → 6
· Section 03 Row I (Build) demo swaps Tide → Static Hour
· README — concise intro paragraph, hero showcase swapped to four
new outputs (Static Hour, NAJM, Tally hero, Nexus)
Version bumped to 1.0.0 across package.json, SKILL.md, banner, footer,
JS captions, and the artifact stamp string.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Removed the gallery and all 5 before/after test fixtures + thumbnails. Hallmark's
typography-only outputs read as visually quieter than Sonnet's defaults — by design
(decoration must earn its place), but it makes for an unflattering side-by-side at
first glance. Bad marketing surface even if the discipline is right.
- Reverted site/index.html Section 03 → restored the Study section.
- Reverted site/css/sections.css → removed the .ba__ block.
- Deleted site/_tests/before-after/ entirely (5 briefs × 2 outputs + 10 thumbnails + capture script).
Replaces the Study section with a 5-brief comparison gallery built on real headless
`claude -p` runs:
- 5 fresh briefs (Tide coffee · Streak habits · Lattice studio · Loom indie game · Anchor SaaS).
- BEFORE: Hallmark moved out of ~/.claude/skills/, ran `claude -p --model sonnet`.
- AFTER: Hallmark restored, same prompt prefixed with "Use the Hallmark skill at SKILL.md".
- Both sets of HTML committed under site/_tests/before-after/0X/{before,after}/index.html
so the source is browsable.
- 1280×800 thumbnails captured with headless Chrome (script: site/_tests/before-after/_capture.sh).
- Stripped preamble leaks where the model added commentary above <!doctype>.
Section 03 markup mirrors the W/W and Foundations radio+sibling pattern:
- 5 hidden radios, tab strip, side-by-side BEFORE | AFTER below.
- Brief text shown above each comparison.
- Each thumbnail links to the live HTML; Hallmark stamp summarised in caption meta.
- Mobile: tabs scroll horizontally, columns stack.
The five AFTER outputs span 5 different macrostructures (Long Document, Bento Grid,
Marquee Hero ×2, Stat-Led), 5 different themes (Linen, Pastel, Atelier, Bloom, Quiet),
3 different navs (N5, N7, N9), and 4 different footers (Ft5, Ft6, Ft7, Ft8) — actual
diversity, not faked.
Cohort:
- Headline rewritten: "Live courses, sized for the class you actually have." (was a contorted "the size your roster actually is")
- Stat shrunk: clamp(6rem, 22vw, 22rem) → clamp(5rem, 14vw, 13rem). Still heroic at 208px max but no longer dominates the page
Component library exports:
- skill/references/export-formats.md (NEW) — defines the canonical mapping from Hallmark tokens to four formats: tokens.css, Tailwind v4 @theme, DTCG tokens.json, shadcn/ui CSS variables. Includes worked examples for editorial + modern-minimal themes.
- SKILL.md Step 6 — every build now ALWAYS emits a tokens.css alongside the page CSS. Page CSS imports it; never inlines token values. design.md projects additionally embed all four formats inline in the design.md Exports section.
- redesign.md design.md template — added the Exports section showing all four code blocks. User copies whichever they need into the next project.
- No new verb. Always-on, zero friction.
Study gallery on marketing site:
- New section 03 (between Examples and Without/With) demonstrating what `hallmark study` extracts. Four tiles, each pairing a video-shaped media slot (autoplay-muted-loop with poster fallback) with the structured 10-field DNA panel.
- Tiles 01 + 02 filled in (Tide → Letter macrostructure / italic editorial serif; Tracejam → Workbench / soft geometric sans / cyan accent).
- Tiles 03 + 04 are scaffolded with placeholders + data-user-content marker for the user to fill later.
- Sections renumbered: Without/With 03 → 04, Foundations 04 → 05, FAQ 05 → 06, Install 06 → 07. --i reveal indices and section labels updated.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The big shift: a custom theme route alongside the 16-theme catalog.
Catalog stays the default. Custom fires only when the brief signals
creative or unique intent (named brand colour, multi-attribute vibe
the catalog can't carry, explicit ask). Vanilla briefs route to
catalog silently — no visible behaviour change.
Custom builds an OKLCH palette + free-font pairing tuned to the
brief, inline at :root, with the same 38 slop-test gates firing as
catalog runs. The freedom is the combination, not the rules.
- New `skill/references/custom-theme.md` — protocol with sections
A-G: trigger signals, palette construction, font pairing,
axis computation, stamp format, log.json shape, three worked
examples (Coffeebox, Loop, Mossroot).
- New `site/_tests/custom/` — three rendered worked examples
matching custom-theme.md § G.
- `SKILL.md` — Step 1 trigger detection, Step 2.6 dispatch, sample
preview block for custom, version 0.6.0 → 0.7.0.
- `study.md` — theme-canon references → theme-catalog (font canon
references intentionally left unchanged).
- Landing footer — drop competitor links (impeccable, kami,
frontend-design); keep GitHub + a quick description. Footer
Influences column removed; stats refreshed (16 themes, 38 gates).
- Site banner v0.2 → v0.7. README adds a current-version line.
- Dense colophon JS — drop influences block, refresh stats and
build date.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Eight prompts re-run as a single rotating session under the new
pre-flight + rotation + preview disclosure layers. Every macrostructure
unique, every theme unique, every pick measurably different from the
previous generation.
01 Tide Quote-Led/Atelier → Letter/Salon
02 Streampipe Workbench/Terminal → Long Document/Terminal
03 Maple Long Document/Linen → Catalogue/Almanac
04 Meridian Manifesto/Manifesto → Quote-Led/Brutal
05 Tracejam Bento Grid/Pastel → Workbench/Midnight
06 Anya Long Document/Studio → Index-First/Plain
07 Foundry Stat-Led/Plain → Bento Grid/Newsprint
08 Cohort Marquee Hero/Salon → Stat-Led/Linen
Each brief.md walks Steps 0 → 6 of the design flow so the discipline
is visible. Updated landing-page gallery cards, _tests/README.md, and
recipes.md to match. Re-captured all eight thumbnails.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Banner
- Combine .banner__random + .banner__kbd into one .banner__shuffle pill.
- New SVG: Lucide-style shuffle (two crossing arrows). Old icon clipped at
the viewBox edges; this one is sized 24×24 with stroke well inside.
- Click randomises (was already so); icon rotates 15° on hover; T kbd label
inside the pill as a hint, separated by a small vertical rule.
- Banner now uses display:flex with a spacer so the theme-name sits
immediately to the LEFT of the picker (closer, smaller text 0.95rem)
rather than centered far from the dots.
- New responsive breakpoints: 50rem (smaller dots), 44rem (hide picker
entirely on phones, keep mark + name + shuffle), 26rem (drop name).
- Shuffle now sits OUTSIDE the picker so it stays visible when the picker
is hidden on narrow screens.
## Gallery thumb fit
- Width was `100%` which only fills the content-area, leaving padding
visible to the right (negative margin-right doesn't extend element
width). Switched to `width: calc(100% + 2 * var(--space-lg))` so the
thumb truly bleeds to the card's inner-border on both sides.
- Added explicit `aspect-ratio: 16/10` + `object-fit: cover` +
`object-position: top left` so the thumb crops from the right (where
empty page-paper tends to live) rather than top/bottom (where hero
content usually is).
- Re-captured all 8 thumbnails at 1024×640 (matches the most common page
content max-width — Maple Bakery is 64rem = 1024px exactly), so each
page packs content closer to the right edge.
## Salon: centered examples intro
- Salon already centers .section__title; the .examples__intro lead
paragraph below it was left-aligned, looking off-axis on the centered
Salon section heads. Now centers with `text-align: center` +
`margin-inline: auto` for both .examples__intro and .examples__outro.
## Responsive headings (narrow viewports)
- At <30rem viewports, .opening__title and .hero__display were rendering
at min ~48px which is wider than the 320–375px content area for headers
longer than ~14ch. Body's `overflow-x: hidden` was masking the issue
visually but text was being clipped.
- New media query caps display at clamp(1.75rem, 9vw, 2.75rem) and forces
`max-width: 12ch` so long headers wrap.
- .section__title gets clamp(1.375rem, 5.5vw, 1.875rem) + 100% max-width
so multi-clause section titles wrap to multiple lines instead of being
clipped.
- .hero__lede / .opening__sub get 1rem font-size + 100% max-width on
narrow viewports so the lede paragraph fits.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Foundry repalleted from Newsprint to Plain (pure white)
The v0.6.0 gallery had six warm-paper thumbnails out of eight (Specimen,
Atelier, Linen, Newsprint, Salon, Studio all in cream/pink). Foundry now
counterweights with:
- **Paper:** `oklch(100% 0 0)` = pure #ffffff. Surfaces tinted toward 245 hue
with low chroma so the neutral-zero-chroma rule is honoured.
- **Accent:** deep ink-blue (`oklch(34% 0.18 250)`) — saturated enough to
register, dark enough to pair with stark white without reading as candy.
- **Display:** Inter Tight 900 (display-heavy, free baseline). All italic
emphasis converted to weight + accent-color emphasis (Inter Tight italic
is weaker than Playfair italic).
- **Body:** Inter Tight 400/500/700 (single-family page is allowed where
the family IS the design — Brutalist tone).
- **Wordmark:** Bricolage Grotesque 800 — different family from display
and body, per typography.md wordmark guidance.
- **Hero highlight:** "thirty-one days" now non-italic with a 2px ink-blue
underline rather than italic accent — fits the sans-display register.
Gives the gallery a deliberately different fingerprint at the cool /
stark / B2B-serious end of the spectrum that the warm-paper themes don't
cover. Diversification still passes vs Pastel (Tracejam): display style
differs, paper band shifts from cream to pure-white.
## Gallery thumb fit
The .gallery__thumb CSS dropped `aspect-ratio: 16/10 + object-fit: cover`
in favour of natural-aspect-ratio image sizing (`width: 100%; height:
auto` on the img, no aspect-ratio on the picture wrapper). More robust —
guarantees the image fills the card width edge-to-edge regardless of
theme tokens, and the natural 16:10 ratio of the captured screenshots
drives the height. Added `font-size: 0` on the picture to kill any
inline-element gap that could create whitespace.
## Screenshots re-captured at 1100×688
The previous 1280×800 capture left lots of empty page-margin space on
some test pages (workbench / stat-led layouts have content biased to
the left, leaving the right half visually empty). Tightening to 1100×688
packs content closer to the frame edges. All eight thumbnails re-shot.
## Files
- `site/_tests/07-foundry-compliance/style.css` — full repalette
- `site/_tests/07-foundry-compliance/brief.md` — theme rationale + diversification table
- `site/_tests/README.md` — table row + v0.6.0 changelog updated
- `site/css/components.css` — gallery thumb CSS simplified
- `site/index.html` — gallery card 07 copy updated to "Plain (#fff)"
- `site/_tests/_thumbs/*.png` — all 8 re-captured
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Tracejam (test 05) defects fixed
- Horizontal scroll suppressed via `html { overflow-x: clip }` + `body` fallback
- Navbar items vertically centered (`align-items: center`, `line-height: 1`)
- Wordmark switched from Geist to Fraunces (`--font-wordmark`) — different register from body
- Hero highlight raised from baseline to mid-x-height — reads as highlighter, not fat underline
- Browser-frame chrome dots get `aria-hidden="true"`
## Skill hardening — three new slop-test gates (35 → 38)
- **Gate 36**: page must not horizontally scroll on any viewport 320–1920 px
- **Gate 37**: decorative effects on text (highlighter / accent stroke / mark) must be visually verified at x-height, not baseline
- **Gate 38**: interactive bars must declare `align-items: center` + `line-height: 1`
## New reference rules
- `layout-and-space.md` § Page-edge clipping — global clip is mandatory under any clipped-edge enrichment
- `typography.md` § Wordmark / logo — wordmark may use a different display face; should on Bento / Stat-Led / Workbench / Marquee Hero
- `microinteractions.md` § When to ship motion by default — default-on for SaaS-shaped archetypes, default-off for Editorial / Manifesto / Letter / Quote-Led / Long Document; six recipes documented (number reveal, pricing lift, marquee, stagger, recommended-tier pulse, CTA hover)
- `macrostructures.md` § SaaS page sequence — hero → social proof → features → testimonials → pricing → FAQ → CTA → footer; with voice rules (real prices, specific testimonials, conversational FAQ)
## Meridian Manifesto (test 04) extended
7 sections → 11 sections. Added § What we refuse (anti-list with strikethrough), § Working rules (7 numbered operational principles), § The practice (3-paragraph narrative with drop-cap), § What we read (annotated bibliography with 8 titles). Voice consistent with the original manifesto — declarative, no testimonials, no pricing.
## Two new SaaS-focused tests
- **Test 07 — Foundry** (Stat-Led + Newsprint). SOC2 / ISO27001 compliance automation. Hero is one giant number ("847" — animated counter from 0). 9 sections incl. 3-tier pricing, 3 testimonials with role + company, 8-question FAQ. Pricing card hover-lift + recommended-tier pulse-once.
- **Test 08 — Cohort** (Marquee Hero + Salon). Cohort-based courses platform. Continuous-scroll marquee of course titles. Alternating-side feature rows with hand-built CSS visualisations (card-stack, hours grid, thread, report). Stagger-reveal on testimonials. 2-tier pricing, 6-question FAQ, centered Salon footer.
Both tests respect prefers-reduced-motion. Both pass the 38-gate slop test. Both demonstrate the new SaaS page sequence.
## Gallery thumbnails
`site/_tests/_thumbs/01–08.png` — eight 1024×640 screenshots captured via Chrome headless. Gallery cards on the landing page now show real visual previews above the text. Cards inherit theme tokens (radius, rule, shadow) so switching the landing page's theme reskins the card frames around the screenshots. Hover scales the thumb 1.025× over 500 ms; respects prefers-reduced-motion.
Section title updated: "Six pages, six different shapes." → "Eight pages, eight different shapes."
## SKILL.md version bump
0.5.0 → 0.6.0.
## Files
- 13 modified, 6 created (tests 07 & 08 directories), 8 thumbnails added.
- ~840 lines added, ~25 removed.
- All skill files mirrored into `~/.claude/skills/hallmark/`.
## Deferred to next session
- **Study + redesign combined verb** — single-shot screenshot-to-rebuilt-page.
- **Auto-generated OG cards** — Node + Puppeteer utility for 1200×630 PNG from macrostructure stamp.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Stress-test the skill across six contrasting briefs to see what comes
out without hand-holding. Each test deliberately tests a different
scenario along audience-context-given × theme-given × domain × intended
enrichment level. None of the six pages share a macrostructure, hero
archetype, or footer voice with another.
01 · Tide (indie podcast) — context skipped, no theme. Skill infers
audio domain and picks Quote-Led + Atelier + no enrichment.
Hand-built in pure typography. Pull-quote hero.
02 · Streampipe (open-source CLI) — full context, Terminal theme
requested. Skill picks Workbench + Terminal + a hand-built CSS-art
terminal mockup with blinking phosphor caret. No real terminal
recording, no Lottie.
03 · Maple Street Bread (artisan bakery) — full context. Skill picks
Long Document + Linen + a hand-built SVG loaf (Tier B). Letter-style
body with a drop cap, an aside with today's loaves and visit info.
The bakery worked example from custom-craft.md, in production.
04 · Meridian (studio manifesto) — partial context, theme implied.
Skill picks Manifesto macrostructure + Manifesto theme + no enrichment.
Pure black, oversized white display, single red accent used as a
bleed band. Five declarations and a signed colophon.
05 · Tracejam (SaaS observability) — full context, no theme. Skill
resists the obvious Midnight default and picks Pastel — proving a
soft theme can carry a technical brief if the typography is exact.
Bento Grid macrostructure + clipped-edge hero with a hand-built
CSS-art trace waterfall (multi-coloured spans on a percentage grid).
Six asymmetric bento tiles below.
06 · Anya (software architect personal site) — context skipped, no
theme. Skill avoids Specimen-as-default for portfolio briefs and
picks Long Document + Studio + no enrichment. Italic Fraunces
salutation, tabular selected work sheet, no Lottie, no Three.js,
no decorative gradient.
Each test ships with a brief.md (the verbatim prompt, the inferences,
the macrostructure stamp), an index.html (self-contained — no shared
assets), and a style.css with the Hallmark stamp at the top.
Findings written up at the end of site/_tests/README.md as a
priority-ranked improvement list:
Tier 1 — per-archetype example copy fixtures (the model bends to
"Built for the modern team" without them); sub-domain refinement of
the trio table (split SaaS docs vs SaaS landing); a documented theme-
diversification rule; free-vs-paid font tradeoff in typography.md;
worked examples per enrichment archetype in hero-enrichment.md.
Tier 2 — a "different knobs" slop-test gate; more illustration recipes
in custom-craft.md; non-LLM voice samples in copy.md; mobile-collapse
discipline per archetype; aria-label slop-test gate.
Tier 3 — project-level memory beyond the CSS stamp; a study+redesign
combined verb; an example gallery on the main landing page; auto-
generated OG cards per macrostructure.
What this exercise revealed: the structural variety position holds
(six briefs, six different shapes, no template repetition); the
enrichment hierarchy works (three of six correctly ship typography-
only); the remaining gap is copy voice (Tier 1 #1) and theme-pick
discipline (Tier 1 #3).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Youssef