Brand-family swatch
The brand-family swatch is the visual classification component the 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. 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 co-location scoring 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.
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.
Usage guidelines
Deployment scenarios
- Map Markers: Functions as the visual foundation for anchor markers, using color-coded dots to signal family affiliation.
- Data Filtering: Serves as the interactive primitive within filter rows (typically paired with a checkbox).
- Detail Overlays: Provides high-level categorization within side drawers and header chips.
- Cluster Analysis: Employs a concentric ring variant to represent family distribution within aggregate map clusters.
Constraints
The component is reserved for taxonomic classification. It must not be used for binary state indicators, transient system feedback, or non-taxonomic tagging, which are serviced by the Tag and Status Indicator components.
Technical specifications
Anatomy and composition
- Indicator: A 12px (default) or 24px (marker) circular dot using family-specific color tokens.
- Label: A taxonomy-resolved display name (e.g., "Warehouse Club").
- Accessibility Layer: An
aria-labelthat combines the dot and label semantics, ensuring the visual indicator is hidden from screen readers to prevent redundant announcements.
Interaction model
The swatch is natively static. Interactivity is inherited from its parent container (e.g., a filter button or map feature). On map surfaces, the component supports a reveal-by-zoom behavior: cluster-centroid rings are intended to render at zoom levels below 8.5, transitioning to individual swatches at higher magnifications.
Accessibility and compliance
The component is engineered to meet WCAG 2.2 AA standards:
- Redundant Signaling: Color is never the sole channel for information; labels provide primary semantic meaning.
- High-Contrast Support: In Windows High Contrast Mode or
forced-colorsenvironments, the dot reverts to system link colors while the label maintains text integrity. - Luminance Contrast: Family color tokens are validated for a minimum 3:1 contrast ratio against both light and dark map basemaps.
Design tokens (DTCG)
| Token | Value | Description |
|---|---|---|
ps.swatch.dot.size |
12px | Default inline dot size |
ps.swatch.dot.size.marker |
24px | Map marker variant size |
ps.brand-family.department.color |
#0B5FFF |
Azure blue |
ps.brand-family.hardware.color |
#FF6B00 |
Construction orange |
ps.brand-family.warehouse-club.color |
#00875A |
Warehouse green |
Planned extensions
Future iterations are intended to include:
- Pattern Infills: Planned support for geometric patterns within the dot to enhance distinguishability for users with advanced color vision deficiencies.
- Dynamic Pie Charts: Research is underway to transition the cluster-centroid ring into a dynamic donut chart when cluster density exceeds 10 anchors.
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
- co-location-methodology — the co-location scoring methodology whose tier rankings drive the swatch color assignments