Colors

Legacy theme — @presencelearning/styles/colors

The original Presence palette. Variables use the original $color-N naming, no prefix. Also exposed as --pl-* CSS custom properties and as a typed JS object (colors/cssVar/ColorToken).

@use '@presencelearning/styles/colors' as *;
.button {
  background: $red-1;
  border: 1px solid $gray-6;
}

New theme primitive ramps — @presencelearning/styles/colors2

10-step ramps for Primary / Secondary / Tertiary, plus partial ramps for Supporting families and Neutrals. Mode-agnostic — dark mode reuses these hex values via different role mappings (handled by the Material domain).

@use '@presencelearning/styles/colors2' as c;
.button {
  background: c.$primary-500;
  color: c.$tertiary-50;
}

Primary

$primary-primary-50 #e2e4eb

$primary-primary-100 #b6bacf

$primary-primary-200 #888faf

$primary-primary-300 #5c658f

$primary-primary-400 #3d487b

$primary-primary-500 #1a2c67

$primary-primary-600 #152660

$primary-primary-700 #0c1e56

$primary-primary-800 #03164a

$primary-primary-900 #020035

Secondary

$secondary-secondary-50 #e3f2ff

$secondary-secondary-100 #badfff

$secondary-secondary-200 #8ecbff

$secondary-secondary-300 #5eb7ff

$secondary-secondary-400 #35a7ff

$secondary-secondary-500 #0098ff

$secondary-secondary-600 #008af1

$secondary-secondary-700 #0077de

$secondary-secondary-800 #0066cc

$secondary-secondary-900 #0047ad

Tertiary

$tertiary-tertiary-50 #ffedf1

$tertiary-tertiary-100 #ffd1d8

$tertiary-tertiary-200 #f8a0a4

$tertiary-tertiary-300 #f27a80

$tertiary-tertiary-400 #ff5a60

$tertiary-tertiary-500 #ff4846

$tertiary-tertiary-600 #f74046

$tertiary-tertiary-700 #e5363f

$tertiary-tertiary-800 #d82f38

$tertiary-tertiary-900 #c9232b

Neutrals

$neutrals-neutrals-300 #e5e9f1

$neutrals-neutrals-400 #c3c7cf

$neutrals-neutrals-600 #7c7f86

$neutrals-neutrals-700 #676a71

$neutrals-neutrals-900 #26292f

The Presence design system has 5 named neutral steps; 50/100/200/500/800 don’t exist as primitives in MD2.

Supporting

$supporting-green-supporting-green-50 #e5f7e6

$supporting-green-supporting-green-100 #c0ecc0

$supporting-green-supporting-green-200 #95df98

$supporting-purple-supporting-purple-50 #efe7fa

$supporting-purple-supporting-purple-100 #d6c3f2

$supporting-purple-supporting-purple-300 #a070e1

$supporting-purple-supporting-purple-700 #5d1bc4

$supporting-teal-supporting-teal-50 #e0f7f9

$supporting-teal-supporting-teal-100 #b2ebf0

$supporting-teal-supporting-teal-300 #4dd0dd

$supporting-teal-supporting-teal-800 #00828c

$supporting-yellow-supporting-yellow-50 #fff9e2

$supporting-yellow-supporting-yellow-100 #ffeeb4

$supporting-yellow-supporting-yellow-300 #ffd952

Surface neutrals — @presencelearning/styles/surfaces

Non-ramp primitives that don’t fit a chromatic ramp: surface backgrounds, near-blacks, and the brand-red between $tertiary-800 and $tertiary-900.

@use '@presencelearning/styles/surfaces' as s;
.page {
  background: s.$background-light;
}
.error {
  color: s.$brand-red;
}

$background-light #f8fcff page bg, light

$surface-variant-light #f3f7ff tonal surface, light

$background-dark #131519 page bg, dark

$surface-dark #1c1f24 card/dialog bg, dark

$surface-elevated-dark #484b51 menus / tooltips, dark

$brand-red #d62b31 tertiary / error, light