paint

github...plangrid/paint npm...@plangrid/paint

swatch lookup

grayscale

  1. swatch
    black
  2. swatch
    steel
  3. swatch
    slate
  4. swatch
    silver
  5. swatch
    carbon
  6. swatch
    smog
  7. swatch
    smoke
  8. swatch
    slush
  9. swatch
    sleet
  10. swatch
    snow
  11. swatch
    white

shade

Transparent values for usage as shadows
  1. dark-90
    dark-80
    dark-70
    dark-60
    dark-50
    dark-40
    dark-30
    dark-20
    dark-10
    dark-05
  1. light-90
    light-80
    light-70
    light-60
    light-50
    light-40
    light-30
    light-20
    light-10
    light-05

Shadows

F30
F20
F10
G10
B10
F30 G10
F20 G10
F10 G10
B10 G10

UI colors

  1. swatch
    blue-900
  2. swatch
    blue-700
  3. swatch
    blue-500
  4. swatch
    blue-400
  5. swatch
    blue-200
  6. swatch
    blue-100
  1. swatch
    red-900
  2. swatch
    red-700
  3. swatch
    red-500
  4. swatch
    red-400
  5. swatch
    red-200
  6. swatch
    red-100
  1. swatch
    amber-900
  2. swatch
    amber-700
  3. swatch
    amber-500
  4. swatch
    amber-400
  5. swatch
    amber-200
  6. swatch
    amber-100
  1. swatch
    green-900
  2. swatch
    green-700
  3. swatch
    green-500
  4. swatch
    green-400
  5. swatch
    green-200
  6. swatch
    green-100
  1. swatch
    purple-900
  2. swatch
    purple-700
  3. swatch
    purple-500
  4. swatch
    purple-400
  5. swatch
    purple-200
  6. swatch
    purple-100

Button paint

vivid paint stands out

glaze paint is subtle

matte paint sits flat with transparent backing

Button tones

[!] Button tone classes are deprecated. Favor #button-paint
:enabled
[aria-pressed=true]
:disabled
:link
.tone-secondary .tone-icon .tone-link
.tone-primary .tone-additive .tone-destructive .tone-pill

Input tones

.tone-validate
:enabled
:enabled[aria-invalid=false]
:enabled[aria-invalid=grammar]
:enabled[aria-invalid=spelling]
:enabled[aria-invalid=true]
:enabled[aria-invalid=""]
:disabled[aria-invalid]
:disabled
.tone-validity
:optional:enabled
:optional:enabled[type=email]
:optional:disabled[type=email]
:optional:enabled
:optional:enabled[type=email]
:optional:disabled[type=email]
:required:enabled
:required:enabled[type=email]
:required:disabled[type=email]
:required:enabled
:required:enabled[type=email]
:required:disabled[type=email]
.tone-valid
.tone-invalid

Control tones

Native radio input states with .tone-check
ARIA checkbox button states with .tone-check

Blending

Blending patterns are useful for routing colors in component designs. Blending classes themselves are for demoing the technique and are excluded from the main bundle.
.blend
.blend-before
.blend-after
.coat
.coat-before
.coat-after
.dodge
.dodge-before
.dodge-after
.burn
.burn-before
.burn-after
.blot
.blot-before
.blot-after

Ink

User ink
  • red
  • orange
  • brown
  • yellow
  • olive
  • green
  • cyan
  • blue
  • purple
  • pink
  • gray
  • black
Master ink
  • red
  • orange
  • brown
  • yellow
  • olive
  • green
  • cyan
  • blue
  • purple
  • pink
  • gray
  • black
Ink pairs
user master
user master
user master
user master
user master
user master
user master
user master
user master
user master
user master
user master