- 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.
The frontmatter description opened with "Use this skill when ANY of these fire" — agent-facing trigger logic. Users typing /hall in the slash picker saw the truncated preview as "Use this skill when ANY of these fire — (1) the user names one of Hallmark's explicit verbs..." which says nothing about what Hallmark actually does.
Prepended a one-line user-facing summary so the picker preview reads as: "Anti-AI-slop design skill — generate distinctive landing pages, audit existing UIs, redesign templated pages, or study an admired URL / screenshot to extract its DNA." plus a usage hint with the four verbs. The full 5-condition trigger logic stays underneath unchanged so Claude's auto-fire behaviour is preserved.
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.
When the user ran `study <URL>` and then said "build it", Hallmark fell back to a catalog theme (the "closest cousin" hint in the diagnosis) instead of using the studied DNA — paper/accent/fonts/macrostructure from the source were discarded.
- study.md: rewrote both diagnosis templates and the worked example. The "closest catalog theme" line is now framed as an explicit pivot option ("just say 'use X instead'"), not a recommendation. The "build it" handoff explicitly uses the studied DNA as the system.
- SKILL.md § 2.6: new Condition 0 (highest priority) — when a study diagnosis was emitted earlier in the conversation and the user asks to build from it ("build it" / "make it" / "use this DNA"), skip catalog/custom dispatch entirely. The DNA's tokens, macrostructure, and archetypes become the locked system. Diversification suspended for the build. Pivot phrases ("use Linen instead" / "ignore the DNA") route back to normal dispatch.
- SKILL.md Step 6: stamp's `theme:` field is `studied-DNA (source: <URL or image>)` with inline OKLCH/font values for studied builds.
- slop-test.md: new gate 69 auto-fails any build that names a catalog theme in its stamp when a recent study exists and the user didn't explicitly pivot.
- Gate count bumped 68 → 69 in SKILL.md + preview-examples.md.
- 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
- macrostructures.md (37 KB monolith) split into 21 per-macro files in references/macrostructures/; slim index lists names + summaries; SKILL.md Step 2 instructs to pick from index, then load ONLY the matching per-item file
- component-cookbook.md (55 KB monolith) split into 46 per-archetype files in references/components/; slim index lists names + summaries; SKILL.md Step 2 instructs to pick archetype codes, then load ONLY the matching files (typical build: 5–7 archetype files vs the whole cookbook)
- SKILL.md § 3 load-list rewritten: macros + components moved from eager-load to index-then-pick; slop-test.md gated to Step 7 only with explicit "do not pre-load" language; hero-enrichment.md no longer auto-loaded at Step 4
- 4 worked Step 5 preview blocks extracted from SKILL.md to references/preview-examples.md (lazy-loaded)
- gate count bumped 65 → 66 across SKILL.md (gate 66 was added in prior commit)
Expected token reduction per build: ~30–40 K (~30–40 % of the previous ~100 K-per-build cost), driven primarily by no longer loading 21 macros or 46 archetypes when only one of each is picked.
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>
URL mode reads HTML/CSS via WebFetch — names exact fonts and exact
colour values; trades the rhythm pass for everything else getting
more accurate. Auto-refuses template-marketplace URLs; falls back
to asking for a screenshot if the URL is auth-walled or an SPA shell.
Also drops a stale external reference from ROADMAP.
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>
Phrase-triggered design-system extraction. The user iterates freely on
the first builds; when the system is settled, they say "lock the system"
(or "give me a design.md", "make this portable") and Hallmark writes a
portable ~45-line design.md at the project root.
Why opt-in:
- Zero churn — no design.md flickering as the user swaps themes between
iterations.
- The locked system reflects a settled choice, not build #1's hot take.
- Mirrors how design teams actually work: formalise after patterns hold.
Mechanics:
- skill/references/design-md.md (new) — trigger phrases, scope rules,
the tight format template, no-overwrite policy.
- SKILL.md Step 3 — design-md.md added to load-conditionally.
- SKILL.md Step 5 — preview block carries one quiet CTA line. Skipped
on component-scope or when design.md already exists.
- SKILL.md Step 6 — opt-in design.md bullet alongside tokens.css and
multi-format-export rules. Default verb does NOT auto-emit. Multi-
page redesign keeps producing the heavyweight design.md (unchanged).
- README — one bullet under What's distinct.
Page-scope only; component-scope skips. Once design.md exists every
Hallmark run defers to it (existing pre-flight rule, unchanged) and
the diversification rule inverts to consistency.
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>
Description was firing on broad catch-alls — "design a", "build a
landing page", "make a dashboard", and the universal trap "any
request that will produce HTML / CSS / JSX / Tailwind output". Net
effect: Hallmark hijacked generic UI prompts that should have gone
to frontend-design or whatever else is loaded.
Tightened to four conditions:
1. User explicitly names a verb — audit · refine · redesign · study
2. User says a UI "feels AI-generated" / "looks templated" / "looks
like every other AI page", or asks to "make it less AI-generated"
3. User attaches a screenshot of a design they admire (study verb)
4. User invokes by name — "use Hallmark" or /hallmark
Added an explicit DO-NOT list — "design a button", "build me a form",
"add a navbar" — pointing those at frontend-design or other UI skills.
Hallmark stays proactive (matches the peer-skill convention) but the
phrase list is on-purpose, not catch-all. Skill discoverability
preserved; default-builder behaviour removed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous wording said "almost always asks" with two carve-outs,
and the "user already named all three" exception let the model skip
the gate on five-word briefs by wishfully reading "podcast site" as
audience+use+tone. Removed that exception. The only silent verbs
are now audit / study / redesign --mood. Updated the prompt format
to match the canonical 1-2-3 layout (Audience · Use case · Tone)
with bolded labels. Added an explicit no-length-threshold clause:
short briefs get the same gate, the user waves through with "go ahead".
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Default to no section eyebrow. Use one only when the section is
genuinely ordinal (numbered manifesto, multi-step process, long
document chapters) or when the section name is too short to read
as a heading on its own. At most 1–2 per page.
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>
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>
The font I should have removed three asks ago is **IBM Plex Sans**.
Distinctive double-storey lowercase "a" with a curly tail that
the user keeps flagging as unreadable. Used in four themes —
all replaced:
newsprint label : "Inter", "The Future"
manifesto body : "Inter", "Public Sans", "The Future"
linen display : "Hanken Grotesk", "Inter"
linen body : "Hanken Grotesk", "Inter"
almanac display : "Hanken Grotesk", "Inter"
almanac body : "Hanken Grotesk", "Inter", "The Future"
Hanken Grotesk added to the Google Fonts stylesheet (was only in
fallback chains, not actually loaded). Inter was already loaded.
MANIFESTO HERO LINE-HEIGHT — Anton is a tall narrow condensed
display face. At the default 1.02 tight line-height, "THE / DESIGN
/ SKILL." stacked with no breathing room. Bumped to 1.05 for the
manifesto hero display only — gives the multi-line headline visual
rhythm without going soft.
GITHUB STAR BUTTON — three changes:
· **Icon colour** → `#f5b300` (golden yellow, GitHub-star canon)
instead of the active theme's accent. The star is a brand mark,
theme-independent. Stays yellow on hover too.
· **Default count** "0" instead of "—" placeholder. The fetch
still runs in the background (cached 1h); on success the count
updates. On failure the "0" stays put.
· **Closer to Install** — `margin-inline-start: calc(-1 *
var(--space-md) + 0.25rem)` pulls the star back against the
banner's flex gap so the two read as a paired CTA. Other banner
spacing untouched.
Mobile: at <50rem the Install pill hides (existing rule); the
star stays visible and takes the CTA role. At <36rem the star's
internal padding tightens further. No layout shift.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two changes in one pass — site polish + skill expansion.
SITE: Worked-examples rail's first card now aligns with the
section header on initial paint. Was: rail used `padding-inline:
var(--page-gutter)` (~20 px), so Tide started flush against the
viewport's left gutter — out of column with the "02 / EXAMPLES"
label and "Worked examples." title above it. Now uses
`padding-inline: max(var(--page-gutter), calc((100vw -
var(--page-max)) / 2 + var(--page-gutter)))` so the first card's
left edge matches the page-content edge. As the user scrolls
horizontally, cards traverse the full bleed (right edge unchanged
— still extends to viewport). Trailing `::after` spacer also
uses the new `--rail-edge` so the last card snaps to matching
content edge.
SKILL: Added N10 Floating-on-scroll morph to the nav archetype
catalogue plus a dedicated `references/floating-nav.md` recipe.
The pattern: one DOM with two layers — `.nav` (outer) owns the
default bar visuals, `.nav__inner` (inner) owns the floating pill
visuals — cross-faded on a single `.is-floating` class toggle past
a scroll threshold.
Documents the four laws Hallmark refuses to break:
1. Total nav height stays constant (compensate inner shrink with
outer padding-block math), or content below jitters.
2. Visible offset uses `transform: translateY()`, never margin or
padding (those trigger layout and break Law 1).
3. Cross-fade ownership of every shared visual property (background,
border, backdrop-filter, box-shadow). Forget one and you get
ghost effects.
4. Single timing curve across every transitioning property —
`cubic-bezier(0.16, 1, 0.3, 1)` at ~520 ms. Eight curves reads
as eight animations.
Plus the property morph table (10 properties, one curve), the
scroll-handler script with passive listener + rAF throttle +
boolean-flip guard, and an 8-item slop list (the AI-default
mistakes Hallmark must not emit). N10's cookbook entry links to
floating-nav.md and stays brief — the deep recipe lives in one
focused reference file (~80 lines).
Skill grew by ~95 lines; one new file, one updated entry.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two small footer tweaks:
· `.foot--colophon` switches `align-items: stretch` → `flex-start`
so all three columns top-align. Before, the wordmark was
centered vertically inside its column which read as a floating
signature; now it sits at the same baseline as the prose's
first line.
· Inter-column `gap` bumped from `var(--space-2xl)` (4rem) to
`var(--space-4xl)` (10rem). The wordmark now has real breathing
room from the prose paragraphs on desktop. Mobile stack
unaffected.
· Explicit `align-self: flex-start` on the mark column belt-and-
braces against any later flex `align-self` overrides per theme.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The default Specimen and the two themes that previously used the
fake-browser-dashboard mockup (Plume + Halo) now each get a
distinctive hero composition that delivers a real "wow" moment.
· **Specimen → hero-specimen.** Two-column. Left keeps the copy
block (eyebrow, H1, lede, install). Right is a foundry-style
typographic plate: a giant italic Fraunces ℋ (Script Capital H,
U+210B) at clamp(12rem, 24vw, 22rem), positioned with intentional
asymmetric placement on a bordered card, with a "PLATE 01" label
top-left and a mono spec strip ("Fraunces · italic · 144pt /
display optical · ss01") at the bottom. Reads as a real foundry's
specimen sheet — the truest possible hero for an opinionated-
typography skill.
· **Plume → hero-bloom.** Two-column. Right is a layered painterly
composition: a soft warm-rose watercolor wash (inline SVG with a
radial gradient + organic path), an oversized italic "Hallmark."
in Newsreader at clamp(4rem, 9vw, 7.5rem) layered on top of the
wash, plus three small geometric accents (a thin vertical line, a
filled ink dot, an outlined circle). No SaaS chrome. Painterly +
editorial.
· **Halo → hero-orbit.** Two-column. Right is concentric rings + a
glowing centre dot. Five SVG circles of varying stroke width
(thinnest outer, thickest inner), centre dot in --color-accent
with a soft amber box-shadow glow, an accent tick mark on the
outermost ring's top, a thin rule + small spec strip
("HALO · WORKSHOP") at the bottom. The whole ring set rotates
via @keyframes orbit-spin 80s linear infinite — almost
imperceptible, gives the page life. Stops under
prefers-reduced-motion.
Theme remap (one file, three lines in main.js ARCHETYPES):
specimen: marquee → specimen
plume: clipped → bloom
halo: clipped → orbit
The original hero-marquee and hero-clipped templates are
untouched. Pastel still uses clipped. Reversion is one line per
theme — flip the ARCHETYPES entry back.
All three new heroes:
- 2-column at desktop, single-column stack at <60rem
- Pure CSS + inline SVG, no JS
- Theme-aware (currentColor, accent token, mono/serif fallbacks)
- ~270 LOC of CSS across all three, ~95 LOC of HTML templates
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Six items in one pass:
· **Bricolage Grotesque removed** entirely. Distinctive italic-a
forms (curl ear) read as "weird" at section-title scale across
several themes. Replaced per-theme with cleaner alternatives:
Sport → Inter Tight (italic). Riso → Space Grotesk. Almanac →
IBM Plex Sans. Plume → Geist. Manifesto's display fallback
chain swapped Bricolage out for Space Grotesk. Google Fonts
stylesheet URL updated — Bricolage dropped, Space Grotesk and
Anton (italic axis) added.
· **Section heads restructured.** Was: 10rem | 1fr two-column with
the section label ("04 / ANTI-PATTERNS") on the left and the
title on the right. Problem: at narrow widths (and on themes
that override to 6rem | 1fr like Sport), the label was forced
to wrap mid-word ("ANTI-/PATTERNS") and the title felt squeezed.
Now: single-column. Label stacks ABOVE the title with a small
gap. Label gets `white-space: nowrap` so it never breaks. Title
font-size grows from `clamp(2rem, 3vw + 1rem, 3rem)` to
`clamp(2rem, 4vw + 0.5rem, 3.5rem)` since it has full row width.
Sport's per-theme override (was 6rem | 1fr) now also 1fr.
· **Foundations card strokes — fixed.** The gap-as-border pattern
(gap: 0.5px, parent bg showing through) sub-pixel-rounded
inconsistently — col 2/3 boundaries dropped on some themes.
Replaced with explicit 1px right + bottom borders on each card,
plus left + top on the parent. Every divider now renders crisp
at every theme + viewport. Atelier/Salon use a dashed bottom
rule instead, no vertical dividers (matches their borderless
card aesthetic).
· **Worked examples — full bleed to viewport edges.** The rail had
`margin-inline: calc(-1 * var(--page-gutter))` which only
escaped the page gutter, not the page max-width. On wide
desktops the rail still capped at 76rem. Now uses
`width: 100vw; margin-inline: calc(50% - 50vw)` so cards extend
flush to the viewport edges no matter how wide the screen.
Internal scroll-padding still snaps the first/last card cleanly.
· **Study brief pill** — "Paste a design you admire." → "/hallmark
study this landing page". Reads as the actual command the user
would type, matches the Build row's brief style.
· **GitHub star button** added to the nav. Sits beside Install,
styled as an inverse pill (ink fill, accent star, paper text).
Live star count fetched from the GitHub API on first paint,
cached in localStorage for 1h to avoid rate-limit. Falls back
to "★" if the request fails. Counts ≥1000 render as "1.2k" etc.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Big polish pass after user feedback. Breakdown:
CHAPTER RAIL — removed entirely. The sticky left-rail outline added
last pass competed with content rather than helping. HTML, CSS, JS
observer all stripped. Page reads cleaner without it.
SECTION TITLES — shorter, declarative, fits every theme without
two-line wraps:
· 02: "Different briefs. Different bones." → "Worked examples."
· 03: "Five things Hallmark does. One ruleset underneath." → "What it does."
· 05: "Five things Hallmark holds the line on." → "Foundations."
· 06: "One command. Works in every harness." → "Install."
SECTION 03 — every row at the same density.
Build: title now shows `Build (default)` with the `(default)` set
in italic muted serif. Signals users don't actually type `build`.
Study: was a 2-card study-grid (Tide + Tracejam, image + 10-row
DNA each). Compacted to a Build-shaped layout — single example
(brief pill → arrow → Tide thumb on left, 10-field DNA list on
right). Mirrors Build's shape so the section reads at one rhythm
instead of one row dominating.
Audit: full rebuild. The verb-audit.png slop screenshot replaced
with a CSS-only inline slop hero (purple-pink gradient, centered,
Inter family, ✨ sparkle badge, gradient pill CTA) that visibly
embodies every AI tell. Right side dropped the 4-row info panel
for a 5-row checklist: ✗ <problem> → <fix>. Each row names a
specific tell and its Hallmark answer. Reads as "what's wrong /
what to do." Drops the now-redundant audit-flag overlay.
Refine + Redesign: dropped the right-column structured info panel
entirely. The diptych (before/after) now spans full skill-row
body width, each thumbnail roughly doubled in size. New
.skill-row__body--full modifier handles the layout. The
Invocation/Preserves/Touches/Returns lines were redundant given
the lede already says it.
SECTION 05 — Foundations. Replaced the 5-radio-tab pattern with
8 compact cards in a 4×2 desktop grid. Each card: a hand-drawn
SVG icon (~48px, monoline, currentColor stroke for theme-aware
inheritance), a one-word title, a single-line description.
The eight: Type (paired Aa serif + Aa sans), Colour (4 dots),
Space (ruler tick marks), Motion (curve arrow), Voice (4 quote
marks), Layout (2 asymmetric rectangles), Hierarchy (3 bars
decreasing), Restraint (single dot in square).
Responsive: 4×2 ≥60rem → 2×4 ≥36rem → 1×8 mobile. Old radio-tab
markup preserved verbatim inside <template id="section-05-archive
-foundations-tabs"> for one-tag revertibility (same pattern as
Section 04's archived Without/With).
FOOTER — was 64ch (~600px) max-width single column. Reads as a
small floating block on a 1440px desktop. Replaced with a 3-column
flex layout: wordmark left, prose centre (set / catalog / credit
paragraphs), links + 2026 year stamp right. Spans full page width.
Stacks single-column on mobile. `display: flex !important` because
the parent .foot rule (display: grid) was winning the cascade and
overriding even an equal-specificity later declaration.
EASTER EGG — the "1.0× in 3.2s" counter line is gone (the user
didn't actually count clicks, the line claimed false precision).
Header reads `$ hallmark.observe()` (cleaner CLI feel). Punchlines
expanded with new lines — "theme connoisseur." / "easy on the
keys." / "speed-run noted." / "calm down, designer." / "showing
off, are we?" Animation rebuilt — arrival fades + scales (1.015 →
1) over 420ms with cubic-bezier(0.16, 1, 0.3, 1) curve, the
underlying page slightly recedes (scale 0.985 + 2px blur) via a
body.easter-open class so the easter feels like a brief teleport.
Exit mirrors with a 360ms ease-in. Reduced-motion: opacity-only.
FAVICON — unchanged from prior pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three phases of editorial-spine moves landed together:
PHASE C — Pacing.
· End-of-section pull-arrows. Each major section now closes with a
small italic-serif arrow link pulling the eye to the next
section: "See the verbs →" (after Section 02), "See the named
tells →" (after 03), "Read the rules →" (after the new 04),
"Install in your editor →" (after 05). Hairline rule above each
arrow. Hover nudges the arrow forward, recolours to accent.
Theme-aware: editorial themes get italic serif; brutal /
manifesto / sport / terminal etc. switch to body sans uppercase.
· Mid-scroll typographic interlude between Sections III and IV.
Single declarative phrase set in the active theme's display
face on a contrasting paper band: "The page is the demo."
("The page" in italic accent, rest in roman ink). Full-bleed,
centred, generous padding. Pure type, zero motion. Resets
attention before the anti-patterns section.
PHASE D — Slop, by name.
· Replaced Section 04 (Without/With) with a new Anti-patterns
section. Five named tells, each shown as: a number (mono), the
tell's name in italic display with a strike-through (the slop,
visually struck), a description (italic serif muted), and then
the Hallmark fix in clean ink with an accent label. Side-by-
side typography so the contrast IS the design.
The five tells: purple-gradient hero, Inter-as-display, centred
everything, icon-tile feature card, the AI nav.
· Original Section 04 markup preserved verbatim inside a
<template id="section-04-archive-without-with"> wrapper. The
template element doesn't render but keeps the content in the
file for revertibility. To restore the original section: change
the opening <template> to <section class="section reveal"
style="--i:3" aria-labelledby="s4"> and the closing </template>
to </section>, then delete the new Anti-patterns section. (The
archived content uses the vs--notes / vs__panel--dash etc class
names which contain "--" sequences invalid inside HTML
comments, hence the template wrapper instead.)
PHASE E — Chapter rail.
· New <aside class="chapter-rail"> pinned to the left margin on
viewports ≥80rem (1280px). Lists II Examples · III Skills · IV
Anti-patterns · V Foundations · VI Install. Italic serif Roman
numeral + small-caps mono name. Hidden below 80rem so it never
competes with content on narrower screens.
· IntersectionObserver in main.js tracks the topmost visible
section and adds .is-current to the matching link. Active link
brightens to ink colour with accent numeral; inactive links
fade to rule-2 muted. Smooth (one CSS-token transition).
Net editorial gravity:
Banner → 01/23 indicator + dropdown (clean chrome)
Section 02 → "Different briefs. Different bones." + larger cards
Section 03 → unchanged (already strong)
Mid-scroll → "The page is the demo." interlude
Section 04 → Anti-patterns ("Slop, by name.") replacing W/W
Pull-arrows between every section
Chapter rail on wide screens
Footer → colophon (publisher's signature page)
Files changed: index.html (markup) · components.css (chapter rail
+ anti-patterns + interlude theme overrides) · sections.css
(anti-patterns layout + pull-arrow + interlude) · main.js
(chapter rail observer).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The 23-dot strip that occupied half the banner is gone. In its
place: a single text indicator reading "01 / 23 — Specimen" set
in the active theme's display face, with a small caret. Click to
open a compact 6×4 grid of color swatches (no theme names — the
dropdown is deliberately minimal). Outside-click and Escape
close. Theme selection closes and applies in one motion.
Banner before:
HALLMARK V1.0 | INSTALL | marquee · specimen · enrich-A
| (spacer) | Specimen · editorial | [• • • • • × 23 dots]
| shuffle | T
Banner after:
HALLMARK V1.0 | INSTALL | (spacer) | 01 / 23 — Specimen ▾
| shuffle | T
Mobile: ordinal hides at <44rem, theme name + caret remain.
Below 26rem the theme name itself collapses; the caret stays as
a control.
Footer — replaced four archetypes (masthead/inline/index/dense)
with a single colophon ("Ft5"). All 23 themes now use it. The
publisher's signature page traditionally doesn't change across
volumes; structural variety lives in the body, not in the
publisher's mark. Theme variation is now purely typographic
re-rendering.
Colophon block:
Hallmark · v1.0
Set in Fraunces (display), The Future (body), and The Future
Mono (label). Currently rendered in <Specimen>.
Twenty-three named themes across four genres. Twenty-one
macrostructures. Forty component archetypes. Sixty slop-test
gates plus a six-axis pre-emit critique.
Built v1.0 in 2026. Powered by Together AI. MIT licensed.
Source · Install · Top
Old footer templates and CSS are kept in place but no theme
references them — fully dormant. Easy to revert one or restore
specific archetypes later.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
· Remove .banner__stamp ("marquee · specimen · enrich-A") from the
nav header. The live-stamp annotation was clutter — every visitor
saw it, almost none read it. Drop the markup, the CSS block, and
the JS query references. setPressed() is now leaner.
· Add favicon.svg — italic Fraunces "H" on warm-cream square,
inverted automatically under prefers-color-scheme: dark. Linked
in <head> via <link rel="icon" type="image/svg+xml">.
· Section 02 (Examples) — title "Eight briefs. Eight different
shapes." → "Different briefs. Different bones." Tighter, more
declarative, leans into the structural-variety claim. Card size
bumped from flex 0 0 32rem → clamp(32rem, 60vw, 44rem) on
desktop so each card carries more visual weight; mobile bumped
26rem and 84vw. examples-rail gets symmetric scroll-padding-
inline plus a flex 0 0 var(--page-gutter) ::after spacer so the
last card snaps clean to the gutter instead of being cropped by
the bleed margin on the right.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two enhancements that surfaced from real use of v1.0:
PLACEHOLDERS — imagery decisions are now explicit, not fuzzy.
· hero-enrichment.md gains an "Image-need detection" table at the
top. Brief signals map to image strategy: e-commerce / photography
/ food / team / travel / news → photographic placeholders;
SaaS / manifesto / agency / editorial → kit-led imagery; API /
docs / dev-tool / editorial-essay → no imagery; default →
typography-only. Rules call out: never overwrite user-supplied
assets; ask one short question on ambiguity; never invent stock
photos as if they were the final design.
· assets.md gains a "Placeholder strategy" section listing the
source canon in order: Hallmark imagery kit > hand-built SVG >
Picsum (deterministic seed) > Unsplash (keyword-anchored) >
local public/placeholder fallback. Swappability rules are
non-negotiable: TODO comments, single --placeholder-base
constant, alt text describing intended subject not the
placeholder.
· imagery-kit.md is new. The skill ships a manifest pointing at
curated abstract assets hosted on the marketing site
(hallmark-murex.vercel.app/imagery/<category>/<file>) — six
categories: watercolor washes, transparent abstract objects,
editorial ornaments, texture/grain overlays, generic product
silhouettes, pattern fields. The skill stays binary-free; the
output references images by absolute URL with graceful fallback
to hand-built SVG when the asset 404s. Includes CSS recipes for
layered hero composition (transparent PNG, large, off-centre,
z-index 0 behind text), section background wash, decoration,
texture overlay, empty state. Anti-patterns: don't use kit as
literal subject, don't layer 3+ pieces, don't apply same wash
to multiple sections, don't use kit imagery in modern-minimal
genre.
· SKILL.md Step 4 wires the heuristic — "First, does the brief
need imagery at all?" runs before tier selection, defaults to
typography-only.
MOBILE — the responsiveness pass is now codified as gates.
· slop-test.md adds gates 61–65 covering the patterns the
marketing-site responsiveness fix uncovered: image-bearing grid
tracks must use minmax(0, 1fr) (61), root must have overflow-x:
clip on html and body (62), display headers wrap inside long
words via overflow-wrap: anywhere (63), per-theme section-head
overrides include mobile collapse (64), CSS-only radio tab
patterns must not scroll-jump (65). New stamp line: mobile:
pass (36, 59, 61–65).
· responsive.md grows a "Mobile — non-negotiable" section at the
top that consolidates all seven mobile gates as a hard floor.
Test at 320 / 375 / 414 / 768 px before marking complete.
· SKILL.md Discipline 5 expanded — was just "clickable text never
wraps" (gate 59), now broader "mobile responsiveness — every
emit verified at 320/375/414/768" naming all seven gates.
Skill total grew from 6633 → 6890 lines (+257, ~4%). The new
imagery-kit.md is 170 lines, larger than the original ~55-line
plan because it ships the actual CSS recipes for layered hero
composition, section wash, texture overlay, and empty state — the
implementation-grade detail required to hit the "professional
frontend engineer" bar set in the plan.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two changes that lighten the vertical footprint of the Study row:
· On mobile (≤ 48 rem), only the first study example renders — the
second is hidden via .study-card + .study-card { display: none }
inside .skill-row__body--study. Two stacked DNA cards (image +
10-row key/value table each) was eating most of a phone screen
for one verb; one example carries the same point.
· Across all screens: image aspect-ratio 16/10 → 16/7 (shorter
media slot), DNA panel padding md/lg/lg → sm/md/md (one step
lighter), per-row padding-block sm → xs inside .study-card__dna
(tighter row rhythm). Skill-row list panels keep their existing
padding — only the study card gets the tightened density.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Youssef