Basics for web

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.

Beck Blue

Corporate Blue or TfL Blue. It is used to provide reassurance, highlight good service and for primary buttons.

Johnston Black

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.

Read more about colours


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.

Token Pixel
spacing-1 4px
spacing-2 8px
spacing-3 8px
spacing-4 12px
spacing-5 16px
spacing-6 24px
spacing-7 32px
spacing-8 40px
spacing-9 48px
spacing-10 64px
spacing-11 96px
spacing-12 160px



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.

Token rem Pixel
h1 2.3rem 42px
h1-mobile 1.8rem 34px
h2 1.4rem 26px
h3 1.16rem 21px
bold 1rem 18px
p 1rem 18px



There are three button types: primary, secondary and text button.

Primary buttons

Used when there is a single clear definitive action. Aim for one primary action per page.

Secondary buttons

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 button

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


Structural elements

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.


Shadow used to temporarily display a typeahead component