6.7 Colours
Purpose
This chapter defines the color system used by the web app and map rendering logic.
It standardizes previous mixed blue/green/red/gray hardcoded values into semantic tokens.
Canonical Palette
Primary Navy
Brand primary color, used for ATLAS markers and UI accents.
OSM Matched Green
Success color, used for matched OSM markers.
ATLAS Unmatched Red
Danger color, used for unmatched ATLAS markers.
Priority P2 Orange
Warning color, used for significant problems.
OSM Unmatched Gray
Muted color, used for unmatched OSM markers.
Neutral Dark
Heading and primary text accent.
Neutral Muted
Secondary text and low-priority elements.
System Border
Standard card and container borders.
Subtle Surface
Subtle background for list headers and sections.
Primary Subtle
Subtle background for info banners.
These values are now the source of truth for both UI accents and map semantics.
Semantic Mapping
Map markers
- Matched ATLAS marker: navy
#174092 - Matched OSM marker: green
#4CAF50 - Matched GTFS stop_id marker (GTFS stop_id ↔ SLOID view): orange
#F0AD4E - Unmatched ATLAS marker: red
#DC3545 - Unmatched OSM marker: gray
#6C757D
Map lines
- ATLAS-OSM connection lines: navy
#174092(solid) - OSM group partner lines: green
#4CAF50(dashed6,4) - OSM trio lines: green
#4CAF50(dashed6,4)
Information Banners
Used for global stats summaries and problem identification details.
- Background: Primary subtle
#eef3fb - Border: Primary muted (alpha variant of
#174092) - Text: Primary navy
#174092
Priority System
Standardized across Analytics reports and Problem identification chips.
- P1: Red
#DC3545(Danger/Critical) - P2: Orange
#F0AD4E(Warning/Significant) - P3: Gray
#6C757D(Secondary/Minor)
Token Sources
CSS tokens
Main token file:
Relevant token names:
--color-primary--color-primary-hover--color-primary-subtle--color-success--color-success-hover--color-map-atlas-matched--color-map-osm-matched--color-map-atlas-unmatched--color-map-osm-unmatched--color-map-line-atlas-osm--color-map-line-osm-group
JS constants
Main constants file:
Relevant constants:
AppConstants.COLORS.ATLAS_MATCHEDAppConstants.COLORS.OSM_MATCHEDAppConstants.COLORS.ATLAS_UNMATCHEDAppConstants.COLORS.OSM_UNMATCHEDAppConstants.COLORS.LINE_ATLAS_OSMAppConstants.COLORS.LINE_OSM_GROUPAppConstants.COLORS.LINE_OSM_GROUP_DASHAppConstants.COLORS.LINE_OSM_GROUP_DASH_ALT