Foundations
Colour
Core, status, live and CTA line colours in light and dark, with contrast ratios.
All text and status colours meet WCAG AA in both themes. These tables render from tokens.json, the source of truth for the web (/site/tokens.css) and the app (DesignTokens).
Core
Left chip light, right chip dark. Ratios are light-mode text contrast on Surface. Focus rings use Brand.
Status and emphasis
Live and fixed
CTA lines
Line colours keep their CTA hue with minimal contrast variants: Yellow darkens in light mode; Brown and Purple lighten in dark mode. Bus routes use Brand, never a line colour.
Route icons and line bars render the active line token with no outline. Nearby labels and accessibility names carry the line identity; map station markers add only a white map casing for legibility.
Line circles carry no text. Every line shape has an accessibility label with the line name, and lists show the name next to it.