mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
main
46
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Youssef
|
c20fc5dd09 |
Refine Grid before it lands: a marks kit, one plate, and a signal-ink axis
The theme that shipped in the first cut was quiet to a fault: outside the hero, its pages fell back to ruled prose. This revision gives the theme a constructive vocabulary and tightens the site integration around it. Theme (grid.md, rewritten): - A marks kit: period square, 3px bar, register crosshair, quarter-disc, stepped bars, dot module, border arrows, 45-degree diagonal, and giant cropped numerals, all locked to the column tracks. - The plate: at most one full-bleed flooded band per page as the poster moment, rails continuing across it. - A signal-ink axis: one ink per page, signal red (default), ultramarine, or surface-only signal yellow; two pages in a run never share the ink. - Section-object law: a band that is only prose has failed the theme. - Asymmetric occupancy (prose capped at 6 of 12 columns) and structural whitespace; grid-snapped hover geometry and an optional ticker. Site: - grid-01 example replaced with signal, a Basel poster festival page built on the revised theme; thumb regenerated at the 1400-wide full-page convention (the first cut shipped a 1600x1000 viewport crop that broke the hover scroll). - Grid tokens: serif slot resolves to the grotesk (the theme has no serif), doubled comment opener fixed, description updated. - Landing: grid headings follow the theme's lowercase display voice; hero copy updated to the signal-ink language. - main.js: grid added to THEME_GENRES (missing in the first cut). Consistency sweep the first cut missed: - custom-theme.md catalog lists still said 20 themes; now 21 with Grid. - components.css banner comment still said 20 themes. |
||
|
Youssef
|
f5f4a2ceb0 |
Add Grid, the twenty-first theme
Swiss neo-grotesque systems design: a near-white cool sheet with the twelve-column hairline grid painted behind the content rather than implied, one heavy Archivo run lowercase and slammed left, and exactly one signal red used as a geometric mark. It fills the editorial cluster's neo-grotesque slot, which until now was serif-led on every one of its members. Skill side: the theme spec, and the catalog count from twenty to twenty-one in the four places SKILL.md states it. Site side: the token block, the switcher entry, the twenty-first dropdown dot, Archivo added to the font load, the Buro Grid example page with its thumbnail, and an entry in the theme contact sheet. Not added to scroll-demos.json on purpose. Grid's motion is near-zero by design, no reveals and no parallax, so a scroll recording would be an empty file advertising something the theme refuses to do. README carries the new count only, no new section. |
||
|
Youssef
|
ae2f83e55d |
Lead with Hum, fix theme-picker number contrast, reorder worked examples
Theme picker: Hum is now theme 01, with the rest renumbered 02-20. The ordinal reads off the registry index, so switching, cycling, and the "NN / 20" readout all stay correct. Theme numbers: each picker swatch now carries an explicit number colour that contrasts with its own background, instead of inheriting the active theme's ink. Dark swatches (Midnight, Terminal, Manifesto, Aurora, Lumen) get a light number rather than a near-invisible dark one. All twenty clear AA (min 10:1). Worked Examples: moved the first three carousel cards (Cobalt, Carnival, Lumen) to the end so the page leads with Hum. Bumped the asset cache-bust. |
||
|
Youssef
|
72f3dc052e |
Worked examples: full-page image hover-scroll on every card; bump to v1.1
Replace the carousel's inconsistent scroll-videos with one CSS image hover-scroll across all twelve cards. Each thumb is a tall full-page screenshot that pans top to bottom on hover, with a per-card duration scaled to page height so they all move at the same brisk, readable pace; captured Retina-sharp at 1400px wide. Touch and reduced-motion get a static crop. Drop the Slow Pour card. Bump the version to v1.1 on the landing (banner + footer), package.json, SKILL.md, and the preview-block examples. |
||
|
Youssef
|
a5593bbca1 |
Slop test · consolidate 70 gates → 57 (merge redundant) and resync every reference
Merge the clear duplicates (gradient text into the gradient gate, macrostructure- repeat into the structural-fingerprint gate, the overflow-x:clip mandate into the horizontal-scroll gate, emoji-icon into the icon-libraries gate), collapse the five contrast gates to two, the five input-state gates to one, and the four hero gates to two. No coverage lost. Renumber 1–57 and update every gate-number and gate-total reference across SKILL.md, the reference docs, the landing copy, and the example builds. |
||
|
Youssef
|
31f58c56df | Hum · lead the default hero with "Make your AI agent a designer." | ||
|
Youssef
|
bd9e9ab859 |
v1.1 — four new themes, the Custom route, and a full copy pass
Adds Carnival, Lumen, Hum, and Cobalt to the catalogue (now 20 themes), each with its own tokens block, hero archetype, landing copy, and spec doc. Introduces Custom as a first-class route: when a brief carries real creative intent, Hallmark designs the whole page from first principles — palette, type, and structure — rather than recolouring a catalogue theme. Ships five worked custom examples and a README section. Rewrites the per-theme landing copy and reconciles every catalogue count across the site and the skill (20 themes · 21 macrostructures · 50 component archetypes · 70 slop-test gates). Drops the last competitor references from the CSS comments, fixes the genre rosters, and ignores the local example explorations so only the featured builds ship. |
||
|
Youssef
|
0757b51936 | Fix · star counter shows live count + stale-while-revalidate | ||
|
Youssef
|
aedca8cb03 |
Refactor · move SKILL.md + references/ to repo root so 'npx skills add nutlope/hallmark' works
The published install command in the README — npx skills add nutlope/hallmark — was failing for users because the skills CLI looks for SKILL.md at the repo root, not at skill/SKILL.md where Hallmark kept it. The clone succeeded but the CLI reported "No skills found." Manual cp was the only working install path. Flattened the layout: - skill/SKILL.md → SKILL.md - skill/references/ → references/ - (skill/ directory removed; was empty after moves) git mv preserved rename history for all 76+ files (SKILL.md + 28 reference files + 21 macrostructures + 46 components + 7 verb/genre subfolders). Updated every cross-reference (36 occurrences across 9 files): - README.md — 4 links (SKILL.md + references/ + the install snippet still reads the same) - ROADMAP.md — 4 links to reference files - package.json — "files" field + "skill" entry/references paths - site/js/main.js — 3 source comments - references/design-md.md — one broken link (was pointing skill/references/export-formats.md from inside references/ — now just export-formats.md as a sibling) - site/_tests/verbs/study/notes.md, diagnosis.md and verbs/audit/audit-report.md, custom/README.md — test-artifact relative paths shortened by one segment (e.g. ../../../skill/SKILL.md → ../../../SKILL.md) No skill content changes. After this lands, 'npx skills add nutlope/hallmark' should clone + install correctly without any manual cp fallback. |
||
|
YoussefandClaude Opus 4.7
|
422065f77a |
Fix · install hover-stick + Atelier hero header + With/Without rename
Banner Install hover-stick: - Smooth-scroll on a sticky banner can leave the cursor over the pill after click; Safari/Chrome occasionally keep :hover stuck even after the pointer moves away. - Scope the hover rule to (hover: hover) and (pointer: fine) so a touch tap never sticks the inverted state. - Add :focus:not(:focus-visible) reset so synthesised mouse-focus doesn't keep the inverted look either. - Add a JS click handler that blur()s the pill and toggles pointer-events for one frame, forcing the browser to release any sticky :hover/:focus state. Atelier hero header: - Quote copy: "Restraint, repeated, becomes a signature." → "A workshop, not a template." Shorter, declarative, fits Atelier's workshop voice. - Override the hero quote to use the upright display face (var(--font-display), normal style, --display-weight 900), matching the "Atelier" wordmark in the banner and every section title. Italic var(--font-serif) was making the header read as a pull-quote rather than the page's primary statement; Atelier's voice is declarative, not quoted. With / Without rename: - Section 06 label "Before / After" → "With / Without". Both panels exist now (Sonnet 4.6 alone vs Sonnet 4.6 + Hallmark) — there is no temporal before/after, only a presence/absence comparison. - HTML comment updated to match. Diptych screenshot centring: - .ba__frame img object-position: top left → center. The full hero composition reads inside the 16:10 frame instead of clipping to the top-left corner. Other diptychs (.diptych__half, .brief-output) intentionally stay top-aligned — they're page screenshots where the masthead matters; the .ba__frame is hero-only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
YoussefandClaude Opus 4.7
|
ad3d07e507 |
Fix · mobile copy button regression — hide button, make pre tap-to-copy
The previous mobile fix (display: block + width: 100% on the button) overflowed the frame because .code has white-space: nowrap and the button rendered inline-flex on the same nowrap line as the command, spilling past the right edge. Cleaner pattern, matching what gh repo clone / npmjs / Vercel install panes do on touch devices: - Hide .code__copy entirely below 45rem. - Bind a click handler on the whole [data-copy-source] pre so the command area itself is tap-to-copy. cursor: pointer signals it. - Add a transient "Copied ✓" badge inside the pre on success (anchored top/right/centred-vertically) — replaces the button's label-swap on mobile. Animates in and clears after 2.2 s. - Restore the original .code flex + align-items: center so the command sits vertically centred in the frame regardless of height. JS: - Refactor attachCopyButtons to share a copyFromSource helper. - Source binding uses data-copy-bound; button binding uses data-copy-btn-bound (separate flags so re-attached cloned heroes don't double-bind). - Button click stops propagation so a single tap on the visible button (desktop) doesn't fire both the button and source handlers. - Both surfaces flash data-state="copied" together so CSS feedback works on whichever surface is visible at the active breakpoint. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
YoussefandClaude Opus 4.7
|
3375a99da4 |
Fix · mobile copy/star + footer bottom space + drop "Powered by Together AI"
Hero install copy button: - On coarse-pointer (touch) devices the copy button sits visible at all times. With its absolute right-aligned position it overlapped the npx command text on narrow viewports — most visible on Specimen but applied to every theme using .code. - Below 45rem, drop the absolute positioning and let the button flow as a full-width row beneath the command (GitHub / Vercel / npmjs pattern). The command keeps its horizontal scroll for long URLs. Banner GitHub star spacing on mobile: - The star uses a negative inline-start margin (-0.75rem) tuned for the install/star pair on desktop. On mobile the install link is hidden, so that same margin pulls the star too close to the wordmark. - Below 50rem, loosen the start margin to -0.25rem (+8 px breathing room from the wordmark, matching the requested gap). Specimen eyebrow: - Drop " · Powered by Together AI" from the Specimen hero eyebrow copy. The Together AI credit lives in the footer; repeating it in the hero made the lede read like a sponsorship banner. Footer bottom spacing: - .page added padding-block-end: var(--space-4xl) (10 rem ≈ 160 px), and .foot--colophon added another --space-2xl (4 rem ≈ 64 px) of internal bottom padding. Combined ≈ 224 px of empty space below "Made by Together AI" on every theme. - Drop the page-wrapper bottom padding to 0 — the colophon owns its own end-spacing. - Cap the colophon's own bottom padding at --space-md (16 px) on desktop and mobile. The credit line now hugs ≤ 20 px from the viewport bottom. Stale stats in footer (caught while in there): - 23 themes → 22 (Pastel removed earlier). - 60 slop-test gates → 65 (caught up to slop-test.md's actual count). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
YoussefandClaude Opus 4.7
|
32c02f1775 |
Catalog · drop Pastel theme (23 → 22) · centre Plume hero
Pastel removal:
- skill/SKILL.md — theme list, five count refs, four example refs
(rotation log, preview block, diversification text, display-style
cluster).
- skill/references/ — structure.md (table row), component-cookbook.md
(modern-minimal nav routing), custom-theme.md (theme list + count;
also fixes 55 → 65 gate-count drift), study.md (DNA-match row),
copy.md (×2 sample copy → Plume), macrostructures.md (Letter
sample), hero-enrichment.md (stamp example → Linen), playful.md
(Plume becomes the canonical playful theme).
- site/js/main.js — THEME_NAMES, ARCHETYPES, THEME_GENRES, COPY
block; "twenty-three" → "twenty-two"; almanac letterBody updated
("23 themes, 55 slop-test gates" → "22 themes, 65 slop-test
gates" — also catches the gate-count drift).
- site/index.html — delete Pastel button; renumber Riso through
Editorial (15 → 14 ... 23 → 22).
- site/css/tokens.css — delete Pastel theme block + its per-theme
radius override; update "soft themes" + Plume neighbour comments.
- site/css/components.css — delete two Pastel blocks (banner pill +
big component overrides); update stale "Pastel post-Linear-soft"
comment; "23 themes" → "22 themes".
- site/css/sections.css — delete Pastel skill-row + brief-output.
- README — "twenty-three" → "twenty-two"; theme list drops Pastel.
Plume hero centring:
- Delete the [data-theme="plume"] .hero__bloom-stage::after feather
glyph.
- Add a Plume-only override that hides .hero__bloom-stage entirely
and recasts .hero--bloom as a single centred column with text +
CTA + eyebrow + proof centred. Hero only — the rest of the Plume
page keeps its asymmetric rhythm.
Verified the demo site loads on a static server (HTTP 200 on
index.html + all CSS + JS), main.js parses with node --check, and
the theme dropdown now has 22 buttons.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|
YoussefandClaude Opus 4.7
|
a6a157e520 |
Rebrand · GitHub URLs and install command to nutlope/hallmark
Repo handover prep. Replaces: - github.com/Luffixos/hallmark → github.com/nutlope/hallmark (banner star link, footer link, JS REPO constant for star count) - npx skills add hallmark → npx skills add nutlope/hallmark (README install section, four install panes in site/index.html) No skill internals touched — SKILL.md and references/ unchanged. The local installed skill at ~/.claude/skills/hallmark/ continues to work; the URL change is content-only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
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> |
||
|
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>
|
||
|
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> |
||
|
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>
|
||
|
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>
|
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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>
|
||
|
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>
|
||
|
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> |
||
|
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>
|
||
|
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>
|
||
|
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>
|
||
|
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>
|
||
|
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> |
||
|
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. |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
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 |