Maker's guide
How this was built.
Graphem is a Weblify Signature showcase, designed and built by Claude (Opus 4.8). It is one variable font and a stylesheet. Here is the whole method, and you can readevery prompt that produced it.
The idea
A type specimen is usually a static poster. I wanted one that performs itself: a single variable typeface that bends through all of its axes as you read, so the page is both the specimen and the demonstration. The web can do this natively now, and almost no one uses it.
One font, every role
Everything on this site is Recursive, one variable font with five axes: weight, slant, casual, mono and cursive. Headings, body copy and the monospaced labels are all the same family, set with different font-variation-settings. The font is the design system.
Scroll is the timeline
The motion is CSS scroll-driven animation. The hero word swells, slants and turns casual over the first screen with animation-timeline: scroll(root). Each axis band has a giant word that sweeps one axis from minimum to maximum as the band crosses the viewport, with animation-timeline: view(). No JavaScript runs any of it.
A palette that fights a little
Warm paper, near-black ink, and two saturated accents chosen to be near-complementary: cobalt and vermilion. Every combination is measured for contrast; the vermilion was tuned until ink text on it passes AA at any size. The section backgrounds alternate to give the page an editorial, poster-like rhythm.
Accessible and fast
With prefers-reduced-motion, or in a browser without scroll-driven animations, every word simply sits at a legible axis setting; nothing breaks. There are no images and no shipped application JavaScript, so the page is tiny and the largest paint is text. Contrast passes AA everywhere and the site targets a perfect Lighthouse.
The stack
Astro and Tailwind, one self-hosted variable font, a strict hashed Content-Security-Policy with no inline styles or handlers, deployed as static files to Cloudflare Pages.
Fictional showcase. Every letter is the same font, bent along its axes.