Core Color Palette

[zakbutcher]

Inputs

• Base Primary
• Colors - Strict naming convention
  • grey
  • rose
  • red
  • orange
  • yellow
  • lime
  • green
  • seafoam
  • teal
  • azure
  • blue
  • violet
  • magenta
• Number of Shades (min = 3, max = 10?)
• Map of above colors to product-specific names(?)
  • e.g. primary & secondary vs accent-1 & accent-2
  • example: $theme: ('primary': 'azure', 'secondary': 'seafoam');

Outputs

• CSS Variables for each shade of color with consistent naming convention
  • --${color}-${shade} where the ${shade} is the numeric index of the shade within the palette
  • e.g. a 3-shade palette's grey variables would be --grey-1, grey-2, & grey-3 with grey-1 being the lightest & grey-3 being the darkest.

Bonus Points

• Implement CIELab color space palette generator to ensure best color experience via a perceptually uniform color palette

Resources

• Contrast Grid for quickly testing color combinations
• Chromatic Sass
• CSS Tricks Article
• Tips for building systematic color palettes
• Tableau's lessons learned
• Spectrum from Adobe
• Stripe's lessons learned
• Washington Post's Design System