Award-level static HTML pages from a token-based design system. Five aesthetic modes, nine mood palettes, five typographic voices, twenty-two reusable sections, and a style.json adapter that lets any brand drive its own look. Pure HTML + CSS. No framework.
Three axioms govern every choice: Hierarchy is the only job. Tension is beauty. The medium is time. Everything else is application.
Pages compose three decisions — a mode (Swiss, Brutalist, Immersive, Kinetic, Gallery), a mood (Void, Dusk, Signal, Earth, Frost, Blaze, Bruise, Concrete, Void-Inverse), and voices (Monument, Editorial, Swiss, Brutalist, Expressive). Tokens cascade. Sections compose. The output is HTML you can deploy anywhere.
The skill v2 adds an SMB-tech-grade out-of-the-box baseline: ten conversion-critical sections, an interaction-states polish layer, premium motion, and full SEO/OG/JSON-LD template scaffolding. Editorial-Generous is the default — Stripe / Anthropic / Cursor-marketing DNA.
Hero, manifesto, stat-grid, quote, two-column, process, gallery, full-bleed, marquee, logo-wall, cta, footer, plus the new SMB tech set: nav, feature-grid, product-showcase, pricing, faq, testimonial, signup-form, integration-logos, cta-banner, comparison-table.
Mix-and-match via two HTML attributes (data-forces, data-mood) and per-element voice classes. Two-decision recipe scales from minimal to maximalist without a build step.
Any brand can drive the look via a single JSON file: palette, typography (per voice), force dials, motion intensity, texture, dos/donts. Hand-author or generate from SuperStyleGuide / Pinterest Style Engine.
Universal hover, focus-visible, active, disabled, loading states. 44px touch targets. Discord-cyan focus rings. Reduced-motion respect. Image-placeholder upgrade. Scroll-progress hairline.
page-composed.html ships full SEO / OG / Twitter / JSON-LD <head> with Mustache placeholders. Plus 404, privacy, terms scaffolds.
Pure HTML + CSS custom properties. Tiny inline vanilla JS only for nav drawer, accordion siblings, and cta-banner dismissal. No React, no Vue, no bundler.
Every choice is intentional, but the result feels alive.
— Controlled Chaos · DESIGN.md
15 sections rendered from a real adapter style.json. Fog City Futurism aesthetic. The v2 canary brand.
Dusk-quiet. A payphone-themed connection product. Different brand, same skill.
All 12 v1 section partials rendered in one signal-mood page. The library catalog made flesh.
A page composed end-to-end from adapters/examples/dusk.json. The adapter workflow in action.
One complete, production-ready single-file page — hierarchy, tension, motion — from a one-line brief. Nothing is uploaded or stored. Bring your own key.
All tokens, sections, adapters, and templates live in the repo. Fork it, plug your style.json in, ship.
GET IT ON GITHUB