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.
All tokens, sections, adapters, and templates live in the repo. Fork it, plug your style.json in, ship.
GET IT ON GITHUB