Diff: design-system/brand-family-swatch.es
From 1c02ec1 to 1c02ec1
+0 / −0 lines
| Before | After |
|---|---|
| --- | --- |
| schema: foundry-doc-v1 | schema: foundry-doc-v1 |
| type: topic | type: topic |
| content_type: topic | content_type: topic |
| category: design-system | category: design-system |
| slug: brand-family-swatch | slug: brand-family-swatch |
| short_description: "The brand color families assigned to retail and institutional anchor categories in the platform's co-location GIS surface, providing consistent color-coded identifiers for map visualization and tabular data across accessible and standard display modes." | short_description: "The brand color families assigned to retail and institutional anchor categories in the platform's co-location GIS surface, providing consistent color-coded identifiers for map visualization and tabular data across accessible and standard display modes." |
| title: "Brand-family swatch" | title: "Brand-family swatch" |
| paired_with: brand-family-swatch.es.md | paired_with: brand-family-swatch.es.md |
| state: authoritative | state: authoritative |
| status: active | status: active |
| audience: vendor-public | audience: vendor-public |
| bcsc_class: current-fact | bcsc_class: current-fact |
| language_protocol: DESIGN-COMPONENT | language_protocol: DESIGN-COMPONENT |
| authored: 2026-04-30 | authored: 2026-04-30 |
| last_edited: 2026-05-25 | 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 [[co-location-methodology|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. | 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 [[co-location-methodology|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 | ## 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 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 | ## Usage guidelines |
| ### Deployment scenarios | ### Deployment scenarios |
| - **Map Markers**: Functions as the visual foundation for anchor markers, using color-coded dots to signal family affiliation. | - **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). | - **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. | - **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. | - **Cluster Analysis**: Employs a concentric ring variant to represent family distribution within aggregate map clusters. |
| ### Constraints | ### 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. | 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 | ## Technical specifications |
| ### Anatomy and composition | ### Anatomy and composition |
| - **Indicator**: A 12px (default) or 24px (marker) circular dot using family-specific color tokens. | - **Indicator**: A 12px (default) or 24px (marker) circular dot using family-specific color tokens. |
| - **Label**: A taxonomy-resolved display name (e.g., "Warehouse Club"). | - **Label**: A taxonomy-resolved display name (e.g., "Warehouse Club"). |
| - **Accessibility Layer**: An `aria-label` that combines the dot and label semantics, ensuring the visual indicator is hidden from screen readers to prevent redundant announcements. | - **Accessibility Layer**: An `aria-label` that combines the dot and label semantics, ensuring the visual indicator is hidden from screen readers to prevent redundant announcements. |
| ### Interaction model | ### 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. | 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 | ## Accessibility and compliance |
| The component is engineered to meet WCAG 2.2 AA standards: | 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. | - **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-colors` environments, the dot reverts to system link colors while the label maintains text integrity. | - **High-Contrast Support**: In Windows High Contrast Mode or `forced-colors` environments, 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. | - **Luminance Contrast**: Family color tokens are validated for a minimum 3:1 contrast ratio against both light and dark map basemaps. |
| ## Design tokens (DTCG) | ## Design tokens (DTCG) |
| | Token | Value | Description | | | Token | Value | Description | |
| | :--- | :--- | :--- | | | :--- | :--- | :--- | |
| | `ps.swatch.dot.size` | 12px | Default inline dot size | | | `ps.swatch.dot.size` | 12px | Default inline dot size | |
| | `ps.swatch.dot.size.marker` | 24px | Map marker variant size | | | `ps.swatch.dot.size.marker` | 24px | Map marker variant size | |
| | `ps.brand-family.department.color` | `#0B5FFF` | Azure blue | | | `ps.brand-family.department.color` | `#0B5FFF` | Azure blue | |
| | `ps.brand-family.hardware.color` | `#FF6B00` | Construction orange | | | `ps.brand-family.hardware.color` | `#FF6B00` | Construction orange | |
| | `ps.brand-family.warehouse-club.color` | `#00875A` | Warehouse green | | | `ps.brand-family.warehouse-club.color` | `#00875A` | Warehouse green | |
| ## Planned extensions | ## Planned extensions |
| Future iterations are intended to include: | 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. | - **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. | - **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 | ## See also |
| - [[brand-typography]] — the platform's print typography standards that pair with this visual identity system | - [[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 | - [[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 | - [[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 | - [[co-location-methodology]] — the co-location scoring methodology whose tier rankings drive the swatch color assignments |