Colours
Primary Palette
These are FT primary brand colours.
name | css | description | value |
---|---|---|---|
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.
name | css | description | value |
---|---|---|---|
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
name | css | description | value |
---|---|---|---|
jade | --o3-color-palette-jade | ... | #00994d |
mandarin | --o3-color-palette-mandarin | ... | #ff8833 |
crimson | --o3-color-palette-crimson | ... | #cc0000 |
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 | ... | #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
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 |
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 |