Color Tokens
Color tokens help maintain consistent use of color throughout your app. The Dot Studio colour palette is bold and modern, with a focus on accessibility and readability.
Base Tokens
Base color tokens are referenced using the --dsds-color-base-{role}-{name} CSS custom property, where {role} is the name of the group of colours and {name} is the friendly name for that colour. This allows you to search for a colour by its role or by its name.
Primary
--dsds-color-base-primary-{name}
{white}
{black}
{grey}
{purple}
{lilac}
{pink}
{lime}
{orange}
Semantic Tokens
Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.
Primary
--dsds-color-primary-{n}
50
100
200
300
400
500
600
700
800
900
950
Success
--dsds-color-success-{n}
50
100
200
300
400
500
600
700
800
900
950
Warning
--dsds-color-warning-{n}
50
100
200
300
400
500
600
700
800
900
950
Danger
--dsds-color-danger-{n}
50
100
200
300
400
500
600
700
800
900
950
Neutral
--dsds-color-neutral-{n}
50
100
200
300
400
500
600
700
800
900
950
Black & White
--dsds-color-neutral-{n}
0
1000
Primitives
Gray
--dsds-color-gray-{n}
50
100
200
300
400
500
600
700
800
900
950
Red
--dsds-color-red-{n}
50
100
200
300
400
500
600
700
800
900
950
Orange
--dsds-color-orange-{n}
50
100
200
300
400
500
600
700
800
900
950
Amber
--dsds-color-amber-{n}
50
100
200
300
400
500
600
700
800
900
950
Yellow
--dsds-color-yellow-{n}
50
100
200
300
400
500
600
700
800
900
950
Lime
--dsds-color-lime-{n}
50
100
200
300
400
500
600
700
800
900
950
Green
--dsds-color-green-{n}
50
100
200
300
400
500
600
700
800
900
950
Emerald
--dsds-color-emerald-{n}
50
100
200
300
400
500
600
700
800
900
950
Teal
--dsds-color-teal-{n}
50
100
200
300
400
500
600
700
800
900
950
Cyan
--dsds-color-cyan-{n}
50
100
200
300
400
500
600
700
800
900
950
Sky
--dsds-color-sky-{n}
50
100
200
300
400
500
600
700
800
900
950
Blue
--dsds-color-blue-{n}
50
100
200
300
400
500
600
700
800
900
950
Indigo
--dsds-color-indigo-{n}
50
100
200
300
400
500
600
700
800
900
950
Violet
--dsds-color-violet-{n}
50
100
200
300
400
500
600
700
800
900
950
Purple
--dsds-color-purple-{n}
50
100
200
300
400
500
600
700
800
900
950
Fuchsia
--dsds-color-fuchsia-{n}
50
100
200
300
400
500
600
700
800
900
950
Pink
--dsds-color-pink-{n}
50
100
200
300
400
500
600
700
800
900
950
Rose
--dsds-color-rose-{n}
50
100
200
300
400
500
600
700
800
900
950