Colours
Official TfL line and mode colours. Arrivals boards and status already apply them.
Values follow TfL's design standards (Colour standard Issue 10). Not a licence for Johnston or the roundel; see Licensing.
All colours — click to copy
Bakerloo
Central
Circle
District
Hammersmith & City
Jubilee
Metropolitan
Northern
Piccadilly
Victoria
Waterloo & City
Liberty
Lioness
Mildmay
Suffragette
Weaver
Windrush
Transport for London
DLR
Elizabeth line
London Buses
London Cable Car
London Coaches
London Dial-a-Ride
London Overground
London River Services
London Trams
London Underground
Santander Cycles
CSS variables
One name per colour. Light lives in :root, dark in .dark. @theme exposes --color-tfl-* for Tailwind utilities.
When to use these tokens
Arrivals boards and status already paint line colour. For a label or chip, use Line title or Line chip.
import { LineName } from "@/components/tfl/brand/line-name"
import { LineBadge } from "@/components/tfl/brand/line-badge"
<LineName lineId="victoria" />
<LineBadge lineId="central" />Copy from this page when:
- The colour is not a line — TfL blue, coaches
- Values for Figma
- A custom component
Installation
Install via the shadcn registry, or copy the CSS variable layers into globals.css. Boards and Line chip also pull tfl-colours transitively.
Merges OKLCH palette, data-line bindings, and @theme aliases into your CSS.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/tfl-colours.jsonLine → colour mapping
Three tiers: palette vars (--tfl-line-central), data-line binding, then role vars (--line-color / --line-ink). Prefer data-line when the id is dynamic.
// data-line resolves --line-color / --line-ink for you
<span
data-line="northern"
className="inline-flex items-center bg-[var(--line-color)] px-2 py-0.5 text-xs font-bold text-[var(--line-ink)]"
>
Northern
</span>
// vars are just CSS — override when you need a one-off
<span
data-line="northern"
className="inline-flex items-center bg-[var(--line-color)] px-2 py-0.5 text-xs font-bold text-[var(--line-ink)]"
style={{ "--line-color": "#6D2077", "--line-ink": "#fff" }}
>
Northern
</span>Tailwind cannot build class names dynamically
import {
getLineColourBgClass,
getLineColourToken,
LINE_COLOUR_TOKENS,
} from "@/lib/tfl/line-colour-map"
// Iterate published tokens
for (const token of LINE_COLOUR_TOKENS) {
console.log(token.id, token.hex, token.bgClass)
}
const line = { id: "northern" }
// ✅ Look up a complete class string
const bg = getLineColourBgClass(line.id) // "bg-tfl-line-northern"
// ❌ Tailwind never sees this — no CSS emitted
// className={`bg-tfl-line-${line.id}`}
// ✅ Or bind dynamically without a utility class
<span data-line={line.id} className="bg-[var(--line-color)]" />Adaptive modes
TfL has not published dark-mode line colours. Dark tokens shift the Colour standard values slightly lighter and a little more chromatic, hue held.
.dark— those derived colours. Northern uses a light fill and black inkdata-tfl-northern="halo"— opt-in brand-black Northern with halo helpers when paint sits on an uncontrolled backgroundprefers-contrast/forced-colors— role tokens adapt; forced colours use a real borderdata-tfl-colour="mono"— greys--line-color/--line-inkfor chrome. Stroke motifs live on strips — see Mono line styles
Mono line styles
Colour route paint vs black-and-white Tube map stroke patterns (provisional reconstruction of the large-print B&W map key). Palette tokens --tfl-mono-ink / paper / grey / light invert in .dark. Only Simple line strip, Branch strip — horizontal, and vertical paint the motifs, via a mono prop.