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 the single full-page custom-04 screenshot for two hero-only shots side
by side, the Cascadia Nightjar sleeper ticket and the Ferns and Fathom
periodic-table tea menu, so the section shows the range without dumping a whole
page. Trimmed the Custom blurb down to the essentials.
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.
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).
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.
README: 147 → 81 lines. Drop the comparison table, the long
"What's distinct" bullet list, the references/ inventory, the
v1.0.0 release-note blockquote, and the duplicate Update section.
Keep the verb table, the example grid, and install paths.
ROADMAP: 201 → 50 lines. Fold the Status/Build/Why-it-matters
tri-headers into one or two sentences per item. Drop the stale
"What's already shipped" list, the "Measurement" section, and
the duplicate Deferred entry. Keep the Won't-do list — that's
where the discipline lives.
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 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.
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>
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>
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>
Replace The Future + The Future Mono everywhere with Geist + Geist Mono — both
local fonts had a single-storey hooked "a" by design, not by faux italic. Strip
the @font-face declarations + preload links. Halo dropdown z-index leak fixed.
Editorial hero proof block strips down to just the CTA. Atelier + Salon now
left-aligned. Skill-row / hero / examples ledes unified to roman serif (italic
removed from every body / lede / intro role to kill the curly italic "a").
Refine verb removed everywhere: SKILL.md, README, landing site, references.
Ask-questions discipline strengthened — Step 1 now always asks, optional answers.
Build subsection wires Podcast loop video; Study uses Calendly screenshot with
re-written DNA fields; Worked-examples 1+2 use Banana Studio + Modern SaaS
loops in place of static thumbs. Landing-page rebrand reverted everywhere.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Section 03 ships as the five-skills showcase (Build · Study · Audit ·
Refine · Redesign), each row with its own structurally-distinct demo.
SKILL.md and references — new disciplines that hold across every verb:
· Pre-emit self-critique on six axes (Philosophy · Hierarchy · Execution
· Specificity · Restraint · Variety) — anything <3 triggers revision
· Honest copy — no fabricated metrics, real numbers or labelled
placeholder, never invent "+47% conversion"
· Locked tokens — no mid-render colour or font-family improvisation
· Re-drawn UI chrome forbidden — never hand-build fake browser bars,
phone frames, code-block windows, IDE chrome
· Clickable text never wraps to two lines on shrink
Slop test grows from 55 to 60 gates (gates 56–60). Pre-emit critique
block sits above the gate sweep. anti-patterns.md gains five new named
entries; responsive.md gains "Clickable text — never wraps" with the
4-step fix order.
Site:
· Studio photographic hero — empty 3x3 placeholder grid replaced with
a 3x2 showcase of six real Hallmark output thumbnails (Static Hour,
NAJM, Tally hero, Nexus, Tracejam, Tally process)
· Studio — strip "· selected work" suffix from section labels
(::after rule removed) and from hero eyebrow COPY
· FAQ section dropped from landing page · CSS removed · Install
renumbered 07 → 06, footer reveal index 7 → 6
· Section 03 Row I (Build) demo swaps Tide → Static Hour
· README — concise intro paragraph, hero showcase swapped to four
new outputs (Static Hour, NAJM, Tally hero, Nexus)
Version bumped to 1.0.0 across package.json, SKILL.md, banner, footer,
JS captions, and the artifact stamp string.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Site:
- Section 04 W/W gap fix: .section gets position:relative, .vs-toggle__input goes position:absolute (top:0, left:0). The hidden radio inputs no longer take grid slots — eliminates the ~36rem of phantom gap that was accumulating between section header and toggle, most visible on Specimen.
- Section 05 Foundations refactor: 5 stacked cards → vertical list + active panel. Click a name (01 Type · 02 Colour · 03 Space · 04 Motion · 05 Voice), the right panel updates. Pure CSS via 5 radios + sibling selectors. Section now fits in ~720 px on desktop. Mobile collapses to accordion via grid `order:`.
- Theme polish:
- Pastel: cool tilt (paper oklch 96% 0.022 285 → 98% 0.008 240); lower-chroma indigo accent. Removes overlap with Plume's warm-cream.
- Studio: portfolio rhythm — section-label gains "· selected work" suffix; hero photo crops 16/7; example-card names italicised; quote block bumped to 4.75rem display.
- Atelier: sketchbook signals — italic optical-size 144 + soft 70 on display; old-style figures in body; "· plate" suffix on section-label; tabular nums on numerals only; "see plate" prefix on example-card open links.
- Sport: scoreboard register — tabular numerals across stat / num / step / dna__v / vs-toggle__num; section-numeral becomes a leaderboard cell with thin top-border + accent tint; sharper sweep easing (cubic-bezier(0.86, 0, 0.07, 1)); hero qualifier set in mono uppercase.
Skill:
- New § "When the brief is a component, not a page" sits before Design flow in SKILL.md. Detects single-component briefs (button / input / card / modal / dropdown / etc.), runs a slimmed flow that keeps pre-flight + genre + theme + 2+1 fonts + state discipline + slop test, but skips macrostructure / enrichment / project-memory append. Outputs the component artifact PLUS an 8-state demo wrapper (.preview.html) so the user sees default · hover · focus · active · disabled · loading · error · success at a glance. Stamps with `component:` prefix to opt out of page diversification rules.
- Contrast & readability gates 46–50 added to slop-test.md (universal, all genres):
- 46 body text < 4.5:1 contrast
- 47 large text / icons / focus rings < 3:1 contrast
- 48 button text colour ≈ background fill (the black-on-black canary)
- 49 --color-accent used as fill but --color-accent-ink missing
- 50 dark surface inheriting the page-default ink colour (ink-on-ink in flipped sections)
- New "Contrast discipline" subsection in interaction-and-states.md with APCA / WCAG computation rules + the surface-flip rule (any background override must also state color).
- Slop-test count 45 → 50 across SKILL.md, slop-test.md, custom-theme.md, redesign.md, README, site copy fixtures.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Themes:
- Coral (modern-minimal) — warm-grey paper, single coral accent, Geist + General Sans pair, pill CTAs. The "Stripe-not-Linear" register.
- Violet (modern-minimal) — near-white + near-black, single quiet violet accent, tight Geist. The Linear voice without copying it.
- Aurora (atmospheric) — dark cool canvas with two cool blooms (cyan top-right, teal-green bottom-left), Sentient body, single cyan accent. The dev-tool-after-dark register.
- Halo (atmospheric) — neutral charcoal canvas with a single warm-amber bloom positioned ONLY around the hero (fixed-attached pseudo-element clipped to top 80vh). Below the hero the page is content-led — less Suno, more "tool you actually work in."
- Plume (playful) — warm cream paper with alternating tinted bands on sections, soft rose accent, hover-lift on cards, friendly motion. Closer to actual playful than Pastel's post-Linear-soft.
Catalog totals: editorial 12 · modern-minimal 3 · atmospheric 5 · playful 2 = 22 themes. Banner picker, THEMES, ARCHETYPES, COPY, and THEME_GENRES maps all updated. README cluster list reorganised by genre.
Study gallery:
- Replaced <video> with <img> in all 4 cards (videos deferred until production-ready). Existing test-page thumbnails serve as the visual; tiles 03 and 04 keep the data-user-content placeholder + DNA scaffold for the user to fill later.
- CSS .study-card__video class kept alongside new .study-card__img selector so the future video swap is one-line.
Theme-count refs (17 → 22) updated across SKILL.md, README, index.html, main.js, T-tooltip, easter-egg punchlines.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Inputs:
- Added an exhaustive "Input field states" section in interaction-and-states.md: state-by-state recipe (default · hover · focus · active · filled · disabled · error · success · loading), input-height = button-height, helper-text reserves min-height: 1lh, controls (textarea / select / checkbox / radio / range / file / combobox) each get their own override notes
- The no-layout-shift rule: border-width is constant across every state; state changes go to background, outline, or box-shadow — never border-width
- Focus ring is `outline: 2px`, never `border` — outline default reserved as transparent so the ring appears with no geometry shift
Fonts:
- 2+1 rule: max three font families per page (display + body + one outlier for wordmark / hero stat / pull quote). Mono counts as a family if used outside code. Same family at different weights = one family.
- Expanded the catalog with 14 more free faces: Instrument Serif, Source Serif 4, DM Serif Display, Bodoni Moda, EB Garamond, Cardo, Spectral, General Sans, Switzer, Cabinet Grotesk, Sentient, Erode, Tanker, Tomorrow, Big Shoulders Display, Anton, Outfit, Commit Mono, Space Mono, IBM Plex Mono — sourced from Google Fonts and Fontshare. Tone-pairing tables now have an "Outlier" column.
Slop-test gates (38 → 45):
- 39: more than three font families on the page
- 40: outlier face used in more than two slots
- 41: input border-width changes between states
- 42: input focus ring built from border instead of outline
- 43: input height differs from adjacent button height
- 44: helper-text container collapses when empty (causes vertical jump on validation)
- 45: disabled input signalled by opacity alone (needs opacity + cursor + aria together)
References to "38 gates / 38-gate / 29-question slop test" updated everywhere (SKILL.md, README, site, JS copy fixtures, redesign verb, custom-theme).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Skill:
- Genres (editorial · modern-minimal · atmospheric · playful) as a top-level rule overlay; signal-based detection in Step 1, theme rotation now scoped to the genre's cluster
- `redesign` on a directory or whole project now produces design.md first and locks every page to that system; diversification rule inverts on system-managed projects
- SKILL.md slimmed 532 → ~440 lines: slop-test gates extracted to references/slop-test.md, per-verb sections to references/verbs/, output contract to references/contract.md, with explicit eager / per-build / conditional / end / verb-specific load buckets
- Worked examples (recipes.md, study-examples.md) moved out of skill/references/ into docs/ — no longer auto-loaded
- audit.md gained design.md drift checks (theme drift · macrostructure-family violation · stamp lies · missing system reference)
Site:
- Quiet theme refreshed to ElevenLabs-style polished minimal (Geist, pure white, pill CTAs, two-column hero)
- New Bloom theme — Suno-style atmospheric dark with twin warm radial blooms, Geist display, single warm accent
- Banner additions: sticky Install link, live stamp callout (hover-expands the CSS comment), genre label after the theme name
- T-key onboarding tooltip after 5s idle (localStorage-flagged so it never returns)
- Decision-trail popover on each example tile (600ms hover delay, pure CSS)
- Foundations cut from 8 cards to 5 (Type · Colour · Space · Motion · Voice)
- FAQ section added: 5 typographic Q/A pairs, editorial format, tightened spacing
- Without/With grew from 1 pair to 4 — writing app · dashboard · pricing card · personal site — with a CSS-only tab toggle
- Scroll-jump fix on the W/W tabs: radio inputs no longer position-absolute, so clicking a tab no longer yanks the page back to top
- How-it-works section folded out, content absorbed by FAQ + Install
- 17 themes (was 16); README and skill references updated everywhere
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Examples gallery promoted from section 07 to section 02 as a full-bleed scroll-snap rail
- Without / With panels share the same eyebrow / H1 / sub / CTA copy; styling carries the difference
- Foundations: 8 cards rewritten in plain English; new illustrations incl. live motion demo (F/04) and a real interactive states button (F/05); mosaic layout with feature + strip spans
- Section 06 Install redesigned as one bordered "manual page" card (I · Run · II · In · III · Then), theme-adaptive
- Hero H1 locked to one fixed string across all 16 themes; only the visual treatment swaps
- Easter egg: spam T ≥14 times in 3.2s and a "chill, designer." overlay surfaces with live counts; any key dismisses, 30s cooldown
- README: Credits section removed; voice-fixtures bullet rewritten to drop the named designer/site list
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The big shift: a custom theme route alongside the 16-theme catalog.
Catalog stays the default. Custom fires only when the brief signals
creative or unique intent (named brand colour, multi-attribute vibe
the catalog can't carry, explicit ask). Vanilla briefs route to
catalog silently — no visible behaviour change.
Custom builds an OKLCH palette + free-font pairing tuned to the
brief, inline at :root, with the same 38 slop-test gates firing as
catalog runs. The freedom is the combination, not the rules.
- New `skill/references/custom-theme.md` — protocol with sections
A-G: trigger signals, palette construction, font pairing,
axis computation, stamp format, log.json shape, three worked
examples (Coffeebox, Loop, Mossroot).
- New `site/_tests/custom/` — three rendered worked examples
matching custom-theme.md § G.
- `SKILL.md` — Step 1 trigger detection, Step 2.6 dispatch, sample
preview block for custom, version 0.6.0 → 0.7.0.
- `study.md` — theme-canon references → theme-catalog (font canon
references intentionally left unchanged).
- Landing footer — drop competitor links (impeccable, kami,
frontend-design); keep GitHub + a quick description. Footer
Influences column removed; stats refreshed (16 themes, 38 gates).
- Site banner v0.2 → v0.7. README adds a current-version line.
- Dense colophon JS — drop influences block, refresh stats and
build date.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## What shipped (Tier 1 of the brainstorm)
1. **Visual-first README** — replaces the text-only top with a 4-up theme grid
(Specimen / Studio / Brutal / Newsprint) and an 8-cell test-page mosaic
(Tide → Cohort) using the existing thumbnails. First impression becomes
*visual* rather than a wall of bullets.
2. **Try-it prompt at the top** — the Coffeebox brief is now the canonical
first thing visitors paste to verify the skill is wired correctly.
References the new `recipes.md` directly.
3. **Comparison table vs the field** — Hallmark vs Anthropic frontend-design,
nexu-io Open Design, Dembrandt. Positions Hallmark's `study` as the
differentiator (everyone else ships preset menus or scrapers).
4. **`study` repositioned as the headline verb** — bolded in the verbs table,
has its own lead-paragraph in the hero, links to the new
`study-examples.md` for worked DNA-extractions.
5. **Canonical 2026 vocabulary** in the README opening: "tactile rebellion"
(Creative Bloq's SEO term), "anti-AI-slop" (925studios canon),
"custom-craft" (the Lottie-as-last-resort stance). Cited.
## New reference files
### `skill/references/recipes.md` (~140 lines)
Eight worked briefs + a canonical try-it prompt. Each shows: prompt verbatim,
inferred trio (audience/use/tone), picked macrostructure + theme + enrichment,
and a one-paragraph excerpt of the output. The first recipe (Coffeebox) is
the canonical try-it prompt the README points users at. Recipes 01–08 are
the existing eight test pages, normalised to the same four-line format.
### `skill/references/study-examples.md` (~210 lines)
Three worked DNA-extractions of `study`:
- **Example A** — Pentagram-style editorial portfolio: extracts Specimen
macrostructure + italic-display + warm-orange accent + sparse density.
Refuses font ID. Notes two anti-patterns to NOT carry over.
- **Example B** — Klim-Type-Foundry-style specimen: Type Specimen + display-
heavy + dark-paper + chromatic-other accent. Single-font specimen page.
Suggests hybrid (Specimen homepage + Workbench for case studies).
- **Example C** — Rauno-Freiberg-style personal site: refuse-or-proceed
check fires (competitor portfolio). After user confirms public reference,
extracts Long Document + centred demo + dark-cool paper + chromatic-other
green accent. Notes one anti-pattern to fix (no reduced-motion fallback).
Each example follows the same four-step protocol: refuse-or-proceed →
diagnose → confirm → build. Demonstrates the skill's discipline that
`study` extracts DNA, not pixels.
## SKILL.md updates
- Adds `recipes.md` and `study-examples.md` to the references list with
load-on-demand notes (when the user asks "what does Hallmark output look
like?" → load recipes; when running `study` → load study-examples).
- No version bump (no behavioural change yet).
## docs/
New `docs/img/` folder with four theme captures at 900px wide:
- theme-specimen.png — warm cream + italic Fraunces + warm-orange
- theme-studio.png — cool grey + italic Fraunces + forest-green
- theme-brutal.png — stark white-and-black + Inter Tight 900
- theme-newsprint.png — warm cream + Playfair Display + deep red
These sit in the README hero <table> for the 4-up grid.
## Skill files mirrored
cp SKILL.md, recipes.md, study-examples.md to ~/.claude/skills/hallmark/.
References dir now has 18 files (was 16).
## Plan file updated
`/Users/youssef/.claude/plans/...` rewritten with concrete Tier 2 (DTCG
tokens.json export · macrostructure rotation hints · ASCII preview block)
and Tier 3 (theme knobs · pre-flight inference · Figma MCP recipe)
implementation specs. Each item has scope, file budget, verification, and
recommended order. Ready to execute when the user wants either tier.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Static-deployed via Vercel from /site/ (no build step). Two README hooks
added: a hero "Live demo" line near the top, and a paragraph in the
Install section pointing at the URL alongside the local-server snippet.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Seven of Hallmark's 16 themes had warm-cream paper (Specimen, Atelier,
Newsprint, Salon, Linen, Studio, Riso). Switching themes felt
monochromatic — too many cards from the same hue band. Two converted:
## Linen — warm linen-yellow → cool slate
- paper: oklch(89% 0.022 95) → oklch(91% 0.012 220) (cool, slightly cooler L)
- accent: oklch(46% 0.06 95) → oklch(40% 0.12 232) (steel-blue, more chroma)
- ink: tinted toward the cool side at hue 215-220
- Display still IBM Plex Sans (geometric-sans is Linen's identity)
- Same fabric voice, different dye. Sits at the calm cool-paper end.
## Studio — warm cream-yellow → cool grey
- paper: oklch(96.5% 0.014 95) → oklch(96.5% 0.005 200) (cool grey, very subtle)
- ink: tinted toward hue 205 (cool)
- Forest-green accent KEPT (oklch 46% 0.140 145) — Studio's identity.
The pairing of cool-grey paper + green accent reads as a research
studio rather than a warm-bohemian-studio.
- Italic Fraunces display KEPT — typographic identity unchanged.
- Card shadow hue updated from warm 100 to cool 205.
## Result
Theme palette now spread across:
- Warm: Specimen, Atelier, Newsprint, Salon, Riso
- Cool: Linen, Studio, Garden, Almanac, Pastel, Sport
- Neutral: Brutal, Quiet
- Dark: Midnight, Terminal, Manifesto
No single hue band dominates the cycle.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Tracejam (test 05) defects fixed
- Horizontal scroll suppressed via `html { overflow-x: clip }` + `body` fallback
- Navbar items vertically centered (`align-items: center`, `line-height: 1`)
- Wordmark switched from Geist to Fraunces (`--font-wordmark`) — different register from body
- Hero highlight raised from baseline to mid-x-height — reads as highlighter, not fat underline
- Browser-frame chrome dots get `aria-hidden="true"`
## Skill hardening — three new slop-test gates (35 → 38)
- **Gate 36**: page must not horizontally scroll on any viewport 320–1920 px
- **Gate 37**: decorative effects on text (highlighter / accent stroke / mark) must be visually verified at x-height, not baseline
- **Gate 38**: interactive bars must declare `align-items: center` + `line-height: 1`
## New reference rules
- `layout-and-space.md` § Page-edge clipping — global clip is mandatory under any clipped-edge enrichment
- `typography.md` § Wordmark / logo — wordmark may use a different display face; should on Bento / Stat-Led / Workbench / Marquee Hero
- `microinteractions.md` § When to ship motion by default — default-on for SaaS-shaped archetypes, default-off for Editorial / Manifesto / Letter / Quote-Led / Long Document; six recipes documented (number reveal, pricing lift, marquee, stagger, recommended-tier pulse, CTA hover)
- `macrostructures.md` § SaaS page sequence — hero → social proof → features → testimonials → pricing → FAQ → CTA → footer; with voice rules (real prices, specific testimonials, conversational FAQ)
## Meridian Manifesto (test 04) extended
7 sections → 11 sections. Added § What we refuse (anti-list with strikethrough), § Working rules (7 numbered operational principles), § The practice (3-paragraph narrative with drop-cap), § What we read (annotated bibliography with 8 titles). Voice consistent with the original manifesto — declarative, no testimonials, no pricing.
## Two new SaaS-focused tests
- **Test 07 — Foundry** (Stat-Led + Newsprint). SOC2 / ISO27001 compliance automation. Hero is one giant number ("847" — animated counter from 0). 9 sections incl. 3-tier pricing, 3 testimonials with role + company, 8-question FAQ. Pricing card hover-lift + recommended-tier pulse-once.
- **Test 08 — Cohort** (Marquee Hero + Salon). Cohort-based courses platform. Continuous-scroll marquee of course titles. Alternating-side feature rows with hand-built CSS visualisations (card-stack, hours grid, thread, report). Stagger-reveal on testimonials. 2-tier pricing, 6-question FAQ, centered Salon footer.
Both tests respect prefers-reduced-motion. Both pass the 38-gate slop test. Both demonstrate the new SaaS page sequence.
## Gallery thumbnails
`site/_tests/_thumbs/01–08.png` — eight 1024×640 screenshots captured via Chrome headless. Gallery cards on the landing page now show real visual previews above the text. Cards inherit theme tokens (radius, rule, shadow) so switching the landing page's theme reskins the card frames around the screenshots. Hover scales the thumb 1.025× over 500 ms; respects prefers-reduced-motion.
Section title updated: "Six pages, six different shapes." → "Eight pages, eight different shapes."
## SKILL.md version bump
0.5.0 → 0.6.0.
## Files
- 13 modified, 6 created (tests 07 & 08 directories), 8 thumbnails added.
- ~840 lines added, ~25 removed.
- All skill files mirrored into `~/.claude/skills/hallmark/`.
## Deferred to next session
- **Study + redesign combined verb** — single-shot screenshot-to-rebuilt-page.
- **Auto-generated OG cards** — Node + Puppeteer utility for 1200×630 PNG from macrostructure stamp.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Implements all twelve Tier 1, 2, and 3 items from the test-suite
findings (skipping #12 study+redesign and #14 OG cards, both deferred).
Aim: tighten the gaps the six-test exercise surfaced — copy voice,
theme diversification, sub-domain disambiguation, mobile collapse,
illustration recipes, accessibility gates.
SKILL.md (items 3, 6, 10, 11). Version 0.4.0 → 0.5.0. New step 2.5
documents reading .hallmark/log.json before macrostructure pick;
Step 5 (Build) now writes to that file after each output. Theme-
diversification rule expanded: two consecutive themes must differ on
at least one of paper-band / display-style / accent-hue. Slop test
33 → 35 with two new gates: different-knobs check and
aria-label/aria-hidden presence on visual-only SVG / div / canvas.
macrostructures.md (item 1). 21 macrostructures each gain 2–3
example opening-line copy fragments — drawn from Pentagram, Klim,
Linear, Are.na, Resend, Craig Mod, Rauno Freiberg, Tracejam,
Maple Bakery, Anya, Streampipe, Meridian. Imitate the kind of
specificity (named places, dates, verticals; refusal of metaphor),
not the wording.
structure.md (item 2). Domain → trio table refined: developer-docs
split from SaaS-marketing; personal one-pager split from work-led
portfolio. Plus a clarifying note on splits and when to ask one
disambiguating question before picking.
typography.md (item 4). Pairing table doubled: each of 8 tones now
gets a Free baseline row (Geist, Fraunces, Bricolage Grotesque,
JetBrains Mono, system-ui) and a Paid upgrade row (Söhne, Tiempos,
Druk, Berkeley Mono, ABC Diatype). Discipline note: never name a
paid font without confirming the user is licensed — the demo will
fall back to system-default and look broken.
hero-enrichment.md (item 5). Each E1–E8 archetype gains a 4-6 line
worked example: Tracejam clipped-edge, fashion lookbook full-bleed
loop, Linear-style mockup split, code-formatter floating mockup,
Maple Bakery custom illustration, whiteboard CSS-orbit loop, podcast
gradient + grain, Lisbon café photography. Examples reference real
test pages where they exist.
copy.md (item 8). New "Voice samples per tone" section: 7 tones,
3 voice patterns each, 5–8 example sentences per tone (105+ samples
total) drawn from real non-LLM sources. Plus a banned-opening-lines
table — "Built for the modern team", "Unleash your X", "Where X
meets Y", "Empower your...", and 6 more — each with a one-line
reason it fails.
component-cookbook.md (item 9). Single comprehensive Mobile Collapse
table at the end documents all 36 archetypes' collapse behaviour at
60rem (layout breakpoint) and 40rem (typography breakpoint). Plus
five cross-cutting rules (44px hit targets, container padding,
disable scroll-linked motion, lazy-load below-fold, data-saver
respect).
custom-craft.md (item 7). New Recipe library section adds four
hand-built illustration recipes after the existing bakery loaf:
(1) workflow / process diagram with animated stroke-dashoffset flow,
(2) minimal-line mascot with @keyframes blink loop, (3) three-tier
architectural diagram with @property --flow-offset data flow,
(4) botanical leaf flourish (no animation — the design is the
stillness). Each recipe is full code, "use when / avoid when",
reduced-motion fallback, and named real-world inspiration. Plus
a Cross-recipe techniques callout summarising the four habits of
hand-built CSS/SVG illustration in 2026.
site/index.html + components.css (item 13). New section 07 ·
Examples on the landing page links to the six self-contained
test pages under site/_tests/. Six gallery cards display the
test number, name, macrostructure stamp shape, one-line description,
and a "View ↗" affordance. The cards inherit --radius-card,
--rule-card, --shadow-card from the active theme — switching themes
restyles the gallery alongside everything else. Footer slot's --i
shifted from 6 to 7 to preserve reveal-stagger ordering.
README.md updated to reflect: 35-gate slop test, project memory,
theme-diversification rule on three axes, voice fixtures over
LLM defaults.
Defers: #12 study+redesign combined verb, #14 auto-generated OG
cards. Both ready to plan when the user wants them.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The skill now knows how to add hero visuals — demo videos, mockups,
illustrations, animated loops, abstract backgrounds, photography — and
when not to. The default answer remains typography-only; enrichment
has to earn its place.
Three new references. hero-enrichment.md is the decision file: an
enrichment hierarchy (typography → custom CSS art → hand-built SVG →
generated illustration → library + customise → Lottie last resort),
a brief-domain decision protocol (SaaS → demo video, bakery → custom
illustration, manifesto → none), eight enrichment archetypes (E1
clipped-edge demo video with the full Linear/Vercel recipe, E3/E4
mockups, E5 custom centerpiece, E6 custom animated loop, E7 subtle
gradient + grain background, E8 photography), and an eight-question
quality bar. custom-craft.md is the how-to-build-it file: pure CSS
art (Lynn Fisher / Diana Smith canon — clip-path, conic-gradient,
@property, mask, blend-mode), hand-built SVG with the Figma → SVGOMG
pipeline and declarative animation via CSS keyframes / @property /
animation-timeline / View Transitions, JS-driven motion with the
Motion / GSAP / AutoAnimate decision rule, Three.js when the 3D is
the hero value not when it isn't, generated stills via Nanobanana 2
and Recraft V4 with discipline (always post-process, reference images,
stamp the model), and Lottie explicitly demoted to last resort with
the rule "never for what CSS can do". A bakery worked example shows
all of it. assets.md is the sourcing canon: Lucide / Phosphor /
Heroicons (icons, never mix sets), Simple Icons / SVGL (logos),
Storyset / Humaaans / unDraw (library illustration with mandatory
customisation), Browserframe / Ray.so / Cleanmock (mockups), Mixkit /
Coverr / Pexels (video with the AV1 → VP9 → H.264 codec chain and
fetchpriority="high" rule), Unsplash / Nappy / Shotstash (photography),
CSS gradients + fffuel.co (abstracts, no aurora), LottieFiles / Rive
(last resort).
Three new hero archetypes in component-cookbook.md (H7 clipped video,
H8 mockup split, H9 custom illustration centerpiece) with within-
archetype variation knobs added to the table.
Eight new tells in anti-patterns.md: aurora-blob background, floating-
orb decoration, sound-on autoplay, lazy-loaded LCP, mismatched icon
sets, AI-illustration look, Lottie shortcut, Three.js for a still
object.
Slop test 29 → 33 with four hero-enrichment gates: video autoplay
discipline, abstract-background restraint, single-icon-library check,
and the Lottie-shortcut catch.
SKILL.md design flow gains Step 4 "Decide on hero enrichment" between
the macrostructure pick and the build, with the enrichment hierarchy
as a non-negotiable. Frontmatter version bumped to 0.4.0. New refs
listed as load-on-demand.
Sixteenth theme: Quiet. Restraint as the design — system fonts
(no web fonts loaded for Quiet), barely-warm near-white paper
(oklch 99.5% 0.002 90, deliberately not pure #FFFFFF), barely-cool
near-black ink, accent equal to ink (no chromatic accent at all),
average-sized headlines (clamp 1.75–2.75rem, much smaller than the
3.5–8rem of every other theme), generous whitespace (section-gap
12rem). Hero archetype: Letter. Footer: Inline. No reveals — Quiet
is intentionally still. A deliberate exception to Hallmark's "pair
distinctive display + body" rule, which the theme tokens block calls
out explicitly. The user spec was "the most simple you can make it";
Quiet is.
Landing page demonstration of E1: Pastel theme now renders the
clipped-edge dashboard mockup as its hero instead of Letter. The
mockup is hand-built CSS art — no real video, no images. Browser
chrome (three dots, hallmark.studio URL), a sidebar with the active
item in indigo accent, a 3-card grid showing a stat, a sparkline, and
a rows card. Tilted -0.4° for life. Extends ~12vw past the viewport
right edge. Collapses to stacked at < 60rem. The implementation IS
the custom-craft principle: built, not picked.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Instrument Serif italic has a single-storey looped lowercase 'a' that
read as unfamiliar. Fraunces' italic is a conventional double-storey
italic with cleaner letterforms. As a bonus, Fraunces is already named
first in Specimen's font chain — Specimen has been silently falling back
to Georgia. Loading Fraunces means Specimen finally renders in the serif
it was meant to.
Studio's display tokens point at Fraunces with opsz 144 + SOFT 30 for
the editorial-agency feel; the rest of the typography stack is unchanged.
README is rewritten to be roughly 30% shorter. Each reference file is
no longer enumerated; the directory link is the source of truth. The
philosophy section is condensed into six bullets. The credits section
is reformatted as a list with the contribution each project made,
and adds Anthropic's Skill Engineering writeup as a load-on-demand
inspiration.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two changes that both move the skill toward useful-without-being-rigid.
Design-context gate is now askable but skippable. Audience + use-case + tone
is still the right way to start a build, but the gate that demanded all three
in one round of Q&A made the skill feel inquisitorial for users who just
want a page. The new flow asks once and offers an explicit opt-out
("or say 'go ahead' and I'll infer"). If the user opts out, the skill
infers from the brief, **states the inferences in one sentence at the top
of the reply**, stamps them in the CSS comment, and proceeds. Specimen
fall-through is still banned on inferred briefs — laziness doesn't unlock
defaults, just transparency.
The fifth verb: hallmark study. The user attaches a screenshot of a design
they admire and the skill returns a diagnosis report — macrostructure,
hero/pitch/footer archetypes with their variation knobs, type-pairing role
(never a guessed font name), surface lightness band, accent hue band and
footprint, density and asymmetry verdicts, distinctive treatments, anti-
patterns to skip. Then it asks: "build with this DNA, or change one axis
first?" Build only happens after confirmation, with a stamp that records
DNA-source and studied: yes.
study is positioned against pixel-cloning by design. The new
references/study.md spells out:
- a refusal table (paid templates, competitor pages, copyrighted artwork
trigger refusal; user's own work and public references proceed; ambiguous
cases get one disambiguation question)
- a five-step extraction protocol (surface → type → structure → motion →
rhythm) with what to look at in what order
- a structured-fields schema the model fills out, then renders for the user
- a type-role vocabulary (italic editorial serif, heavy condensed sans,
monospace dev, etc.) so the skill names roles instead of guessing exact
fonts from screenshots, which is unreliable about half the time
- a theme-mapping table from extracted DNA to the 15 named themes
- a worked example (a Split Studio reference → diagnosis report → build
with a Studio-themed Hallmark page)
- limits the skill must state to the user (fonts can't be IDed, imagery
isn't copied, theme drift is allowed, one screenshot per study)
- a hand-off section (study → default for fresh builds, study → redesign
for refactoring an existing page)
README and the landing page's "How it works" callout updated to mention
the verb. SKILL.md frontmatter version bumped to 0.3.0.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The 12-theme popover was congested when opened inline in the
navbar. Now it lives as a floating chip in the bottom-left corner:
always reachable on desktop and mobile, popover opens upward, and
the navbar is a clean two-column wordmark + meta layout.
- index.html: themer markup moved to end of <body>, navbar simplified
- components.css: .themer is position: fixed with bottom/left anchors,
popover opens upward (bottom: 100% + 0.5rem), responsive grid
collapses to 2 columns under 60rem
- sections.css: removed .nav__themer rules; .nav restored to flex
space-between
- README.md: rewritten concise + complete, mirrors the v0.2.0 surface
(10 reference files, 12 themes, 4 verbs, 20-question slop test)
Anti-AI-slop design skill for Claude Code, Cursor, and Codex,
plus a self-demonstrating landing page powered by Together AI.
- 4 verbs: default / audit / refine / redesign
- 10 reference files including microinteractions and structure
- 12 themes with structural fingerprints
- Two test specimens: bakery (editorial) and cmdk (technical)
- 20-question slop test covering visual, structural, and microinteraction tells
Youssef