Group 01 · New
GitHub Favorites
Group 02
10 Most Modern
Group 03
The Original 5
How the variation works: every page is assembled by the same
engine/sections.js + engine/assemble.js. The recipe and the
data-theme family on <body> are the only things that change.
engine/tokens.css redefines colour, type, radius, shadow and spacing per family;
engine/art.css art-directs each family's decorative chrome; engine/layouts.css
gives each family its own layout DNA (nav + footer variant, container width, rhythm, per-section
props.variant). The thumbnails above are real <iframe> renders of each
sample at a 1440×900 desktop viewport, CSS-scaled into the card.