Origami Frontend Components & Services

Demos: o-colors

Contrast ratio checker

Primary Palette

The primary FT brand colours are FT pink, FT grey, black, and white. These are the established colours that make up the FT corporate identity and FT brand. FT pink and FT grey are not used for digital UI, but may be helpful for use alongside FT branded static assets such as the FT logo. For example, FT Pink could be used to prevent a flash of the wrong colour as the logo loads

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.

Partner Content Palette

Tones and Mixes

Tones (colours with modified brightness using the HSB colour space) can be used to produce a broad spectrum of lighter and darker variations of palette colours for creating scale and depth to your designs. To reduce our number of colour combinations not all colours may be toned, but mixes of black/white may be used instead.

Switch component view

GitHub: o-colors@6.6.0

Install o-colors

If using the Build Service, add o-colors@^6.6.0 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-colors@^6.6.0".

Help & Support

o-colors is maintained directly by the Origami team. If you have any questions about o-colors or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com