CC · sections demo

Twelve sections, one system.

Every section below renders from a partial in sections/ — token-driven, mode-agnostic, no JavaScript.

A manifesto for compositional pages.

Sections are units of intent. A hero answers "who is this?" A stat-grid answers "how big?" A quote earns the room a paragraph cannot.

The partial decides the structure. The mode decides the mood. The author decides the words. Compose, don't invent.

By the numbers.

12Sections shippedFrom hero to footer.
~30Variants total≈ 2.5 per section.
5×9Mode × moodAll combinations supported.
0JS dependenciesPure HTML + CSS.

The grid is not a cage. It is a trampoline.

— Controlled Chaos, DESIGN.md

Order

The grid, the rhythm, the scaffolding. Five forces in restraint. Where one element sits, the others know where they belong.

Chaos

The discord, the deviation, the proof that the rest is intentional. One element that doesn't belong. One color that doesn't match.

How a page comes together.

  1. Pick the vibe

    Mode + mood. Or hand over a style.json and let the adapter do it.

  2. Compose sections

    Read sections/README.md. Pick what serves the brief. Honor the dos and don'ts.

  3. Verify in the browser

    Open the page. Confirm the bg color, the hero font, no leaking placeholders, no console errors.

Image placeholders, not pins.

Frame 01
Frame 02
Frame 03
SECTION BREAK
HIERARCHY TENSION TIME HIERARCHY TENSION TIME

As featured at

Build something that earns the room.

Pick a mode. Pick a mood. Compose sections. Verify in the browser.

Read the catalog