Herman 5.0.0-beta.2

Herman Config: Color Palettes

This page contains documentation of the colors used by Herman. We use OddBird’s Accoutrement Color plugin to store and manage colors directly in Sass map objects.

For help documenting your brand colors, see the “Documenting Colors” page.

Related

Accoutrement [external]

$brand-colors (map)

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

We use bright primary colors for the main brand, everything else is based on these colors. These are based on the OddBird brand colors, but using a darker shade of the OddBird pink.

These colors should be assigned to semantic theme-specific names before they are used in styling patterns and components.

Map Properties

'<color-name>': (Color | String | List)

Each <color-name> key can be assigned a color or previously-defined key, followed by an optional map of adjustments (as defined in Accoutrement).

Color Previews

$neutral-colors

scss 
$neutral-colors: (
  'light-gray': '#brand-blue'
    (
      'tint': 80%,
      'desaturate': 80%,
    ),
  'gray': '#brand-blue'
    (
      'desaturate': 80%,
    ),
  'contrast-light': #fff,
  'contrast-dark': '#brand-blue'
    (
      'shade': 30% #000,
      'desaturate': 80%,
    ),
);

Use these neutral colors to create structure and hierarchy in the document. These colors should be assigned to semantic theme-specific names before they are used in styling patterns and components.

Color Previews

$theme-colors

scss 
$theme-colors: (
  'theme-dark': '#brand-blue',
  'theme-light': '#brand-blue'
    (
      'tint': 80%,
    ),
  'background': '#contrast-light',
  'text': '#contrast-dark',
  'text-light': '#gray',
  'action': '#brand-pink',
  'focus': '#theme-dark',
  'underline': '#action'
    (
      'tint': 75%,
    ),
  'border': '#gray',
  'border-light': '#light-gray',
  'shadow': '#gray'
    (
      'rgba': 0.5,
    ),
  'callout': '#theme-light',
  'slight': '#callout'
    (
      'tint': 90%,
    ),
  'code': '#theme-dark',
  'code-shadow': '#code'
    (
      'rgba': 0.2,
    ),
);

Rather than directly accessing and adjusting the explicitly named (e.g. “pink” or “gray”) brand and neutral colors, we assign them to semantic theme-specific names. These are the colors that should be used in our pattern/component styles.

Color Previews

$hljs-colors

scss 
$hljs-colors: (
  'hljs-comment': #93a1a1,
  'hljs-green': #859900,
  'hljs-cyan': #2aa198,
  'hljs-blue': #268bd2,
  'hljs-yellow': #b58900,
  'hljs-orange': #cb4b16,
  'hljs-red': #dc322f,
  'hljs-formula': #eee8d5,
);

Colors for code-highlighting with hljs, based on Solarized-Light & the Herman brand.

Color Previews