interactive scatter (planned)

Pick a point. Get an entire valid system.

The synthesis manifold is the satisfiable intersection of (19 families × 12 shapes × 243 personas) = 55404 candidate systems. Each cell is a candidate the synthesizer can emit; the gate filters to the satisfiable subset.

Families (19)

• brutalist

  post-Material reaction × indie zine aesthetic × Drudge Report 1995 lineage

  exposed grids and refusal of polish — the markup IS the design. Default styling shows through; asymmetric layouts; system fonts or single we

• build-tool-minimalism

  post-Crockford spartan × benchmark-first × Bun/htmx-era hacker register

  unmediated technical confidence — the page feels like reading a man page that someone designed slightly. Near-zero illustration, flat statem

• civic

  GDS Transport × govt-accessibility-first × civic-minimalism (gov.uk lineage)

  accessibility-maximal — system fonts, no chrome, no animations, no decoration. The single value the page expresses is 'we will not waste you

• consumer-saas

  post-Material × Slack-Mailchimp-Intercom-era × early-2010s SaaS

  rounded corners, soft shadows, illustration-of-cartoon-people, friendly micro-copy, gentle gradients. The page reads as 'a friendly tool you

• corporate-enterprise

  enterprise-software lineage × Salesforce-Oracle-SAP × trade-show booth aesthetic

  stock photography of business people, corporate-blue color scheme, 'trusted by' logo strip, conservative typography, dense feature-compariso

• cultural-institution

  modernist museum lineage × Bauhaus × MoMA / Tate / Smithsonian curatorial

  typography-as-authority — restrained color, lots of imagery framing, generous gutters, serif-or-grotesque headlines. The page conveys 'we ar

• design-system-showcase

  post-Material × component-library showcase × W3C Design Tokens era

  the page IS the product — utilitarian-but-reverent. Every section is a live specimen; tokens shown as swatches inline; code snippets next to

• editorial-print

  print typography (Bringhurst lineage) × Stripe-Press × longform journalism

  slow attention — the page treats you as a reader, not a clicker. Big serif headlines with tight kerning, generous left margins, multi-column

• linter-peer

  post-Vite mono-display × Rust-tooling-era benchmark culture

  honest about being a tool — mono-forward typography in display sizes; benchmark numbers above the fold; no hero illustration; the landing IS

• luxury-sparse

  high-fashion × pre-internet retail × atelier-magazine lineage

  very sparse, hover-reveal interactions, asymmetric layouts, edge-bleed photography. The aesthetic argument is restraint as signal — divisive

• magazine

  publication design × Pitchfork-Verge-NYT-era × news-magazine lineage

  ongoing-publication aesthetic — article streams + categories + photography + bylines. Content-typology heavy: long-form, news, lists, multim

• maximalist-agency

  post-modernism design portfolio × Pentagram lineage × awwwards-era

  each project page is its own custom artifact — multiple typographic registers across the site, designer credits visible, asymmetric layouts,

• maximalist-polished

  post-iPhone consumer-luxury × Apple-marketing × Stripe-Sessions

  every pixel has a budget — edge-bleed product photography, scroll-triggered parallax, big sans-serif headlines, very high production value p

• modernist-infra

  Swiss-international × Zeit-lineage × Vercel-era polish

  expensive restraint — the page feels like a polished metal object; type-as-brand, single accent, generous whitespace that almost reads as un

• portfolio-personal

  designer / photographer / hacker portfolio lineage × dribbble-era × independent-creative-web

  the site IS the resume — idiosyncrasy is the signal. Wildly variable per-maker; the through-line is that the page expresses the person, not

• reference-manual

  Material × component-library docs era × MDN civic-tech lineage

  look it up, leave — sidebar + content + maybe a right TOC; bold keywords for jump-and-scan; deep linking to every header. The page reads as

• tool-utility

  Google-utility × Lighthouse-era × audit-tool minimalism

  the result is the experience — you arrive, paste a URL or click a button, the page transforms into your output. There is almost no marketing

• vaporwave-postinternet

  post-internet zine × indie music label × Are.na blog × early-2010s indie web

  retro-screen artifacts deliberately — gradient backgrounds, glitch-as-aesthetic, system-font intentional, asymmetric blocks. The aesthetic a

• y2k-frutigeraero

  Frutiger Aero × Aqua-OSX × early-Web-2.0 × revival-2020s

  aqua / glassy / blue-gradient revival — lens flare, depth-via-blur, bevel + emboss, early-Web-2.0 button shapes. Reads as 'we are intentiona

Shapes (12)

• archive

  Search-first + categorical-lookup surface. The page exists to host a large corpus that visitors arrive at via search or category drill-down;

• conversation

  Chat-shape surface. The page IS a real-time or async message thread — Slack channel, Discord room, ChatGPT-style assistant, customer support

• dashboard

  A persistent surface a returning user spends real time inside. Information density is high; chrome is minimal but always present (sidebar na

• docs

  Persistent left sidebar of categorical navigation, primary content area in the centre, often a right-side TOC. Optimised for jump-and-scan:

• gallery

  Image-grid + lightbox surface. The page is dominated by visual artifacts — photos, illustrations, design pieces — arranged in a grid; clicki

• hybrid

  Multi-shape sites that compose more than one canonical shape under one brand. The canonical pattern: landing surface (`/`) + reference docs

• landing

  Single scrolling deck of one-thing-per-section. Hero communicates purpose within the first viewport; everything below is depth for visitors

• magazine

  Article-stream + categories + photography surface. Front page surfaces N recent articles across multiple categories; each article is a long-

• portfolio

  Case-study slides + about/contact surface. The page hosts N pieces of selected work, each with its own dedicated case-study page that walks

• showcase

  Live specimens of the product itself, not descriptions of it. Each section IS what it documents — token grids next to their values, componen

• timeline

  Chronological-reverse surface. Items appear in date order, newest at the top; the visitor scrolls forward to scan recent activity, follows a

• utility

  The page IS the tool. A visitor arrives, performs a single action, gets a result, leaves. There is almost no marketing copy — the chrome is