Collections an agent can build from
A complete Design Kit plus three supporting catalogs: interface styles for rendering, image directions for supporting artwork, and page recipes for how the page communicates value.
Live today: 18 interface styles, 24 image directions and 32 page recipes.
Four decisions, four catalogs
Building a page means answering four separate questions. Answering them from one catalog is how pages end up looking generic: a color palette cannot tell you what to put on the screen first.
Design kit: how it looks
The system itself. 28 semantic color tokens in light and dark, typography, spacing, elevation, per-element treatments, motifs, and the do's and don'ts that keep an agent on-brand.
Browse design kitsInterface style: how it is rendered
The same kit can be drawn as frosted glass or as a hard-edged poster. A style fixes borders, radii, elevation, texture, type treatment, state and motion — and states what it costs in contrast, focus and motion sensitivity.
Browse interface stylesImage direction: how the pictures are made
A kit sets the surface; the imagery inside it still has to be produced. A direction fixes medium, process and mark system, so a whole set of assets stays recognisably one thing.
Browse image directionsPage recipe: what order it argues in
The sequence of sections, and the job each one does. Same kit, same imagery, different recipe: a page that demonstrates and a page that answers an objection are not the same page.
Browse page recipes
Live libraries
Interface styles
18 styles
How is it rendered?
The render grammar that sits on top of a kit: borders, radii, elevation, texture, type treatment, state and motion. 18 styles across 5 families, and every one of them paints the same live specimen — so the only thing that differs between two cards is the rendering itself.
Browse interface stylesImage directions
24 directions
How is the picture made?
Neutral, reusable ways of making an image — medium, process and visible grammar, never an artist or a tool name. 24 specimens across 13 of the 13 research families, each with what you actually see, what it suits, and where it fails.
Browse image directionsPage recipes
32 recipes
How should the page explain the product?
Reusable communication ideas grounded in real product pages. Each recipe explains the principle, who it fits, where it was observed, and what an agent needs to apply it without replacing the selected Design Kit.
Browse page recipesWhat is free, and what Pro adds
Every record shows its full judgment layer to everyone: the summary, what it suits, and where it fails. Communication-reviewed recipes also show their examples and source dates; interface styles show a live specimen. 6 of the 32 page recipes and 6 of the 18 interface styles include their machine-ready guidance free. Pro adds the exact implementation bundle on the remaining legacy records.
Two more ways in
Neither is a new catalog. Each one re-cuts something above for a narrower question: which design kits are built in a given render style, and what a page does with its first screen.
Design kits by style
17 styles
The kit index cut by render style, rather than the style catalog itself: which design kits are actually built in glass, soft-UI, clay, brutalist, Swiss, editorial or dark. 17 style systems in 4 tiers, ordered by how tightly each one pins down rendering. Every interface style above links straight to its matching page here.
Browse kits by styleHero recipes
20 openings
Communication ideas for the first screen: invite a task, show the product working, frame the problem, or put proof beside the promise. 20 openings are drawn from the same 32 page recipes and grouped by the job that opening needs to do.
Compare hero openingsHow page recipes are grouped
Not by industry. The same business can need a different communication idea depending on what its visitor is ready to do.
Curated shortcuts
Useful first cuts through the same records. These are canonical filter links, not thin duplicate landing pages.