B3 Swatches Article

Variation Chips & Container Styling

Set the selected-state color, style the swatch wrapper, and tune dual-color cut and gradient behavior.

Introduction

Variation chip styling controls how the selector feels on the page. The active state highlights the current option, the wrapper can be given its own surface, and dual-color settings change how paired colors are drawn.

Selected state

Use selected chip color to make the active option obvious without overwhelming the page.

Container surface

Adjust the background, border, and radius around the swatch group when it needs more separation.

Dual-color rendering

Choose the cut direction and blend style for two-tone swatches.