5.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

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
• 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 (dashed 6,4)
• OSM trio lines: green #4CAF50 (dashed 6,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:

• static/css/src/01-settings/tokens.css

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:

• static/js/shared/constants.js

Relevant constants:

• AppConstants.COLORS.ATLAS_MATCHED
• AppConstants.COLORS.OSM_MATCHED
• AppConstants.COLORS.ATLAS_UNMATCHED
• AppConstants.COLORS.OSM_UNMATCHED
• AppConstants.COLORS.LINE_ATLAS_OSM
• AppConstants.COLORS.LINE_OSM_GROUP
• AppConstants.COLORS.LINE_OSM_GROUP_DASH
• AppConstants.COLORS.LINE_OSM_GROUP_DASH_ALT

Implementation Notes

The migration removed hardcoded marker and line color strings from the main map code paths and replaced them with semantic constants.

Updated map/runtime files:

• static/js/components/line-renderer.js
• static/js/components/map-renderer.js
• static/js/pages/main.js
• static/js/pages/problems-map.js

Updated UI accent files:

• static/css/src/01-settings/tokens.css
• static/css/pages/routes.css
• static/css/pages/docs.css
• static/css/pages/reports.css
• static/css/pages/stats.css
• static/js/shared/mermaid-config.js

Rules for Future Changes

1. Do not introduce new hardcoded map color strings in rendering logic.
2. Add or change colors through tokens.css and AppConstants.COLORS first.
3. Keep marker semantics stable: ATLAS matched is navy, OSM matched is green.
4. Keep unmatched semantics stable: ATLAS unmatched is red, OSM unmatched is gray.
5. Keep OSM group lines dashed green and ATLAS-OSM lines solid navy.