Skip to the content
Perron
GitHub
Mylder's design system, version 0.10.1

Everything that floats over the map

Perron is the set of tokens, components, patterns and words behind Mylder, a live map of Copenhagen's buses, S-tog, metro and trains, and how sure we are about each of them.

  • 54Stable components
  • 14Stable patterns
  • 280Tokens
  • 5Data states
  • 4Languages
Get startedBrowse components

Working with a coding agent? Add the Perron MCP server:

npx @mylder/perron-mcp
Data states
  • LiveA GPS report younger than the live threshold
  • AgeingA report past the live threshold, under the ageing one
  • EstimatedPlaced from the timetable and the latest delay
  • Timetable onlyNo real-time data at all
  • No signalSilent past the ageing threshold, moved on by the timetable
Stable
68
In design
0
Built and stable
x
Disruptions
DelaysAffected lines
  • F

Signal fault at Danshøj

Trains between Flintholm and Ny Ellebjerg run slower than planned.
M3Cityringen, clockwise
  1. Kongens Nytorv Passed
  2. Marmorkirken Passed
  3. ØsterportNext stop 1 min late
  4. Trianglen 1 min late
  5. Poul Henningsens Plads 1 min late
Night busReplacement busCancelled

What the system is made of

LiveAgeingEstimatedTimetable onlyNo signal

Honest about every vehicle

Every vehicle shows one of 5 data states, each with its own shape, so none is drawn without how sure we are about where it is. The words for each state are the same on every screen.

M1M2M3M4ABCEFH

Of Copenhagen

The operators' own line colours, the city's names and the 24-hour clock, as tokens.

<SegmentedControl defaultValue="all">
  <Segment value="all">All</Segment>
  <Segment value="bus">Bus</Segment>
</SegmentedControl>

Base UI underneath

Behaviour and accessibility from Base UI 1.9.0, props shaped like MUI's, styles in plain CSS.

  • list_tokens
  • search_docs
  • list_components
  • get_component
  • get_reference

Ready for agents

An MCP server that reads the docs of the exact versions Perron pins.

light · dark

280 tokens, 2 themes

Written to the DTCG 2025.10 spec and built to CSS, TypeScript and Penpot.

Explore

Built with Perron

Built with React 19, Base UI 1.9.0 and DTCG tokens