Color
| Type | Token | Hex value | Figma color style | Description | |
|---|---|---|---|---|---|
| Interactive | #0070C4 | Interactive/Default | Default color for interactive elements. | ||
| #004F84 | Interactive/Hover | Hover state for interactive elements. | |||
| #FEBA35 | Interactive/Focus | Focus state color for interactive elements. | |||
| #EC040B | Interactive/Error | Error state for interactive elements. | |||
| #80B7E1 | Interactive/Disabled | Disabled state for interactive elements. | |||
| #BA0000 | Interactive/Error/Hover | Error state color for interactive elements when hovering. | |||
| #F58185 | Interactive/Error/Disabled | Error state color for interactive elements when disabled. | |||
| Text | #333333 | Text/Default | Default color for text on a white background such as body text, headings, and subheadings. | ||
| #666666 | Text/Secondary | Default color for secondary text including such as "optional" or "required" input labels. | |||
| #FFFFFF | Text/Light | Use as the text colour on dark backgrounds. | |||
| #666666 | Text/Disabled | Text on a grey background within the disabled text input, text area, combobox, and dropdown. | |||
| Brand | #0081A2 | Brand/Default | GOA brand colour. | ||
| #005072 | Brand/Dark | Dark GOA brand colour. | |||
| #C8EEFA | Brand/Default | Light GOA brand colour. | |||
| Status | #004A8F | Status/Info/Default | Use this color to indicate information to the user. | ||
| #AAC9E7 | Status/Info/Light | ||||
| #003B70 | Status/Info/Dark | ||||
| #EFF8FF | Status/Info/Background | Use this color as a background when indicating caution to the user such as within a container or small callout. | |||
| #F9CE2D | Status/Warning/Default | Use this color to indicate a warning to the user. | |||
| #FFEAB6 | Status/Warning/Light | ||||
| #BF8D23 | Status/Warning/Dark | ||||
| #FFF6E5 | Status/Warning/Background | Use this color as a background when indicating caution to the user such as within a container or small callout. | |||
| #DA291C | Status/Emergency/Default | Use this color to indicate an emergency to the user. | |||
| #FBD1CE | Status/Emergency/Light | ||||
| #A91A10 | Status/Emergency/Dark | ||||
| #FFF1F2 | Status/Emergency/Background | Use this color as a background when indicating emergency to the user such as within a container or small callout. | |||
| #006F4C | Status/Success/Default | Use this color to indicate success to the user. | |||
| #CCE4DC | Status/Success/Light | ||||
| #00563A | Status/Success/Dark | ||||
| #EEF9F3 | Status/Success/Background | Use this color as a background when indicating success to the user such as within a container or small callout. | |||
| #171D23 | Status/Critical | Status color for critical events such as the king passing. | |||
| Greyscale | #FFFFFF | Greyscale/White | |||
| #F1F1F1 | Greyscale/100 | ||||
| #DCDCDC | Greyscale/200 | ||||
| #ADADAD | Greyscale/400 | ||||
| #949494 | Greyscale/500 | ||||
| #858585 | Greyscale/600 | ||||
| #666666 | Greyscale/700 | ||||
| #333333 | Greyscale/Black |
Book time in drop in hours