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, and a global indication of good service for all lines that are not disrupted.

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

We will no longer present a single network-wide London Overground status. Status will always be displayed separately for each London Overground line.

 

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 or roundel.

We recommend this approach for all lists of Tube & rail lines, beyond the context of Status.

 

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.

 

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.

 

In some scenarios, you might need to display the complete list of all London Underground and London Overground lines with their individual status, wether the lines are disrupted or have good service.

In these instances, please organise the lines in the order described below, and identify London Overground lines according to the previously described visual guidelines.

 

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