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
64 Commits 12 Branches 0 Tags
d130808b545b6262ef19ca2b02e516ca1f661d73
Commit Graph
64 Commits
This Branch
This Branch
All Branches
Author SHA1 Message Date
YoussefandClaude Opus 4.7 d130808b54 /hallmark Fraunces wordmark · OG image · Hyperlane example · footer current-theme fix 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 14:43:21 +01:00
YoussefandClaude Opus 4.7 2919689cb2 Examples reorder · audit beautified · Before/After section · section labels stacked · display max tightened 
· Examples-rail order: SaaS → wayfare → slow-pour → BananaStudio (moved
  from 1st to 4th) → tracejam → anya-loop video (was static) → Najm-loop
  (was Foundry static) → Soroe-loop (was Cohort static). Five videos +
  three statics now. Five MP4s re-encoded to web (CRF 23–27, +faststart,
  no audio).
· Audit demo: swapped the gradient slop placeholder for the new
  audit-example.png. Caption removed (no longer reads as "actual slop").
· Redesign uractivation video: dropped data-hover-play so it autoplays
  on every device (was hover-only on desktop).
· Footer: "Powered by" → "Made by" (re: the Together AI credit). Base
  credit line now left-aligned across all viewports.
· Section labels: forced single-column section heads in every theme via
  `.section__head, [data-theme] .section__head { grid-template-columns:
  1fr !important }`. Linen + Almanac left-gutter overrides removed —
  every section reads label-above-title now.
· Section pulls: deleted every `<a class="section__pull">` ("See the
  verbs", "Read the rules", etc.) plus 67 lines of associated CSS. The
  banner already provides Install + GitHub; no per-section nav needed.
· Per-theme demo captions ("Lap 1", "Plate I", "Frame 01", etc.)
  removed — they appeared in the wrong section ("Lap 1" showed under
  Study) and added clutter.
· Display max font sizes tightened across every theme token. Largest
  caps were 13rem (Manifesto Anton) → 9rem; multiple 7.5–8rem caps
  pulled down to 6.25–6.5rem. Skill-side typography.md now emits
  `clamp(2.75rem, 5vw + 1rem, 5.25rem)` as the default --text-display.
· New section: Before / After Hallmark, after Foundations.
  Same prompt ("/hallmark build a landing page for The Quiet Hour — a
  weekly natural-wine dispatch from Lisbon") run two ways:
   - Sonnet 4.6 alone → gradient AI slop (before-quiet-hour.png)
   - Sonnet 4.6 + Hallmark → editorial dispatch (after-quiet-hour.png)
  Hairline-framed panels with mono prompt at top, italic-serif captions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 14:09:59 +01:00
YoussefandClaude Opus 4.7 691cb4d2c7 Examples-section overhaul · audit static image · redesign uractivation diptych · hover-play videos · Specimen left-align 
· Examples cards: dropped 01–08 numbers, dropped Banana Studio / Modern SaaS /
  etc. titles + subheaders, dropped the 5-row hover trail popover. Each card
  now shows a single mono line: "$ /hallmark build <prompt>". Removed the
  "Open any card →" hint from the section intro.
· Replaced cards 03 (Maple) + 04 (Meridian) with the new wayfare-loop.mp4
  + slow-pour-loop.mp4 videos. Re-encoded all four MP4s for web (CRF 23,
  +faststart, no audio). wayfare downscaled from 4K to 1080p (9.3 MB → 2 MB).
· Audit demo: swapped the inline CSS gradient slop card for a static
  audit-slop.png (1024×640 capture of the same card). Cleaner DOM, same
  visual. Caption "Specimen — actual AI slop, untouched" stays.
· Redesign demo: before = example-redesign-uractivation.png, after =
  uractivation-after-loop.mp4 (looped video). Diptych CSS extended to
  style <video> identically to <img>.
· Hover-play behaviour: videos with data-hover-play start paused on
  hover-capable devices (desktop) and only play while hovered/focused.
  On touch devices (no hover), the autoplay attribute keeps them
  looping continuously — pages read as moving showcases on mobile.
· Specimen: section-pull CTAs ("Read the rules", "See named tells")
  now flush left like every other CTA on that theme. Override only on
  [data-theme="specimen"]; other themes keep right-aligned pulls.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 13:21:40 +01:00
YoussefandClaude Opus 4.7 3e27e1c7dc Five fresh Hallmark test pages — varied macros + themes for launch examples 
Each is a self-contained HTML, no shared CSS, no shared layout. Five
different macrostructures, five different themes, no overlap with the
existing 8 tests (01–08) or with each other.

· 09 Slow Pour — Marquee Hero · Atelier (italic Cormorant + bean SVG)
  small-batch coffee subscription · warm, hand-set, editorial
· 10 Owl Hours — Manifesto · Aurora (Geist + cyan accent on dark)
  late-night writing app · austere, after-dark
· 11 Soroe — Long Document · Studio (italic Fraunces + 6 vessel SVGs)
  ceramics studio in Nara · quiet, handmade, archival
· 12 Loafer — Bento Grid · Pastel (Geist + indigo on cream, leaf SVG)
  plant-care app · soft, friendly, restrained
· 13 Alma — Quote-Led · Halo (Geist + amber on charcoal, pulsing dot)
  voice journal · atmospheric, intimate

All five pass the pre-emit critique (P5+ across all 6 axes), use real
metrics only (no fabricated stats), reference tokens by name, and have
mobile breakpoints. None re-draw browser/phone chrome.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 12:12:15 +01:00
YoussefandClaude Opus 4.7 40bf796674 Pre-launch cleanup — drop dead footer/hero CSS, archived templates, unused fonts + MP4 originals 
· Footer: stripped Ft1–Ft4 archetypes (.foot--masthead, .foot--inline,
  .foot--index, .foot--dense) + their helper classes (.foot__tagline,
  .foot__links, .foot__powered, .foot__col-head, .foot__wordmark-small,
  .foot__sep, .foot__credits) — every theme uses .foot--colophon now.
· Hero: dropped H6 Photographic, H7 Clipped, H8 Specimen archetype
  blocks (404 lines of CSS) plus per-theme overrides on .hero__photo,
  .hero__photo-grid, .hero__mock, .hero--clipped — no theme references
  any of these archetypes after the recent reroutes.
· Templates: removed `<template id="section-04-archive-without-with">`,
  `<template id="section-05-archive-foundations-tabs">` (revertibility
  archives — superseded), and the three dead hero templates.
· Local fonts: deleted site/fonts/the-future-*.woff2 (8 files) and the
  empty site/fonts/ directory. Geist + Geist Mono cover all type roles.
· Media: dropped the unprocessed BananaStudio-example.mp4, Podcast-example.mp4,
  SaaS-example.mp4 — only the -loop.mp4 versions are referenced.
· main.js: removed buildDenseColophon() helper (dense colophon never
  rendered after the unified footer rework).

Total: ~930 lines removed. No visual regression.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 11:56:15 +01:00
YoussefandClaude Opus 4.7 2790844b11 Footer rework · per-theme reverts · examples non-clickable · numbered dropdown 
· Footer rewritten as an editorial colophon: massive Hallmark wordmark
  on a baseline-aligned masthead row + 3-column meta grid (Currently In /
  In the Catalog / Read or take a copy) + centered powered-by line.
  Generous whitespace, hairline-divided stat rows, theme-aware via tokens.
  Specificity bumped (.foot.foot--colophon) so the new grid layout beats
  the legacy .foot { grid-template-columns: 1fr auto } from sections.css.
· Reverted hero moments per request: dropped the SPECIMEN ℋ glyph,
  Garden leaf, Linen woven dot grid, Salon fleuron, Almanac date stamp,
  and the Coral solid accent block + Violet alternating section tint.
· Brutal hero archetype: photographic → marquee. Removed the 6-image
  gallery + the related photo-grid CSS overrides.
· Bloom hero: centered (text-align + margin-inline auto on display/lede,
  justify-self center on CTA). Other Bloom sections stay left-aligned.
· Examples cards: <a href> → <div>, dropped the "Open ↗" labels +
  ex-card__open CSS, removed hover-transform/scale rules. Cards are now
  visual-only — the trail popover still appears on hover but no click.
· Theme dropdown: 22px colored squares replaced with 34px tiles that
  show the theme's # in mono inside, theme accent stripe along bottom.
  Re-ordered to match the THEMES object order (specimen=01,
  midnight=02, brutal=03, … editorial=23) so the indicator's "N / 23"
  matches the dropdown position.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 11:30:45 +01:00
YoussefandClaude Opus 4.7 2cd507718b Drop Roman numerals from skills section · perfect left-alignment 
· Removed the 4 .skill-row__num spans (I/II/III/IV) from index.html.
· Collapsed .skill-row__head from 4rem 1fr two-column grid to single
  column — section labels, verb headings, and body content all hang
  from the same left content edge now.
· Dropped the 4rem padding-inline-start from .skill-row__body and
  .skill-row__body--full so demo content aligns with the verb title
  above it (was previously indented to clear the numeral gutter).
· Removed the .skill-row__num base + per-theme override blocks from
  sections.css since the markup no longer exists.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 10:46:57 +01:00
YoussefandClaude Opus 4.7 4ebeedfa99 Phase D — Hero rework · 12 per-theme right-side moments · archetype swaps · 11 per-theme polishes 
D1 — hero__moment slot for marquee/letter/quote/stat archetypes. 12 themes
    (specimen, terminal, manifesto, aurora, garden, linen, atelier, salon,
    riso, midnight, almanac, sport) opt in via per-theme rules. Each gets
    a small typographic or geometric moment in the right column:
    · specimen — italic ℋ glyph in a hairline-bordered foundry plate
    · terminal — phosphor "[ █ ]" prompt block
    · manifesto — "NO\\nSLOP." in red Anton
    · aurora — soft secondary radial accent
    · garden — leaf SVG in coral accent
    · linen — woven-texture 8×8 dot grid in a hairline frame
    · atelier — italic Roman "I" in a card with "PLATE I" caption
    · salon — fleuron + hairline + italic "À table" caption
    · riso — two overlapping cyan/yellow circles, off-register duotone
    · midnight — concentric rings + glowing centre dot
    · almanac — date stamp box "MMVI · ed. 02 · no. 23"
    · sport — three-bar lap chart in accent

D2 — Studio swaps photographic → letter (had duplicated Brutal); Pastel
    swaps clipped → bloom (drops the AI-default dashboard mock).

D3 — Per-theme polishes:
    · Brutal photo grid 6 → 2 imgs
    · Quiet sign-up form replaced with single italic note + hairline
    · Bloom paper inverted dark → light cream so warm wash reads bright;
      ink/rule/accent re-balanced for the new lightness ladder
    · Coral solid accent block bottom-left distinguishes from Bloom
    · Violet alternating sections get faint accent tint
    · Aurora bloom punctuates each section title (not just hero)
    · Halo orbit grid 1fr/1fr → 1fr/0.7fr — orbit closer to copy
    · Plume — feather glyph SVG in bottom-right of bloom hero
    · Midnight stat "00" → "23, themes, dark-set first" — honest copy
    · Editorial — giant "XXIII" Roman numeral in right column
    · Manifesto — 6 oversized declarative phrases ("NO GRADIENTS.",
      "TYPE FIRST.", etc.) cycled between sections via :nth-of-type

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 10:42:43 +01:00
YoussefandClaude Opus 4.7 5b5ce2a76d Phase C — Audit slop framing · Per-theme demo frames across 23 themes 
· Audit slop card now wears a "Specimen — actual AI slop, untouched"
  caption above it (mono caps, theme-coloured) so the gradient reads as
  a quoted artifact, not a card competing with the page.
· Dark / charged themes (midnight, manifesto, halo, aurora, riso, terminal,
  brutal) tint the slop card via filter saturate(0.55) brightness(0.82).
  The card still reads as AI slop — purpose retained — but no longer wins
  the visual contest.
· .brief-output now responds to theme. Hard-edge group (brutal/manifesto/
  terminal/newsprint/editorial) → 0 radius, heavier border. Slight-radius
  (sport/almanac/garden/halo/violet/studio) → 4–6px. Soft-card (quiet/
  coral/aurora/pastel/plume/bloom) → 8–14px with optional accent shadow.
  Riso → duotone 3px-offset accent shadow. Midnight → inset glow ring.
  Halo → amber glow halo. Aurora → accent glow.
· Editorial-register themes (atelier, salon, almanac, studio, sport) get
  a small label above each demo: "Plate I", "Specimen — i", "Fig. 01 —
  2026 ed.", "Frame 01", "Lap 1". Same media, theme-aware foundry plate.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 10:28:25 +01:00
YoussefandClaude Opus 4.7 7949e060f7 Phase B — Banner per-theme shape/voice · Almanac §-heads · Terminal varied prefix · Linen hanging heading 
· .banner__install + .banner__star + .banner__theme-indicator now react
  to theme. Hard-edge group (brutal, manifesto, terminal, newsprint,
  editorial) → 0 radius. Slight-radius group (sport, almanac) → 4px.
  Soft-card group (garden, halo, violet, studio) → 6px. Off-register
  stamp (riso) → 2px + duotone shadow. Editorial themes (atelier,
  salon) get italic serif install copy. Manifesto + Brutal use display
  font + 2px border. Terminal goes mono. Pastel keeps full pill but
  with a softer shadow. The banner now rebuilds when you switch theme.
· Almanac claims to be indexed — section labels prepend §
  (red accent) so labels read "§ 02 ⁄ EXAMPLES".
· Terminal cycles 4 prompt prefixes by section (>, //, #, --) instead
  of repeating the same character.
· Linen section heads now hang the label in a 12rem left gutter with
  the title in the body column — reads like a printed manuscript margin
  note. Mobile collapses to single column.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 10:23:07 +01:00
YoussefandClaude Opus 4.7 03cff04912 Phase A — Roman numerals bigger, Sport honest stat, Garden contrast, Salon fleuron, Atelier dividers 
· .skill-row__num bumped from text-2xl to clamp(3.5rem, 5vw + 0.5rem, 6rem),
  color from --color-rule-2 to --color-muted. Mono-override theme group
  scaled to clamp(3rem, 4.5vw + 0.4rem, 5rem). Numerals now read as
  proper chapter markers, not muted afterthoughts.
· Sport stat fixture: invented "+47 %" / "FASTER · DECIDE LATE." replaced
  with honest "23" / "THEMES · TWO GENRES DEEP." — restores the no-fabricated-
  metrics discipline.
· Garden tokens: bumped --color-ink, --color-ink-2, --color-muted, --color-rule
  set toward darker olive — body lede now reads against the pale-green paper.
· Salon fleuron: 1.1rem opacity 0.65 → 1.7rem opacity 0.85 with a hairline
  divider rule above it. Reads as a divider, not a stray glyph.
· Atelier section rhythm: sections now separated by --space-3xl negative
  space; section-pull arrow's top rule removed. Quiet register, no rules.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-07 10:18:46 +01:00
YoussefandClaude Opus 4.7 0ad29fa6e0 Drop The Future / The Future Mono · drop refine verb · Build/Study/Examples media 
Replace The Future + The Future Mono everywhere with Geist + Geist Mono — both
local fonts had a single-storey hooked "a" by design, not by faux italic. Strip
the @font-face declarations + preload links. Halo dropdown z-index leak fixed.
Editorial hero proof block strips down to just the CTA. Atelier + Salon now
left-aligned. Skill-row / hero / examples ledes unified to roman serif (italic
removed from every body / lede / intro role to kill the curly italic "a").
Refine verb removed everywhere: SKILL.md, README, landing site, references.
Ask-questions discipline strengthened — Step 1 now always asks, optional answers.
Build subsection wires Podcast loop video; Study uses Calendly screenshot with
re-written DNA fields; Worked-examples 1+2 use Banana Studio + Modern SaaS
loops in place of static thumbs. Landing-page rebrand reverted everywhere.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 18:13:10 +01:00
YoussefandClaude Opus 4.7 0f9be195e5 Drop IBM Plex Sans (the weird-a font) · Manifesto line-height · star button gold + tighter 
The font I should have removed three asks ago is **IBM Plex Sans**.
Distinctive double-storey lowercase "a" with a curly tail that
the user keeps flagging as unreadable. Used in four themes —
all replaced:

  newsprint label  : "Inter", "The Future"
  manifesto body   : "Inter", "Public Sans", "The Future"
  linen display    : "Hanken Grotesk", "Inter"
  linen body       : "Hanken Grotesk", "Inter"
  almanac display  : "Hanken Grotesk", "Inter"
  almanac body     : "Hanken Grotesk", "Inter", "The Future"

Hanken Grotesk added to the Google Fonts stylesheet (was only in
fallback chains, not actually loaded). Inter was already loaded.

MANIFESTO HERO LINE-HEIGHT — Anton is a tall narrow condensed
display face. At the default 1.02 tight line-height, "THE / DESIGN
/ SKILL." stacked with no breathing room. Bumped to 1.05 for the
manifesto hero display only — gives the multi-line headline visual
rhythm without going soft.

GITHUB STAR BUTTON — three changes:

· **Icon colour** → `#f5b300` (golden yellow, GitHub-star canon)
  instead of the active theme's accent. The star is a brand mark,
  theme-independent. Stays yellow on hover too.
· **Default count** "0" instead of "—" placeholder. The fetch
  still runs in the background (cached 1h); on success the count
  updates. On failure the "0" stays put.
· **Closer to Install** — `margin-inline-start: calc(-1 *
  var(--space-md) + 0.25rem)` pulls the star back against the
  banner's flex gap so the two read as a paired CTA. Other banner
  spacing untouched.

Mobile: at <50rem the Install pill hides (existing rule); the
star stays visible and takes the CTA role. At <36rem the star's
internal padding tightens further. No layout shift.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 14:36:18 +01:00
YoussefandClaude Opus 4.7 a729b1707f Worked-examples first-card aligns with header · skill: N10 Floating-on-scroll nav 
Two changes in one pass — site polish + skill expansion.

SITE: Worked-examples rail's first card now aligns with the
section header on initial paint. Was: rail used `padding-inline:
var(--page-gutter)` (~20 px), so Tide started flush against the
viewport's left gutter — out of column with the "02 / EXAMPLES"
label and "Worked examples." title above it. Now uses
`padding-inline: max(var(--page-gutter), calc((100vw -
var(--page-max)) / 2 + var(--page-gutter)))` so the first card's
left edge matches the page-content edge. As the user scrolls
horizontally, cards traverse the full bleed (right edge unchanged
— still extends to viewport). Trailing `::after` spacer also
uses the new `--rail-edge` so the last card snaps to matching
content edge.

SKILL: Added N10 Floating-on-scroll morph to the nav archetype
catalogue plus a dedicated `references/floating-nav.md` recipe.
The pattern: one DOM with two layers — `.nav` (outer) owns the
default bar visuals, `.nav__inner` (inner) owns the floating pill
visuals — cross-faded on a single `.is-floating` class toggle past
a scroll threshold.

Documents the four laws Hallmark refuses to break:

1. Total nav height stays constant (compensate inner shrink with
   outer padding-block math), or content below jitters.
2. Visible offset uses `transform: translateY()`, never margin or
   padding (those trigger layout and break Law 1).
3. Cross-fade ownership of every shared visual property (background,
   border, backdrop-filter, box-shadow). Forget one and you get
   ghost effects.
4. Single timing curve across every transitioning property —
   `cubic-bezier(0.16, 1, 0.3, 1)` at ~520 ms. Eight curves reads
   as eight animations.

Plus the property morph table (10 properties, one curve), the
scroll-handler script with passive listener + rAF throttle +
boolean-flip guard, and an 8-item slop list (the AI-default
mistakes Hallmark must not emit). N10's cookbook entry links to
floating-nav.md and stays brief — the deep recipe lives in one
focused reference file (~80 lines).

Skill grew by ~95 lines; one new file, one updated entry.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 14:28:34 +01:00
YoussefandClaude Opus 4.7 c517264e2d Footer — top-align Hallmark wordmark, larger gap on desktop 
Two small footer tweaks:

· `.foot--colophon` switches `align-items: stretch` → `flex-start`
  so all three columns top-align. Before, the wordmark was
  centered vertically inside its column which read as a floating
  signature; now it sits at the same baseline as the prose's
  first line.

· Inter-column `gap` bumped from `var(--space-2xl)` (4rem) to
  `var(--space-4xl)` (10rem). The wordmark now has real breathing
  room from the prose paragraphs on desktop. Mobile stack
  unaffected.

· Explicit `align-self: flex-start` on the mark column belt-and-
  braces against any later flex `align-self` overrides per theme.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 14:24:58 +01:00
YoussefandClaude Opus 4.7 f98caa53ca Three new hero archetypes — Specimen, Plume, Halo 
The default Specimen and the two themes that previously used the
fake-browser-dashboard mockup (Plume + Halo) now each get a
distinctive hero composition that delivers a real "wow" moment.

· **Specimen → hero-specimen.** Two-column. Left keeps the copy
  block (eyebrow, H1, lede, install). Right is a foundry-style
  typographic plate: a giant italic Fraunces ℋ (Script Capital H,
  U+210B) at clamp(12rem, 24vw, 22rem), positioned with intentional
  asymmetric placement on a bordered card, with a "PLATE 01" label
  top-left and a mono spec strip ("Fraunces · italic · 144pt /
  display optical · ss01") at the bottom. Reads as a real foundry's
  specimen sheet — the truest possible hero for an opinionated-
  typography skill.

· **Plume → hero-bloom.** Two-column. Right is a layered painterly
  composition: a soft warm-rose watercolor wash (inline SVG with a
  radial gradient + organic path), an oversized italic "Hallmark."
  in Newsreader at clamp(4rem, 9vw, 7.5rem) layered on top of the
  wash, plus three small geometric accents (a thin vertical line, a
  filled ink dot, an outlined circle). No SaaS chrome. Painterly +
  editorial.

· **Halo → hero-orbit.** Two-column. Right is concentric rings + a
  glowing centre dot. Five SVG circles of varying stroke width
  (thinnest outer, thickest inner), centre dot in --color-accent
  with a soft amber box-shadow glow, an accent tick mark on the
  outermost ring's top, a thin rule + small spec strip
  ("HALO · WORKSHOP") at the bottom. The whole ring set rotates
  via @keyframes orbit-spin 80s linear infinite — almost
  imperceptible, gives the page life. Stops under
  prefers-reduced-motion.

Theme remap (one file, three lines in main.js ARCHETYPES):
  specimen: marquee → specimen
  plume:    clipped → bloom
  halo:     clipped → orbit

The original hero-marquee and hero-clipped templates are
untouched. Pastel still uses clipped. Reversion is one line per
theme — flip the ARCHETYPES entry back.

All three new heroes:
- 2-column at desktop, single-column stack at <60rem
- Pure CSS + inline SVG, no JS
- Theme-aware (currentColor, accent token, mono/serif fallbacks)
- ~270 LOC of CSS across all three, ~95 LOC of HTML templates

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 14:18:50 +01:00
YoussefandClaude Opus 4.7 adf0da6fd4 Polish — drop Bricolage, vertical section heads, edge-bleed examples, GitHub star button 
Six items in one pass:

· **Bricolage Grotesque removed** entirely. Distinctive italic-a
  forms (curl ear) read as "weird" at section-title scale across
  several themes. Replaced per-theme with cleaner alternatives:
  Sport → Inter Tight (italic). Riso → Space Grotesk. Almanac →
  IBM Plex Sans. Plume → Geist. Manifesto's display fallback
  chain swapped Bricolage out for Space Grotesk. Google Fonts
  stylesheet URL updated — Bricolage dropped, Space Grotesk and
  Anton (italic axis) added.

· **Section heads restructured.** Was: 10rem | 1fr two-column with
  the section label ("04 / ANTI-PATTERNS") on the left and the
  title on the right. Problem: at narrow widths (and on themes
  that override to 6rem | 1fr like Sport), the label was forced
  to wrap mid-word ("ANTI-/PATTERNS") and the title felt squeezed.

  Now: single-column. Label stacks ABOVE the title with a small
  gap. Label gets `white-space: nowrap` so it never breaks. Title
  font-size grows from `clamp(2rem, 3vw + 1rem, 3rem)` to
  `clamp(2rem, 4vw + 0.5rem, 3.5rem)` since it has full row width.
  Sport's per-theme override (was 6rem | 1fr) now also 1fr.

· **Foundations card strokes — fixed.** The gap-as-border pattern
  (gap: 0.5px, parent bg showing through) sub-pixel-rounded
  inconsistently — col 2/3 boundaries dropped on some themes.
  Replaced with explicit 1px right + bottom borders on each card,
  plus left + top on the parent. Every divider now renders crisp
  at every theme + viewport. Atelier/Salon use a dashed bottom
  rule instead, no vertical dividers (matches their borderless
  card aesthetic).

· **Worked examples — full bleed to viewport edges.** The rail had
  `margin-inline: calc(-1 * var(--page-gutter))` which only
  escaped the page gutter, not the page max-width. On wide
  desktops the rail still capped at 76rem. Now uses
  `width: 100vw; margin-inline: calc(50% - 50vw)` so cards extend
  flush to the viewport edges no matter how wide the screen.
  Internal scroll-padding still snaps the first/last card cleanly.

· **Study brief pill** — "Paste a design you admire." → "/hallmark
  study this landing page". Reads as the actual command the user
  would type, matches the Build row's brief style.

· **GitHub star button** added to the nav. Sits beside Install,
  styled as an inverse pill (ink fill, accent star, paper text).
  Live star count fetched from the GitHub API on first paint,
  cached in localStorage for 1h to avoid rate-limit. Falls back
  to "★" if the request fails. Counts ≥1000 render as "1.2k" etc.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 14:06:15 +01:00
YoussefandClaude Opus 4.7 c6f3b6cda3 Marketing site refinement — titles, footer, Section 03 + 05 reworks 
Big polish pass after user feedback. Breakdown:

CHAPTER RAIL — removed entirely. The sticky left-rail outline added
last pass competed with content rather than helping. HTML, CSS, JS
observer all stripped. Page reads cleaner without it.

SECTION TITLES — shorter, declarative, fits every theme without
two-line wraps:
  · 02: "Different briefs. Different bones." → "Worked examples."
  · 03: "Five things Hallmark does. One ruleset underneath." → "What it does."
  · 05: "Five things Hallmark holds the line on." → "Foundations."
  · 06: "One command. Works in every harness." → "Install."

SECTION 03 — every row at the same density.

  Build: title now shows `Build (default)` with the `(default)` set
  in italic muted serif. Signals users don't actually type `build`.

  Study: was a 2-card study-grid (Tide + Tracejam, image + 10-row
  DNA each). Compacted to a Build-shaped layout — single example
  (brief pill → arrow → Tide thumb on left, 10-field DNA list on
  right). Mirrors Build's shape so the section reads at one rhythm
  instead of one row dominating.

  Audit: full rebuild. The verb-audit.png slop screenshot replaced
  with a CSS-only inline slop hero (purple-pink gradient, centered,
  Inter family, ✨ sparkle badge, gradient pill CTA) that visibly
  embodies every AI tell. Right side dropped the 4-row info panel
  for a 5-row checklist: ✗ <problem> → <fix>. Each row names a
  specific tell and its Hallmark answer. Reads as "what's wrong /
  what to do." Drops the now-redundant audit-flag overlay.

  Refine + Redesign: dropped the right-column structured info panel
  entirely. The diptych (before/after) now spans full skill-row
  body width, each thumbnail roughly doubled in size. New
  .skill-row__body--full modifier handles the layout. The
  Invocation/Preserves/Touches/Returns lines were redundant given
  the lede already says it.

SECTION 05 — Foundations. Replaced the 5-radio-tab pattern with
8 compact cards in a 4×2 desktop grid. Each card: a hand-drawn
SVG icon (~48px, monoline, currentColor stroke for theme-aware
inheritance), a one-word title, a single-line description.

  The eight: Type (paired Aa serif + Aa sans), Colour (4 dots),
  Space (ruler tick marks), Motion (curve arrow), Voice (4 quote
  marks), Layout (2 asymmetric rectangles), Hierarchy (3 bars
  decreasing), Restraint (single dot in square).

  Responsive: 4×2 ≥60rem → 2×4 ≥36rem → 1×8 mobile. Old radio-tab
  markup preserved verbatim inside <template id="section-05-archive
  -foundations-tabs"> for one-tag revertibility (same pattern as
  Section 04's archived Without/With).

FOOTER — was 64ch (~600px) max-width single column. Reads as a
small floating block on a 1440px desktop. Replaced with a 3-column
flex layout: wordmark left, prose centre (set / catalog / credit
paragraphs), links + 2026 year stamp right. Spans full page width.
Stacks single-column on mobile. `display: flex !important` because
the parent .foot rule (display: grid) was winning the cascade and
overriding even an equal-specificity later declaration.

EASTER EGG — the "1.0× in 3.2s" counter line is gone (the user
didn't actually count clicks, the line claimed false precision).
Header reads `$ hallmark.observe()` (cleaner CLI feel). Punchlines
expanded with new lines — "theme connoisseur." / "easy on the
keys." / "speed-run noted." / "calm down, designer." / "showing
off, are we?" Animation rebuilt — arrival fades + scales (1.015 →
1) over 420ms with cubic-bezier(0.16, 1, 0.3, 1) curve, the
underlying page slightly recedes (scale 0.985 + 2px blur) via a
body.easter-open class so the easter feels like a brief teleport.
Exit mirrors with a 360ms ease-in. Reduced-motion: opacity-only.

FAVICON — unchanged from prior pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 13:42:25 +01:00
YoussefandClaude Opus 4.7 58ee2deade Phases C+D+E — pull-arrows, interlude, anti-patterns section, chapter rail 
Three phases of editorial-spine moves landed together:

PHASE C — Pacing.

· End-of-section pull-arrows. Each major section now closes with a
  small italic-serif arrow link pulling the eye to the next
  section: "See the verbs →" (after Section 02), "See the named
  tells →" (after 03), "Read the rules →" (after the new 04),
  "Install in your editor →" (after 05). Hairline rule above each
  arrow. Hover nudges the arrow forward, recolours to accent.
  Theme-aware: editorial themes get italic serif; brutal /
  manifesto / sport / terminal etc. switch to body sans uppercase.

· Mid-scroll typographic interlude between Sections III and IV.
  Single declarative phrase set in the active theme's display
  face on a contrasting paper band: "The page is the demo."
  ("The page" in italic accent, rest in roman ink). Full-bleed,
  centred, generous padding. Pure type, zero motion. Resets
  attention before the anti-patterns section.

PHASE D — Slop, by name.

· Replaced Section 04 (Without/With) with a new Anti-patterns
  section. Five named tells, each shown as: a number (mono), the
  tell's name in italic display with a strike-through (the slop,
  visually struck), a description (italic serif muted), and then
  the Hallmark fix in clean ink with an accent label. Side-by-
  side typography so the contrast IS the design.

  The five tells: purple-gradient hero, Inter-as-display, centred
  everything, icon-tile feature card, the AI nav.

· Original Section 04 markup preserved verbatim inside a
  <template id="section-04-archive-without-with"> wrapper. The
  template element doesn't render but keeps the content in the
  file for revertibility. To restore the original section: change
  the opening <template> to <section class="section reveal"
  style="--i:3" aria-labelledby="s4"> and the closing </template>
  to </section>, then delete the new Anti-patterns section. (The
  archived content uses the vs--notes / vs__panel--dash etc class
  names which contain "--" sequences invalid inside HTML
  comments, hence the template wrapper instead.)

PHASE E — Chapter rail.

· New <aside class="chapter-rail"> pinned to the left margin on
  viewports ≥80rem (1280px). Lists II Examples · III Skills · IV
  Anti-patterns · V Foundations · VI Install. Italic serif Roman
  numeral + small-caps mono name. Hidden below 80rem so it never
  competes with content on narrower screens.

· IntersectionObserver in main.js tracks the topmost visible
  section and adds .is-current to the matching link. Active link
  brightens to ink colour with accent numeral; inactive links
  fade to rule-2 muted. Smooth (one CSS-token transition).

Net editorial gravity:
  Banner → 01/23 indicator + dropdown (clean chrome)
  Section 02 → "Different briefs. Different bones." + larger cards
  Section 03 → unchanged (already strong)
  Mid-scroll → "The page is the demo." interlude
  Section 04 → Anti-patterns ("Slop, by name.") replacing W/W
  Pull-arrows between every section
  Chapter rail on wide screens
  Footer → colophon (publisher's signature page)

Files changed: index.html (markup) · components.css (chapter rail
+ anti-patterns + interlude theme overrides) · sections.css
(anti-patterns layout + pull-arrow + interlude) · main.js
(chapter rail observer).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 12:14:46 +01:00
YoussefandClaude Opus 4.7 5d9354f34d Phase B — banner indicator + dropdown, colophon footer 
The 23-dot strip that occupied half the banner is gone. In its
place: a single text indicator reading "01 / 23 — Specimen" set
in the active theme's display face, with a small caret. Click to
open a compact 6×4 grid of color swatches (no theme names — the
dropdown is deliberately minimal). Outside-click and Escape
close. Theme selection closes and applies in one motion.

Banner before:
  HALLMARK V1.0 | INSTALL | marquee · specimen · enrich-A
  | (spacer) | Specimen · editorial | [• • • • • × 23 dots]
  | shuffle | T

Banner after:
  HALLMARK V1.0 | INSTALL | (spacer) | 01 / 23 — Specimen ▾
  | shuffle | T

Mobile: ordinal hides at <44rem, theme name + caret remain.
Below 26rem the theme name itself collapses; the caret stays as
a control.

Footer — replaced four archetypes (masthead/inline/index/dense)
with a single colophon ("Ft5"). All 23 themes now use it. The
publisher's signature page traditionally doesn't change across
volumes; structural variety lives in the body, not in the
publisher's mark. Theme variation is now purely typographic
re-rendering.

Colophon block:
  Hallmark · v1.0
  Set in Fraunces (display), The Future (body), and The Future
  Mono (label). Currently rendered in <Specimen>.
  Twenty-three named themes across four genres. Twenty-one
  macrostructures. Forty component archetypes. Sixty slop-test
  gates plus a six-axis pre-emit critique.
  Built v1.0 in 2026. Powered by Together AI. MIT licensed.
  Source · Install · Top

Old footer templates and CSS are kept in place but no theme
references them — fully dormant. Easy to revert one or restore
specific archetypes later.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 12:02:10 +01:00
YoussefandClaude Opus 4.7 95f7951691 Phase A — drop nav stamp, add favicon, rework Section 02 cards 
· Remove .banner__stamp ("marquee · specimen · enrich-A") from the
  nav header. The live-stamp annotation was clutter — every visitor
  saw it, almost none read it. Drop the markup, the CSS block, and
  the JS query references. setPressed() is now leaner.

· Add favicon.svg — italic Fraunces "H" on warm-cream square,
  inverted automatically under prefers-color-scheme: dark. Linked
  in <head> via <link rel="icon" type="image/svg+xml">.

· Section 02 (Examples) — title "Eight briefs. Eight different
  shapes." → "Different briefs. Different bones." Tighter, more
  declarative, leans into the structural-variety claim. Card size
  bumped from flex 0 0 32rem → clamp(32rem, 60vw, 44rem) on
  desktop so each card carries more visual weight; mobile bumped
  26rem and 84vw. examples-rail gets symmetric scroll-padding-
  inline plus a flex 0 0 var(--page-gutter) ::after spacer so the
  last card snaps clean to the gutter instead of being cropped by
  the bleed margin on the right.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 11:54:56 +01:00
YoussefandClaude Opus 4.7 dcd45e21d7 Smart placeholders + mobile-responsiveness gates (skill v1.x) 
Two enhancements that surfaced from real use of v1.0:

PLACEHOLDERS — imagery decisions are now explicit, not fuzzy.

· hero-enrichment.md gains an "Image-need detection" table at the
  top. Brief signals map to image strategy: e-commerce / photography
  / food / team / travel / news → photographic placeholders;
  SaaS / manifesto / agency / editorial → kit-led imagery; API /
  docs / dev-tool / editorial-essay → no imagery; default →
  typography-only. Rules call out: never overwrite user-supplied
  assets; ask one short question on ambiguity; never invent stock
  photos as if they were the final design.

· assets.md gains a "Placeholder strategy" section listing the
  source canon in order: Hallmark imagery kit > hand-built SVG >
  Picsum (deterministic seed) > Unsplash (keyword-anchored) >
  local public/placeholder fallback. Swappability rules are
  non-negotiable: TODO comments, single --placeholder-base
  constant, alt text describing intended subject not the
  placeholder.

· imagery-kit.md is new. The skill ships a manifest pointing at
  curated abstract assets hosted on the marketing site
  (hallmark-murex.vercel.app/imagery/<category>/<file>) — six
  categories: watercolor washes, transparent abstract objects,
  editorial ornaments, texture/grain overlays, generic product
  silhouettes, pattern fields. The skill stays binary-free; the
  output references images by absolute URL with graceful fallback
  to hand-built SVG when the asset 404s. Includes CSS recipes for
  layered hero composition (transparent PNG, large, off-centre,
  z-index 0 behind text), section background wash, decoration,
  texture overlay, empty state. Anti-patterns: don't use kit as
  literal subject, don't layer 3+ pieces, don't apply same wash
  to multiple sections, don't use kit imagery in modern-minimal
  genre.

· SKILL.md Step 4 wires the heuristic — "First, does the brief
  need imagery at all?" runs before tier selection, defaults to
  typography-only.

MOBILE — the responsiveness pass is now codified as gates.

· slop-test.md adds gates 61–65 covering the patterns the
  marketing-site responsiveness fix uncovered: image-bearing grid
  tracks must use minmax(0, 1fr) (61), root must have overflow-x:
  clip on html and body (62), display headers wrap inside long
  words via overflow-wrap: anywhere (63), per-theme section-head
  overrides include mobile collapse (64), CSS-only radio tab
  patterns must not scroll-jump (65). New stamp line: mobile:
  pass (36, 59, 61–65).

· responsive.md grows a "Mobile — non-negotiable" section at the
  top that consolidates all seven mobile gates as a hard floor.
  Test at 320 / 375 / 414 / 768 px before marking complete.

· SKILL.md Discipline 5 expanded — was just "clickable text never
  wraps" (gate 59), now broader "mobile responsiveness — every
  emit verified at 320/375/414/768" naming all seven gates.

Skill total grew from 6633 → 6890 lines (+257, ~4%). The new
imagery-kit.md is 170 lines, larger than the original ~55-line
plan because it ships the actual CSS recipes for layered hero
composition, section wash, texture overlay, and empty state — the
implementation-grade detail required to hit the "professional
frontend engineer" bar set in the plan.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-06 11:38:06 +01:00
YoussefandClaude Opus 4.7 7257f10463 Compact study card · hide second example on mobile (Section 03 Row II) 
Two changes that lighten the vertical footprint of the Study row:

· On mobile (≤ 48 rem), only the first study example renders — the
  second is hidden via .study-card + .study-card { display: none }
  inside .skill-row__body--study. Two stacked DNA cards (image +
  10-row key/value table each) was eating most of a phone screen
  for one verb; one example carries the same point.

· Across all screens: image aspect-ratio 16/10 → 16/7 (shorter
  media slot), DNA panel padding md/lg/lg → sm/md/md (one step
  lighter), per-row padding-block sm → xs inside .study-card__dna
  (tighter row rhythm). Skill-row list panels keep their existing
  padding — only the study card gets the tightened density.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-05 16:40:01 +01:00
YoussefandClaude Opus 4.7 70dfe21464 Mobile responsiveness pass — fix overflow, scroll-jump, section heads 
Several mobile issues reported by user manifested across themes:
photographic hero overflowing viewport, hero text wrapping into the
next line incorrectly, tab clicks jumping the page, section titles
overlapping section labels on Sport (and any theme overriding the
default section-head grid).

Changes:

· site/css/components.css — .hero--photo: grid-template-columns is
  now minmax(0, 1fr) so the column shrinks below the 1600 px image
  natural width on narrow viewports. .hero__photo-grid switches to
  2 cols × 3 rows at <= 40rem with 4/3 aspect-ratio (was 3 × 2 at
  16/7 and forced page wider than viewport on phones). Studio's
  redundant aspect-ratio: 16/7 override removed so the mobile rule
  can apply.

· site/css/base.css — html, body now use overflow-x: clip (previously
  body alone had overflow-x: hidden). `.hero__display`,
  `.section__title`, `.skill-row__title` get overflow-wrap: anywhere
  and min-width: 0 — long hyphenated words like "AI-generated" in
  uppercase Inter Tight 900 (Brutal) no longer overflow with their
  hyphen as the only break opportunity.

· site/css/sections.css — diptych breakpoint pushed 40rem → 48rem so
  Refine + Redesign demos stack vertically at the Chrome-headless
  500 px floor (and on real phones below 768 px). Added a final-block
  mobile rule [data-theme] .section__head { grid-template-columns:
  1fr; gap; align-items } at <= 48rem to win cascade specificity
  against per-theme overrides (Sport, Atelier, Newsprint, Terminal,
  Manifesto, Salon, Linen, Almanac, Brutal). Without this, Sport's
  6rem 1fr override kept the section head 2-column on mobile and
  the italic Anton title wrapped onto the "02 / EXAMPLES" label.

· site/js/main.js — tab scroll-jump fix. The CSS-only radio tab
  pattern in Section 04 (without/with) and Section 05 (foundations)
  positions the radio inputs at top:0 of their section. Clicking a
  label focuses the input → browser scrolls the section's top into
  view → page jumps upward on every tab click. Fix intercepts label
  clicks, prevents default, manually toggles checked, dispatches
  change, and focuses with preventScroll so keyboard navigation
  still works without the unwanted scroll. Older browsers without
  preventScroll fall back to scroll-position save/restore.

Verified across all 23 themes at 500 px headless (Chrome's mobile
floor — real-phone-equivalent rules also fire below 576 px). No
horizontal overflow, no overlapping titles, photographic-hero
themes (Studio, Brutal) now show 6 thumbnails in a 2 × 3 grid that
fits the viewport, all section titles collapse cleanly under their
section labels.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-05 16:00:18 +01:00
YoussefandClaude Opus 4.7 22b3697bef v1.0 — anti-slop hardening, Section 03 skills showcase, drop FAQ 
Section 03 ships as the five-skills showcase (Build · Study · Audit ·
Refine · Redesign), each row with its own structurally-distinct demo.

SKILL.md and references — new disciplines that hold across every verb:

· Pre-emit self-critique on six axes (Philosophy · Hierarchy · Execution
  · Specificity · Restraint · Variety) — anything <3 triggers revision
· Honest copy — no fabricated metrics, real numbers or labelled
  placeholder, never invent "+47% conversion"
· Locked tokens — no mid-render colour or font-family improvisation
· Re-drawn UI chrome forbidden — never hand-build fake browser bars,
  phone frames, code-block windows, IDE chrome
· Clickable text never wraps to two lines on shrink

Slop test grows from 55 to 60 gates (gates 56–60). Pre-emit critique
block sits above the gate sweep. anti-patterns.md gains five new named
entries; responsive.md gains "Clickable text — never wraps" with the
4-step fix order.

Site:

· Studio photographic hero — empty 3x3 placeholder grid replaced with
  a 3x2 showcase of six real Hallmark output thumbnails (Static Hour,
  NAJM, Tally hero, Nexus, Tracejam, Tally process)
· Studio — strip "· selected work" suffix from section labels
  (::after rule removed) and from hero eyebrow COPY
· FAQ section dropped from landing page · CSS removed · Install
  renumbered 07 → 06, footer reveal index 7 → 6
· Section 03 Row I (Build) demo swaps Tide → Static Hour
· README — concise intro paragraph, hero showcase swapped to four
  new outputs (Static Hour, NAJM, Tally hero, Nexus)

Version bumped to 1.0.0 across package.json, SKILL.md, banner, footer,
JS captions, and the artifact stamp string.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-05 15:30:38 +01:00
Youssef 78167667a2 v0.9.0 polish — drop image gen + sprinkle, normalize section spacing across themes 
REMOVED (per user direction — imagery is on hold for now):
- site/img/generated/ (18 watercolor PNGs + contact sheet + URL cache)
- scripts/generate-marketing.mjs
- skill/_assets/scripts/generate.mjs (user-recipe drop-in)
- skill/references/generated-imagery.md
- All imagery markup in site/index.html (transitions, foundation panel plates, harness plates, footer mark)
- The .wc / .transition / .slot--hero::before / #study::before / .found-panel__plate / .harness__plate / .foot-mark CSS block from sections.css
- Tier C "peer of Tier B" rewrite reverted — back to "last resort, only when characters demand it"
- Anti-pattern "Raw generated stills" entry reverted
- assets.md Tier C catalog reverted to Nanobanana 2 / Gemini 2.5 Flash baseline
- README v0.9.0 release note rewritten without imagery mentions

KEPT:
- Editorial theme (#23) — open-design-inspired premium · warm cream + coral + Inter Tight × Playfair italic
- Open-design steal utilities — Roman-numeral section heads (.num--roman), corner-bracket image annotation (.fig-corners), dark-slab section reversal (.section--invert), pulse animation (.pulse), .tnum tabular-numerals utility, smart-hide banner stub (.banner--smart)
- 22 → 23 theme catalog refresh across SKILL.md, custom-theme.md, structure.md, README, site
- Version 0.8.0 → 0.9.0

NEW: Spacing pass — normalized internal rhythm across all 23 themes
- --section-gap normalized: was 4.5–12rem (huge variance), now 5.5–6.5rem (uniform feel)
  · Atelier 12 → 6.5 (biggest cut)
  · Quiet 10 → 6.5 · Linen 10 → 6.5 · Aurora 10 → 6.5
  · Garden 9 → 6.5 · Salon 9 → 6.5 · Bloom 9 → 6.5
  · Specimen 8 → 6.5 · Almanac 4.5 → 5.5 (slight bump)
- --section-head-gap normalized: was 1–3.5rem, now 1.25–1.75rem (smaller spread)
- .section { gap: var(--space-2xl) } → var(--space-xl) — content sits closer to its head; less air inside each section
- Editorial theme block gains explicit --section-gap + --section-head-gap (was inheriting from :root)

Visual: every theme now has the same vertical rhythm (~6rem between sections, ~1.5rem under heads). The page reads as one document instead of 23 different ones.
 2026-05-05 11:59:22 +01:00
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