The theme that shipped in the first cut was quiet to a fault: outside
the hero, its pages fell back to ruled prose. This revision gives the
theme a constructive vocabulary and tightens the site integration
around it.
Theme (grid.md, rewritten):
- A marks kit: period square, 3px bar, register crosshair, quarter-disc,
stepped bars, dot module, border arrows, 45-degree diagonal, and giant
cropped numerals, all locked to the column tracks.
- The plate: at most one full-bleed flooded band per page as the poster
moment, rails continuing across it.
- A signal-ink axis: one ink per page, signal red (default), ultramarine,
or surface-only signal yellow; two pages in a run never share the ink.
- Section-object law: a band that is only prose has failed the theme.
- Asymmetric occupancy (prose capped at 6 of 12 columns) and structural
whitespace; grid-snapped hover geometry and an optional ticker.
Site:
- grid-01 example replaced with signal, a Basel poster festival page
built on the revised theme; thumb regenerated at the 1400-wide
full-page convention (the first cut shipped a 1600x1000 viewport crop
that broke the hover scroll).
- Grid tokens: serif slot resolves to the grotesk (the theme has no
serif), doubled comment opener fixed, description updated.
- Landing: grid headings follow the theme's lowercase display voice;
hero copy updated to the signal-ink language.
- main.js: grid added to THEME_GENRES (missing in the first cut).
Consistency sweep the first cut missed:
- custom-theme.md catalog lists still said 20 themes; now 21 with Grid.
- components.css banner comment still said 20 themes.
Swiss neo-grotesque systems design: a near-white cool sheet with the
twelve-column hairline grid painted behind the content rather than implied,
one heavy Archivo run lowercase and slammed left, and exactly one signal red
used as a geometric mark. It fills the editorial cluster's neo-grotesque slot,
which until now was serif-led on every one of its members.
Skill side: the theme spec, and the catalog count from twenty to twenty-one in
the four places SKILL.md states it.
Site side: the token block, the switcher entry, the twenty-first dropdown dot,
Archivo added to the font load, the Buro Grid example page with its thumbnail,
and an entry in the theme contact sheet.
Not added to scroll-demos.json on purpose. Grid's motion is near-zero by
design, no reveals and no parallax, so a scroll recording would be an empty
file advertising something the theme refuses to do.
README carries the new count only, no new section.
Swapped in the new Open Graph image (2400x1260), keeping the OG-hallmark.png
filename so the meta tags, the README banner, and the deployed URL all stay
valid; updated the height meta to match.
Refreshed the "Different briefs, different shapes" gallery to the worked
examples we actually ship now: the four new themes (Bubble, Distil, Cold Snap,
Cinder), the Custom and newly generated pages (Mend Assembly, Hollowback Apiary,
Off-Register, Press Quaternary), and four originals (Tally, Wayfare, NAJM,
Hyperlane). Dropped the retired examples, reworded the intro, and added eight
new hero shots.
Theme picker: Hum is now theme 01, with the rest renumbered 02-20. The ordinal
reads off the registry index, so switching, cycling, and the "NN / 20" readout
all stay correct.
Theme numbers: each picker swatch now carries an explicit number colour that
contrasts with its own background, instead of inheriting the active theme's ink.
Dark swatches (Midnight, Terminal, Manifesto, Aurora, Lumen) get a light number
rather than a near-invisible dark one. All twenty clear AA (min 10:1).
Worked Examples: moved the first three carousel cards (Cobalt, Carnival, Lumen)
to the end so the page leads with Hum.
Bumped the asset cache-bust.
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.
Merge the clear duplicates (gradient text into the gradient gate, macrostructure-
repeat into the structural-fingerprint gate, the overflow-x:clip mandate into the
horizontal-scroll gate, emoji-icon into the icon-libraries gate), collapse the five
contrast gates to two, the five input-state gates to one, and the four hero gates to
two. No coverage lost. Renumber 1–57 and update every gate-number and gate-total
reference across SKILL.md, the reference docs, the landing copy, and the example builds.
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.
Codex enforces a 1024-char cap on the frontmatter description; ours was 1813,
causing "invalid description: exceeds maximum length of 1024 characters" on
load. Rewrote to 927 chars, lossless on routing signals — all five fire
triggers, all three don't-fire conditions, and the decisive heuristic are
preserved. Stripped duplicate verb listings, parenthetical examples on each
trigger, and padding prose.
README + site install panes now document `~/.codex/skills/hallmark/` (personal)
and `.codex/skills/hallmark/` (project-scoped) for Codex, replacing the prior
"manual / git clone" placeholder.
The skills CLI's frontmatter parser rejected SKILL.md with "Nested mappings are not allowed in compact mappings" because the description contained " ANY of: (1) " — the colon-space sequence inside an unquoted YAML scalar made the parser think it had hit a nested key/value pair. End result: 'npx skills add nutlope/hallmark' cloned successfully but then bailed with "No skills found. Skills require a SKILL.md with name and description."
Fix: rephrase "Fires when ANY of:" → "Fires when ANY of these match —". Single character semantic — colon→em-dash. Frontmatter now parses cleanly under js-yaml. No content semantics change.
Also tightened the repo to what actually helps the skill or a future user — per the new instruction. Added to .gitignore + git rm --cached:
- .hallmark/ — runtime state from my dogfooding runs, has no business being committed
- site/_launch-comparison/ — one-off launch-day comparison artifact (Hallmark / Impeccable / no-skills); not linked from the marketing site, README, or anywhere else
Working-directory copies preserved (rm --cached, not rm). docs/talk-slides.md left in place — it's user-authored content, not mine to remove.
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.
- docs/screenshots/hero-*.jpg: 8 fresh hero-only captures of each worked example (1440×900 via Chrome headless on the local dev server). Replaces the mid-video stills in _tests/_thumbs/*-still.jpg which had video-player overlay and cropped headlines. Each is unique — no duplicates. README "Different briefs, different shapes" section now uses these and each thumbnail is a clickable link to the live deployed example.
- site/index.html: the Study verb's brief-pill swapped from "/hallmark study this landing page" to "/hallmark study together.ai · or paste a screenshot" so URL mode is visually concrete next to the lede that already names both modes. One-line change.
- ROADMAP.md: new "Now — actively working on" section at the top. N.1 covers tightening the existing 22 themes + adding 4–6 new distinct ones + lowering the bar to route to custom. N.2 covers first-class Nanobanana image generation + a new image-led theme (working title: Plate) + token discipline for generated stills.
Each .ex-card div is now an <a target="_blank" rel="noopener"> wrapping the same content. The hover-play video, prompt line, and .ex-card styles all work unchanged (the class already had color: inherit + focus-visible). Added one CSS line — text-decoration: none on .ex-card — so the <a> doesn't underline the card.
Linked destinations:
- examples/tally/ — SaaS, modern-minimal (from /Users/youssef/test-hallmark-9)
- examples/wayfare/ — travel booking, atmospheric (from test-hallmark-12)
- _tests/09-slow-pour/ — small-batch coffee subscription (already in site)
- examples/bananastudio/ — creative studio with playful motion (from test-hallmark-6)
- _tests/06-anya-portfolio/ — software architect personal site (already in site)
- examples/najm/ — Moroccan fashion (from test-hallmark-7)
- _tests/11-soroe-ceramics/ — small ceramics studio (already in site)
- examples/hyperlane/ — developer infrastructure (from test-hallmark-15)
site/examples/ adds ~308 KB total across the 5 copied projects. The other 3 already live under site/_tests/ so no copying needed for them.
- Bloom: .section__head was text-align: center with .section-label justify-content: center and .section__title margin-inline: auto — every section read as centered-everything (the AI fingerprint). Flipped to text-align: left, justify-content: flex-start, margin-inline: 0. Hero (.hero--marquee) stays centered via its own rules; the atmospheric glow does the centering work without needing every section head to repeat it. Tag stays above the title in the same column (still passes gate 66).
- Newsprint: removed border-top: 3px double var(--color-ink) from .section__head — the double rule above each section tag was reading as decorative noise on a layout that already has a strong 1 px bottom border. Single bottom border kept.
Two sticky-at-top:0 elements in the same stacking context (.banner and Almanac's .section__head) overlapped during scroll because they shared --z-sticky (200) and the section head paints last in DOM order. Visible on the marketing site as the section header drawing on top of the nav as you scroll.
site/ — actual fix for the live page:
- tokens.css: split --z-sticky into --z-sticky (200, in-page) + --z-sticky-nav (300, top nav); add --banner-height: 44px so secondary stickies can offset by a single token
- components.css: .banner now uses --z-sticky-nav and reads --banner-height for its height (kept at 44 px)
- sections.css: Almanac .section__head docks at top: var(--banner-height) instead of top: 0; z-index stays at --z-sticky so the banner always out-paints when their boxes momentarily overlap
skill/ — prevent the pattern in future generated pages (without forcing sticky on every output):
- slop-test.md: new gate 68 auto-fails any second sticky-at-top:0 element when a sticky page-level nav exists; fires only when the page actually has sticky elements (S3, F2, sticky TOCs), trivial pass otherwise
- components/s3-sticky-pinned.md: recipe rewritten to use top: var(--banner-height) + --z-sticky; pairing rule explained
- components/f2-sticky-scroll-stack.md: top now calc(var(--banner-height) + var(--space-xl)) so the sticky pane docks below the nav with breathing room
- SKILL.md + preview-examples.md: gate count bumped 67 → 68
Only Almanac uses sticky section heads in the live site — no other themes affected.
Manifesto and Sport themes set --lh-tight: 0.94 paired with text-transform: uppercase and condensed display faces (Anton / Inter Tight 900). On a two-line .section__title the cap-tops of line N+1 collide with the baseline of line N — most visible on the marketing site's "SAME PROMPT, TWO / DIFFERENT OUTPUTS." headline where the comma and the D fuse into one glyph.
- tokens.css: bump --lh-tight to 1.02 for both themes (safe floor for all-caps condensed display)
- slop-test.md: new gate 67 auto-fails any display-size element that pairs text-transform: uppercase with line-height < 1.0
- typography.md: explicit "Floor for all-caps display heads is 1.0 — recommended 1.02–1.08" line added to body-text rules
- SKILL.md + preview-examples.md: gate count bumped 66 → 67
After a study diagnosis, the user can now say "lock the DNA" to write
a portable design.md from the extracted DNA — same format as the
default verb's lock-the-system flow, seeded from the studied source.
URL mode populates exact tokens + fonts; image mode populates
estimated bands + candidate fonts. URL-mode emission asks the user
to attest the source is theirs or a public reference for their own
brand — third-party URLs are refused at the emission step even when
the diagnosis itself was allowed. Image mode emits without asking.
Updates skill protocol, design-md trigger list, public verb table,
README comparison, and the site's Study row.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Banner Install hover-stick:
- Smooth-scroll on a sticky banner can leave the cursor over the
pill after click; Safari/Chrome occasionally keep :hover stuck
even after the pointer moves away.
- Scope the hover rule to (hover: hover) and (pointer: fine) so a
touch tap never sticks the inverted state.
- Add :focus:not(:focus-visible) reset so synthesised mouse-focus
doesn't keep the inverted look either.
- Add a JS click handler that blur()s the pill and toggles
pointer-events for one frame, forcing the browser to release any
sticky :hover/:focus state.
Atelier hero header:
- Quote copy: "Restraint, repeated, becomes a signature." → "A
workshop, not a template." Shorter, declarative, fits Atelier's
workshop voice.
- Override the hero quote to use the upright display face
(var(--font-display), normal style, --display-weight 900),
matching the "Atelier" wordmark in the banner and every section
title. Italic var(--font-serif) was making the header read as a
pull-quote rather than the page's primary statement; Atelier's
voice is declarative, not quoted.
With / Without rename:
- Section 06 label "Before / After" → "With / Without". Both panels
exist now (Sonnet 4.6 alone vs Sonnet 4.6 + Hallmark) — there is
no temporal before/after, only a presence/absence comparison.
- HTML comment updated to match.
Diptych screenshot centring:
- .ba__frame img object-position: top left → center. The full hero
composition reads inside the 16:10 frame instead of clipping to
the top-left corner. Other diptychs (.diptych__half, .brief-output)
intentionally stay top-aligned — they're page screenshots where
the masthead matters; the .ba__frame is hero-only.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous mobile fix (display: block + width: 100% on the button)
overflowed the frame because .code has white-space: nowrap and the
button rendered inline-flex on the same nowrap line as the command,
spilling past the right edge.
Cleaner pattern, matching what gh repo clone / npmjs / Vercel
install panes do on touch devices:
- Hide .code__copy entirely below 45rem.
- Bind a click handler on the whole [data-copy-source] pre so the
command area itself is tap-to-copy. cursor: pointer signals it.
- Add a transient "Copied ✓" badge inside the pre on success
(anchored top/right/centred-vertically) — replaces the button's
label-swap on mobile. Animates in and clears after 2.2 s.
- Restore the original .code flex + align-items: center so the
command sits vertically centred in the frame regardless of height.
JS:
- Refactor attachCopyButtons to share a copyFromSource helper.
- Source binding uses data-copy-bound; button binding uses
data-copy-btn-bound (separate flags so re-attached cloned heroes
don't double-bind).
- Button click stops propagation so a single tap on the visible
button (desktop) doesn't fire both the button and source handlers.
- Both surfaces flash data-state="copied" together so CSS feedback
works on whichever surface is visible at the active breakpoint.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The shared prompt in the Before/After Hallmark gallery used the old
Quiet Hour natural-wine brief — stale now that the before/after
thumbs were swapped to the DevForge dev-conference landing pages.
Updated the prompt to match the new content.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
Hero install copy button:
- On coarse-pointer (touch) devices the copy button sits visible at
all times. With its absolute right-aligned position it overlapped
the npx command text on narrow viewports — most visible on
Specimen but applied to every theme using .code.
- Below 45rem, drop the absolute positioning and let the button flow
as a full-width row beneath the command (GitHub / Vercel / npmjs
pattern). The command keeps its horizontal scroll for long URLs.
Banner GitHub star spacing on mobile:
- The star uses a negative inline-start margin (-0.75rem) tuned for
the install/star pair on desktop. On mobile the install link is
hidden, so that same margin pulls the star too close to the
wordmark.
- Below 50rem, loosen the start margin to -0.25rem (+8 px breathing
room from the wordmark, matching the requested gap).
Specimen eyebrow:
- Drop " · Powered by Together AI" from the Specimen hero eyebrow
copy. The Together AI credit lives in the footer; repeating it in
the hero made the lede read like a sponsorship banner.
Footer bottom spacing:
- .page added padding-block-end: var(--space-4xl) (10 rem ≈ 160 px),
and .foot--colophon added another --space-2xl (4 rem ≈ 64 px) of
internal bottom padding. Combined ≈ 224 px of empty space below
"Made by Together AI" on every theme.
- Drop the page-wrapper bottom padding to 0 — the colophon owns its
own end-spacing.
- Cap the colophon's own bottom padding at --space-md (16 px) on
desktop and mobile. The credit line now hugs ≤ 20 px from the
viewport bottom.
Stale stats in footer (caught while in there):
- 23 themes → 22 (Pastel removed earlier).
- 60 slop-test gates → 65 (caught up to slop-test.md's actual count).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The "The page is the demo" interlude rendered with white-on-light text
on Coral, Violet, Plume, Editorial — and dark-on-dark on Aurora, Halo
— because .interlude__phrase em was reaching for --color-accent-ink.
That token is "text laid over the accent fill" (paper-coloured on
most themes), so it disappears on the paper-2 band.
Use --color-accent directly. The accent itself is mid-L on every
theme (40-78% L), so it has the right contrast against either light
or dark paper.
Same root cause caught in two more places:
- .diptych__half[data-state="after"] .diptych__cap (the small label
under the "after" diptych panel — same paper background)
- [data-theme="midnight"] .opening__title em (works visually on
Midnight because its accent and accent-ink are equal, but the token
usage was semantically wrong; aligning for consistency)
Six themes specifically affected by the visible bug: Coral, Violet,
Plume, Editorial (light, near-white em on light paper) and Aurora,
Halo (dark, near-black em on dark paper). All six now read clean.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Repo handover prep. Replaces:
- github.com/Luffixos/hallmark → github.com/nutlope/hallmark
(banner star link, footer link, JS REPO constant for star count)
- npx skills add hallmark → npx skills add nutlope/hallmark
(README install section, four install panes in site/index.html)
No skill internals touched — SKILL.md and references/ unchanged.
The local installed skill at ~/.claude/skills/hallmark/ continues
to work; the URL change is content-only.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Both favicon SVGs (dark + light) updated with hand-tuned path
coordinates for the Hn wordmark glyphs. No structural change to
the SVG; just nudged stroke positions.
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>
Slack and most OG scrapers silently drop relative og:image paths.
Switched og:image + twitter:image to the deployed absolute URL,
added og:url, og:site_name, image:type/width/height, and a secure_url
twin so every scraper has what it needs to render a large-image card.
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>
· Footer rewritten as an editorial colophon: massive Hallmark wordmark
on a baseline-aligned masthead row + 3-column meta grid (Currently In /
In the Catalog / Read or take a copy) + centered powered-by line.
Generous whitespace, hairline-divided stat rows, theme-aware via tokens.
Specificity bumped (.foot.foot--colophon) so the new grid layout beats
the legacy .foot { grid-template-columns: 1fr auto } from sections.css.
· Reverted hero moments per request: dropped the SPECIMEN ℋ glyph,
Garden leaf, Linen woven dot grid, Salon fleuron, Almanac date stamp,
and the Coral solid accent block + Violet alternating section tint.
· Brutal hero archetype: photographic → marquee. Removed the 6-image
gallery + the related photo-grid CSS overrides.
· Bloom hero: centered (text-align + margin-inline auto on display/lede,
justify-self center on CTA). Other Bloom sections stay left-aligned.
· Examples cards: <a href> → <div>, dropped the "Open ↗" labels +
ex-card__open CSS, removed hover-transform/scale rules. Cards are now
visual-only — the trail popover still appears on hover but no click.
· Theme dropdown: 22px colored squares replaced with 34px tiles that
show the theme's # in mono inside, theme accent stripe along bottom.
Re-ordered to match the THEMES object order (specimen=01,
midnight=02, brutal=03, … editorial=23) so the indicator's "N / 23"
matches the dropdown position.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Removed the 4 .skill-row__num spans (I/II/III/IV) from index.html.
· Collapsed .skill-row__head from 4rem 1fr two-column grid to single
column — section labels, verb headings, and body content all hang
from the same left content edge now.
· Dropped the 4rem padding-inline-start from .skill-row__body and
.skill-row__body--full so demo content aligns with the verb title
above it (was previously indented to clear the numeral gutter).
· Removed the .skill-row__num base + per-theme override blocks from
sections.css since the markup no longer exists.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Audit slop card now wears a "Specimen — actual AI slop, untouched"
caption above it (mono caps, theme-coloured) so the gradient reads as
a quoted artifact, not a card competing with the page.
· Dark / charged themes (midnight, manifesto, halo, aurora, riso, terminal,
brutal) tint the slop card via filter saturate(0.55) brightness(0.82).
The card still reads as AI slop — purpose retained — but no longer wins
the visual contest.
· .brief-output now responds to theme. Hard-edge group (brutal/manifesto/
terminal/newsprint/editorial) → 0 radius, heavier border. Slight-radius
(sport/almanac/garden/halo/violet/studio) → 4–6px. Soft-card (quiet/
coral/aurora/pastel/plume/bloom) → 8–14px with optional accent shadow.
Riso → duotone 3px-offset accent shadow. Midnight → inset glow ring.
Halo → amber glow halo. Aurora → accent glow.
· Editorial-register themes (atelier, salon, almanac, studio, sport) get
a small label above each demo: "Plate I", "Specimen — i", "Fig. 01 —
2026 ed.", "Frame 01", "Lap 1". Same media, theme-aware foundry plate.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· .banner__install + .banner__star + .banner__theme-indicator now react
to theme. Hard-edge group (brutal, manifesto, terminal, newsprint,
editorial) → 0 radius. Slight-radius group (sport, almanac) → 4px.
Soft-card group (garden, halo, violet, studio) → 6px. Off-register
stamp (riso) → 2px + duotone shadow. Editorial themes (atelier,
salon) get italic serif install copy. Manifesto + Brutal use display
font + 2px border. Terminal goes mono. Pastel keeps full pill but
with a softer shadow. The banner now rebuilds when you switch theme.
· Almanac claims to be indexed — section labels prepend §
(red accent) so labels read "§ 02 ⁄ EXAMPLES".
· Terminal cycles 4 prompt prefixes by section (>, //, #, --) instead
of repeating the same character.
· Linen section heads now hang the label in a 12rem left gutter with
the title in the body column — reads like a printed manuscript margin
note. Mobile collapses to single column.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· .skill-row__num bumped from text-2xl to clamp(3.5rem, 5vw + 0.5rem, 6rem),
color from --color-rule-2 to --color-muted. Mono-override theme group
scaled to clamp(3rem, 4.5vw + 0.4rem, 5rem). Numerals now read as
proper chapter markers, not muted afterthoughts.
· Sport stat fixture: invented "+47 %" / "FASTER · DECIDE LATE." replaced
with honest "23" / "THEMES · TWO GENRES DEEP." — restores the no-fabricated-
metrics discipline.
· Garden tokens: bumped --color-ink, --color-ink-2, --color-muted, --color-rule
set toward darker olive — body lede now reads against the pale-green paper.
· Salon fleuron: 1.1rem opacity 0.65 → 1.7rem opacity 0.85 with a hairline
divider rule above it. Reads as a divider, not a stray glyph.
· Atelier section rhythm: sections now separated by --space-3xl negative
space; section-pull arrow's top rule removed. Quiet register, no rules.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Youssef