CSS Variables

Variable Description
--color-black Black
--color-white White
--color-grey-lightest Lightest grey
--color-grey-lighter Lighter grey
--color-grey-light Light grey
--color-grey-medium Medium grey
--color-grey-dark Dark grey
--color-grey-darker Darker grey
--color-grey-darkest Darkest grey
--color-blue Blue (links, etc.)
scss/canvas/token/_color.scss

White Canvas Color Palette

Based on Tailwind CSS slate 300-900.

grey-lightest → grey-darkest

scss/canvas/token/_color.scss

Black Canvas Color Palette

Based on Tailwind CSS slate 50-300, 800-950.

grey-lightest → grey-darkest

scss/canvas/token/_color.scss

User-Defined Variables

Users must define the following variables:

Variable Purpose
--color-primary Primary color (h2 text, etc.)
--color-accent Accent color (mark background, etc.) 
---
style: |
  :root {
    --color-primary: #3b91c4;
    --color-accent: #ead7a4;
  }
---
scss/canvas/token/_color.scss