variant

Build each variant as a distinct position on one axis such as structure or density, host them on the real page, and switch between them with a URL search param like ?variant=quiet. A fixed picker control steps through the set so every variant is a shareable link.

Default to three variants and go to five only when asked or when the design space is genuinely wide. Past five, people scroll instead of comparing, and the variants stop teaching anything.

Varying every axis at once produces unattributable results where you learn which you liked but not what made it work. Picking one primary axis, such as structure or density, lets secondary choices follow coherently so the next piece benefits from the lesson.

No, variants should render full-size on the page that will actually contain the piece, with real chrome, neighbours, and realistic data. Isolation and thumbnails distort spacing and scale, which are usually the properties being chosen between.

Every variant must clear the same floor before entering the picker: accessible names on controls, full keyboard reach, visible focus, no clipping at 320px, and no meaning carried by color alone. A direction that only works by breaking the floor is dropped.

The chosen variant is rebuilt properly where it belongs following the project's own conventions, and the other variants plus the picker harness are deleted. Until promotion, the harness never imports from production and production never imports from the harness.