Colors

The colors that give Plasma its identity

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

TS	color.primary.gradient
SCSS	$plasma-color-primary-gradient
CSS	--plasma-color-primary-gradient

pureWhite

TS	color.primary.pureWhite
SCSS	$plasma-color-primary-pure-white
CSS	--plasma-color-primary-pure-white

action

1

TS	color.primary.action.1
SCSS	$plasma-color-primary-action-1
CSS	--plasma-color-primary-action-1

2

TS	color.primary.action.2
SCSS	$plasma-color-primary-action-2
CSS	--plasma-color-primary-action-2

3

TS	color.primary.action.3
SCSS	$plasma-color-primary-action-3
CSS	--plasma-color-primary-action-3

4

TS	color.primary.action.4
SCSS	$plasma-color-primary-action-4
CSS	--plasma-color-primary-action-4

6

TS	color.primary.action.6
SCSS	$plasma-color-primary-action-6
CSS	--plasma-color-primary-action-6

8

TS	color.primary.action.8
SCSS	$plasma-color-primary-action-8
CSS	--plasma-color-primary-action-8

9

TS	color.primary.action.9
SCSS	$plasma-color-primary-action-9
CSS	--plasma-color-primary-action-9

gray

0

TS	color.primary.gray.0
SCSS	$plasma-color-primary-gray-0
CSS	--plasma-color-primary-gray-0

1

TS	color.primary.gray.1
SCSS	$plasma-color-primary-gray-1
CSS	--plasma-color-primary-gray-1

2

TS	color.primary.gray.2
SCSS	$plasma-color-primary-gray-2
CSS	--plasma-color-primary-gray-2

3

TS	color.primary.gray.3
SCSS	$plasma-color-primary-gray-3
CSS	--plasma-color-primary-gray-3

4

TS	color.primary.gray.4
SCSS	$plasma-color-primary-gray-4
CSS	--plasma-color-primary-gray-4

5

TS	color.primary.gray.5
SCSS	$plasma-color-primary-gray-5
CSS	--plasma-color-primary-gray-5

6

TS	color.primary.gray.6
SCSS	$plasma-color-primary-gray-6
CSS	--plasma-color-primary-gray-6

7

TS	color.primary.gray.7
SCSS	$plasma-color-primary-gray-7
CSS	--plasma-color-primary-gray-7

8

TS	color.primary.gray.8
SCSS	$plasma-color-primary-gray-8
CSS	--plasma-color-primary-gray-8

9

TS	color.primary.gray.9
SCSS	$plasma-color-primary-gray-9
CSS	--plasma-color-primary-gray-9

navy

0

TS	color.primary.navy.0
SCSS	$plasma-color-primary-navy-0
CSS	--plasma-color-primary-navy-0

1

TS	color.primary.navy.1
SCSS	$plasma-color-primary-navy-1
CSS	--plasma-color-primary-navy-1

2

TS	color.primary.navy.2
SCSS	$plasma-color-primary-navy-2
CSS	--plasma-color-primary-navy-2

3

TS	color.primary.navy.3
SCSS	$plasma-color-primary-navy-3
CSS	--plasma-color-primary-navy-3

4

TS	color.primary.navy.4
SCSS	$plasma-color-primary-navy-4
CSS	--plasma-color-primary-navy-4

5

TS	color.primary.navy.5
SCSS	$plasma-color-primary-navy-5
CSS	--plasma-color-primary-navy-5

6

TS	color.primary.navy.6
SCSS	$plasma-color-primary-navy-6
CSS	--plasma-color-primary-navy-6

7

TS	color.primary.navy.7
SCSS	$plasma-color-primary-navy-7
CSS	--plasma-color-primary-navy-7

8

TS	color.primary.navy.8
SCSS	$plasma-color-primary-navy-8
CSS	--plasma-color-primary-navy-8

9

TS	color.primary.navy.9
SCSS	$plasma-color-primary-navy-9
CSS	--plasma-color-primary-navy-9

accent

blue

0

TS	color.accent.blue.0
SCSS	$plasma-color-accent-blue-0
CSS	--plasma-color-accent-blue-0

1

TS	color.accent.blue.1
SCSS	$plasma-color-accent-blue-1
CSS	--plasma-color-accent-blue-1

2

TS	color.accent.blue.2
SCSS	$plasma-color-accent-blue-2
CSS	--plasma-color-accent-blue-2

3

TS	color.accent.blue.3
SCSS	$plasma-color-accent-blue-3
CSS	--plasma-color-accent-blue-3

4

TS	color.accent.blue.4
SCSS	$plasma-color-accent-blue-4
CSS	--plasma-color-accent-blue-4

5

TS	color.accent.blue.5
SCSS	$plasma-color-accent-blue-5
CSS	--plasma-color-accent-blue-5

6

TS	color.accent.blue.6
SCSS	$plasma-color-accent-blue-6
CSS	--plasma-color-accent-blue-6

7

TS	color.accent.blue.7
SCSS	$plasma-color-accent-blue-7
CSS	--plasma-color-accent-blue-7

8

TS	color.accent.blue.8
SCSS	$plasma-color-accent-blue-8
CSS	--plasma-color-accent-blue-8

9

TS	color.accent.blue.9
SCSS	$plasma-color-accent-blue-9
CSS	--plasma-color-accent-blue-9

red

0

TS	color.accent.red.0
SCSS	$plasma-color-accent-red-0
CSS	--plasma-color-accent-red-0

1

TS	color.accent.red.1
SCSS	$plasma-color-accent-red-1
CSS	--plasma-color-accent-red-1

2

TS	color.accent.red.2
SCSS	$plasma-color-accent-red-2
CSS	--plasma-color-accent-red-2

3

TS	color.accent.red.3
SCSS	$plasma-color-accent-red-3
CSS	--plasma-color-accent-red-3

4

TS	color.accent.red.4
SCSS	$plasma-color-accent-red-4
CSS	--plasma-color-accent-red-4

5

TS	color.accent.red.5
SCSS	$plasma-color-accent-red-5
CSS	--plasma-color-accent-red-5

6

TS	color.accent.red.6
SCSS	$plasma-color-accent-red-6
CSS	--plasma-color-accent-red-6

7

TS	color.accent.red.7
SCSS	$plasma-color-accent-red-7
CSS	--plasma-color-accent-red-7

8

TS	color.accent.red.8
SCSS	$plasma-color-accent-red-8
CSS	--plasma-color-accent-red-8

9

TS	color.accent.red.9
SCSS	$plasma-color-accent-red-9
CSS	--plasma-color-accent-red-9

teal

0

TS	color.accent.teal.0
SCSS	$plasma-color-accent-teal-0
CSS	--plasma-color-accent-teal-0

1

TS	color.accent.teal.1
SCSS	$plasma-color-accent-teal-1
CSS	--plasma-color-accent-teal-1

2

TS	color.accent.teal.2
SCSS	$plasma-color-accent-teal-2
CSS	--plasma-color-accent-teal-2

3

TS	color.accent.teal.3
SCSS	$plasma-color-accent-teal-3
CSS	--plasma-color-accent-teal-3

4

TS	color.accent.teal.4
SCSS	$plasma-color-accent-teal-4
CSS	--plasma-color-accent-teal-4

5

TS	color.accent.teal.5
SCSS	$plasma-color-accent-teal-5
CSS	--plasma-color-accent-teal-5

6

TS	color.accent.teal.6
SCSS	$plasma-color-accent-teal-6
CSS	--plasma-color-accent-teal-6

7

TS	color.accent.teal.7
SCSS	$plasma-color-accent-teal-7
CSS	--plasma-color-accent-teal-7

8

TS	color.accent.teal.8
SCSS	$plasma-color-accent-teal-8
CSS	--plasma-color-accent-teal-8

9

TS	color.accent.teal.9
SCSS	$plasma-color-accent-teal-9
CSS	--plasma-color-accent-teal-9

yellow

0

TS	color.accent.yellow.0
SCSS	$plasma-color-accent-yellow-0
CSS	--plasma-color-accent-yellow-0

1

TS	color.accent.yellow.1
SCSS	$plasma-color-accent-yellow-1
CSS	--plasma-color-accent-yellow-1

2

TS	color.accent.yellow.2
SCSS	$plasma-color-accent-yellow-2
CSS	--plasma-color-accent-yellow-2

3

TS	color.accent.yellow.3
SCSS	$plasma-color-accent-yellow-3
CSS	--plasma-color-accent-yellow-3

4

TS	color.accent.yellow.4
SCSS	$plasma-color-accent-yellow-4
CSS	--plasma-color-accent-yellow-4

5

TS	color.accent.yellow.5
SCSS	$plasma-color-accent-yellow-5
CSS	--plasma-color-accent-yellow-5

6

TS	color.accent.yellow.6
SCSS	$plasma-color-accent-yellow-6
CSS	--plasma-color-accent-yellow-6

7

TS	color.accent.yellow.7
SCSS	$plasma-color-accent-yellow-7
CSS	--plasma-color-accent-yellow-7

8

TS	color.accent.yellow.8
SCSS	$plasma-color-accent-yellow-8
CSS	--plasma-color-accent-yellow-8

9

TS	color.accent.yellow.9
SCSS	$plasma-color-accent-yellow-9
CSS	--plasma-color-accent-yellow-9

secondary

green

0

TS	color.secondary.green.0
SCSS	$plasma-color-secondary-green-0
CSS	--plasma-color-secondary-green-0

1

TS	color.secondary.green.1
SCSS	$plasma-color-secondary-green-1
CSS	--plasma-color-secondary-green-1

2

TS	color.secondary.green.2
SCSS	$plasma-color-secondary-green-2
CSS	--plasma-color-secondary-green-2

3

TS	color.secondary.green.3
SCSS	$plasma-color-secondary-green-3
CSS	--plasma-color-secondary-green-3

4

TS	color.secondary.green.4
SCSS	$plasma-color-secondary-green-4
CSS	--plasma-color-secondary-green-4

5

TS	color.secondary.green.5
SCSS	$plasma-color-secondary-green-5
CSS	--plasma-color-secondary-green-5

6

TS	color.secondary.green.6
SCSS	$plasma-color-secondary-green-6
CSS	--plasma-color-secondary-green-6

7

TS	color.secondary.green.7
SCSS	$plasma-color-secondary-green-7
CSS	--plasma-color-secondary-green-7

8

TS	color.secondary.green.8
SCSS	$plasma-color-secondary-green-8
CSS	--plasma-color-secondary-green-8

9

TS	color.secondary.green.9
SCSS	$plasma-color-secondary-green-9
CSS	--plasma-color-secondary-green-9

indigo

0

TS	color.secondary.indigo.0
SCSS	$plasma-color-secondary-indigo-0
CSS	--plasma-color-secondary-indigo-0

1

TS	color.secondary.indigo.1
SCSS	$plasma-color-secondary-indigo-1
CSS	--plasma-color-secondary-indigo-1

2

TS	color.secondary.indigo.2
SCSS	$plasma-color-secondary-indigo-2
CSS	--plasma-color-secondary-indigo-2

3

TS	color.secondary.indigo.3
SCSS	$plasma-color-secondary-indigo-3
CSS	--plasma-color-secondary-indigo-3

4

TS	color.secondary.indigo.4
SCSS	$plasma-color-secondary-indigo-4
CSS	--plasma-color-secondary-indigo-4

5

TS	color.secondary.indigo.5
SCSS	$plasma-color-secondary-indigo-5
CSS	--plasma-color-secondary-indigo-5

6

TS	color.secondary.indigo.6
SCSS	$plasma-color-secondary-indigo-6
CSS	--plasma-color-secondary-indigo-6

7

TS	color.secondary.indigo.7
SCSS	$plasma-color-secondary-indigo-7
CSS	--plasma-color-secondary-indigo-7

8

TS	color.secondary.indigo.8
SCSS	$plasma-color-secondary-indigo-8
CSS	--plasma-color-secondary-indigo-8

9

TS	color.secondary.indigo.9
SCSS	$plasma-color-secondary-indigo-9
CSS	--plasma-color-secondary-indigo-9

lime

0

TS	color.secondary.lime.0
SCSS	$plasma-color-secondary-lime-0
CSS	--plasma-color-secondary-lime-0

6

TS	color.secondary.lime.6
SCSS	$plasma-color-secondary-lime-6
CSS	--plasma-color-secondary-lime-6

9

TS	color.secondary.lime.9
SCSS	$plasma-color-secondary-lime-9
CSS	--plasma-color-secondary-lime-9

purple

0

TS	color.secondary.purple.0
SCSS	$plasma-color-secondary-purple-0
CSS	--plasma-color-secondary-purple-0

1

TS	color.secondary.purple.1
SCSS	$plasma-color-secondary-purple-1
CSS	--plasma-color-secondary-purple-1

2

TS	color.secondary.purple.2
SCSS	$plasma-color-secondary-purple-2
CSS	--plasma-color-secondary-purple-2

3

TS	color.secondary.purple.3
SCSS	$plasma-color-secondary-purple-3
CSS	--plasma-color-secondary-purple-3

4

TS	color.secondary.purple.4
SCSS	$plasma-color-secondary-purple-4
CSS	--plasma-color-secondary-purple-4

5

TS	color.secondary.purple.5
SCSS	$plasma-color-secondary-purple-5
CSS	--plasma-color-secondary-purple-5

6

TS	color.secondary.purple.6
SCSS	$plasma-color-secondary-purple-6
CSS	--plasma-color-secondary-purple-6

7

TS	color.secondary.purple.7
SCSS	$plasma-color-secondary-purple-7
CSS	--plasma-color-secondary-purple-7

8

TS	color.secondary.purple.8
SCSS	$plasma-color-secondary-purple-8
CSS	--plasma-color-secondary-purple-8

9

TS	color.secondary.purple.9
SCSS	$plasma-color-secondary-purple-9
CSS	--plasma-color-secondary-purple-9

No guidelines exist for Colors yet.

Create guidelines