Skip to the content
Perron
GitHub

Get started

Perron is the design system of Mylder, a live map of Copenhagen's buses, S-tog, metro and regional trains. This package holds all of it: the design tokens as CSS custom properties and TypeScript, the fonts, the icons and the Mylder mark, and the React components and patterns built on Base UI. The docs are at marcin-sieradzki.github.io/perron.

Install and load Perron

npm install @mylder/perron

Load the stylesheet once at the app root. It brings the fonts, the tokens for both themes and for reduced motion, the typography classes and a few page defaults.

import '@mylder/perron/perron.css'
import { theme } from '@mylder/perron/tokens.ts'

Components come from the package's root and patterns, built from them for Mylder's screens, from @mylder/perron/patterns.

import { Button } from '@mylder/perron'
import { DepartureRow } from '@mylder/perron/patterns'

Read a token in CSS as var(--perron-color-text-primary), and never copy a value. Light is the default theme; set data-theme="dark" on any element for dark. The icons and the mark are SVG files under @mylder/perron/icons/ and @mylder/perron/logos/.

Wrap the app in PerronProvider to set the language of the words Perron's components show on their own, such as a dialog's close label: en (the default), da, sv or nb. It also groups the tooltips inside it, so once one is open the next opens at once.

import { PerronProvider } from '@mylder/perron'

;<PerronProvider locale="da">{app}</PerronProvider>

The rules for each foundation, and the source, are in the Perron repository.

Use a first component

Inside the provider, import a component and use it. Its page lists its props, variants and states.

import { Button } from '@mylder/perron'

export function StopActions() {
  return <Button>Show departures</Button>
}

Button and every other component are under Components.

Use the tokens

  • Install @mylder/perron and load @mylder/perron/perron.css once at the app root. It brings the fonts, the custom properties for both themes and for reduced motion, the typography classes and a few page defaults.
  • Pages name tokens the way the sources do, color.text.primary. In CSS that token is var(--perron-color-text-primary): --perron-, then the name with dots as hyphens. Never copy a value.
  • In script, @mylder/perron/tokens.ts has every value per theme, typed by name, and the reduced motion values under modifiers.
  • Light is the default theme. Set data-theme="dark" on any element for dark; without it, the system's dark mode applies. Reduced motion follows the system setting on its own.
  • Icons and logos are SVG files in @mylder/perron/icons/ and @mylder/perron/logos/, listed with their use in icons.json and logos.json.
  • A token changes only in Perron's own repository, in packages/perron/tokens/*.tokens.json, followed by npm run tokens. Never edit a generated file, or a table on these pages, by hand.

Add the MCP server

The Perron MCP server. It answers an agent's questions about Perron's tokens, its docs, its components and patterns, and the API of the Base UI and MUI versions a project installs, so the agent reads exact, small answers instead of the sources.

  1. Run the server

    npx @mylder/perron-mcp

  2. Or add it to the project's .mcp.json

    It runs over stdio. In a project's .mcp.json:

    {
  "mcpServers": {
    "perron": {
      "command": "npx",
      "args": ["-y", "@mylder/perron-mcp"]
    }
  }
}

Every tool, with a real call and its answer, is on Agents.