Theme documentation

Color scheme

The color palette is inspired by the geology and flora of Mt Ranier.

Color roles

• Sandstone is used for most backgrounds, and for most text on dark backgrounds.
• Andesite Black is used for most text, and for backgrounds of navigation elements.
• Olympic Moss is our main accent color.
• Lichen Gold is a secondary accent, currently in use for navbar and banner text.
• Glacier Blue is unused as of v0.1.0.

Important

Accessible Color Contrast

Ensure color pairs used for text have enough contrast to be legible to most readers. Use this handy contrast matrix. Pairings rated "AA" or "AAA" are acceptable for body text, while pairings rated "AA18" are acceptable for icons and larger headings.

Variables

Use these variables instead of hex codes when writing styles - that makes it easy to keep colors consistent throughout the project, and to update colors everywhere if we make changes to base colors.

Base colors

--color-sandstone
--color-gold
--color-andesite
--color-moss
--color-blue

Additional shades

  --color-sandstone-l1: #eae3d6;
  --color-sandstone-l2: #f8f6f2;
  --color-sandstone-d1: #C8B592;

  --color-andesite-d1: #2e2427;

  --color-moss-d1: #414e2c; 

The name of a shade starts with the name of the base color followed by a hyphen. "l" stands for "lighter", and "d" stands for "darker". The number indicates how many steps darker/lighter the shade is compared to the base color. For instance, sandstone-l2 is two steps lighter than sandstone, and sandstone-d1 is one step darker.

Adding new shades

Add a new shade...

• When needed for adequate color contrast - for instance, links use moss-d1 because moss paired with sandstone has too little contrast for body text.
• When you want distinct colors to serve similar roles, like backgrounds for a container and its child element
• To define edges of separate elements
• To add visual interest and depth.

Pick a new shade using the palette on Coolors.co. Click the grid icon that appears when you hover over a color block, and you'll see a stack of shades to choose from.

If using the new shade for text, check contrast using the contrast matrix linked above.

Add to the stylesheet in the Shades section, grouped with other shades of the same base color.

Fonts

Headings: Montserrat
Body text: Source Sans

Apply fonts using the --heading-font or --body-font variables instead of referring to them directly.

Spacers

When an element needs padding or margin, use one of the spacer variables - they make it easy to maintain a cohesive look. Here are their values as of v0.1.0:

  --space-xs: .375rem;
  --space-sm: .75rem;
  --space-med: 1.5rem;
  --space-lg: 2.25rem;

Spacers xs-med double in size with each step, while lg is 1.5x med. Add and document additional spacers if you need them, and use a similar relationship - for instance, if you want a spacer-xl, it should probably be 3rem.

Corner radius

We're using rounded corners on most block elements. Use the --corner-radius variable to ensure consistency.