Color palette

The colours below should cover all your colour needs. If they don’t, please don’t add your own custom colours, contact us so we can add it to the theme!

These colours are based on but not identical to the branding colours. See the branding guidelines for more information.

General usage

Colours should be applied purposefully and create distinction between elements, with sufficient contrast between them.

You will find more information about the specifics on colours for different elements on their pages. Here are some general guidelines:

For light mode, use:

• 500 as the primary shade.
• Plain white and the shade of 50 for backgrounds.

For dark mode, use:

• 700 as the primary shade.
• 900 and 800 for backgrounds.

Full colour palette

Using these colours

These colours are designed to work with tailwind. Each of the colours above can be used as a background, foreground, or border.

What to avoid

• Using the shades 50 - 400 for text in light mode
• Using the shades 600 - 900 for text in dark mode

Examples:

Accessibility

We try to adhere to Web Content Accessibility Guidelines (WCAG) specifying the contrast ratios of the visual presentation of text and images of text.