variant

Build each variant as a distinct position on one design axis, such as density or structure, and host them on the real page behind a picker. Switch variants with a URL search param so each option is a shareable link you can judge at different viewport widths.

Default to three variants and go up to five only when the design space is genuinely wide. Beyond five, people stop comparing and start scrolling, which defeats the purpose of the exercise.

Variants should be judged on the page that will actually contain the component, with real chrome, neighbors, and realistic data. Isolated renderings hide spacing and context problems, and thumbnails distort the spacing you are usually choosing between.

Each variant must take a different position on one primary axis such as structure, density, emphasis, type, or voice. Variants that differ only in accent color or copy teach nothing, and varying every axis at once makes results unattributable.

Every variant must clear the same floor before entering the picker: accessible names on controls, full keyboard reachability, visible focus, no clipping at 320px, and no meaning carried by color alone. A direction that only works by breaking this floor should be 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 and production code never import from each other.