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

#174092 --color-primary

Brand primary color, used for ATLAS markers and UI accents.

OSM Matched Green

#4CAF50 --color-success

Success color, used for matched OSM markers.

ATLAS Unmatched Red

#DC3545 --color-danger

Danger color, used for unmatched ATLAS markers.

Priority P2 Orange

#F0AD4E --color-warning

Warning color, used for significant problems.

OSM Unmatched Gray

#6C757D --color-secondary

Muted color, used for unmatched OSM markers.

Neutral Dark

#343a40 --color-dark

Heading and primary text accent.

Neutral Muted

#6C757D --color-fg-muted

Secondary text and low-priority elements.

System Border

#E5E7EB --color-border

Standard card and container borders.

Subtle Surface

#F8F9FA --color-bg-subtle

Subtle background for list headers and sections.

Primary Subtle

#eef3fb --color-primary-subtle

Subtle background for info banners.

The core ATLAS–OSM palette is centralized in CSS tokens and JavaScript constants. A few page-specific colors, notably the matched GTFS marker in the GTFS stop_id ↔ SLOID view, are still defined locally in that page's CSS and JavaScript.

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 (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

Page-specific GTFS color

The matched GTFS marker color (#F0AD4E) is currently defined in both:

It does not yet have a dedicated --color-map-gtfs-matched CSS token or AppConstants.COLORS.GTFS_MATCHED constant.

6.6 Routes Pages

6.8 Documentation Page Delivery

Generating Report

Documentation