Diff: design-system/brand-family-swatch
From 6947b7e to 6947b7e
+0 / −0 lines
| Before | After |
|---|---|
| --- | --- |
| schema: foundry-doc-v1 | schema: foundry-doc-v1 |
| type: topic | 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 |
| --- | --- |
| The Brand-Family Swatch is the primary taxonomic primitive for retail anchor classification within the platform's GIS ecosystem. It encodes the tripartite operator-ratified taxonomy—Department, Hardware, and Warehouse Club—while maintaining a data-agnostic architecture that supports customer-driven extensions via sovereign data layers. | The Brand-Family Swatch is the primary taxonomic primitive for retail anchor classification within the platform's GIS ecosystem. It encodes the tripartite operator-ratified taxonomy—Department, Hardware, and Warehouse Club—while maintaining a data-agnostic architecture that supports customer-driven extensions via sovereign data layers. |
| ## Executive Summary | ## Executive Summary |
| The platform’s geographic information systems use the Brand-Family Swatch to standardize the visual representation of retail anchors. By combining a color-coded identifier with a semantic label, the component ensures accessible data density across map surfaces, tabular filters, and detail drawers. The architecture is intentionally decoupled from the specific taxonomy; it resolves family identifiers through a runtime JSON configuration, permitting operators to modify or extend classification categories without code changes. | The platform’s geographic information systems use the Brand-Family Swatch to standardize the visual representation of retail anchors. By combining a color-coded identifier with a semantic label, the component ensures accessible data density across map surfaces, tabular filters, and detail drawers. The architecture is intentionally decoupled from the specific taxonomy; it resolves family identifiers through a runtime JSON configuration, permitting operators to modify or extend classification categories without code changes. |
| ## 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 | |
| ## Strategic Roadmap | ## Strategic Roadmap |
| 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]] | - [[brand-typography]] |