Foundations

Colors

The colors that give Plasma its identity

View source

All colors are exposed through the @coveord/plasma-tokens package in 3 formats: TypeScript, Sass and CSS. Hover over any color to see its name in any of those formats.

primary
gradient
TScolor.primary.gradient
SCSS$plasma-color-primary-gradient
CSS--plasma-color-primary-gradient
pureWhite
TScolor.primary.pureWhite
SCSS$plasma-color-primary-pure-white
CSS--plasma-color-primary-pure-white
action
1
TScolor.primary.action.1
SCSS$plasma-color-primary-action-1
CSS--plasma-color-primary-action-1
2
TScolor.primary.action.2
SCSS$plasma-color-primary-action-2
CSS--plasma-color-primary-action-2
3
TScolor.primary.action.3
SCSS$plasma-color-primary-action-3
CSS--plasma-color-primary-action-3
4
TScolor.primary.action.4
SCSS$plasma-color-primary-action-4
CSS--plasma-color-primary-action-4
6
TScolor.primary.action.6
SCSS$plasma-color-primary-action-6
CSS--plasma-color-primary-action-6
8
TScolor.primary.action.8
SCSS$plasma-color-primary-action-8
CSS--plasma-color-primary-action-8
9
TScolor.primary.action.9
SCSS$plasma-color-primary-action-9
CSS--plasma-color-primary-action-9
gray
0
TScolor.primary.gray.0
SCSS$plasma-color-primary-gray-0
CSS--plasma-color-primary-gray-0
1
TScolor.primary.gray.1
SCSS$plasma-color-primary-gray-1
CSS--plasma-color-primary-gray-1
2
TScolor.primary.gray.2
SCSS$plasma-color-primary-gray-2
CSS--plasma-color-primary-gray-2
3
TScolor.primary.gray.3
SCSS$plasma-color-primary-gray-3
CSS--plasma-color-primary-gray-3
4
TScolor.primary.gray.4
SCSS$plasma-color-primary-gray-4
CSS--plasma-color-primary-gray-4
5
TScolor.primary.gray.5
SCSS$plasma-color-primary-gray-5
CSS--plasma-color-primary-gray-5
6
TScolor.primary.gray.6
SCSS$plasma-color-primary-gray-6
CSS--plasma-color-primary-gray-6
7
TScolor.primary.gray.7
SCSS$plasma-color-primary-gray-7
CSS--plasma-color-primary-gray-7
8
TScolor.primary.gray.8
SCSS$plasma-color-primary-gray-8
CSS--plasma-color-primary-gray-8
9
TScolor.primary.gray.9
SCSS$plasma-color-primary-gray-9
CSS--plasma-color-primary-gray-9
navy
0
TScolor.primary.navy.0
SCSS$plasma-color-primary-navy-0
CSS--plasma-color-primary-navy-0
1
TScolor.primary.navy.1
SCSS$plasma-color-primary-navy-1
CSS--plasma-color-primary-navy-1
2
TScolor.primary.navy.2
SCSS$plasma-color-primary-navy-2
CSS--plasma-color-primary-navy-2
3
TScolor.primary.navy.3
SCSS$plasma-color-primary-navy-3
CSS--plasma-color-primary-navy-3
4
TScolor.primary.navy.4
SCSS$plasma-color-primary-navy-4
CSS--plasma-color-primary-navy-4
5
TScolor.primary.navy.5
SCSS$plasma-color-primary-navy-5
CSS--plasma-color-primary-navy-5
6
TScolor.primary.navy.6
SCSS$plasma-color-primary-navy-6
CSS--plasma-color-primary-navy-6
7
TScolor.primary.navy.7
SCSS$plasma-color-primary-navy-7
CSS--plasma-color-primary-navy-7
8
TScolor.primary.navy.8
SCSS$plasma-color-primary-navy-8
CSS--plasma-color-primary-navy-8
9
TScolor.primary.navy.9
SCSS$plasma-color-primary-navy-9
CSS--plasma-color-primary-navy-9
accent
blue
0
TScolor.accent.blue.0
SCSS$plasma-color-accent-blue-0
CSS--plasma-color-accent-blue-0
1
TScolor.accent.blue.1
SCSS$plasma-color-accent-blue-1
CSS--plasma-color-accent-blue-1
2
TScolor.accent.blue.2
SCSS$plasma-color-accent-blue-2
CSS--plasma-color-accent-blue-2
3
TScolor.accent.blue.3
SCSS$plasma-color-accent-blue-3
CSS--plasma-color-accent-blue-3
4
TScolor.accent.blue.4
SCSS$plasma-color-accent-blue-4
CSS--plasma-color-accent-blue-4
5
TScolor.accent.blue.5
SCSS$plasma-color-accent-blue-5
CSS--plasma-color-accent-blue-5
6
TScolor.accent.blue.6
SCSS$plasma-color-accent-blue-6
CSS--plasma-color-accent-blue-6
7
TScolor.accent.blue.7
SCSS$plasma-color-accent-blue-7
CSS--plasma-color-accent-blue-7
8
TScolor.accent.blue.8
SCSS$plasma-color-accent-blue-8
CSS--plasma-color-accent-blue-8
9
TScolor.accent.blue.9
SCSS$plasma-color-accent-blue-9
CSS--plasma-color-accent-blue-9
red
0
TScolor.accent.red.0
SCSS$plasma-color-accent-red-0
CSS--plasma-color-accent-red-0
1
TScolor.accent.red.1
SCSS$plasma-color-accent-red-1
CSS--plasma-color-accent-red-1
2
TScolor.accent.red.2
SCSS$plasma-color-accent-red-2
CSS--plasma-color-accent-red-2
3
TScolor.accent.red.3
SCSS$plasma-color-accent-red-3
CSS--plasma-color-accent-red-3
4
TScolor.accent.red.4
SCSS$plasma-color-accent-red-4
CSS--plasma-color-accent-red-4
5
TScolor.accent.red.5
SCSS$plasma-color-accent-red-5
CSS--plasma-color-accent-red-5
6
TScolor.accent.red.6
SCSS$plasma-color-accent-red-6
CSS--plasma-color-accent-red-6
7
TScolor.accent.red.7
SCSS$plasma-color-accent-red-7
CSS--plasma-color-accent-red-7
8
TScolor.accent.red.8
SCSS$plasma-color-accent-red-8
CSS--plasma-color-accent-red-8
9
TScolor.accent.red.9
SCSS$plasma-color-accent-red-9
CSS--plasma-color-accent-red-9
teal
0
TScolor.accent.teal.0
SCSS$plasma-color-accent-teal-0
CSS--plasma-color-accent-teal-0
1
TScolor.accent.teal.1
SCSS$plasma-color-accent-teal-1
CSS--plasma-color-accent-teal-1
2
TScolor.accent.teal.2
SCSS$plasma-color-accent-teal-2
CSS--plasma-color-accent-teal-2
3
TScolor.accent.teal.3
SCSS$plasma-color-accent-teal-3
CSS--plasma-color-accent-teal-3
4
TScolor.accent.teal.4
SCSS$plasma-color-accent-teal-4
CSS--plasma-color-accent-teal-4
5
TScolor.accent.teal.5
SCSS$plasma-color-accent-teal-5
CSS--plasma-color-accent-teal-5
6
TScolor.accent.teal.6
SCSS$plasma-color-accent-teal-6
CSS--plasma-color-accent-teal-6
7
TScolor.accent.teal.7
SCSS$plasma-color-accent-teal-7
CSS--plasma-color-accent-teal-7
8
TScolor.accent.teal.8
SCSS$plasma-color-accent-teal-8
CSS--plasma-color-accent-teal-8
9
TScolor.accent.teal.9
SCSS$plasma-color-accent-teal-9
CSS--plasma-color-accent-teal-9
yellow
0
TScolor.accent.yellow.0
SCSS$plasma-color-accent-yellow-0
CSS--plasma-color-accent-yellow-0
1
TScolor.accent.yellow.1
SCSS$plasma-color-accent-yellow-1
CSS--plasma-color-accent-yellow-1
2
TScolor.accent.yellow.2
SCSS$plasma-color-accent-yellow-2
CSS--plasma-color-accent-yellow-2
3
TScolor.accent.yellow.3
SCSS$plasma-color-accent-yellow-3
CSS--plasma-color-accent-yellow-3
4
TScolor.accent.yellow.4
SCSS$plasma-color-accent-yellow-4
CSS--plasma-color-accent-yellow-4
5
TScolor.accent.yellow.5
SCSS$plasma-color-accent-yellow-5
CSS--plasma-color-accent-yellow-5
6
TScolor.accent.yellow.6
SCSS$plasma-color-accent-yellow-6
CSS--plasma-color-accent-yellow-6
7
TScolor.accent.yellow.7
SCSS$plasma-color-accent-yellow-7
CSS--plasma-color-accent-yellow-7
8
TScolor.accent.yellow.8
SCSS$plasma-color-accent-yellow-8
CSS--plasma-color-accent-yellow-8
9
TScolor.accent.yellow.9
SCSS$plasma-color-accent-yellow-9
CSS--plasma-color-accent-yellow-9
secondary
green
0
TScolor.secondary.green.0
SCSS$plasma-color-secondary-green-0
CSS--plasma-color-secondary-green-0
1
TScolor.secondary.green.1
SCSS$plasma-color-secondary-green-1
CSS--plasma-color-secondary-green-1
2
TScolor.secondary.green.2
SCSS$plasma-color-secondary-green-2
CSS--plasma-color-secondary-green-2
3
TScolor.secondary.green.3
SCSS$plasma-color-secondary-green-3
CSS--plasma-color-secondary-green-3
4
TScolor.secondary.green.4
SCSS$plasma-color-secondary-green-4
CSS--plasma-color-secondary-green-4
5
TScolor.secondary.green.5
SCSS$plasma-color-secondary-green-5
CSS--plasma-color-secondary-green-5
6
TScolor.secondary.green.6
SCSS$plasma-color-secondary-green-6
CSS--plasma-color-secondary-green-6
7
TScolor.secondary.green.7
SCSS$plasma-color-secondary-green-7
CSS--plasma-color-secondary-green-7
8
TScolor.secondary.green.8
SCSS$plasma-color-secondary-green-8
CSS--plasma-color-secondary-green-8
9
TScolor.secondary.green.9
SCSS$plasma-color-secondary-green-9
CSS--plasma-color-secondary-green-9
indigo
0
TScolor.secondary.indigo.0
SCSS$plasma-color-secondary-indigo-0
CSS--plasma-color-secondary-indigo-0
1
TScolor.secondary.indigo.1
SCSS$plasma-color-secondary-indigo-1
CSS--plasma-color-secondary-indigo-1
2
TScolor.secondary.indigo.2
SCSS$plasma-color-secondary-indigo-2
CSS--plasma-color-secondary-indigo-2
3
TScolor.secondary.indigo.3
SCSS$plasma-color-secondary-indigo-3
CSS--plasma-color-secondary-indigo-3
4
TScolor.secondary.indigo.4
SCSS$plasma-color-secondary-indigo-4
CSS--plasma-color-secondary-indigo-4
5
TScolor.secondary.indigo.5
SCSS$plasma-color-secondary-indigo-5
CSS--plasma-color-secondary-indigo-5
6
TScolor.secondary.indigo.6
SCSS$plasma-color-secondary-indigo-6
CSS--plasma-color-secondary-indigo-6
7
TScolor.secondary.indigo.7
SCSS$plasma-color-secondary-indigo-7
CSS--plasma-color-secondary-indigo-7
8
TScolor.secondary.indigo.8
SCSS$plasma-color-secondary-indigo-8
CSS--plasma-color-secondary-indigo-8
9
TScolor.secondary.indigo.9
SCSS$plasma-color-secondary-indigo-9
CSS--plasma-color-secondary-indigo-9
lime
0
TScolor.secondary.lime.0
SCSS$plasma-color-secondary-lime-0
CSS--plasma-color-secondary-lime-0
6
TScolor.secondary.lime.6
SCSS$plasma-color-secondary-lime-6
CSS--plasma-color-secondary-lime-6
9
TScolor.secondary.lime.9
SCSS$plasma-color-secondary-lime-9
CSS--plasma-color-secondary-lime-9
purple
0
TScolor.secondary.purple.0
SCSS$plasma-color-secondary-purple-0
CSS--plasma-color-secondary-purple-0
1
TScolor.secondary.purple.1
SCSS$plasma-color-secondary-purple-1
CSS--plasma-color-secondary-purple-1
2
TScolor.secondary.purple.2
SCSS$plasma-color-secondary-purple-2
CSS--plasma-color-secondary-purple-2
3
TScolor.secondary.purple.3
SCSS$plasma-color-secondary-purple-3
CSS--plasma-color-secondary-purple-3
4
TScolor.secondary.purple.4
SCSS$plasma-color-secondary-purple-4
CSS--plasma-color-secondary-purple-4
5
TScolor.secondary.purple.5
SCSS$plasma-color-secondary-purple-5
CSS--plasma-color-secondary-purple-5
6
TScolor.secondary.purple.6
SCSS$plasma-color-secondary-purple-6
CSS--plasma-color-secondary-purple-6
7
TScolor.secondary.purple.7
SCSS$plasma-color-secondary-purple-7
CSS--plasma-color-secondary-purple-7
8
TScolor.secondary.purple.8
SCSS$plasma-color-secondary-purple-8
CSS--plasma-color-secondary-purple-8
9
TScolor.secondary.purple.9
SCSS$plasma-color-secondary-purple-9
CSS--plasma-color-secondary-purple-9

No guidelines exist for Colors yet.

Create guidelines