Colours Beta

Open in Figma

The following are the official George colours. Best practices:

• All colours have names. Use those names when communicating them.
• SASS variables containing colours have a $color- prefix.
• Use SASS variables instead of hard-coded hex codes, e.g. $color-ui-red.
• Never use a colour picker tool to guess a hex code from an image, not even from a design document. When in doubt, ask the design team.

For backwards compatibility, the old colour variables still exist. DEPRECATED

UI Colours

These colours are in use in George for UI elements.

Custom Colours

These are custom colours for users’ customisation. Usually account/card/background colours.

External Colours

These colours are for plugins or external products, which are out the scope of GDS.

Colour classes

To add a (dynamic) background or text colour to any element, you can use the .g-bg-* or .g-fg-* classes where the asterisk matches the colour names above (e.g. .g-bg-berry).

• .g-bg-* will change the background colour and the element automatically gets a corresponding foreground colour assigned (white for dark backgrounds, a dark grey for light colours).
• .g-fg-* will only change the foreground colour.

Semantic colour tokens

These help communicate the intent of their usage and reference the colours mentioned above. Use the CSS variables listed below to style your components to work both in light and dark mode.