Identity system · self-initiated

rbit

A tram and metro network for a mid-sized city. Vignelli's argument for the 1972 subway map was that a passenger underground does not need to know where they are. They need to know what comes next. Everything here follows from accepting that.

Client
Fictional, self-initiated
Sector
Public transport
Scope
Mark, diagram, signage, ticketing, screen
Method
After Massimo Vignelli
Built
Inline SVG and CSS
01

The mark

The name with its first letter replaced by an interchange marker taken off the diagram. The mark is a piece of the map rather than a badge stuck on top of it.

Primary lockup with the line stack

The ring
It is an interchange marker lifted off the diagram: the same circle at the same stroke ratio, one sixth of its outer diameter. The mark scales with the map because it is made of the map.
Colour
Black on white, white on black, and nothing else. Line colours belong to lines, never to the mark.
Position
Top left of every sheet, on the same module as everything else. It is never centred and never enlarged for effect.
Never
Never fill the ring, never set it in a line colour, and never let it carry a strapline.
02

The diagram

Every line runs at nought, forty five or ninety degrees. Distance is even between stations whatever the ground says. Press the toggle to see what the diagram is throwing away.

Angles
Three only. Nought, forty five, ninety. A fourth angle has to be justified to somebody, and it never is.
Spacing
Stations sit at equal intervals. The suburbs are compressed and the centre is opened out, which is the opposite of the truth and the right way round for a reader.
Interchange
A white circle with a black ring. A single stop is a filled tick on the line.
What it loses
Walking distance. That is a real cost, and it is why the diagram carries a scale note and the street map does not use this drawing.
03

Colour

One hue per line and no hue used for anything else. Colour is not decoration here, it is the index, and every other surface in the system borrows it back from the diagram.

1
Red#E03A28Harbour to Eastgate. The oldest line.
2
Blue#0B63C5Airport to Old Quarter.
3
Green#128C56North Park to the university.
4
Yellow#F2B417The orbital. Runs both ways, all day.
5
Purple#7A4BB5Night service only, Friday and Saturday.
Reserved
The five hues are spent. A sixth line means a new hue tested against all five, not a tint of an existing one.
Bullets
Line numerals are always white on the hue, never the hue on white. Yellow gets black type and is the only exception.
Elsewhere
Signage, tickets and the website use black, white and grey. Colour appears only where a line is being named.
04

Typography

One family, four weights, and no second typeface anywhere in the network. Vignelli held that a designer needs about six typefaces in a career, and a transit system needs one.

Station name
700, minus 4%Eastgate
Platform
500Platform 2 · Southbound
Notice
300, 16 / 26Line 4 does not stop at Harbour on Sunday mornings while track work continues. Use line 1 and change at Cross Street.
Times
500, tabular06:12  06:24  06:36  06:48  07:00
Numerals
Tabular everywhere. Times sit in columns on a board and on paper, so they cannot be proportional.
Case
Sentence case for station names. Uppercase is reserved for labels of four words or fewer.
Clock
Twenty four hour, with a colon, on every surface including the app.
05

The module

Every sign is an eight by six field. The name band occupies two rows and starts at the same column on a platform sign, a street totem and a vehicle side panel.

Cross Street

Signage module, eight by six

Field
Eight columns, six rows, on every sign whatever its physical size.
Band
Two rows, full width, black. The name ranges left from column one and the bullets sit hard right.
Bullets
In line order, never in order of importance, because importance changes and line order does not.
Silence
The remaining four rows stay empty. They are where a reader's eye rests, and they are not available for messages.
06

Applications

The same band runs from a platform sign to a pocket map to a departure board. Nothing is redrawn for a new format, only cropped to it.

Cross Street 1 4

Platform sign

rbit Single
Valid 90 minutes from validationZones1–2
2.40

Single ticket, 88 × 54 mm

LinesTimesFaresStatus

Next tram
in 3 min

Live times for every stop on the network, and a diagram that fits on a phone without pinching.

Plan a journey

Website

DeparturesCross Street
  • 1Eastgate3 min
  • 4Orbital west5 min
  • 1Harbour7 min
  • 4Orbital east11 min
  • 5Night, Old Quarter23:40

Departure board

rbit Network diagram
Free · Take one

Pocket map cover, A6

07

What breaks it

A diagram is a promise that the drawing is consistent. Each of these breaks the promise in a way a passenger cannot see until they are already on the wrong platform.

×
Do not add a fourth angle One line at thirty degrees tells the reader angles carry meaning. From then on they will look for it everywhere.
×
Do not space by distance True spacing crushes the centre, which is where the interchanges are and where the reader actually needs room.
×
Do not tint a line A pale version of line 2 reads as a sixth line, not as line 2 at the weekend. Use a broken stroke instead.
×
Do not fill the silence The empty rows on a sign are structural. An advert in them costs more in missed stops than it earns.