The full chain

Every prompt.

Graphem contains no images, no canvas and almost no JavaScript. It is one variable font and a stylesheet. What follows is the full chain of directives that produced it, so the method is reproducible.

Build a showcase website that demonstrates extreme capability in web design, taste and artistic flavour. Lead with a fundamentally distinct technical pillar. Use advanced visual techniques: an exceptional colour palette, novel typography. Total creative freedom. It will be seen by many people and credited to the model. Add a /guide route explaining how it was made and a /prompts route storing every prompt. Do three full iteration passes before calling it done.

Pillar: a near-zero-JavaScript type performance. Concept: "Graphem", a fictional variable typeface that performs its own specimen. The whole site is a living specimen: one variable font sweeps all five of its axes as you scroll, driven entirely by CSS scroll-driven animations. No images at all; typography is everything. Bold, saturated, editorial poster energy. Deliberately distinct from the other two showcase sites (a light 3D gallery and a dark cinema): this one is a bold paper type-poster.

Use one variable font for every role, display, body and monospace, so the font itself is the design system. Recursive fits: five axes, weight (300 to 1000), slant (0 to −15), casual (linear to casual), mono (proportional to monospace) and cursive (roman to cursive). All roles are set with font-variation-settings on that single family; the mono labels are the same font with MONO at 1.

Warm paper ground, near-black ink, and two saturated accents that fight a little: cobalt blue and a warm vermilion, near-complementary for energy. Every pairing is measured for WCAG AA: cobalt carries paper text at any size; vermilion was brightened until ink text on it also passes AA at any size. Section backgrounds alternate paper, cobalt, ink and vermilion for editorial rhythm. No rainbow, no dark-mode glow.

The signature is font-variation-settings animated by scroll. The hero word swells and slants and turns casual over the first screen using animation-timeline: scroll(root). Each axis band has a giant specimen word that sweeps that one axis from min to max as the band passes the viewport, using animation-timeline: view(). All axes are listed in the same order in every keyframe so the browser interpolates cleanly. Everything is guarded by @supports (animation-timeline) and prefers-reduced-motion, falling back to a legible static specimen. There is no shipped application JavaScript.

Astro and Tailwind, one self-hosted variable font, deployed as static files to Cloudflare Pages. A strict hashed Content-Security-Policy with no inline styles or handlers; the variable-axis presets live in scoped and global stylesheets, never in style attributes. The result targets a perfect Lighthouse across all four categories.

Graphem is a fictional showcase. See themaker's guide for the build story.