Each transit line has a distinct, high-contrast color. These primaries must remain distinguishable at small sizes, on signage, and under harsh fluorescent lighting. Neutral backgrounds keep the routes legible.
Transit systems depend on typefaces that are legible at speed, at distance, and at any size. Overpass for display and wayfinding headings; Inter for body text and interface copy; Overpass Mono for data and codes.
An 8px base grid keeps everything aligned, like stations snapped to a schematic diagram. Consistent spacing creates the visual rhythm that makes complex route maps scannable.
Form controls are clean and geometric. Labels are marked with station dots; inputs have crisp borders that highlight to line-blue on focus, like an active route on the map.
Content cards are topped with a colored route line, like a train approaching a platform. Each card's line color signals its category, just as passengers learn to follow their line's color through the system.
Service advisories use line colors as severity indicators. The thick left border references the colored bar on wayfinding signage that identifies each corridor in a station complex.
A 12-column grid snaps content to the same invisible rails that organize a transit map. Layouts align to predictable tracks, making complex information feel orderly and navigable.
The principles that guide transit map design — and this system.