External/hallmark
1
0
Fork 0
mirror of https://github.com/Nutlope/hallmark.git synced 2026-08-14 12:35:33 +02:00
Code Issues Packages Projects Releases Wiki Activity
138 Commits 12 Branches 0 Tags
main
Commit Graph
138 Commits
This Branch
This Branch
All Branches
Author SHA1 Message Date
Youssef 792b69c86f v0.9.0 — Editorial theme · watercolor sprinkle · generated-imagery skill rules 
Three workstreams shipped together:

A · Editorial theme (#23) — open-design-inspired premium
- Warm cream paper · coral accent · Inter Tight 800 + Playfair italic emphasis
- Mixed serif/sans inside display headings (em → Playfair italic)
- Roman-numeral marginalia, hairline rules, asymmetric grids
- Banner dot, COPY entry, ARCHETYPES + GENRES wired
- Joins editorial cluster · catalog 22 → 23

B · Marketing-site watercolor sprinkle (18 plates · ~$2.50 generation cost)
- One seeded reference (_seed-reference.png · seed=7727 · google/gemini-3-pro-image)
  passed via reference_images[] on every subsequent call so every plate shares one hand
- Each subject is a CONCEPT VISUALIZATION for its section (Contra Labs lesson):
  hero = the rulebook · transitions = eight folded papers / draft+final cards ·
  foundations panels = serif G with grid · 4-wash colour study · plan · brushstroke ·
  marginalia · install harnesses = sealed letter · drafting compass · medieval codex ·
  footer = wax-seal mark · plates = bakery / podcast / architecture / manifesto
- Theme-aware blend modes: warm-paper themes get full presence (multiply, 0.95);
  dark themes get screen-blend ghost trace (invert + hue-rotate, 0.18); high-contrast
  themes get desaturated multiply
- Less-text refactor on Examples + Study + Install copy

C · Skill image-generation system
- skill/references/generated-imagery.md (NEW) — the seed-and-reference rule, 23-theme
  style-prompt table, post-processing checklist (grain · asymmetric crop · accent-shift ·
  optional frame), provenance stamp, three user paths (packs · own-key recipe · planned
  free-trial endpoint)
- hero-enrichment.md Tier C rewritten — promoted from "last resort" to peer of Tier B
  when seed-and-reference + post-processing discipline followed
- assets.md Tier C catalog updated — Gemini 3 Pro Image / Nano Banana Pro listed as
  the 2026 default, hosted via Together AI ($0.134/2K)
- anti-patterns.md "Raw generated stills" added to Critical bucket
- skill/_assets/scripts/generate.mjs (NEW) — drop-in 200-line Node script users copy
  into their project; reads TOGETHER_API_KEY from .env.local, looks up locked theme
  prompt, generates seed reference on first run + caches URL, writes ./img/generated/

D · Open-design steal utilities (any theme can use)
- Roman-numeral section-head variant (.num--roman)
- Corner-bracket image annotation (.fig-corners + 4 corner spans)
- Dark-slab section reversal (.section--invert)
- Pulse animation (.pulse, 2.4s opacity breathe, reduced-motion fallback)
- .tnum tabular-numerals utility (applied to banner version + dates)
- Smart-hide-on-scroll banner stub (.banner--smart)

E · Catalog count refresh
- 22 themes → 23 across SKILL.md, custom-theme.md, structure.md fingerprint table,
  README.md, site/index.html, site/js/main.js (HERO_TITLE comment, COPY)
- Version 0.8.0 → 0.9.0 in SKILL.md frontmatter, banner version badge, dense
  colophon stat line, README

Generation pipeline pieces:
- scripts/generate-marketing.mjs — one-shot script with seed-locking + retry on 5xx +
  skip-if-exists. Generated all 18 plates including 1 reference + 17 sprinkles.
- .env.local + .gitignore set up. Key never echoed.

Deferred to follow-up before launch:
- Per-theme pre-generated packs (4 imgs × 23 themes = ~$13 · ~20 min)
- /api/generate Vercel Edge Function with IP rate-limit + $5/day budget cap
- "Try one" button on the marketing site

Total cost so far: ~$2.50 in Together AI image generation.
 2026-05-05 11:39:02 +01:00
Youssef e5db0255dd Revert Section 03 Before/After gallery 
Removed the gallery and all 5 before/after test fixtures + thumbnails. Hallmark's
typography-only outputs read as visually quieter than Sonnet's defaults — by design
(decoration must earn its place), but it makes for an unflattering side-by-side at
first glance. Bad marketing surface even if the discipline is right.

- Reverted site/index.html Section 03 → restored the Study section.
- Reverted site/css/sections.css → removed the .ba__ block.
- Deleted site/_tests/before-after/ entirely (5 briefs × 2 outputs + 10 thumbnails + capture script).
 2026-05-04 19:22:17 +01:00
Youssef e329dffd5c Section 03 → Before · After gallery (real Claude Sonnet runs, with and without Hallmark) 
Replaces the Study section with a 5-brief comparison gallery built on real headless
`claude -p` runs:

- 5 fresh briefs (Tide coffee · Streak habits · Lattice studio · Loom indie game · Anchor SaaS).
- BEFORE: Hallmark moved out of ~/.claude/skills/, ran `claude -p --model sonnet`.
- AFTER: Hallmark restored, same prompt prefixed with "Use the Hallmark skill at SKILL.md".
- Both sets of HTML committed under site/_tests/before-after/0X/{before,after}/index.html
  so the source is browsable.
- 1280×800 thumbnails captured with headless Chrome (script: site/_tests/before-after/_capture.sh).
- Stripped preamble leaks where the model added commentary above <!doctype>.

Section 03 markup mirrors the W/W and Foundations radio+sibling pattern:
- 5 hidden radios, tab strip, side-by-side BEFORE | AFTER below.
- Brief text shown above each comparison.
- Each thumbnail links to the live HTML; Hallmark stamp summarised in caption meta.
- Mobile: tabs scroll horizontally, columns stack.

The five AFTER outputs span 5 different macrostructures (Long Document, Bento Grid,
Marquee Hero ×2, Stat-Led), 5 different themes (Linen, Pastel, Atelier, Bloom, Quiet),
3 different navs (N5, N7, N9), and 4 different footers (Ft5, Ft6, Ft7, Ft8) — actual
diversity, not faked.
 2026-05-04 19:12:52 +01:00
YoussefandClaude Opus 4.7 2f2c59e142 Copy refresh — README + landing page stats reflect new nav/footer/hero archetypes 
README:
- "Latest" line names the 9-nav · 8-footer · 4-hero-polish additions, the 5 new slop-test gates, and the Terminal cursor constraint.
- references/ blurb updated: 40 component archetypes (was 36), with the 9 nav · 8 footer breakdown called out.
- site description gains "different nav archetype" alongside hero/footer.

Landing page stat refresh (factual, not design):
- index.html footer index card: 22 themes · 21 macros · 40 archetypes · 9 navs · 8 footers · 4 hero polish · 55 gates.
- main.js Specimen proof block: 21 macros · 40 archetypes · 9 navs · 8 footers · 4 polish · 55-gate test.
- main.js Almanac proof block: same refresh; "252" combinations bumped to 462 (21 × 22 — was using the old 12-theme count).
- main.js Newsprint lede: "Twelve themes" → "Twenty-two themes"; "Thirty-two archetypes" → "Forty"; "50-gate" → "55-gate".
- main.js dense colophon: same set of stat fixes.

Skill:
- SKILL.md component-cookbook description: 32 → 40 archetypes with the breakdown.
- SKILL.md theme list: completed to all 22 themes (was truncated at 17 names).
- custom-theme.md: 16 → 22 themes, list completed; "17th theme" → "23rd theme".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-04 15:08:39 +01:00
YoussefandClaude Opus 4.7 85dd1a42a7 Hallmark skill — N5–N9 navs · Ft5–Ft8 footers · HP1–HP4 hero polish · Terminal cursor constraint · gates 51–55 (55 total) 
Skill-only changes (no demo-site touches per user direction):
- component-cookbook.md: Navigation 4→9 (N5 Floating pill · N6 Newspaper masthead · N7 Brutal slab · N8 Terminal command · N9 Edge-aligned minimal) + Footers 4→8 (Ft5 Statement · Ft6 Letter close · Ft7 Newsletter-first · Ft8 Marquee scroll), each with code, real-world refs, anti-patterns, and routing tables per genre.
- hero-enrichment.md: HP1 Vertical-rail · HP2 Marquee-overflow · HP3 Cursor-spotlight · HP4 Decorative-numeral, plus a Hero space discipline subsection (footprint 70–90%, padding-block-end ≥ 1.3× start, no centred-everything, one polish pattern max).
- structure.md: theme fingerprint table extended to all 22 themes with Nav + Footer columns; Terminal "no standalone cursor" constraint codified.
- microinteractions.md: Caret blink rule rewritten — cursor allowed only INSIDE typed commands, never as standalone decoration.
- anti-patterns.md: "The AI nav" + "The AI footer" entries name the genre-blind fingerprints to refuse.
- slop-test.md: gates 51–55 (Nav fingerprint · Footer fingerprint · Hero centred-everything · Hero padding asymmetry · Decorative-without-purpose). Header 50→55.
- SKILL.md: Step 2 gains nav + footer pick + diversification rule; component-scope flow clarifies skip; gate count 50→55.
- 4 genre files: each gets a "Nav and footer voice" routing block.
- macrostructures.md: cross-references HP1–HP4 + nav/footer from component-cookbook.

Tests: skill/_tests/nav-footer-variety/{01..05} — 5 fresh briefs (podcast · CLI · atmospheric SaaS · photographer · B2B SaaS) demonstrating 5 different navs (N5–N9), 5 different footers, and 4 different hero polish patterns. The Terminal output places its caret only inside typed commands.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-04 15:02:36 +01:00
YoussefandClaude Opus 4.7 ac3a94f90e W/W gap fix · Foundations refactor · 4 theme polishes · component-scope flow · contrast gates (50 total) 
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>
 2026-05-04 13:57:32 +01:00
YoussefandClaude Opus 4.7 28ff81b8e4 Study section: 4 tiles → 2 (drop user-content placeholders) 
Tiles 03 and 04 (data-user-content placeholders for user-filled DNA)
removed. Section now shows just Tide + Tracejam. Intro copy updated:
"four Hallmark-built pages" → "two Hallmark-built pages".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 23:37:23 +01:00
YoussefandClaude Opus 4.7 e63e28b782 Add 5 themes (Coral · Violet · Aurora · Halo · Plume) → 22 themes total · study tiles use <img> 
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>
 2026-05-01 23:01:00 +01:00
YoussefandClaude Opus 4.7 4b76eb0e3c v0.8 polish — Cohort fix · component exports · study gallery 
Cohort:
- Headline rewritten: "Live courses, sized for the class you actually have." (was a contorted "the size your roster actually is")
- Stat shrunk: clamp(6rem, 22vw, 22rem) → clamp(5rem, 14vw, 13rem). Still heroic at 208px max but no longer dominates the page

Component library exports:
- skill/references/export-formats.md (NEW) — defines the canonical mapping from Hallmark tokens to four formats: tokens.css, Tailwind v4 @theme, DTCG tokens.json, shadcn/ui CSS variables. Includes worked examples for editorial + modern-minimal themes.
- SKILL.md Step 6 — every build now ALWAYS emits a tokens.css alongside the page CSS. Page CSS imports it; never inlines token values. design.md projects additionally embed all four formats inline in the design.md Exports section.
- redesign.md design.md template — added the Exports section showing all four code blocks. User copies whichever they need into the next project.
- No new verb. Always-on, zero friction.

Study gallery on marketing site:
- New section 03 (between Examples and Without/With) demonstrating what `hallmark study` extracts. Four tiles, each pairing a video-shaped media slot (autoplay-muted-loop with poster fallback) with the structured 10-field DNA panel.
- Tiles 01 + 02 filled in (Tide → Letter macrostructure / italic editorial serif; Tracejam → Workbench / soft geometric sans / cyan accent).
- Tiles 03 + 04 are scaffolded with placeholders + data-user-content marker for the user to fill later.
- Sections renumbered: Without/With 03 → 04, Foundations 04 → 05, FAQ 05 → 06, Install 06 → 07. --i reveal indices and section labels updated.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 22:52:23 +01:00
YoussefandClaude Opus 4.7 4eff622a8a Polish + 2+1 fonts + input-state discipline (45-gate slop test) 
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>
 2026-05-01 22:10:33 +01:00
YoussefandClaude Opus 4.7 b9f33a8f7d v0.8.0 — bump version everywhere (skill, README, site banner, footer, stamp examples) 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 21:18:55 +01:00
YoussefandClaude Opus 4.7 99e7a065af v0.8 — genres, design.md, lazier loading, two new themes, site rework 
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>
 2026-05-01 21:08:42 +01:00
YoussefandClaude Opus 4.7 03f0525369 Easter egg: trim copy + tighter timing · 15s re-trigger cooldown 
- Removed the "16 themes" / "no theme 17" lines so the punchline lands fast
- Three lines total now: command, count, punchline
- EASTER_VISIBLE_MS 4200ms → 3400ms (less to read = less hold time needed)
- Re-tuned line stagger delays for the trimmed timeline; cursor blink starts at 1.15s
- Cooldown between triggers dropped from 30s to 15s so users can re-summon it sooner

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 18:19:43 +01:00
YoussefandClaude Opus 4.7 da98a233c5 vercel.json — point GitHub-triggered builds at site/ 
The previous push deployed an empty production build (404) because
GitHub-triggered builds use the repo root, but index.html lives in
site/. Manual `vercel --prod` runs from inside site/ worked, but the
auto-deploy needs an explicit outputDirectory.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 18:12:27 +01:00
YoussefandClaude Opus 4.7 e97604752e gitignore .vercel — auto-deploy on push wired to Vercel 
Connected the local repo to the existing Vercel project (Luffixos/hallmark)
via `vercel link` + `vercel git connect`. The webhook will now fire on
every push to main and trigger a production deploy at hallmark-murex.vercel.app.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 17:49:54 +01:00
YoussefandClaude Opus 4.7 2379a5ca78 Section 03 + easter egg fixes — slop panel theme-adapts · easter actually fires 
- Section 03 "Without Hallmark" panel no longer hardcodes #fff bg; uses var(--color-paper) so Manifesto / Midnight / Terminal / Brutal don't show a jarring white box mid-page (the AI-slop tells are still carried by the gradient title, Inter, centred layout, pill CTA)
- Removed four dead per-theme .vs__col:first-child colour overrides (Manifesto / Sport / Brutal / Terminal) — they were painting the old CSS-mockup column, now clashing with the panel-based demo
- Easter egg fix: previous version showed for one frame and was dismissed by the next autorepeat keydown. Now swallows every key while open, auto-dismisses after 4.2s with a fade-out, threshold lowered to 12 so it triggers reliably
- Easter visual: solid #fff, system mono, #111 text, dark cursor — decoupled from theme so it reads as "the page steps in" not "another theme"
- Random punchline picked from 6 lines ("chill, designer.", "sixteen is plenty.", etc.)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 17:39:21 +01:00
YoussefandClaude Opus 4.7 ab39afe87c Site refresh — examples to #2 · plainer Foundations · install pane · easter egg 
- 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>
 2026-05-01 17:23:48 +01:00
YoussefandClaude Opus 4.7 a8518c63fc v0.7.0 — add custom theme route, clean landing footer 
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>
 2026-05-01 15:26:46 +01:00
YoussefandClaude Opus 4.7 6f1137b7dd Re-generate 8 gallery tests under v0.6.0 — new picks per rotation 
Eight prompts re-run as a single rotating session under the new
pre-flight + rotation + preview disclosure layers. Every macrostructure
unique, every theme unique, every pick measurably different from the
previous generation.

01 Tide        Quote-Led/Atelier  → Letter/Salon
02 Streampipe  Workbench/Terminal → Long Document/Terminal
03 Maple       Long Document/Linen → Catalogue/Almanac
04 Meridian    Manifesto/Manifesto → Quote-Led/Brutal
05 Tracejam    Bento Grid/Pastel  → Workbench/Midnight
06 Anya        Long Document/Studio → Index-First/Plain
07 Foundry     Stat-Led/Plain     → Bento Grid/Newsprint
08 Cohort      Marquee Hero/Salon → Stat-Led/Linen

Each brief.md walks Steps 0 → 6 of the design flow so the discipline
is visible. Updated landing-page gallery cards, _tests/README.md, and
recipes.md to match. Re-captured all eight thumbnails.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 14:28:34 +01:00
YoussefandClaude Opus 4.7 63e1c18032 Gallery cards: structural fix · SKILL.md adds Step 0 Pre-flight, rotation hints, Step 5 Preview 
## Gallery card padding — restructural fix (replaces all prior patches)

The negative-margin trick (`width: calc(100% + 2 * --space-lg)` + `margin-inline: calc(-1 * --space-lg)` on `.gallery__thumb`) kept fighting CSS Grid's track-sizing in the presence of `aspect-ratio` + `overflow: hidden`. Diagnostic agent confirmed the three-way collision is unstable across browsers / themes.

Replaced with a structural split:

- `.gallery__item` is now a flush container (`display: block`, no padding, no grid).
- `.gallery__thumb` (the `<picture>`) sits as a direct child at the top: `width: 100%`, `aspect-ratio: 16/10`, no negative margins. Fills the card edge-to-edge naturally because there's no parent padding to bust out of.
- New `<div class="gallery__body">` wraps the five text spans. Carries `padding: var(--space-lg)` and the existing 4rem-num + 1fr-text grid layout.

HTML and CSS both restructured. Eight cards in `site/index.html` re-wrapped (~50 lines edited). `site/css/components.css` lines 1736–1810 rewritten (~30 line net change).

## SKILL.md — three additive disclosure layers

### Step 0 · Pre-flight scan (NEW)

Before the design-context gate, the skill scans the project for tone signals: font stack (next/font, fontsource, Tailwind fontFamily, Google Fonts links), palette (OKLCH custom-properties, Tailwind colors, tokens.json), microinteraction stance (framer-motion / gsap / motion / lenis / lottie-react in package.json), spacing scale (Tailwind extend.spacing or `--space-*` pattern), framework (Next/Astro/Vue/Svelte/Remix).

Outputs a one-block disclosure with file:line citations, persists findings to `.hallmark/preflight.json`. Re-uses cache on subsequent runs unless user says "refresh pre-flight" or `package.json` / `tailwind.config.*` mtimes are newer. Edge cases for vanilla HTML, conflicting signals, empty projects, "ignore the existing project" all spelled out. Two extra sample outputs included.

~70 lines added before existing Step 1.

### Step 2.5 · Macrostructure rotation hints (EXTENDED)

After reading `.hallmark/log.json`, the skill emits a one-liner before picking: *"Last 5 builds: Bento Grid (Tracejam) · Bento Grid (Foundry) · Long Document (Maple) · Manifesto (Meridian) · Quote-Led (Tide). Bento Grid used 2 of 5 — picking from {Marquee Hero, Stat-Led, Workbench, Letter} this time. I'll go with Marquee Hero."* Plus a theme rotation line with the diversification axes.

Three sample shapes (first-time / mature project / user-overrode-last) seed the model's imitation. Surfacing the rotation makes the skill's discipline visible — users see WHY a different macrostructure was picked.

~20 lines added inside Step 2.5.

### Step 5 · Preview block (NEW)

Inserted between Step 4 (hero enrichment) and the renumbered Step 6 (Build). Slop test renumbered to Step 7.

Before emitting code, the model outputs a tight Markdown bullet summary — six required bullets (Macrostructure, Theme, Enrichment, Sections, Motion, Slop test) plus an optional Diversification bullet when `.hallmark/log.json` has prior entries. Plain bullets, NOT ASCII boxes — they render reliably across every chat client and terminal.

Three sample preview blocks in the spec (Long Document / Bento Grid / Manifesto) show the format across macrostructure types. Slop test row reflects the Step 7 outcome — if a gate fails, return to Step 6, fix, re-emit.

The preview is the user's TL;DR — they should be able to scan it in five seconds and tell the skill to redirect BEFORE 500 lines of CSS that don't match intent.

~60 lines added.

## Step numbering after this commit

0. Pre-flight scan
1. Design-context gate
2. Pick a macrostructure
2.5. Check project memory (with rotation hints)
3. Load the visual ruleset
4. Decide on hero enrichment
5. Preview
6. Build (was Step 5)
7. The slop test (was Step 6)

References to Step 4 / Step 5 / Step 6 inside the file all updated for consistency.

## Skill mirrored

`cp skill/SKILL.md ~/.claude/skills/hallmark/SKILL.md` — installed copy now matches.

## Out of scope (deferred)

T2-A DTCG tokens.json export, T3-A theme knobs, T3-C Figma MCP recipe — all skipped per user direction; not the right fit for the current minimal-surface ethos.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-01 10:21:02 +01:00
YoussefandClaude Opus 4.7 6b2e701dc6 Tier 1 — visual-first README · recipes.md · study-examples.md · study-led positioning 
## 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>
 2026-04-30 19:26:38 +01:00
YoussefandClaude Opus 4.7 ddfcd6a283 Banner T+R combined · gallery fit · Salon centered subhead · responsive headings 
## Banner

- Combine .banner__random + .banner__kbd into one .banner__shuffle pill.
- New SVG: Lucide-style shuffle (two crossing arrows). Old icon clipped at
  the viewBox edges; this one is sized 24×24 with stroke well inside.
- Click randomises (was already so); icon rotates 15° on hover; T kbd label
  inside the pill as a hint, separated by a small vertical rule.
- Banner now uses display:flex with a spacer so the theme-name sits
  immediately to the LEFT of the picker (closer, smaller text 0.95rem)
  rather than centered far from the dots.
- New responsive breakpoints: 50rem (smaller dots), 44rem (hide picker
  entirely on phones, keep mark + name + shuffle), 26rem (drop name).
- Shuffle now sits OUTSIDE the picker so it stays visible when the picker
  is hidden on narrow screens.

## Gallery thumb fit

- Width was `100%` which only fills the content-area, leaving padding
  visible to the right (negative margin-right doesn't extend element
  width). Switched to `width: calc(100% + 2 * var(--space-lg))` so the
  thumb truly bleeds to the card's inner-border on both sides.
- Added explicit `aspect-ratio: 16/10` + `object-fit: cover` +
  `object-position: top left` so the thumb crops from the right (where
  empty page-paper tends to live) rather than top/bottom (where hero
  content usually is).
- Re-captured all 8 thumbnails at 1024×640 (matches the most common page
  content max-width — Maple Bakery is 64rem = 1024px exactly), so each
  page packs content closer to the right edge.

## Salon: centered examples intro

- Salon already centers .section__title; the .examples__intro lead
  paragraph below it was left-aligned, looking off-axis on the centered
  Salon section heads. Now centers with `text-align: center` +
  `margin-inline: auto` for both .examples__intro and .examples__outro.

## Responsive headings (narrow viewports)

- At <30rem viewports, .opening__title and .hero__display were rendering
  at min ~48px which is wider than the 320–375px content area for headers
  longer than ~14ch. Body's `overflow-x: hidden` was masking the issue
  visually but text was being clipped.
- New media query caps display at clamp(1.75rem, 9vw, 2.75rem) and forces
  `max-width: 12ch` so long headers wrap.
- .section__title gets clamp(1.375rem, 5.5vw, 1.875rem) + 100% max-width
  so multi-clause section titles wrap to multiple lines instead of being
  clipped.
- .hero__lede / .opening__sub get 1rem font-size + 100% max-width on
  narrow viewports so the lede paragraph fits.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-30 18:04:48 +01:00
YoussefandClaude Opus 4.7 b1885e6c35 Add live demo link — hallmark-murex.vercel.app 
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>
 2026-04-30 15:38:44 +01:00
YoussefandClaude Opus 4.7 9aa09f1d60 Rebalance theme palette — Linen → cool slate · Studio → cool grey 
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>
 2026-04-30 15:01:18 +01:00
YoussefandClaude Opus 4.7 ceea50279f Foundry → Plain pure-white palette · gallery thumb fit · tighter screenshots 
## Foundry repalleted from Newsprint to Plain (pure white)

The v0.6.0 gallery had six warm-paper thumbnails out of eight (Specimen,
Atelier, Linen, Newsprint, Salon, Studio all in cream/pink). Foundry now
counterweights with:

- **Paper:** `oklch(100% 0 0)` = pure #ffffff. Surfaces tinted toward 245 hue
  with low chroma so the neutral-zero-chroma rule is honoured.
- **Accent:** deep ink-blue (`oklch(34% 0.18 250)`) — saturated enough to
  register, dark enough to pair with stark white without reading as candy.
- **Display:** Inter Tight 900 (display-heavy, free baseline). All italic
  emphasis converted to weight + accent-color emphasis (Inter Tight italic
  is weaker than Playfair italic).
- **Body:** Inter Tight 400/500/700 (single-family page is allowed where
  the family IS the design — Brutalist tone).
- **Wordmark:** Bricolage Grotesque 800 — different family from display
  and body, per typography.md wordmark guidance.
- **Hero highlight:** "thirty-one days" now non-italic with a 2px ink-blue
  underline rather than italic accent — fits the sans-display register.

Gives the gallery a deliberately different fingerprint at the cool /
stark / B2B-serious end of the spectrum that the warm-paper themes don't
cover. Diversification still passes vs Pastel (Tracejam): display style
differs, paper band shifts from cream to pure-white.

## Gallery thumb fit

The .gallery__thumb CSS dropped `aspect-ratio: 16/10 + object-fit: cover`
in favour of natural-aspect-ratio image sizing (`width: 100%; height:
auto` on the img, no aspect-ratio on the picture wrapper). More robust —
guarantees the image fills the card width edge-to-edge regardless of
theme tokens, and the natural 16:10 ratio of the captured screenshots
drives the height. Added `font-size: 0` on the picture to kill any
inline-element gap that could create whitespace.

## Screenshots re-captured at 1100×688

The previous 1280×800 capture left lots of empty page-margin space on
some test pages (workbench / stat-led layouts have content biased to
the left, leaving the right half visually empty). Tightening to 1100×688
packs content closer to the frame edges. All eight thumbnails re-shot.

## Files

- `site/_tests/07-foundry-compliance/style.css` — full repalette
- `site/_tests/07-foundry-compliance/brief.md` — theme rationale + diversification table
- `site/_tests/README.md` — table row + v0.6.0 changelog updated
- `site/css/components.css` — gallery thumb CSS simplified
- `site/index.html` — gallery card 07 copy updated to "Plain (#fff)"
- `site/_tests/_thumbs/*.png` — all 8 re-captured

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-30 14:56:35 +01:00
YoussefandClaude Opus 4.7 606a404261 v0.6.0 — Tracejam fixes, three new slop-test gates, two new SaaS tests, gallery thumbnails 
## 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>
 2026-04-30 14:14:27 +01:00
YoussefandClaude Opus 4.7 b61f1efc8d Twelve targeted skill additions — Tier 1, 2 & 3 
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>
 2026-04-30 12:33:51 +01:00
YoussefandClaude Opus 4.7 756eafff4a Six generation tests + findings — exercise the skill, audit the output 
Stress-test the skill across six contrasting briefs to see what comes
out without hand-holding. Each test deliberately tests a different
scenario along audience-context-given × theme-given × domain × intended
enrichment level. None of the six pages share a macrostructure, hero
archetype, or footer voice with another.

01 · Tide (indie podcast) — context skipped, no theme. Skill infers
audio domain and picks Quote-Led + Atelier + no enrichment.
Hand-built in pure typography. Pull-quote hero.

02 · Streampipe (open-source CLI) — full context, Terminal theme
requested. Skill picks Workbench + Terminal + a hand-built CSS-art
terminal mockup with blinking phosphor caret. No real terminal
recording, no Lottie.

03 · Maple Street Bread (artisan bakery) — full context. Skill picks
Long Document + Linen + a hand-built SVG loaf (Tier B). Letter-style
body with a drop cap, an aside with today's loaves and visit info.
The bakery worked example from custom-craft.md, in production.

04 · Meridian (studio manifesto) — partial context, theme implied.
Skill picks Manifesto macrostructure + Manifesto theme + no enrichment.
Pure black, oversized white display, single red accent used as a
bleed band. Five declarations and a signed colophon.

05 · Tracejam (SaaS observability) — full context, no theme. Skill
resists the obvious Midnight default and picks Pastel — proving a
soft theme can carry a technical brief if the typography is exact.
Bento Grid macrostructure + clipped-edge hero with a hand-built
CSS-art trace waterfall (multi-coloured spans on a percentage grid).
Six asymmetric bento tiles below.

06 · Anya (software architect personal site) — context skipped, no
theme. Skill avoids Specimen-as-default for portfolio briefs and
picks Long Document + Studio + no enrichment. Italic Fraunces
salutation, tabular selected work sheet, no Lottie, no Three.js,
no decorative gradient.

Each test ships with a brief.md (the verbatim prompt, the inferences,
the macrostructure stamp), an index.html (self-contained — no shared
assets), and a style.css with the Hallmark stamp at the top.

Findings written up at the end of site/_tests/README.md as a
priority-ranked improvement list:

Tier 1 — per-archetype example copy fixtures (the model bends to
"Built for the modern team" without them); sub-domain refinement of
the trio table (split SaaS docs vs SaaS landing); a documented theme-
diversification rule; free-vs-paid font tradeoff in typography.md;
worked examples per enrichment archetype in hero-enrichment.md.

Tier 2 — a "different knobs" slop-test gate; more illustration recipes
in custom-craft.md; non-LLM voice samples in copy.md; mobile-collapse
discipline per archetype; aria-label slop-test gate.

Tier 3 — project-level memory beyond the CSS stamp; a study+redesign
combined verb; an example gallery on the main landing page; auto-
generated OG cards per macrostructure.

What this exercise revealed: the structural variety position holds
(six briefs, six different shapes, no template repetition); the
enrichment hierarchy works (three of six correctly ship typography-
only); the remaining gap is copy voice (Tier 1 #1) and theme-pick
discipline (Tier 1 #3).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-30 10:51:57 +01:00
YoussefandClaude Opus 4.7 d990a2bfaf Per-theme component shape tokens; Sport + Salon polish 
Previously every theme had the same hairline-square component voice.
Now each theme picks its own radius / border weight / shadow profile,
chosen to match the theme's brief — editorial / brutalist / technical
themes stay square (the rule is the design); soft / modern themes get
measured radius (Pastel 12px is the most rounded — it's the post-Linear
theme); brutalist themes get heavier 2px borders.

Added four tokens to :root defaults: --radius-card, --radius-pill,
--radius-input, --rule-card, --shadow-card. Per-theme overrides at
the bottom of tokens.css give each theme its own shape voice without
touching colour or typography. Discipline maintained: nothing rounded
"for fun" — every choice maps to the theme's voice.

Token application in components.css: .code blocks pick up
--radius-input + --shadow-card, .tell cards pick up --rule-card +
--radius-card + --shadow-card, .btn picks up --radius-pill,
.banner__random picks up --radius-pill, .hero__mock keeps a
floor of 8px (browser-frame mockups always look slightly rounded).

Sport section title fix: the bold italic uppercase + tight tracking
+ weight 700 produced cramped, almost-touching letterforms. Loosened
tracking (-0.04em → -0.005em) just for section titles, bumped
line-height to 1.12, added 0.15em padding-inline-end for italic-slant
overhang, increased max-width to 26ch, and added word-spacing slack.
Sport's .spec__name and .tell__name also get tracking 0 so the
gallery cards read cleanly.

Salon section heads: tightened the eyebrow→title gap, gave the title
a comfortable 32ch measure, and made the fleuron ❦ divider read as
intentional spacing (margin-block-start, lower opacity, accent colour)
rather than a stray glyph.

Newsprint prose blocks (lede, captions, step subs, foot credits/tagline)
get text-align: justify + hyphens: auto. Long-form newspaper rhythm
without disturbing headlines.

Brutal + Manifesto get 1.5px borders on .code and .install__body,
plus border-color: var(--color-ink) on the install body — the heavier
ink lines suit the brutalist voice. Manifesto inherits from .code's
--rule-card token (set to 2px on Brutal/Manifesto in tokens.css).

Verified across Sport, Salon, Pastel, Quiet, Brutal, Newsprint,
Studio, and Garden — each theme now has a distinct component
shape voice in addition to its colour + typography voice.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-30 10:26:22 +01:00
YoussefandClaude Opus 4.7 b5b21ceebf Hero enrichment + custom-craft canon + Quiet theme 
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>
 2026-04-29 15:42:17 +01:00
YoussefandClaude Opus 4.7 958dacdcb8 Swap Instrument Serif → Fraunces; tighten README 
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>
 2026-04-29 14:54:25 +01:00
YoussefandClaude Opus 4.7 38526c4b06 hallmark study + softer design-context gate 
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>
 2026-04-29 13:16:54 +01:00
YoussefandClaude Opus 4.7 8bdb3ef4bd Three more themes — Studio, Pastel, Riso — for 2026 voice gaps 
Twelve themes covered editorial, technical, soft, bold. Three voices were
missing: modern italic-display agency (Studio), post-Linear soft-tech (Pastel),
and analog/print rebellion (Riso). Each uses fonts from Google Fonts that
the existing twelve don't touch.

Studio. Instrument Serif italic display + Geist body + Geist Mono labels.
Cream-white paper, forest-green accent. Photographic hero archetype + index
footer — confident agency portfolio aesthetic. Inspiration: 14islands, Frame,
Mathieu Triay, Gretel.

Pastel. Geist sans display + body, Geist Mono labels. Soft lavender-cream
paper, low-chroma indigo accent (deliberately not slop purple). Letter hero
archetype + masthead footer — the post-Linear / Resend / Cron aesthetic.

Riso. Bricolage Grotesque 800-weight display, all lowercase + Newsreader
italic body. Warm peach paper with a subtle dot-grain overlay, riso cyan
+ yellow off-register text-shadow on display headlines for the
print-misregistration feel. Quote-Led hero + dense colophon footer.
Inspiration: Are.na, e-flux, Frieze, indie magazine sites.

Each theme adds a banner dot and an ARCHETYPES + COPY entry. The page is
now a 15-theme demonstration; THEMES count and supporting structure
updated throughout. Riso's body::before grain layer respects
prefers-reduced-data.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-29 12:57:46 +01:00
YoussefandClaude Opus 4.7 0d7c162af1 Sticky theme banner + per-theme component archetype swap; Tier 1 skill gates 
Landing page is now a live demo of the macrostructure layer. The bottom-left
themer chip is replaced by a thin sticky-top banner: wordmark, active theme
name in display weight, 12 theme dots, random button. Pressing T cycles
themes; R picks a random one; ?theme= shareable links work.

Switching themes no longer just repaints — it rebuilds the page. The hero
and footer are now slots that swap component archetype per theme: Specimen
gets a Marquee hero + Mast-headed footer, Brutal gets Photographic + Inline,
Newsprint gets Split Diptych + Index columns, Atelier gets Quote-Led, etc.
Six hero archetypes and four footer archetypes are pre-templated in HTML
<template> elements; JS clones and interpolates per-theme copy fixtures
(distinct voice per theme, not just colour-swapped lorem). View Transitions
cross-fade the structure swap.

Skill side, Tier 1 of the diagnostic ships: structure.md vague-tone fallback
becomes a domain-aware lookup table (audio→Photographic+Quote-Led+Letter,
commerce→Catalogue+Photographic+Bento, docs→Workbench+Long Doc+Component
Playground, etc.) so Bento/Long Doc/Manifesto isn't the catch-all anymore.
component-cookbook.md gains a within-archetype variation matrix (2-3 knobs
per archetype — tile counts, ratios, attribution positions, etc. — picked
per output, stamped in the macrostructure comment) and a new F6 Product
card grid archetype distinct from Bento (sells things, not features).
SKILL.md slop test goes 23→29: the six rules that used to be advice
(zero-chroma greys, accent footprint, spacing scale, measure 45-75ch,
eight states, reduced-motion fallbacks) are now binary gates. The audit
verb gains a stamp-vs-page check that flags drift when the stamp says
one macrostructure but the page is actually the AI template.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-28 15:56:35 +01:00
Youssef 34701de829 Macrostructure layer — fix the default-attractor problem 
Symptom: redesigns kept emitting the same shape — numbered left-margin
labels, huge serif display, asymmetric spans, typographic CTA. Every
build looked like a Specimen page even when the brief wasn't editorial.

Diagnosis: the 6-axis catalogue in structure.md offered ~42k unique
fingerprints in theory, but the AI satisficed with the safest combo
(Specimen) every time. The anti-repetition rule existed in writing but
had no enforcement; the slop test was post-hoc; there was no component
vocabulary; and Specimen sat in the first row of the theme→fingerprint
table, becoming the de-facto default.

Fix is structural, not cosmetic:

- skill/references/macrostructures.md (NEW · 21 named whole-page shapes)
  Each has a 6-axis breakdown, a "use when" / "don't confuse with"
  pair, a real-world reference, and a short DOM sketch. Specimen is
  demoted into position 10 with a banner note that it's banned as a
  default. Bento, Long Document, Marquee, Stat-Led, Workbench,
  Conversational FAQ, Manifesto, Photographic, Quote-Led precede it.

- skill/references/component-cookbook.md (NEW · 32 archetypes)
  Six hero shapes, five section-heads, five feature blocks, four CTAs,
  four testimonials, four footers, four navigations. Each is a named
  shape with a small HTML+CSS sketch and a "don't confuse with" pair.
  The AI composes pages from these instead of inventing each section.

- skill/SKILL.md
  Step 2 rewritten to "Pick a macrostructure FIRST" with a mandatory
  diversification rule (read existing CSS for a stamp; pick a
  different one). Step 4 requires every CSS output to begin with a
  /* Hallmark · macrostructure: <name> · tone: <tone> · anchor hue: <hue> */
  comment — durable record so the next build can read and avoid it.
  Slop test grows from 20 to 23 questions; the new three check the
  stamp, the no-repeat rule, and the Specimen fall-through.

- skill/references/structure.md
  Pointer at the top: "Pick a macrostructure first; this file is the
  primitive axes underneath." Theme→fingerprint table reordered
  alphabetically to neutralise Specimen's first-row position. The
  vague-tone fallback now offers three concrete macrostructures from
  different categories (Bento + Long Document + Manifesto) instead of
  asking for a one-word abstract tone.

- skill/references/anti-patterns.md
  Two new named tells: "Default-attractor sameness" (consecutive
  outputs share a macrostructure) and "Specimen fall-through" (emit
  the editorial Specimen pattern when the brief wasn't editorial).
 2026-04-28 13:05:16 +01:00
Youssef 2be80bb60c Differentiate all 12 themes — distinct paper, type, accent 
The 8 newer themes were too clustered around oklch(94-96%, low-chroma,
warm-hue) — visually all "warm cream + serif" variants. Users couldn't
tell them apart so it felt like the picker was broken for those entries.

Spread the 12 paper colours across the OKLCH space so each theme owns
a distinct point (dark / saturated / desaturated / warm / cool):

- Specimen   warm oat        oklch(96 .018 80)
- Newsprint  salmon-pink     oklch(92 .045 50)  ← FT-pink
- Atelier    cool cream      oklch(94 .005 60)  ← low chroma luxury
- Garden     pale sage       oklch(95 .030 130)
- Salon      warm ivory      oklch(94 .030 65)
- Linen      desat. linen    oklch(89 .022 95)
- Midnight   cool charcoal   oklch(15 .022 250) ← was warm; now cool
- Terminal   green-black     oklch(11 .018 145)
- Almanac    cool pale       oklch(94 .008 245) ← cool, was warm
- Brutal     near-pure white oklch(98 .001 0)
- Manifesto  near-pure black oklch(10 .005 60)  ← inverse of Brutal
- Sport      crisp white     oklch(98 .003 250)

Display fonts now span category-level differences, not "different
serifs": Fraunces / The Future / Space Grotesk / Cormorant italic /
Playfair 900 / Crimson Pro / JetBrains Mono / Anton (added) /
IBM Plex Mono (Salon) / IBM Plex Sans Light / Bricolage Grotesque /
Bricolage Grotesque italic.

Signature structural moves added:
- Newsprint: drop cap on the lede in accent burgundy
- Linen:    barely-visible woven-cloth checkerboard (3% opacity)
- Almanac:  faint vertical grid lines across the page (graph paper)

Plus new fonts in @import (Playfair Display weights, Anton).
Plus swatch dots in the picker now mirror the new tokens.

Result: every theme is unmistakably distinct at first glance —
no more "did clicking that do anything?".
 2026-04-27 23:28:18 +01:00
Youssef 3fab5ba75b Move theme picker out of navbar to a fixed bottom-left chip 
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)
 2026-04-27 22:38:45 +01:00
Youssef c49b190911 Initial commit: Hallmark v0.2.0 
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
 2026-04-27 21:46:57 +01:00