colors

$brand-colors variable

We use bright primary colors for the main brand, everything else is based on these colors.

$brand-colors: (
  'brand-orange': hsl(24, 100%, 39%),
  'brand-blue': hsl(195, 85%, 35%),
  'brand-pink': hsl(330, 85%, 48%),
);

$neutral-colors variable

Use these neutral colors to create structure and hierarchy in the document.

$neutral-colors: (
  'white': #fff,
  'light-gray': 'brand-blue' ('tint': 80%, 'desaturate': 80%),
  'gray': 'brand-blue' ('desaturate': 80%),
  'black': 'brand-blue' ('shade': 65%),
);

$status-colors variable

These status colors for UI elements give a quick sense of progress, warning, or errors.

$status-colors: (
  'go': hsl(75, 65%, 30%),
  'yield': 'brand-orange',
  'stop': hsl(0, 85%, 50%),
);

$theme-colors variable

Applying the brand and accent colors to a sitewide theme.

$theme-colors: (
  'contrast-light': 'white',
  'contrast-dark': 'black',
  'background': 'white',
  'text': 'black',
  'text-light': 'gray',
  'border': 'gray',
  'callout': 'light-gray',
  'overlay': 'callout' ('rgba': 0.9),
  'shadow': 'gray' ('rgba': 0.5),
  'action': 'brand-orange',
  'focus': 'action' ('shade': 10%),
  'active': 'action',
  'accent': 'brand-pink',
);