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
16 Commits 12 Branches 0 Tags
b1885e6c35e687c7fdc381ea5591f2b1bf7c6cfd
Commit Graph
16 Commits
This Branch
This Branch
All Branches
Author SHA1 Message Date
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