Skip to content

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.

namecssdescriptionvalue
ft-pink--o3-color-palette-ft-pinkFT 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.

namecssdescriptionvalue
claret--o3-color-palette-claretClaret 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-tealTeal 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-oxfordOxford 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-slateSlate 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-paperPaper, 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

namecssdescriptionvalue
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

namecssdescriptionvalue
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

namecssdescriptionvalue
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