From 606a40426152bd9a58b4bcfdef9d76372e638ab6 Mon Sep 17 00:00:00 2001 From: Youssef Date: Thu, 30 Apr 2026 14:14:27 +0100 Subject: [PATCH] =?UTF-8?q?v0.6.0=20=E2=80=94=20Tracejam=20fixes,=20three?= =?UTF-8?q?=20new=20slop-test=20gates,=20two=20new=20SaaS=20tests,=20galle?= =?UTF-8?q?ry=20thumbnails?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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) --- README.md | 7 +- site/_tests/04-meridian-manifesto/index.html | 118 +- site/_tests/04-meridian-manifesto/style.css | 278 +++++ site/_tests/05-tracejam-saas/index.html | 6 +- site/_tests/05-tracejam-saas/style.css | 30 +- site/_tests/07-foundry-compliance/brief.md | 66 ++ site/_tests/07-foundry-compliance/index.html | 378 ++++++ site/_tests/07-foundry-compliance/style.css | 961 +++++++++++++++ site/_tests/08-cohort-courses/brief.md | 69 ++ site/_tests/08-cohort-courses/index.html | 405 +++++++ site/_tests/08-cohort-courses/style.css | 1094 ++++++++++++++++++ site/_tests/README.md | 55 +- site/_tests/_thumbs/01-tide.png | Bin 0 -> 144772 bytes site/_tests/_thumbs/02-streampipe.png | Bin 0 -> 103263 bytes site/_tests/_thumbs/03-maple.png | Bin 0 -> 134724 bytes site/_tests/_thumbs/04-meridian.png | Bin 0 -> 86136 bytes site/_tests/_thumbs/05-tracejam.png | Bin 0 -> 139534 bytes site/_tests/_thumbs/06-anya.png | Bin 0 -> 122683 bytes site/_tests/_thumbs/07-foundry.png | Bin 0 -> 91748 bytes site/_tests/_thumbs/08-cohort.png | Bin 0 -> 112198 bytes site/css/components.css | 35 + site/index.html | 48 +- skill/SKILL.md | 10 +- skill/references/layout-and-space.md | 22 + skill/references/macrostructures.md | 28 + skill/references/microinteractions.md | 39 + skill/references/typography.md | 33 + 27 files changed, 3658 insertions(+), 24 deletions(-) create mode 100644 site/_tests/07-foundry-compliance/brief.md create mode 100644 site/_tests/07-foundry-compliance/index.html create mode 100644 site/_tests/07-foundry-compliance/style.css create mode 100644 site/_tests/08-cohort-courses/brief.md create mode 100644 site/_tests/08-cohort-courses/index.html create mode 100644 site/_tests/08-cohort-courses/style.css create mode 100644 site/_tests/_thumbs/01-tide.png create mode 100644 site/_tests/_thumbs/02-streampipe.png create mode 100644 site/_tests/_thumbs/03-maple.png create mode 100644 site/_tests/_thumbs/04-meridian.png create mode 100644 site/_tests/_thumbs/05-tracejam.png create mode 100644 site/_tests/_thumbs/06-anya.png create mode 100644 site/_tests/_thumbs/07-foundry.png create mode 100644 site/_tests/_thumbs/08-cohort.png diff --git a/README.md b/README.md index 964d31c..5affeca 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ The differentiator: Hallmark insists on **structural variety**, not just visual - **[`SKILL.md`](skill/SKILL.md)** — the routing file. Design flow (six steps, including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), slop test (35 questions), output contract. - **[`references/`](skill/references/)** — sixteen short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states, responsive, copy, anti-patterns, the 21 named macrostructures, the 36 component archetypes with variation knobs, the 6 primitive structure axes, the vision-extraction protocol for `study`, and three new files for hero work — `hero-enrichment.md` (when to add visuals to a hero, plus eight enrichment archetypes), `custom-craft.md` (how to hand-build CSS art, SVG, declarative animation, JS-driven motion, with Lottie demoted to last resort), and `assets.md` (sourcing canon for icons, brand logos, generated illustration via Nanobanana / Recraft, library illustration, app mockups, hero video, photography, abstract backgrounds). -- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Sixteen themes** — Specimen, Newsprint, Atelier, Garden, Salon, Linen, Almanac, Midnight, Terminal, Brutal, Manifesto, Sport, Studio, Pastel, Riso, **Quiet** — that swap not just colour and typography but the page's hero archetype and footer archetype. Switching themes literally rebuilds the page. +- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Sixteen themes** — Specimen, Newsprint, Atelier, Garden, Salon, Linen, Almanac, Midnight, Terminal, Brutal, Manifesto, Sport, Studio, Pastel, Riso, **Quiet** — that swap not just colour and typography but the page's hero archetype and footer archetype. Switching themes literally rebuilds the page. The "07 · Examples" section ships with **eight** generation tests (under [`site/_tests/`](site/_tests/)) — each a self-contained HTML + CSS demo of the skill, with a real visual thumbnail on the gallery card. - **[`ROADMAP.md`](ROADMAP.md)** — Tier 1, 2, 3 work plus an explicit "things to *not* do" list. --- @@ -60,11 +60,14 @@ Press `T` to cycle themes, `R` for random, `?theme=studio` for a shareable link. - **Macrostructures over axes.** Pick one of 21 named whole-page shapes wholesale; the macrostructure stamp lives in the CSS comment, so the next Hallmark run picks something different. - **Within-archetype variation.** Two Bento Grids should not be twins; each archetype has 2–3 picked-per-output knobs. - **Microinteractions as discipline.** Silent success over celebratory toasts. Optimistic update + Undo over confirm dialogs. Hover delay 800 ms, focus delay 0 ms. -- **A 35-gate slop test** runs before every output. One yes fails the build. New gates 34 (different-knobs check across runs) and 35 (aria-label / aria-hidden on every visual-only SVG / canvas / div). +- **A 38-gate slop test** runs before every output. One yes fails the build. Three new gates added in v0.6.0: gate 36 (no horizontal scroll between 320 px and 1920 px — `html { overflow-x: clip }` is mandatory under any clipped-edge enrichment), gate 37 (decorative effects on text — highlighter bands, accent strokes, underlines — must be visually verified to sit in the right vertical zone, not at the baseline like a fat underline), gate 38 (interactive bars must declare `align-items: center` and `line-height: 1` — inheriting line-height fights vertical rhythm). - **Project memory.** A per-project `.hallmark/log.json` records each run's macrostructure + theme + enrichment + brief summary. The skill reads the last 3–5 entries before picking, and writes a new entry after each build, so consecutive Hallmark outputs in the same project don't repeat shapes or themes. - **Theme-diversification rule.** Two consecutive themes must differ on at least one of three axes: paper band (dark / mid / light), display style (italic-serif / roman-serif / geometric-sans / mono / display-condensed-italic / display-heavy / system-native / risograph), accent hue (warm / cool / neutral / chromatic). Specimen-fall-through is no longer the only diversification check. - **Voice fixtures over LLM defaults.** Each of the 21 macrostructures ships with 2–3 example opening lines from real designer-engineer sites (Pentagram, Klim, Linear, Are.na, Resend, Lynn Fisher, Rauno Freiberg, etc.). Each of seven tones in `copy.md` has three voice patterns × five sample sentences. "Built for the modern team" is in the banned-phrases list. - **Hero enrichment is opt-in, not a default.** A typographic-only hero is always acceptable. When enrichment is right, the skill picks from a six-tier hierarchy: typography only → custom-built CSS art → hand-built SVG → generated illustration (Nanobanana / Recraft) → library + customise → Lottie (last resort). +- **Microinteractions are default-on for SaaS-shaped archetypes.** Bento Grid, Stat-Led, Workbench, Marquee Hero, and Conversational FAQ pages ship with 2–3 small purposeful microinteractions (number reveal on stats, pricing card lift, marquee scroll, recommended-tier pulse, stagger reveal on testimonials) without the user having to ask. Editorial / Manifesto / Letter / Quote-Led pages stay still — stillness is the brand on those. +- **SaaS page sequence.** When the macrostructure is a SaaS-typical archetype, ship hero → social proof / logo wall → features → testimonials → pricing → FAQ → CTA → footer by default. Real prices, not "contact sales for pricing" on every tier; specific testimonials with role and company, not abstract job titles. +- **Wordmark may use a different display face.** A Geist-bodied SaaS page can set its wordmark in Fraunces; a Crimson-Pro-bodied compliance page can use IBM Plex Mono. Same-family collapse on Bento / Stat-Led / Workbench / Marquee Hero archetypes is the new "un-branded" tell. - **`study` extracts DNA, not pixels.** Vision-extraction with refusal heuristics, type-role vocabulary (no font ID guessing), and a confirmation step before any code. --- diff --git a/site/_tests/04-meridian-manifesto/index.html b/site/_tests/04-meridian-manifesto/index.html index 6c7d7d2..cfe229e 100644 --- a/site/_tests/04-meridian-manifesto/index.html +++ b/site/_tests/04-meridian-manifesto/index.html @@ -11,7 +11,7 @@
Meridian - 2026 · A MANIFESTO · IN FIVE PARTS + LISBON · 2026 · A MANIFESTO · WITH NOTES
@@ -48,6 +48,122 @@

We will not put our work behind a chatbot. We will answer the email ourselves, or not at all.

+
+
+ — WHAT WE REFUSE — +

A studio is what it doesn't do as much as what it does. The list:

+
+
    +
  • The lifestyle stock photo of a smiling person with a laptop on a wooden table.
    • +
  • The 90-minute discovery call disguised as a sales meeting.
    • +
  • The synthetic testimonial. The "Fortune 500 trust us" without the names.
    • +
  • The roadmap webinar. The launch countdown. The early-access waitlist gate.
    • +
  • The retainer that buys our attention at the expense of our work.
    • +
  • The hero shot. The lifestyle render. The "in-the-wild" mockup.
    • +
  • "Innovation." "Ecosystem." "Reimagine." "Empower." "Unleash."
    • +
  • Plastic that promises to biodegrade in six hundred years and a research paper.
    • +
+
+ +
+
+ — WORKING RULES — +

How we work, on the days we are honest about it.

+
+
    +
  1. + 01 +

    We meet the material before we meet the brief. If we cannot hold the thing, we do not name it.

    +
    2. +
  2. + 02 +

    The first sketch is on paper. The second sketch is on paper. The third is the prototype.

    +
    3. +
  3. + 03 +

    If we cannot describe the product in two sentences to a person who is not paid to listen, the product is wrong.

    +
    4. +
  4. + 04 +

    We do not present three options when we know which one we believe in. The other two are theatre.

    +
    5. +
  5. + 05 +

    We send the invoice the same week we send the work. Money is part of the practice.

    +
    6. +
  6. + 06 +

    We will say no in the first meeting if we mean to say no. The second meeting is for yes.

    +
    7. +
  7. + 07 +

    The studio closes for August. The studio closes for the week between Christmas and New Year. We are not a service.

    +
    8. +
+
+ +
+
+ — THE PRACTICE — +

What a project at Meridian looks like, end to end.

+
+
+

A project begins with a letter. Not an email — a letter, on paper, in the post. We ask the client to write us one before the first call. Most of them do. The ones who don't, we don't take. The letter is not a screening test; it is a way of slowing the start of work down to the speed at which work actually happens.

+

The first three weeks are field research. We visit the site, the workshop, the warehouse, the factory floor — wherever the thing in question is being made or used. We do not begin sketching until we have stood in the place where the work will live. Photographs come back, but not for the deck. They come back so we remember what the room smelled like.

+

The middle of a project is materials cycle: we order samples, we cut them, we age them in the studio's south-facing window for two weeks, we drop them in the rain, we forget about them, we come back. We document the cycle in a small printed booklet that ships with the final delivery. The booklet is not a flourish — it is the receipt that the work was made, not specified.

+

A project ends with a post-occupancy review, six months after delivery. We come back, we measure what happened, we publish the findings — even when the findings are uncomfortable. The findings live on this site, in the section called Notes, which we update on the last Friday of every quarter.

+
+
+ +
+
+ — WHAT WE READ — +

A short list of things that shape how we think. Most of them are old. None of them are by us.

+
+
    +
  • + 1977 + A Pattern Language + Christopher Alexander, Sara Ishikawa, Murray Silverstein +
    • +
  • + 1994 + How Buildings Learn: What Happens After They're Built + Stewart Brand +
    • +
  • + 2006 + Sustainable by Design: Explorations in Theory and Practice + Stuart Walker +
    • +
  • + 1973 + Small Is Beautiful: A Study of Economics as if People Mattered + E. F. Schumacher +
    • +
  • + 1985 + The Tao of Programming + Geoffrey James — yes, the joke book; the joke is the lesson +
    • +
  • + 2018 + The Tyranny of Metrics + Jerry Z. Muller +
    • +
  • + 2003 + In Praise of Shadows + Jun'ichirō Tanizaki, trans. Harper & Seidensticker +
    • +
  • + 2021 + Four Thousand Weeks: Time Management for Mortals + Oliver Burkeman +
    • +
+
+