Colours

Primary Palette

These are FT primary brand colours.

name	css	description	value
oceanwave	--o3-color-palette-oceanwave	...	#c9f5ea
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
teal	--o3-color-palette-teal	...	#0d7680
slate	--o3-color-palette-slate	...	#262a33
claret	--o3-color-palette-claret	...	#990f3d

Tertiary Palette

name	css	description	value

Usecases

name	css	description	value
link-text	--o3-color-use-case-link-text	...	#0d7680
link-text-hover	--o3-color-use-case-link-text-hover	...	#262a33
link-underline	--o3-color-use-case-link-underline	...	#0d7680
link-underline-hover	--o3-color-use-case-link-underline-hover	...	#262a33
page-background	--o3-color-use-case-page-background	...	#ffffff
body-text	--o3-color-use-case-body-text	...	#1a1817
muted-text	--o3-color-use-case-muted-text	"Muted" text is less prominent, for example credits and captions.	#807973
support-text	--o3-color-use-case-support-text	...	#4d4d4d
support-inverse-text	--o3-color-use-case-support-inverse-text	...	#e9eaeb
muted-inverse-text	--o3-color-use-case-muted-inverse-text	"Muted" text is less prominent, for example credits and captions.	#a8aaad
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-inverse-background	--o3-color-use-case-page-inverse-background	...	#262a33
body-inverse-text	--o3-color-use-case-body-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

name	css	description	value
black-90	--o3-color-palette-black-90	...	#1a1817
black-50	--o3-color-palette-black-50	...	#807973
black-70	--o3-color-palette-black-70	...	#4d4d4d
teal-40	--o3-color-palette-teal-40	...	#0a5e66
teal-20	--o3-color-palette-teal-20	...	#052f33
black-30	--o3-color-palette-black-30	...	#b3a9a0
black-10	--o3-color-palette-black-10	...	#e6d9ce