FT brand colours: Sass variables and helpers to use and define them


Contrast ratio checker

Primary Palette

color is a fundamental attribute of the FT visual language. Consistent use of the primary palette across the platform strengthens our brand by evoking familiarity and trust.

Secondary Palette

Secondary colors provide visual hierarchy to differentiate content and are brand identifiers of the FT.

Tertiary Palette

Used sparingly, these colors provide contrast for highlighting and messaging.

B2C Palette

These colors are specifically designed for use in B2C products.


Dynamic tinting of the primary palette can be used to produce a broad spectrum of lighter and darker variations for creating scale and depth to your designs.

Bower Dependencies
mathsass ^0.10.1
o-brand >=2.3.0 <4
GitHub Repository


Build Service

Add the following to your <link> tag


How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-colors"@"^4.7.9"

For more information see the Origami build process.