Colour

We use colour to convey and reinforce our corporate personality. We also use colour to (sparingly) convey information.

Regsoft Blue, our primary colour

Our primary colour is Regsoft Blue: #3d4e97 or oklch(0.45 0.12 271).

It should be used to mark headings, and in any place where basic colour is needed in a design.

Primary colour gradations

Swatch	Colour	oklch value	css variable name
	Primary	oklch(0.45 0.12 271)	--primary

Primary colour gradations

Primary colour gradations

Swatch	Colour	oklch value	css variable name
	Primary 01	oklch(0.9 0.12 271)	--primary-01
	Primary 02	oklch(0.8 0.12 271)	--primary-02
	Primary 03	oklch(0.7 0.12 271)	--primary-03
	Primary 04	oklch(0.6 0.12 271)	--primary-04
	Primary 05	oklch(0.55 0.12 271)	--primary-05
	Primary 06	oklch(0.45 0.12 271)	--primary-06
	Primary 07	oklch(0.4 0.12 271)	--primary-07
	Primary 08	oklch(0.35 0.12 271)	--primary-08
	Primary 09	oklch(0.3 0.12 271)	--primary-09
	Primary 10	oklch(0.2 0.12 271)	--primary-10

Primary colour transparencies

Primary colour with transparency

Swatch	Colour	oklch value	css variable name
	Primary a1	oklch(0.8 0.12 271 / 10%)	--primary-a1
	Primary a2	oklch(0.7 0.12 271 / 20%)	--primary-a2
	Primary a3	oklch(0.65 0.12 271 / 30%)	--primary-a3
	Primary a4	oklch(0.6 0.12 271 / 40%)	--primary-a4
	Primary a5	oklch(0.55 0.12 271 / 50%)	--primary-a5
	Primary a	oklch(0.45 0.12 271 / 60%)	--primary-a6
	Primary a7	oklch(0.4 0.12 271 / 70%)	--primary-a7
	Primary a8	oklch(0.35 0.12 271 / 80%)	--primary-a8
	Primary a9	oklch(0.3 0.12 271 / 90%)	--primary-a9

Accent colour

We use a similar colour as our primary accent colour: #7f4894 or oklch(0.5 0.13 316).

We have lightened this colour and increased its vibrancy slightly to help it 'pop'. Because it is more eye-catching, it should be used sparingly, when the intent is to focus a user's attention on a specific element.

Accent colour

Swatch	Colour	oklch value	css variable name
	Accent	oklch(0.45 0.13 316)	--accent

Accent colour gradations

Accent colour gradations

Swatch	Colour	oklch value	css variable name
	Accent 01	oklch(0.8 0.13 316)	--accent-01
	Accent 02	oklch(0.7 0.13 316)	--accent-02
	Accent 03	oklch(0.65 0.13 316)	--accent-03
	Accent 04	oklch(0.6 0.13 316)	--accent-04
	Accent 05	oklch(0.55 0.13 316)	--accent-05
	Accent 06	oklch(0.45 0.13 316)	--accent-06
	Accent 07	oklch(0.4 0.13 316)	--accent-07
	Accent 08	oklch(0.35 0.13 316)	--accent-08
	Accent 09	oklch(0.3 0.13 316)	--accent-09
	Accent 10	oklch(0.2 0.13 316)	--accent-10

Accent colour transparency

Accent colour with transparency

Swatch	Colour	oklch value	css variable name
	Accent a1	oklch(0.8 0.13 316 / 10%)	--accent-a1
	Accent a2	oklch(0.7 0.13 316 / 20%)	--accent-a2
	Accent a3	oklch(0.65 0.13 316 / 30%)	--accent-a3
	Accent a4	oklch(0.6 0.13 316 / 40%)	--accent-a4
	Accent a5	oklch(0.55 0.13 316 / 50%)	--accent-a5
	Accent a	oklch(0.45 0.13 316 / 60%)	--accent-a6
	Accent a7	oklch(0.4 0.13 316 / 70%)	--accent-a7
	Accent a8	oklch(0.35 0.13 316 / 80%)	--accent-a8
	Accent a9	oklch(0.3 0.13 316 / 90%)	--accent-a9

Neutral colours

We use neutral colours, or shades of grey, to outline items and create seperation between items. You know, greys.

Neutral colours / shades of grey

Swatch	Colour	oklch value	css variable name
	Neutral 00	oklch(0.1 0 1)	--neutral-00
	Neutral 01	oklch(0.1 0 1)	--neutral-01
	Neutral 02	oklch(0.1 0 1)	--neutral-02
	Neutral 03	oklch(0.1 0 1)	--neutral-03
	Neutral 04	oklch(0.1 0 1)	--neutral-04
	Neutral 05	oklch(0.1 0 1)	--neutral-05
	Neutral 06	oklch(0.1 0 1)	--neutral-06
	Neutral 07	oklch(0.1 0 1)	--neutral-07
	Neutral 08	oklch(0.1 0 1)	--neutral-08
	Neutral 09	oklch(0.1 0 1)	--neutral-09

Light colours

These are the light variation of the standard colours. They are most suitable for working against a dark background colour;

Dark colours

These are the dark variation of the standard colours. They are most suitable for working against a light background colour;