· 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>
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>
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>
The 8 newer themes were too clustered around oklch(94-96%, low-chroma,
warm-hue) — visually all "warm cream + serif" variants. Users couldn't
tell them apart so it felt like the picker was broken for those entries.
Spread the 12 paper colours across the OKLCH space so each theme owns
a distinct point (dark / saturated / desaturated / warm / cool):
- Specimen warm oat oklch(96 .018 80)
- Newsprint salmon-pink oklch(92 .045 50) ← FT-pink
- Atelier cool cream oklch(94 .005 60) ← low chroma luxury
- Garden pale sage oklch(95 .030 130)
- Salon warm ivory oklch(94 .030 65)
- Linen desat. linen oklch(89 .022 95)
- Midnight cool charcoal oklch(15 .022 250) ← was warm; now cool
- Terminal green-black oklch(11 .018 145)
- Almanac cool pale oklch(94 .008 245) ← cool, was warm
- Brutal near-pure white oklch(98 .001 0)
- Manifesto near-pure black oklch(10 .005 60) ← inverse of Brutal
- Sport crisp white oklch(98 .003 250)
Display fonts now span category-level differences, not "different
serifs": Fraunces / The Future / Space Grotesk / Cormorant italic /
Playfair 900 / Crimson Pro / JetBrains Mono / Anton (added) /
IBM Plex Mono (Salon) / IBM Plex Sans Light / Bricolage Grotesque /
Bricolage Grotesque italic.
Signature structural moves added:
- Newsprint: drop cap on the lede in accent burgundy
- Linen: barely-visible woven-cloth checkerboard (3% opacity)
- Almanac: faint vertical grid lines across the page (graph paper)
Plus new fonts in @import (Playfair Display weights, Anton).
Plus swatch dots in the picker now mirror the new tokens.
Result: every theme is unmistakably distinct at first glance —
no more "did clicking that do anything?".
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
