Colour

Choosing a colour

Choose by role first, then by shade:

Role. If a semantic token says what the colour is for, use it. When the design team adjusts a role, every screen using it updates.
- kds:bg-danger-surface behind an error message
- kds:bg-primary-main on a primary button
Scale step, when there is no role. Use a 50–950 step only where no role fits.
- Neutral, orange and pink have no roles, and sky has only sky-main, so their steps are right for greys and accents, such as kds:text-neutral-700
- In a family that has roles, a step like kds:bg-primary-300 hides why it was chosen, so the next person cannot tell whether to change it
Never a raw value.
- No #0657a9 or rgb(…) in a component
- If no token fits, ask the design team for one

These are working rules until the design team documents colour usage.

Roles

Primary, information, success, warning and danger share these roles; only primary has focus. Click a swatch to copy its class.

mainSolid fills, coloured text on whitesurfaceTinted background behind textborderOutline of a surfacehoverMain while hoveredpressedMain while pressedfocusFocus ringprimaryinformationsuccesswarningdanger

Scale, 50–950

Each step is a class and a variable, for example kds:bg-neutral-950 and --kds-color-neutral-950. Click a swatch to copy its class.

50100200300400500600700800900950neutralprimaryinformationsuccesswarningdangerskyorangepink

Colours

Also lists the role or step with the same value, and the Vuetify theme colour that renders it today.

Group by140 rows

Name	Kind	Value	Also
neutral · 17
neutral-50	Scale	`#ffffff`	`neutral-white`Vuetify white
neutral-100	Scale	`#f4f4f4`	`neutral-black-20`Vuetify black-20, grey-surface
neutral-200	Scale	`#d6d6d6`	`neutral-black-40`Vuetify black-40
neutral-300	Scale	`#acacac`	`neutral-black-60`Vuetify black-60, light-grey
neutral-400	Scale	`#9e9e9e`	-
neutral-500	Scale	`#868686`	-
neutral-600	Scale	`#6d6d6d`	-
neutral-700	Scale	`#57595b`	`neutral-black-80`Vuetify black-80, grey
neutral-800	Scale	`#3e3e3e`	-
neutral-900	Scale	`#282828`	-
neutral-950	Scale	`#121f2a`	`neutral-black-100`Vuetify black-100, black
neutral-black-100	Semantic	`#121f2a`	`neutral-950`Vuetify black-100, black
neutral-black-80	Semantic	`#57595b`	`neutral-700`Vuetify black-80, grey
neutral-black-60	Semantic	`#acacac`	`neutral-300`Vuetify black-60, light-grey
neutral-black-40	Semantic	`#d6d6d6`	`neutral-200`Vuetify black-40
neutral-black-20	Semantic	`#f4f4f4`	`neutral-100`Vuetify black-20, grey-surface
neutral-white	Semantic	`#ffffff`	`neutral-50`Vuetify white
primary · 18
primary-50	Scale	`#f2f8ff`	`primary-surface`Vuetify primary-surface
primary-100	Scale	`#e0eefe`	-
primary-200	Scale	`#bbdcfc`	-
primary-300	Scale	`#8db3d9`	`primary-border`Vuetify primary-border

Class reference

Every utility also takes transparent, current and inherit, such as kds:bg-transparent.

Group by1260 rows

Class	Token	Property	Resolves to	Kind
bg · 140
	neutral-50	`background-color`	`#ffffff`	Scale step
	neutral-100	`background-color`	`#f4f4f4`	Scale step
	neutral-200	`background-color`	`#d6d6d6`	Scale step
	neutral-300	`background-color`	`#acacac`	Scale step
	neutral-400	`background-color`	`#9e9e9e`	Scale step
	neutral-500	`background-color`	`#868686`	Scale step
	neutral-600	`background-color`	`#6d6d6d`	Scale step
	neutral-700	`background-color`	`#57595b`	Scale step
	neutral-800	`background-color`	`#3e3e3e`	Scale step
	neutral-900	`background-color`	`#282828`	Scale step
	neutral-950	`background-color`	`#121f2a`	Scale step
	neutral-black-100	`background-color`	`#121f2a`	Semantic
	neutral-black-80	`background-color`	`#57595b`	Semantic
	neutral-black-60	`background-color`	`#acacac`	Semantic
	neutral-black-40	`background-color`	`#d6d6d6`	Semantic
	neutral-black-20	`background-color`	`#f4f4f4`	Semantic
	neutral-white	`background-color`	`#ffffff`	Semantic
	primary-50	`background-color`	`#f2f8ff`	Scale step: prefer a semantic name
	primary-100	`background-color`	`#e0eefe`	Scale step: prefer a semantic name
	primary-200	`background-color`	`#bbdcfc`	Scale step: prefer a semantic name
	primary-300	`background-color`	`#8db3d9`	Scale step: prefer a semantic name
	primary-400	`background-color`	`#3ba0f5`	Scale step: prefer a semantic name
	primary-500	`background-color`	`#1284e5`	Scale step: prefer a semantic name
	primary-600	`background-color`	`#0567c4`	Scale step: prefer a semantic name
	primary-700	`background-color`	`#0657a9`	Scale step: prefer a semantic name
	primary-800	`background-color`	`#05498f`	Scale step: prefer a semantic name
	primary-900	`background-color`	`#0a3766`	Scale step: prefer a semantic name

Choosing a colourCopy Anchor Link

RolesCopy Anchor Link

Scale, 50–950

Colours

Class reference

Choosing a colour

Roles