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 |