Colours
Primary Palette
These are the FT primary brand colours. They are 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 a logo loads.
| name | css | description | value |
|---|---|---|---|
| ft-pink | --o3-color-palette-ft-pink | FT Pink is used for the FT logo | #fcd0b1 |
| ft-grey | --o3-color-palette-ft-grey | ... | #333333 |
| white | --o3-color-palette-white | ... | #ffffff |
| black | --o3-color-palette-black | ... | #000000 |
Secondary Palette
Secondary colours provide visual hierarchy to differentiate content and are brand identifiers of the FT.
| name | css | description | value |
|---|---|---|---|
| claret | --o3-color-palette-claret | Claret is the main branding colour for MyFT related products. It should be used sparingly and never be used as a background colour. Usage example: MyFT branding; MyFT CTAs | #990f3d |
| teal | --o3-color-palette-teal | Teal is the most striking colour and main CTA colour on ft.com. It is reserved for important action items that need to stand out: buttons, text links and other critical functional use cases. | #0d7680 |
| oxford | --o3-color-palette-oxford | Oxford is used to denote opinion pieces (in combination with Sky). It is used on the homepage and in articles. Use for information and callouts in general. Usage example: opinion branding; opinion topic tags. | #0f5499 |
| slate | --o3-color-palette-slate | Slate is a warmer version of black. It is used as inverse backgrounds for editorial content and as a theme option(Mono) for buttons. | #262a33 |
| paper | --o3-color-palette-paper | Paper, as it’s name implies, is the FT’s main background colour. It is the main expression of the brand colour on product. It is a lighter, more legible shade of FT Pink and can be seen as a kind of replacement of white. | #fff1e5 |
Tertiary Palette
| name | css | description | value |
|---|---|---|---|
| mandarin | --o3-color-palette-mandarin | ... | #ff8833 |
| light-blue | --o3-color-palette-light-blue | ... | #00a0dd |
| crimson | --o3-color-palette-crimson | ... | #cc0000 |
| graphics-dark-blue | --o3-color-palette-graphics-dark-blue | ... | #006f9b |
| wheat | --o3-color-palette-wheat | ... | #f2dfce |
| candy | --o3-color-palette-candy | ... | #ff7faa |
| wasabi | --o3-color-palette-wasabi | ... | #96cc28 |
| jade | --o3-color-palette-jade | ... | #00994d |
| velvet | --o3-color-palette-velvet | ... | #593380 |
| lemon | --o3-color-palette-lemon | ... | #ffec1a |
| sky | --o3-color-palette-sky | ... | #cce6ff |
| matisse-blue | --o3-color-palette-matisse-blue | ... | #355778 |
Usecases
| name | css | description | value |
|---|---|---|---|
| link-text | --o3-color-use-case-link-text | ... | #0d7680 |
| link-text-hover | --o3-color-use-case-link-text-hover | ... | #08474d |
| link-underline | --o3-color-use-case-link-underline | ... | #cfd8d1 |
| link-underline-hover | --o3-color-use-case-link-underline-hover | ... | #9ec0bd |
| link-inverse-text | --o3-color-use-case-link-inverse-text | ... | #ffffff |
| link-inverse-text-hover | --o3-color-use-case-link-inverse-text-hover | ... | #d4d4d6 |
| link-inverse-underline | --o3-color-use-case-link-inverse-underline | ... | #ffffff |
| link-inverse-underline-hover | --o3-color-use-case-link-inverse-underline-hover | ... | #d4d4d6 |
| page-background | --o3-color-use-case-page-background | ... | #fff1e5 |
| page-inverse-background | --o3-color-use-case-page-inverse-background | ... | #262a33 |
| body-text | --o3-color-use-case-body-text | ... | #33302e |
| body-inverse-text | --o3-color-use-case-body-inverse-text | ... | #ffffff |
| heading-text | --o3-color-use-case-heading-text | ... | #33302e |
| heading-inverse-text | --o3-color-use-case-heading-inverse-text | ... | #ffffff |
| muted-text | --o3-color-use-case-muted-text | "Muted" text is less prominent, for example credits and captions. | #807973 |
| muted-inverse-text | --o3-color-use-case-muted-inverse-text | "Muted" text is less prominent, for example credits and captions. | #a8aaad |
| footer-text | --o3-color-use-case-footer-text | ... | #33302e |
| caption-text | --o3-color-use-case-caption-text | ... | #33302e |
| button-foreground | --o3-color-use-case-button-foreground | ... | #ffffff |
| button-foreground-disabled | --o3-color-use-case-button-foreground-disabled | ... | #fff7ef |
| button-default | --o3-color-use-case-button-default | ... | #0d7680 |
| button-hover | --o3-color-use-case-button-hover | ... | #0a5e66 |
| button-pressed | --o3-color-use-case-button-pressed | ... | #052f33 |
| button-disabled | --o3-color-use-case-button-disabled | ... | #9ec0bd |
| error-background | --o3-color-use-case-error-background | ... | #cc0000 |
| error-text | --o3-color-use-case-error-text | ... | #cc0000 |
| error | --o3-color-use-case-error | ... | #cc0000 |
Tints
| name | css | description | value |
|---|---|---|---|
| black-5 | --o3-color-palette-black-5 | ... | #f2e5da |
| black-10 | --o3-color-palette-black-10 | ... | #e6d9ce |
| black-20 | --o3-color-palette-black-20 | ... | #ccc1b7 |
| black-30 | --o3-color-palette-black-30 | ... | #b3a9a0 |
| black-40 | --o3-color-palette-black-40 | ... | #999189 |
| black-50 | --o3-color-palette-black-50 | ... | #807973 |
| black-60 | --o3-color-palette-black-60 | ... | #66605c |
| black-70 | --o3-color-palette-black-70 | ... | #4d4845 |
| black-80 | --o3-color-palette-black-80 | ... | #33302e |
| black-90 | --o3-color-palette-black-90 | ... | #1a1817 |
| white-10 | --o3-color-palette-white-10 | ... | #fff2e8 |
| white-20 | --o3-color-palette-white-20 | ... | #fff4ea |
| white-40 | --o3-color-palette-white-40 | ... | #fff7ef |
| white-60 | --o3-color-palette-white-60 | ... | #fff9f5 |
| white-80 | --o3-color-palette-white-80 | ... | #fffcfa |
| oxford-30 | --o3-color-palette-oxford-30 | ... | #082a4d |
| oxford-40 | --o3-color-palette-oxford-40 | ... | #0a3866 |
| oxford-50 | --o3-color-palette-oxford-50 | ... | #0d4680 |
| oxford-60 | --o3-color-palette-oxford-60 | ... | #0f5499 |
| oxford-70 | --o3-color-palette-oxford-70 | ... | #1262b3 |
| oxford-80 | --o3-color-palette-oxford-80 | ... | #1470cc |
| oxford-90 | --o3-color-palette-oxford-90 | ... | #177ee6 |
| oxford-100 | --o3-color-palette-oxford-100 | ... | #1a8cff |
| teal-20 | --o3-color-palette-teal-20 | ... | #052f33 |
| teal-30 | --o3-color-palette-teal-30 | ... | #08474d |
| teal-40 | --o3-color-palette-teal-40 | ... | #0a5e66 |
| teal-50 | --o3-color-palette-teal-50 | ... | #0d7680 |
| teal-60 | --o3-color-palette-teal-60 | ... | #0f8e99 |
| teal-70 | --o3-color-palette-teal-70 | ... | #12a5b3 |
| teal-80 | --o3-color-palette-teal-80 | ... | #14bdcc |
| teal-90 | --o3-color-palette-teal-90 | ... | #17d4e6 |
| teal-100 | --o3-color-palette-teal-100 | ... | #1aecff |
| claret-30 | --o3-color-palette-claret-30 | ... | #4d081f |
| claret-40 | --o3-color-palette-claret-40 | ... | #660a29 |
| claret-50 | --o3-color-palette-claret-50 | ... | #800d33 |
| claret-60 | --o3-color-palette-claret-60 | ... | #990f3d |
| claret-70 | --o3-color-palette-claret-70 | ... | #b31247 |
| claret-80 | --o3-color-palette-claret-80 | ... | #cc1452 |
| claret-90 | --o3-color-palette-claret-90 | ... | #e6175c |
| claret-100 | --o3-color-palette-claret-100 | ... | #ff1a66 |
| wheat-100 | --o3-color-palette-wheat-100 | ... | #ffebd9 |