Component styleguide

Every primitive in both themes. The header toggle flips the whole page and persists your choice; the two panels below force light and dark so you can compare side by side.

Light

Pill — neutral · success · warning

Neutral On time Delayed

Metric — .num numerals vs plain text

Fare ₹30

Distance 12.4 km

Interchange Rajiv Chowk

Card — plain & accentColor

Plain card

Surface, border, soft shadow.

Accent card

3px top border from a line colour.

Line colours — style="--line: …" from lines.color_hex

Rapid Metro Red Line Yellow Line Blue Line Green Line Violet Line Pink Line Magenta Line Airport Express

Accordion — Alpine, reduced-motion aware

What is an interchange?

A station served by more than one line, letting you switch lines without exiting.

How is the fare calculated?

Distance slabs per network, summed across operators for multi-network routes.

Breadcrumb

Dark