External/hallmark
1
0
Fork 0
mirror of https://github.com/Nutlope/hallmark.git synced 2026-08-14 12:35:33 +02:00
Code Issues Packages Projects Releases Wiki Activity
16 Commits 12 Branches 0 Tags
b1885e6c35e687c7fdc381ea5591f2b1bf7c6cfd
Commit Graph
10 Commits
Author SHA1 Message Date
YoussefandClaude Opus 4.7 ceea50279f Foundry → Plain pure-white palette · gallery thumb fit · tighter screenshots 
## Foundry repalleted from Newsprint to Plain (pure white)

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

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

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

## Gallery thumb fit

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

## Screenshots re-captured at 1100×688

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

## Files

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-30 14:56:35 +01:00
YoussefandClaude Opus 4.7 606a404261 v0.6.0 — Tracejam fixes, three new slop-test gates, two new SaaS tests, gallery thumbnails 
## Tracejam (test 05) defects fixed

- Horizontal scroll suppressed via `html { overflow-x: clip }` + `body` fallback
- Navbar items vertically centered (`align-items: center`, `line-height: 1`)
- Wordmark switched from Geist to Fraunces (`--font-wordmark`) — different register from body
- Hero highlight raised from baseline to mid-x-height — reads as highlighter, not fat underline
- Browser-frame chrome dots get `aria-hidden="true"`

## Skill hardening — three new slop-test gates (35 → 38)

- **Gate 36**: page must not horizontally scroll on any viewport 320–1920 px
- **Gate 37**: decorative effects on text (highlighter / accent stroke / mark) must be visually verified at x-height, not baseline
- **Gate 38**: interactive bars must declare `align-items: center` + `line-height: 1`

## New reference rules

- `layout-and-space.md` § Page-edge clipping — global clip is mandatory under any clipped-edge enrichment
- `typography.md` § Wordmark / logo — wordmark may use a different display face; should on Bento / Stat-Led / Workbench / Marquee Hero
- `microinteractions.md` § When to ship motion by default — default-on for SaaS-shaped archetypes, default-off for Editorial / Manifesto / Letter / Quote-Led / Long Document; six recipes documented (number reveal, pricing lift, marquee, stagger, recommended-tier pulse, CTA hover)
- `macrostructures.md` § SaaS page sequence — hero → social proof → features → testimonials → pricing → FAQ → CTA → footer; with voice rules (real prices, specific testimonials, conversational FAQ)

## Meridian Manifesto (test 04) extended

7 sections → 11 sections. Added § What we refuse (anti-list with strikethrough), § Working rules (7 numbered operational principles), § The practice (3-paragraph narrative with drop-cap), § What we read (annotated bibliography with 8 titles). Voice consistent with the original manifesto — declarative, no testimonials, no pricing.

## Two new SaaS-focused tests

- **Test 07 — Foundry** (Stat-Led + Newsprint). SOC2 / ISO27001 compliance automation. Hero is one giant number ("847" — animated counter from 0). 9 sections incl. 3-tier pricing, 3 testimonials with role + company, 8-question FAQ. Pricing card hover-lift + recommended-tier pulse-once.
- **Test 08 — Cohort** (Marquee Hero + Salon). Cohort-based courses platform. Continuous-scroll marquee of course titles. Alternating-side feature rows with hand-built CSS visualisations (card-stack, hours grid, thread, report). Stagger-reveal on testimonials. 2-tier pricing, 6-question FAQ, centered Salon footer.

Both tests respect prefers-reduced-motion. Both pass the 38-gate slop test. Both demonstrate the new SaaS page sequence.

## Gallery thumbnails

`site/_tests/_thumbs/01–08.png` — eight 1024×640 screenshots captured via Chrome headless. Gallery cards on the landing page now show real visual previews above the text. Cards inherit theme tokens (radius, rule, shadow) so switching the landing page's theme reskins the card frames around the screenshots. Hover scales the thumb 1.025× over 500 ms; respects prefers-reduced-motion.

Section title updated: "Six pages, six different shapes." → "Eight pages, eight different shapes."

## SKILL.md version bump

0.5.0 → 0.6.0.

## Files

- 13 modified, 6 created (tests 07 & 08 directories), 8 thumbnails added.
- ~840 lines added, ~25 removed.
- All skill files mirrored into `~/.claude/skills/hallmark/`.

## Deferred to next session

- **Study + redesign combined verb** — single-shot screenshot-to-rebuilt-page.
- **Auto-generated OG cards** — Node + Puppeteer utility for 1200×630 PNG from macrostructure stamp.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-30 14:14:27 +01:00
YoussefandClaude Opus 4.7 b61f1efc8d Twelve targeted skill additions — Tier 1, 2 & 3 
Implements all twelve Tier 1, 2, and 3 items from the test-suite
findings (skipping #12 study+redesign and #14 OG cards, both deferred).
Aim: tighten the gaps the six-test exercise surfaced — copy voice,
theme diversification, sub-domain disambiguation, mobile collapse,
illustration recipes, accessibility gates.

SKILL.md (items 3, 6, 10, 11). Version 0.4.0 → 0.5.0. New step 2.5
documents reading .hallmark/log.json before macrostructure pick;
Step 5 (Build) now writes to that file after each output. Theme-
diversification rule expanded: two consecutive themes must differ on
at least one of paper-band / display-style / accent-hue. Slop test
33 → 35 with two new gates: different-knobs check and
aria-label/aria-hidden presence on visual-only SVG / div / canvas.

macrostructures.md (item 1). 21 macrostructures each gain 2–3
example opening-line copy fragments — drawn from Pentagram, Klim,
Linear, Are.na, Resend, Craig Mod, Rauno Freiberg, Tracejam,
Maple Bakery, Anya, Streampipe, Meridian. Imitate the kind of
specificity (named places, dates, verticals; refusal of metaphor),
not the wording.

structure.md (item 2). Domain → trio table refined: developer-docs
split from SaaS-marketing; personal one-pager split from work-led
portfolio. Plus a clarifying note on splits and when to ask one
disambiguating question before picking.

typography.md (item 4). Pairing table doubled: each of 8 tones now
gets a Free baseline row (Geist, Fraunces, Bricolage Grotesque,
JetBrains Mono, system-ui) and a Paid upgrade row (Söhne, Tiempos,
Druk, Berkeley Mono, ABC Diatype). Discipline note: never name a
paid font without confirming the user is licensed — the demo will
fall back to system-default and look broken.

hero-enrichment.md (item 5). Each E1–E8 archetype gains a 4-6 line
worked example: Tracejam clipped-edge, fashion lookbook full-bleed
loop, Linear-style mockup split, code-formatter floating mockup,
Maple Bakery custom illustration, whiteboard CSS-orbit loop, podcast
gradient + grain, Lisbon café photography. Examples reference real
test pages where they exist.

copy.md (item 8). New "Voice samples per tone" section: 7 tones,
3 voice patterns each, 5–8 example sentences per tone (105+ samples
total) drawn from real non-LLM sources. Plus a banned-opening-lines
table — "Built for the modern team", "Unleash your X", "Where X
meets Y", "Empower your...", and 6 more — each with a one-line
reason it fails.

component-cookbook.md (item 9). Single comprehensive Mobile Collapse
table at the end documents all 36 archetypes' collapse behaviour at
60rem (layout breakpoint) and 40rem (typography breakpoint). Plus
five cross-cutting rules (44px hit targets, container padding,
disable scroll-linked motion, lazy-load below-fold, data-saver
respect).

custom-craft.md (item 7). New Recipe library section adds four
hand-built illustration recipes after the existing bakery loaf:
(1) workflow / process diagram with animated stroke-dashoffset flow,
(2) minimal-line mascot with @keyframes blink loop, (3) three-tier
architectural diagram with @property --flow-offset data flow,
(4) botanical leaf flourish (no animation — the design is the
stillness). Each recipe is full code, "use when / avoid when",
reduced-motion fallback, and named real-world inspiration. Plus
a Cross-recipe techniques callout summarising the four habits of
hand-built CSS/SVG illustration in 2026.

site/index.html + components.css (item 13). New section 07 ·
Examples on the landing page links to the six self-contained
test pages under site/_tests/. Six gallery cards display the
test number, name, macrostructure stamp shape, one-line description,
and a "View ↗" affordance. The cards inherit --radius-card,
--rule-card, --shadow-card from the active theme — switching themes
restyles the gallery alongside everything else. Footer slot's --i
shifted from 6 to 7 to preserve reveal-stagger ordering.

README.md updated to reflect: 35-gate slop test, project memory,
theme-diversification rule on three axes, voice fixtures over
LLM defaults.

Defers: #12 study+redesign combined verb, #14 auto-generated OG
cards. Both ready to plan when the user wants them.

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

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

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

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

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

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

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

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-30 10:26:22 +01:00
YoussefandClaude Opus 4.7 b5b21ceebf Hero enrichment + custom-craft canon + Quiet theme 
The skill now knows how to add hero visuals — demo videos, mockups,
illustrations, animated loops, abstract backgrounds, photography — and
when not to. The default answer remains typography-only; enrichment
has to earn its place.

Three new references. hero-enrichment.md is the decision file: an
enrichment hierarchy (typography → custom CSS art → hand-built SVG →
generated illustration → library + customise → Lottie last resort),
a brief-domain decision protocol (SaaS → demo video, bakery → custom
illustration, manifesto → none), eight enrichment archetypes (E1
clipped-edge demo video with the full Linear/Vercel recipe, E3/E4
mockups, E5 custom centerpiece, E6 custom animated loop, E7 subtle
gradient + grain background, E8 photography), and an eight-question
quality bar. custom-craft.md is the how-to-build-it file: pure CSS
art (Lynn Fisher / Diana Smith canon — clip-path, conic-gradient,
@property, mask, blend-mode), hand-built SVG with the Figma → SVGOMG
pipeline and declarative animation via CSS keyframes / @property /
animation-timeline / View Transitions, JS-driven motion with the
Motion / GSAP / AutoAnimate decision rule, Three.js when the 3D is
the hero value not when it isn't, generated stills via Nanobanana 2
and Recraft V4 with discipline (always post-process, reference images,
stamp the model), and Lottie explicitly demoted to last resort with
the rule "never for what CSS can do". A bakery worked example shows
all of it. assets.md is the sourcing canon: Lucide / Phosphor /
Heroicons (icons, never mix sets), Simple Icons / SVGL (logos),
Storyset / Humaaans / unDraw (library illustration with mandatory
customisation), Browserframe / Ray.so / Cleanmock (mockups), Mixkit /
Coverr / Pexels (video with the AV1 → VP9 → H.264 codec chain and
fetchpriority="high" rule), Unsplash / Nappy / Shotstash (photography),
CSS gradients + fffuel.co (abstracts, no aurora), LottieFiles / Rive
(last resort).

Three new hero archetypes in component-cookbook.md (H7 clipped video,
H8 mockup split, H9 custom illustration centerpiece) with within-
archetype variation knobs added to the table.

Eight new tells in anti-patterns.md: aurora-blob background, floating-
orb decoration, sound-on autoplay, lazy-loaded LCP, mismatched icon
sets, AI-illustration look, Lottie shortcut, Three.js for a still
object.

Slop test 29 → 33 with four hero-enrichment gates: video autoplay
discipline, abstract-background restraint, single-icon-library check,
and the Lottie-shortcut catch.

SKILL.md design flow gains Step 4 "Decide on hero enrichment" between
the macrostructure pick and the build, with the enrichment hierarchy
as a non-negotiable. Frontmatter version bumped to 0.4.0. New refs
listed as load-on-demand.

Sixteenth theme: Quiet. Restraint as the design — system fonts
(no web fonts loaded for Quiet), barely-warm near-white paper
(oklch 99.5% 0.002 90, deliberately not pure #FFFFFF), barely-cool
near-black ink, accent equal to ink (no chromatic accent at all),
average-sized headlines (clamp 1.75–2.75rem, much smaller than the
3.5–8rem of every other theme), generous whitespace (section-gap
12rem). Hero archetype: Letter. Footer: Inline. No reveals — Quiet
is intentionally still. A deliberate exception to Hallmark's "pair
distinctive display + body" rule, which the theme tokens block calls
out explicitly. The user spec was "the most simple you can make it";
Quiet is.

Landing page demonstration of E1: Pastel theme now renders the
clipped-edge dashboard mockup as its hero instead of Letter. The
mockup is hand-built CSS art — no real video, no images. Browser
chrome (three dots, hallmark.studio URL), a sidebar with the active
item in indigo accent, a 3-card grid showing a stat, a sparkline, and
a rows card. Tilted -0.4° for life. Extends ~12vw past the viewport
right edge. Collapses to stacked at < 60rem. The implementation IS
the custom-craft principle: built, not picked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-29 15:42:17 +01:00
YoussefandClaude Opus 4.7 958dacdcb8 Swap Instrument Serif → Fraunces; tighten README 
Instrument Serif italic has a single-storey looped lowercase 'a' that
read as unfamiliar. Fraunces' italic is a conventional double-storey
italic with cleaner letterforms. As a bonus, Fraunces is already named
first in Specimen's font chain — Specimen has been silently falling back
to Georgia. Loading Fraunces means Specimen finally renders in the serif
it was meant to.

Studio's display tokens point at Fraunces with opsz 144 + SOFT 30 for
the editorial-agency feel; the rest of the typography stack is unchanged.

README is rewritten to be roughly 30% shorter. Each reference file is
no longer enumerated; the directory link is the source of truth. The
philosophy section is condensed into six bullets. The credits section
is reformatted as a list with the contribution each project made,
and adds Anthropic's Skill Engineering writeup as a load-on-demand
inspiration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-29 14:54:25 +01:00
YoussefandClaude Opus 4.7 8bdb3ef4bd Three more themes — Studio, Pastel, Riso — for 2026 voice gaps 
Twelve themes covered editorial, technical, soft, bold. Three voices were
missing: modern italic-display agency (Studio), post-Linear soft-tech (Pastel),
and analog/print rebellion (Riso). Each uses fonts from Google Fonts that
the existing twelve don't touch.

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

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

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

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

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

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

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-04-28 15:56:35 +01:00
Youssef 3fab5ba75b Move theme picker out of navbar to a fixed bottom-left chip 
The 12-theme popover was congested when opened inline in the
navbar. Now it lives as a floating chip in the bottom-left corner:
always reachable on desktop and mobile, popover opens upward, and
the navbar is a clean two-column wordmark + meta layout.

- index.html: themer markup moved to end of <body>, navbar simplified
- components.css: .themer is position: fixed with bottom/left anchors,
  popover opens upward (bottom: 100% + 0.5rem), responsive grid
  collapses to 2 columns under 60rem
- sections.css: removed .nav__themer rules; .nav restored to flex
  space-between
- README.md: rewritten concise + complete, mirrors the v0.2.0 surface
  (10 reference files, 12 themes, 4 verbs, 20-question slop test)
 2026-04-27 22:38:45 +01:00
Youssef c49b190911 Initial commit: Hallmark v0.2.0 
Anti-AI-slop design skill for Claude Code, Cursor, and Codex,
plus a self-demonstrating landing page powered by Together AI.

- 4 verbs: default / audit / refine / redesign
- 10 reference files including microinteractions and structure
- 12 themes with structural fingerprints
- Two test specimens: bakery (editorial) and cmdk (technical)
- 20-question slop test covering visual, structural, and microinteraction tells
 2026-04-27 21:46:57 +01:00