/api /r tokens.json GitHub

Brand-Family Swatch

Taxonomic swatch rendering a brand-family identifier as a coloured dot + label chip. Visual primitive for the Department / Hardware / Warehouse Club retail taxonomy. Taxonomy-agnostic: customers can extend via runtime taxonomy file (leapfrog invention #5). Reference implementation: gis.woodfinegroup.com (v0.1.94).

Live previewrendered from recipe via {tokens} resolution
inline-chip
{{family-label}}

Default. Dot + label chip.

map-marker
{{family-label}}

Large dot (24-32px); label suppressed (label via parent tooltip/drawer).

cluster-centroid-ring
{{family-label}}

Concentric arrangement of N family dots showing family distribution in a cluster. Renders at zoom < 8.5; crossfades to individual swatches above zoom 8.

filter-row
{{family-label}}

Paired with checkbox primitive: [✓] [●] Department.

drawer-header-badge
{{family-label}}

Dot fills behind brand short-code (e.g., HD for Home Depot).

ARIA notes

aria-label on the swatch element states the family name. Dot is aria-hidden='true'; label carries the semantic meaning. Colour is supplementary — label is the primary signifier. forced-colors: dots collapse to user link colour; labels remain.

The usage tab for this component is not yet authored. Creative Design Contributors — pick this up.

Recipe is at /api/components/brand-family-swatch.json.