Brand-family swatch

@@ -5,7 +5,7 @@ content_type: topic
index_group: brand-surface
category: design-system
slug: brand-family-swatch
short_description: "The brand color families assigned to retail and institutional anchor categories in the co-location GIS surface, providing consistent color-coded map and table identifiers."
short_description: "A taxonomy-agnostic component pairing a color-coded dot with a semantic label to identify anchor-family categories, with per-deployment colors resolved at runtime rather than shipped as a fixed taxonomy."
title: "Brand-family swatch"
paired_with: brand-family-swatch.es.md
state: authoritative
@@ -17,11 +17,11 @@ authored: 2026-04-30
last_edited: 2026-05-25
---

The brand-family swatch is the visual classification component the [[app-orchestration-gis|platform’s GIS surface]] uses to identify retail anchor categories — Department, Hardware, and Warehouse Club — on maps, filter rows, and detail panels, as part of the [[location-intelligence-platform|location intelligence platform]]. It pairs a color-coded dot with a semantic label so that category membership is legible at a glance without relying on color alone, supporting the [[retail-co-location-tier-methodology|retail co-location tier methodology]]’s tier visualization. The component is designed to be taxonomy-agnostic: family identifiers resolve through a runtime configuration, so operators extend or reclassify anchor categories without code changes.
The brand-family swatch is a taxonomy-agnostic visual classification component: a color-coded dot paired with a semantic label, so that category membership is legible at a glance without relying on color alone. Family identifiers resolve through a runtime configuration rather than a code change, so each deployment supplies its own family list and colors — the three families shown throughout this article (Department, Hardware, Warehouse Club) are the component's baseline defaults, not a fixed taxonomy. The [[app-orchestration-gis|platform's GIS surface]], part of the [[location-intelligence-platform|location intelligence platform]], is one reference deployment: it supplies its own real anchor-family taxonomy through this same runtime mechanism to drive the [[retail-co-location-tier-methodology|retail co-location tier methodology]]'s tier visualization, rather than using the baseline defaults shown here.

## Visual representation

The platform’s GIS surface uses the brand-family swatch to standardize how retail anchors appear across map markers, tabular filters, and detail drawers. A color-coded identifier paired with a semantic label ensures accessible data density. The component decouples presentation from the underlying taxonomy, resolving family identifiers through a runtime JSON configuration.
The brand-family swatch standardizes how anchor categories appear across map markers, tabular filters, and detail drawers. A color-coded identifier paired with a semantic label ensures accessible data density. The component decouples presentation from the underlying taxonomy, resolving family identifiers through a runtime JSON configuration — the [[app-orchestration-gis|GIS surface]] reference deployment supplies its own taxonomy this way, rather than the component shipping one taxonomy for every deployment.

## Usage guidelines

@@ -53,13 +53,15 @@ The component is engineered to meet WCAG 2.2 AA standards:

## Design tokens (DTCG)

The dot is inline CSS, not a sized token — `.ps-swatch__dot` is hardcoded to 10px by default and 24px for the map-marker variant. The component references four shared tokens (`{semantic.ink-primary}`, `{semantic.ink-secondary}`, `{primitive.space.05}`, `{primitive.radius.sm}`) plus three brand-family colors, which are deployment-specific and set at runtime rather than shipped in the primitive token bundle:
The dot is inline CSS, not a sized token — `.ps-swatch__dot` is hardcoded to 10px by default and 24px for the map-marker variant. The component references four shared tokens (`{semantic.ink-primary}`, `{semantic.ink-secondary}`, `{primitive.space.05}`, `{primitive.radius.sm}`) plus brand-family colors, which are deployment-specific and set at runtime rather than shipped in the primitive token bundle. The three baseline defaults ship as CSS fallbacks for a deployment that hasn't supplied its own taxonomy:

| Value | Description |
| :--- | :--- |
| `#0B5FFF` | Department — azure blue |
| `#FF6B00` | Hardware — construction orange |
| `#00875A` | Warehouse Club — warehouse green |
| `#0B5FFF` | Department — azure blue (baseline default) |
| `#FF6B00` | Hardware — construction orange (baseline default) |
| `#00875A` | Warehouse Club — warehouse green (baseline default) |

These are defaults, not a closed set — a deployment extends or replaces the family list through its own runtime taxonomy file rather than by editing the component.

## Planned extensions
Future iterations are intended to include:
@@ -69,6 +71,6 @@ Future iterations are intended to include:
## See also

- [[brand-typography]] — the platform's print typography standards that pair with this visual identity system
- [[app-orchestration-gis]] — the GIS analytics engine that produces the cluster data this component visualizes
- [[location-intelligence-platform]] — the location intelligence platform that uses this component on its interactive map surface
- [[retail-co-location-tier-methodology]] — the tier methodology whose tier rankings drive the swatch color assignments
- [[app-orchestration-gis]] — the GIS analytics engine, one reference deployment of this component with its own real anchor-family taxonomy
- [[location-intelligence-platform]] — the location intelligence platform that hosts that reference deployment
- [[retail-co-location-tier-methodology]] — the tier methodology whose real tier rankings, on that deployment, drive its own swatch color assignments