Herman 5.0.0-beta.0

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

brand-orange hsl(24deg, 100%, 39%)
brand-blue hsl(195deg, 85%, 35%)
brand-pink #aa0e5c hsl(330, 85%, 36%)

$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

light-gray #dedede hsl(0, 0%, 87%)
gray #555b5e hsl(200, 5%, 35%)
contrast-light #ffffff hsl(0, 0%, 100%)
contrast-dark #3b4042 hsl(197, 6%, 25%)

$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

theme-dark,  focus,  code hsl(195deg, 85%, 35%)
theme-light,  callout #cfe5ed hsl(196, 45%, 87%)
background #ffffff hsl(0, 0%, 100%)
text #3b4042 hsl(197, 6%, 25%)
text-light,  border #555b5e hsl(200, 5%, 35%)
action #b81e6c hsl(330, 72%, 42%)
underline #edc7da hsl(330, 51%, 85%)
border-light #dedede hsl(0, 0%, 87%)
shadow #555b5e hsla(200, 5%, 35%, 0.5)
slight #fafcfd hsl(200, 43%, 99%)
code-shadow #0d7fa5 hsla(195, 85%, 35%, 0.2)

$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

hljs-comment #93a1a1 hsl(180, 7%, 60%)
hljs-green #859900 hsl(68, 100%, 30%)
hljs-cyan #2aa198 hsl(175, 59%, 40%)
hljs-blue #268bd2 hsl(205, 69%, 49%)
hljs-yellow #b58900 hsl(45, 100%, 35%)
hljs-orange #cb4b16 hsl(18, 80%, 44%)
hljs-red #dc322f hsl(1, 71%, 52%)
hljs-formula #eee8d5 hsl(46, 42%, 88%)