Logos
The Mylder mark, and how it is used. The files are in packages/perron/logos/, and logos.json there lists them with the ground each is drawn for.
The mark
The mark is a bus dot, an S-tog dot and an estimated ring: three of the ways a vehicle can look on the map. Its colours are tokens, each in its theme's value: the bus dot is color.transit.mode.bus, the S-tog dot line A's color.transit.line.a, the ring color.text.primary. A file is an image and can't follow the theme, so there is one file per theme, and the check holds each file's colours to its theme's tokens.
color.transit.mode.busLight#D99A00palette.yellow.500Dark#F2B630palette.yellow.300Every bus line: fills bus badges and colours bus dots, station icons and stop timelines; also the bus dot of the Mylder markcolor.transit.line.aLight#00A1DEDark#00A1DES-tog A: fills its line badge and colours its vehicle dots, station icons, stop timeline and rail on the map; also the S-tog dot of the Mylder markcolor.text.primaryLight#12181Bpalette.neutral.900Dark#EBEEEBpalette.neutral.100Main text and icons; also the focus ring
Usage
- Keep the mark as drawn: its three shapes and colours are data states, so a recoloured, outlined or rearranged mark says something else.
- Set it beside the wordmark: "mylder" in lowercase, in
typography.heading-mdset bold. The mark alone stands in only where space is tight, such as an app icon. - Keep clear space of at least the ring's width around it, and set it no smaller than its drawn size, 27 × 19 px.
- Use the file drawn for the ground it sits on:
mylder-mark.svgon light,mylder-mark-dark.svgon dark.
Files
Brand
-
Mylder mark
logos/mylder-mark.svgLight themeOn light grounds -
Mylder mark, dark
logos/mylder-mark-dark.svgDark themeOn dark grounds