The TfL digital design language is rooted in the spirit of Henry Beck’s original Tube map and wayfinding signage, removing what is not needed and presenting the essential information with a bold clarity.
In the same way the Tube map and wayfinding signage was designed to enable users to reach their destination, the digital language also aims to allow all users to access information with a minimum of fuss.
There are three core colours used across all channels.
Corporate Blue or TfL Blue. It is used to provide reassurance, highlight good service and for primary buttons.
This blue-black has been chosen to reduce eye strain while retaining the appearance of black. Johnston Black is primarily used for type.
Use plenty of white. It’s our default canvas.
Proportions of core colour usage across all channels
Spacing tokens are primarily used in padding and margins to remove guesswork and create consistency in layout and UI.
Our typeface is Johnston100. Line height is 1.5x type size in accordance with WCAG 2.1 requirements. Links are underlined.
We don’t use any other colours for type than a blue-black we call Johnston Black #03071C.
There are three button types: primary, secondary and text button.
Used when there is a single clear definitive action. Aim for one primary action per page.
Used when there is more than one choice or for a lower priority action. There can be more than one secondary button per page.
Text buttons are often used with an icon to reinforce meaning, then can exist without an icon if there is sufficient context to show interactivity such as within a card or navigation UI. They can also be used for lower priority actions.
Buttons have four states: active, hover, focus and inactive.
Button sizes and padding
Guiding principles for positioning and using buttons
• Use a button to help users carry out an action, don’t use a button as a link
• Use one primary button per page view
• Position primary buttons to the left of secondary buttons
• Afford space around a button
• Too many buttons can create confusion, consider the UX and aim for clarity
Primary button positioned left
Secondary buttons for options
On mobile, primary and secondary buttons fill the width of the container. Primary buttons stack above secondary.
Icons are used to communicate messages at a glance, afford interactivity, and draw attention to important information.
• use an icon unless it is necessary, prioritise words for communication
• enlarge an icon to use as an illustration
• consider an icon as decoration. It should aid intelligibility.
• change the colour of icons
Digital icons are an important and integral part of the TfL language. There are icons and symbols used for mapping, brand, UI interactions, payments as well as concepts such as busy or quiet times.
Please get in touch with us to request a full set of icons.
Core icon set
These are graphic devices which help in creating layouts. Successful layouts direct attention to the most important information and give users the means to take action.
Light greys can be used as backgrounds to define content areas or patterns, don’t use shadows or outlines to acheive this.
Rules and dividers
Reserve rules for tables rather than to separate content, instead use the spacing scale to group or separate elements into meaningful chunks or a use a background fill.
Grey 10 used as a background to define the cards
Shadows express elevation, they are primarily used for temporary elements which appear above other content creating focus on the UI component.