Foundations
The map is the product. Everything else floats over it on glass and says, in words and in the shape of every dot, how sure we are about what it shows. Each tile below is drawn from the tokens themselves: switch the theme and every one of them follows.
Honest
Every vehicle shows how fresh its data is, and every sentence says no more than the data knows.
Calm
The map and the vehicles carry the colour. The interface around them is ink, glass and neutral surfaces, with the brand yellow kept for the main action.
Of Copenhagen
The operators' own line colours, the city's names, Danish and English side by side, the 24-hour clock.
space.300 is 12 px.Radius and focusxs, 4 pxsm, 6 pxmd, 8 pxlg, 12 pxxl, 16 pxfull, 9999 pxFocusOne ring, 2 px wide, 2 px from the element.ElevationThe map is the ground; everything else floats over it, and depth shows first in the surface colour, then in a shadow.Motioneasing.sheetduration.sheet 320 mseasing.standardduration.camera 750 msduration.report-pulse 1100 msMotion explains a change of place. Under reduced motion, transitions take 0.01 ms.IconsOne small set, drawn for Mylder.LogosThe mark is a bus dot, an S-tog dot and an estimated ring: three of the ways a vehicle can look on the map.Layoutcompact-phone380 pxHide the brand markphone760 pxBottom sheets, compact top bartablet1180 pxHide city name, day and legenddesktop1400 pxBelow it, the filter chips marked "Later", for filters still to come, are hiddenAccessibilitytext.primary on surface.default17.3:115.3:1text.success on surface.inset4.7:16.3:1Part of it the build proves on every change: npm run check fails when any check below breaks. The rest no build can see, so a person checks it on every screen before it ships.Content designSignal fault at Danshøj. Trains between Flintholm and Ny Ellebjerg run slower than planned.08:144 min45 km/h−1—≈~NowEvery 3 minEvery 3 to 4 minCancelledHow every word in Mylder reads: plain sentences, exact about certainty, in English, Danish, Swedish and Norwegian Bokmål.Only on a live map
Data statesLiveA GPS report younger than the live thresholdAgeingA report past the live threshold, under the ageing oneEstimatedPlaced from the timetable and the latest delayTimetable onlyNo real-time data at allNo signalSilent past the ageing threshold, moved on by the timetableAlways write the state in words next to the dot.MapThe map is the ground every panel floats over, drawn quiet so the vehicles carry the colour. Metro lines 3.2 px, S-tog 2.5 px, regional 2.1 px; dot radius from 3.3 px for a bus to 5.3 px for a regional train.
Using the tokens
- Install
@mylder/perronand load@mylder/perron/perron.cssonce 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 isvar(--perron-color-text-primary):--perron-, then the name with dots as hyphens. Never copy a value. - In script,
@mylder/perron/tokens.tshas every value per theme, typed by name, and the reduced motion values undermodifiers. - 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 inicons.jsonandlogos.json. - A token changes only in Perron's own repository, in
packages/perron/tokens/*.tokens.json, followed bynpm run tokens. Never edit a generated file, or a table on these pages, by hand.
/* once, at the app root */
import '@mylder/perron/perron.css'
.departure {
color: var(--perron-color-text-primary);
padding: var(--perron-space-300);
font: var(--perron-typography-body);
}