Skip to content

Colours

Primary Palette

These are FT primary brand colours.

namecssdescriptionvalue
black--o3-color-palette-black...#000000
white--o3-color-palette-white...#ffffff
oxford--o3-color-palette-oxford...#0f5499
teal--o3-color-palette-teal...#0d7680

Secondary Palette

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

namecssdescriptionvalue
slate--o3-color-palette-slate...#262a33
slate-white-5--o3-color-palette-slate-white-5...#f4f4f5
slate-white-15--o3-color-palette-slate-white-15...#dedfe0
lemon--o3-color-palette-lemon...#ffec1a

Tertiary Palette

namecssdescriptionvalue
jade--o3-color-palette-jade...#00994d
mandarin--o3-color-palette-mandarin...#ff8833
crimson--o3-color-palette-crimson...#cc0000

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...#cccccc
link-inverse-underline--o3-color-use-case-link-inverse-underline...#ffffff
link-inverse-underline-hover--o3-color-use-case-link-inverse-underline-hover...#cccccc
page-background--o3-color-use-case-page-background...#ffffff
page-inverse-background--o3-color-use-case-page-inverse-background...#262a33
body-text--o3-color-use-case-body-text...#333333
support-text--o3-color-use-case-support-text...#4d4d4d
support-inverse-text--o3-color-use-case-support-inverse-text...#e9eaeb
body-inverse-text--o3-color-use-case-body-inverse-text...#ffffff
muted-text--o3-color-use-case-muted-text"Muted" text is less prominent, for example credits and captions.#cccccc
muted-inverse-text--o3-color-use-case-muted-inverse-text"Muted" text is less prominent, for example credits and captions.#a8aaad
heading-text--o3-color-use-case-heading-text...#1a1a1a
heading-inverse-text--o3-color-use-case-heading-inverse-text...#ffffff
button-foreground--o3-color-use-case-button-foreground...#ffffff
button-foreground-disabled--o3-color-use-case-button-foreground-disabled...#ffffff
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...rgba(204, 0, 0, 0.06)
error-text--o3-color-use-case-error-text...#cc0000
error--o3-color-use-case-error[DEPRECATED] This token is going to be looked at in the upcoming audit.#cc0000
success-background--o3-color-use-case-success-background...#d7f0d1
success-foreground--o3-color-use-case-success-foreground...#00572c

Tints

namecssdescriptionvalue
black-5--o3-color-palette-black-5...#f2f2f2
black-10--o3-color-palette-black-10...#e6e6e6
black-20--o3-color-palette-black-20...#cccccc
black-30--o3-color-palette-black-30...#b3b3b3
black-40--o3-color-palette-black-40...#999999
black-50--o3-color-palette-black-50...#808080
black-60--o3-color-palette-black-60...#666666
black-70--o3-color-palette-black-70...#4d4d4d
black-80--o3-color-palette-black-80...#333333
black-90--o3-color-palette-black-90...#1a1a1a
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...#198cff
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...#108d99
teal-70--o3-color-palette-teal-70...#12a5b3
teal-80--o3-color-palette-teal-80...#15bccc
teal-90--o3-color-palette-teal-90...#17d4e6
teal-100--o3-color-palette-teal-100...#1aebff