Semantic colours

Light and dark

• Light is the default theme. Dark comes from data-theme="dark" on any element or, without an explicit theme, from the system's dark mode. data-theme="light" keeps an element light inside a dark page, so one page can show both themes side by side.
• Both themes define the same names, and the build fails when one is missing.
• Dark colours are their own palette steps, chosen for the dark surfaces, not an inversion of the light ones: 300 for status and brand fills and text, 900 for tints, the light neutrals for text.
• Base tokens never point at a theme token. A custom property resolves where it is declared, so a base token built from a theme colour would keep the root theme's value inside a nested data-theme.

Text

• Three text colours for the interface. Use color.text.primary for what people read first, and color.text.secondary for supporting text. Keep color.text.tertiary for hints, axis labels, captions and the "—" of an unknown delay or figure, next to stronger text: it misses 4.5:1 on purpose (the figures are on Accessibility), so set sentences people must read in primary or secondary.
• color.text.inverse sits on color.surface.inverse, the primary button and pressed toggles.
• On a coloured fill, text is color.text.on-color.dark or color.text.on-color.light, whichever the fill was paired with.

Surfaces

What each surface is for, and how they stack, is on Elevation.

A control shows hover and pressed as two steps away from its rest look, each one the eye sees: the pressed step is further from rest than the hover step, so a press answers even under a pointer that is already hovering.

• A solid ink control takes color.surface.inverse-hover on hover and color.surface.inverse-pressed while pressed; a solid brand one takes color.surface.brand-hover and color.surface.brand-pressed. Each step is at least 1.2:1 from the one before it, and the label keeps 4.5:1 on all three.
• A quiet or outline control, transparent at rest, lays color.surface.hover over what it sits on while hovered and color.surface.selected while pressed. These layers step less than the solid fills: a denser pressed layer would take a brand outline label under 4.5:1 in light.

Borders

• Use color.border.subtle for hairlines: dividers, and the edges of panels and cards.
• Use color.border.control for edges that show where a control is, such as inputs and outline buttons. It reaches 3:1 on every surface, as WCAG asks of anything that identifies a control.
• Use color.border.strong for lines that decorate, such as dashed tags and chart axes. A control's edge takes color.border.control, which stays visible where strong would fade.
• color.border.focus is the focus ring, in the colour of primary text. The ring's width and offset are on Semantic spacing.

Status

Status colours are reserved for health, delays and problems: success, warning, danger and info. A status colour always comes with a word or an icon. Each status comes in three tokens:

• color.status.<status> fills dots, meters, icons and counts.
• color.text.<status> is text in that colour, 4.5:1 or better on every surface.
• color.surface.<status> is a tinted background for a message.

Brand

The brand colour is the yellow of the bus dot in the Mylder mark, and Perron's primary colour. It marks the main action, as a brand button, and moments of emphasis on the hero page: a band, a highlighted word. Text on the brand fill is always color.text.on-color.dark.

• A brand button, solid or outline, has a color.border.brand edge: the light-theme fill reaches only 2.1:1 on the surfaces, and the edge carries the 3:1. Its hover fill is color.surface.brand-hover and its pressed fill color.surface.brand-pressed.
• Ink actions (color.surface.inverse) stay for everything else, so the yellow keeps meaning the main action.
• A brand button shares the bus badge's fill and ink label. Keep it out of rows of line and mode badges, where it reads as one.
• Links, status and vehicles have their own colours.

Line colours

• Line colours are the operators' own: color.transit.line.<id> for metro and S-tog, color.transit.mode.bus and color.transit.mode.regional for the rest. They stay exact, never adjusted to the brand.
• A line colour fills a shape only in a line badge. Elsewhere it is a dot, a ring, a rail or a swatch.
• Text on a line colour always uses its partner, color.transit.line-on.<id> or color.transit.mode.on-*.
• Several official pairs miss 4.5:1: C 2.51:1, A 2.94:1, B 3.27:1, M4 3.56:1 and M1 4.44:1. They stay exact, set bold, with the line always named in words nearby. The test lists them.

Delays and disruptions

Delay and disruption colours point at the status text colours. When each is used is on Data states.

Data states

Charts

A chart with one series draws it in color.chart.series, with the area under a line at opacity.series-fill. Values and labels stay in text colours, never in the series colour.

Map

The map's ground. How the map is drawn is on Map.