Colours

Primary Palette

name	css	description	value

Secondary Palette

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

name	css	description	value

Tertiary Palette

name	css	description	value

Usecases

name	css	description	value
link-text	--o3-color-use-case-link-text	...	#757575
link-text-hover	--o3-color-use-case-link-text-hover	...	#666666
link-underline	--o3-color-use-case-link-underline	...	#b3b3b3
link-underline-hover	--o3-color-use-case-link-underline-hover	...	#4d4d4d
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	...	#333333
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	...	#e6e6e6
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.	#757575
muted-inverse-text	--o3-color-use-case-muted-inverse-text	...	#cccccc
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	...	#1a1a1a
button-hover	--o3-color-use-case-button-hover	...	#333333
button-pressed	--o3-color-use-case-button-pressed	...	#4d4d4d
button-disabled	--o3-color-use-case-button-disabled	...	#cccccc
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-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