Perron

Perron is the design system of Mylder, a live map of Copenhagen's buses, S-tog, metro and regional trains. This repository holds all of it: the design tokens and the build that turns them into CSS, TypeScript and a Penpot file, the fonts, the icons and the Mylder mark, the guidelines in docs/foundations/, and 54 React components and 14 patterns on Base UI, with APIs shaped like MUI's and their own words in English, Danish, Swedish and Norwegian. Every Mylder screen is built from them.

Each component and pattern is built to the component contract by the factory loop of the roadmap: a spec goes in, and a loop of agents writes the code, the stories, the tests and the docs, with a code review as the gate.

Docs: marcin-sieradzki.github.io/perron, with the Storybook beside it. Packages: @mylder/perron and @mylder/perron-mcp on npm.

Use it

npm install @mylder/perron

import '@mylder/perron/perron.css'
import { Button, PerronProvider } from '@mylder/perron'
import { DepartureRow } from '@mylder/perron/patterns'

Load the stylesheet once at the app root, and wrap the app in PerronProvider to set the language of the words the components show on their own. Light is the default theme; data-theme="dark" on any element switches it. The package's README has the rest.

Agents can ask the MCP server, npx -y @mylder/perron-mcp over stdio, for Perron's tokens, docs and components and for the Base UI and MUI API of the versions a project installs; its README has the tools and the .mcp.json entry.

Standard

The tokens follow the Design Tokens specification 2025.10, the first stable version from the W3C Design Tokens Community Group: its Format module for the files, its Color module for colour values and its Resolver module for how base, light and dark combine.

The build checks every file against the format rule by rule (scripts/lib/spec.ts) before it writes anything, so a token that breaks the format fails npm run check. The format's $root tokens and $extends groups are not read by the build yet; the check reports them until it does.

This is the beginning of the README. Read the rest at the original. Read the full README ↗