Facet
Clipped corner, sized by the token above.
Build a page, region by region
Swap the navigation, the hero, the body and the footer, then change the tokens underneath them. Every control below is a radio input and a :has() rule — there is no script on this page doing any of it.
Regions
Split hero
Copy on the left, evidence on the right.
The variant for a product with something to show.
PrimarySecondary
region: eu-west
every: 30sCentred hero
One column, nothing to prove yet.
For launches and anything without a screenshot worth showing.
PrimarySecondary
Interior page header
Shorter, because the visitor has already arrived.
Card grid
Three across, one down on a phone
Surface
Hairline border over the page colour.
Accent
Wash and a stronger border.
Split body
Prose beside a panel
- Collapses to one column under 420px of track
- Alignment is centred by default
- Gap follows --pf-gap-lg
Alert
Colour carried by a rule and a wash.
BadgePillChip
Data
A table that scrolls rather than squashes
| Check | Status | p95 |
|---|---|---|
| api-gateway | Healthy | 184ms |
| billing-worker | Degraded | 1.8s |
| auth-service | Healthy | 96ms |
Header .pf-nav.pf-nav--flush · Hero .pf-hero--split.pf-hero--center.pf-pagehead · Footer .pf-footer.pf-footer--slim.pf-footer--accent
Theme darklight · --pf-accent #8fe06a#79c7c0#e0bd7a · --pf-cut 018px30px · --pf-radius 2px12px18px · --pf-section-pad 1.75remdefault5rem
Every token the radios touch, as a ready-to-link theme file — the one thing on this page a script does.
How the region swap works
CSS cannot change a class, so every variant is in the markup and hidden. A :has() rule turns the selected one back on. For a docs page showing three navigation bars that is the right trade; on a real page you would render the one you chose.
How the token swap works
Theme, accent, cut, radius and rhythm each redeclare one or two custom properties on the stage. No component rule is touched, and nothing is reclassed — which is the whole argument for the token layer, demonstrated rather than described.
URL-driven
Every pick lands in #play=…, so the address bar is the share link — the "Start from" presets are just links to such states. The swapping itself is still radio inputs, a checkbox and :has(); where :has() is unsupported the stage shows its defaults and the controls do nothing — a degradation, not a break.
Other things you can poke
Most documentation pages on this site have something interactive in them:
swap page regions,
retint a live page,
change the type scale,
see what each module unlocks,
assemble your link block,
frame a real page at 320px,
weigh a page type,
build an attribute list,
turn the invisible guards on,
flip a component through its states and
filter the changelog by tag.
All of it is radio inputs, checkboxes and :has() — no script runs any of it.