London Overground lines

TfL Digital

By the end of 2024, London Overground’s new line names and colours will have been introduced across our signage, maps and digital service, making it easier for customers to travel on the network.

You can read more about the significance and stories behind the new line names on our Made by TfL blog.

This guide is for suppliers and third party developers who are now planning to adapt their apps, websites and digital displays to reflect the changes by end of 2024.

It provides an overview of various scenarios you might encounter when updating digital travel tools and illustrates how you might approach them, so that your design aligns with the experience customers will have when travelling.

 

The lines

The official logo for the London Overground network.

Six pairs of horizontal parallel lines in different colours, representing the six new London Overground lines. Under each line there is a title with the line name and a HEX code (for example, “Liberty, HEX code #61686B”).

Name Currently known as
Liberty (LIB) Romford to Upminster
Lioness (LIO) Watford Junction to Euston
Mildmay (MIL) Richmond and Clapham Junction to Stratford
Suffragette (SUF) Gospel Oak to Barking Riverside
Weaver (WEA) Liverpool Street to Enfield Town, Cheshunt and Chingford
Windrush (WIN) Highbury & Islington to New Cross, Clapham Junction, Crystal Palace and West Croydon

 

Map

All new London Overground lines will display dual lines in their respective colour.

You can see all the new lines on the new London Overground map.

Two diagrammatic maps showing sections of the London Overground lines. One of these shows a section of the Weaver line and a section of the Suffragette line. The other one shows a segment of the Weaver line, a segment of the Mildmay line, and a section of the Windrush line. Both examples display the names of a few stations present in these line segments.

 

A dual line is composed of two lines and a white space of equal weight.

A diagram detailing the proportions of the graphic element we call a dual line. Two parallel lines of equal weight, separated by white space of the same weight, display measurement annotations: their total height is annotated with an “x”, and the space between the lines is annotated with "0.33x".

This will also be reflected in station signage and wayfinding.

A photography of a piece of signage from a London Overground station: a wide horizontal sign held by a metal box hanging from a ceiling. The sign has two sections, showing directions for two different London Overground lines (Windrush and Mildmay). The sign incudes dual lines in the respective service colours and London Overground logos next to the line names.

 

Colour values and abbreviations

Name RGB Hex
Liberty (LIB) 97, 104, 107 #61686B
Lioness (LIO) 255, 166, 0 #FFA600
Mildmay (MIL) 0, 111, 230 #006FE6
Suffragette (SUF) 24, 169, 93 #18A95D
Weaver (WEA) 155, 0, 88 #9B0058
Windrush (WIN) 220, 36, 31 #DC241F

 

A customer journey

Customers will encounter the new names and colours along a journey, this might include planning ahead, finding the right station or platform and adapting to potential disruptions on the way.

The Overground brand will continue to guide customers when finding their way to the right part of the station or the right platform and will differentiate it from other modes of transport on our network, such as the London Underground or the DLR.

A sequence of illustrations describing three different moments of a customer journey from their home to boarding a London Overground train. The protagonist is a character composed of an abstract shape and expressive eyes. The first scene is titled “At home”, and depicts the character looking at a diagram of an itinerary, including the colour of the Mildmay line (blue), on a desktop screen. The second scene is title “At the station”, and depicts the character walking in a station environment including the London Overground logo and a directional sign to the Mildmay line including its blue colour. The third scene is titled “On-the-go”, and depicts the character on a train platform, looking at a phone. A floating UI card describes train departure information and includes the Mildmay line blue in a colour block.

 

Status

Status information is often displayed in lists, cards, widgets, notifications and other assets. Frequently, these assets display an overview of multiple disruptions on the network.

Line colours can be applied to graphic elements to help customers identify them.

Two examples of graphic elements that can be used to describe line status. A design for a banner or widget, composed of a white rectangle with round corners, titled “Status, Disruption” and including three coloured badges with abbreviations of line names next to an icon representing an alert (a square lozenge with an exclamation mark). A vertical list of disrupted lines, each represented by a white rectangles containing graphics and text. Each rectangle contains the name of a line, a type of disruption, and a graphic element in the respective line service colour. Some of these refer to London Overground lines, containing also a grey label with the word “Overground”.

 

When showing status for all Tube & rail lines, make it easier for customers to distinguish the new Overground lines from other services with a dual line in their respective colour and ideally with an additional Overground label.

Two examples of designs for a list of line disruptions. Each disrupted line is represented by a white rectangle containing graphics and text. On the first example, London Overground disruptions are represented with the line and disruption names, a dual line in the line colour, and a grey label with the word “Overground”. A London Underground disruption is represented with the line and disruption names and a block in the line colour. On the second example, London Overground disruptions include the line name, the disruption name, the affected line segment, a dual line in the line colour and the word “Overground”. A London Underground disruption is represented the line and disruption name, the affected line segment, and a block in the line colour.

 

Possible variations if necessary:

Dual lines must be displayed, however if this is technically not possible, the Overground line colour can, if absolutely necessary, be displayed as a colour block with a label.

If it is not possible to have a label, a dual line must be displayed.

Two examples of designs for a list of line disruptions. Each disrupted line is represented by a white rectangle containing graphics and text. On the first example, London Overground disruptions are represented with the line and disruption names, a block in the line colour, and a grey label with the word “Overground”. A London Underground disruption is represented with the line and disruption names and a block in the line colour. On the second example, London Overground disruptions include the line and disruption names and a dual line in the line colour. A London Underground disruption is represented the line and disruption name and a block in the line colour.

 

Status can also be displayed with text only.

Two examples of designs for a list of line disruptions. Each disrupted line is represented by a white rectangle containing mainly text. On the first example, London Overground disruptions are described with the line and disruption names, and a grey label with the word “Overground”. A London Underground disruption is described only with the line and disruption names. On the second example, all disruptions are represented only the line and disruption names.

 

There might be instances where you would like to give customers an overview of the volume of disruptions. In those cases, it is typically less important to distinguish between lines and more important to give customers a sense of the severity of the disruption.

If space is limited, visual indicators should be as simple and clear as possible to not add further complexity and there should always be an alternative text to be used by screen readers.

 

Two examples of iconographic representations of disruption volume. The first one shows the title “Status” and three coloured badges containing abbreviations of London Overground line names next to an icon representing an alert (a square lozenge with an exclamation mark). The second one shows the title “Status” and five coloured rectangles next to an icon representing an alert (a square lozenge with an exclamation mark).

On screen readers, these would read as:

First example: “Status, disruption, Suffragette line, Lioness line, Jubilee line”

Second example: “Status, 5 disruptions”

 

Stations

When looking up station information, it is important for customers to find the Overground part of the station or to know that there is an Overground line running from that station.

It is helpful to display mode icons next to station names, including Overground roundels.

Two examples of UI cards, each displaying the name of a station and the logos of services offered: Liverpool Street (with logos for London Underground, London Overground, Elizabeth line and National Rail); and Blackhorse Road (with logos for London Underground and London Overground).

On screen readers, these would read as:

First example: “Liverpool Street, Underground, Overground, Elizabeth line, National Rail station”

Second example: “Blackhorse Road, Underground, Overground station”

 

At the stations

Overground roundels will be displayed outside stations that include these lines.

A photo of signage at the entrance of West Hampstead Overground station: a 3D hanging sign of the London Overground logo, next to a brick wall displaying the name of the station in 3D metal typography.

 

Station information

When showing information for a station with different services (e.g. Overground and Underground), it is helpful for customers to associate the relevant lines with the Overground.

Icons or labels can be used for this purpose, alongside the line colours.

In the context of departure boards, the dual line can be replaced by a colour block, if it makes the information clearer.

Two examples of UI designs for app views detailing live train times for Willesden Junction station. Both examples include a primary title with the station name, and two cards titled with line names and train departure information. On the first example, one of the cards is titled “Bakerloo” and includes no iconography or other words associated to the title; the second card is titled “Mildmay” and includes a London Overground logo next to the title. On the second example, one of the cards is titled “Bakerloo” and includes a colour block in brown; the second card is titled “Mildmay” and includes a colour block in blue, as well as an “Overground” label next to the title.

On screen readers, the left side image would read as:

“Bakerloo, Elephant & Castle […]; Mildmay, Overground, Stratford […]”

 

Search

In search results for stations, it is useful to identify the services available. In this context, an Overground roundel can be included, as well as the line colours.

In those instances, it is typically less important to distinguish between lines and more important to give customers a sense for the interconnectedness of a station.

If space is limited, visual indicators should be as simple and clear as possible to not add further complexity and there should always be an alternative text to be used by screen readers.

An example of UI design for a search result for Hackney Downs station. The result is displayed underneath a search field containing an icon of a magnifying glass and the word “Hackney Downs”. The search result includes the name of the station, the London Overground icon, the National Rail icon, and two round cornered rectangles in blue and purple, signifying the Mildmay and the Weaver lines.

On screen readers, this search result would read as:

“Hackney Downs, Overground, National Rail station, Mildmay line, Weaver line”

 

 

In search results for lines, it is useful to display a graphic element in the respective line colour. It may be helpful to include double lines and an Overground label as well.

An example of UI design for a search result for the Weaver line. The result is displayed underneath a search field containing an icon of a magnifying glass and the word “Weaver”. The search result includes the name of the line, a dual line in purple (the line’s service colour), and a grey “Overground” label.

 

 

Journeys

In journey diagrams, Overground lines will be displayed with a dual line in their respective colour.

Two examples of diagrams representing journeys in London Overground lines. The first one includes a vertical dual line in green with a list of station names displayed vertically to its right. The second one includes a vertical dual line in blue connected to another vertical dual line in red by a black circle. The names of three London Overground stations are displayed at the start, middle and end of this diagram. The text “Mildmay, platform 1” is displayed next to the blue line, and the text “Windrush, platform 2” is displayed next to the red line.

 

Line name abbreviations and colour badges can be used to show journey summaries.

Two examples of iconographic representations of journeys on London Overground lines. The first one shows the title “Your journey” and two coloured badges containing abbreviations of London Overground line names. The second one shows the title “Arrive at 15:47” and two coloured badges containing abbreviations of London Overground line names.

 

On screen readers, these would read as:

First example: “Your journey, Suffragette line then Weaver line”

Second example: “Arrive at fifteen forty-seven, Mildmay line then Windrush line”

 

We hope this guideline is useful, however please reach out to us via the TfL Techforum if you have any further questions.

 

Published by TfL Digital