04 / Color System

Color System

The colors The Lumber Exchange uses, how to weight them, and how to keep amber from running away from us.

Palette

Bark · Paper · Amber. Plus two quiet supporters.

The system is built on three primary colors — Bark (near-black), Paper (warm off-white), and Amber (lumberjack gold, our hero accent). Stone and River are secondary supporters used for warmth and quiet variety. Click any value to copy it.

Weighting

A rough rule. Sixty, thirty, eight, two.

Paper dominates: it’s the canvas. Bark is ink and structure. Amber draws the eye to one thing at a time — never used for entire fields of color. Stone and River are seasoning.

  1. 60%

    Paper

    The canvas. Every page starts here.

  2. 30%

    Bark

    Ink and structure. Type, navigation, dark plates.

  3. 8%

    Amber

    The hero accent. One thing at a time, never fields.

  4. 2%

    Stone & River

    Seasoning. Texture, secondary accents.

Primary

The three you’ll use every day.

primary

Bark

HEX
RGB
14, 14, 13
CMYK
0, 0, 7, 95
VAR

Type, primary backgrounds. Use as the ink against paper.

primary

Paper

HEX
RGB
248, 246, 241
CMYK
0, 1, 3, 3
VAR

Page surface. Warm off-white that reads as paper, not screen-white.

primary

Amber

HEX
RGB
240, 168, 56
CMYK
0, 30, 77, 6
VAR

The hero accent. Axe gold. Use sparingly — links, key UI, highlights.

Secondary

Used in service of the primary three.

secondary

Stone

HEX
RGB
200, 192, 176
CMYK
0, 4, 12, 22
VAR

Warm neutral for dividers, secondary surfaces, photo overlays.

secondary

River

HEX
RGB
144, 208, 208
CMYK
31, 0, 0, 18
VAR

Soft teal for quiet accents — chips, illustrations, never primary.

secondary

Amber Deep

HEX
RGB
168, 112, 40
VAR

Hover state for amber links, deep texture in illustration.

secondary

Amber Mid

HEX
RGB
208, 144, 48
VAR

Mid-amber for gradient depth and pressed states.

Neutrals

Type, dividers, surfaces.

neutral

Bark 80

HEX
RGB
42, 40, 38
VAR

Secondary type, dark surfaces.

neutral

Bark 60

HEX
RGB
74, 70, 66
VAR

Muted type, captions, eyebrows.

neutral

Bark 40

HEX
RGB
118, 112, 105
VAR

Disabled type, low-emphasis UI.

neutral

Bark 20

HEX
RGB
182, 177, 168
VAR

Borders on dark surfaces, faint dividers.

neutral

Paper Warm

HEX
RGB
236, 230, 219
VAR

Subtle warm surface — card backgrounds, code inline.

neutral

Paper Edge

HEX
RGB
216, 209, 196
VAR

Rules and dividers between paper sections.

Accessibility

What pairs with what.

Text colorOn backgroundContrastOK for
Bark #0E0E0DPaper #F8F6F117.4 : 1All sizes ✓ WCAG AAA
Paper #F8F6F1Bark #0E0E0D17.4 : 1All sizes ✓ WCAG AAA
Bark #0E0E0DAmber #F0A83810.2 : 1All sizes ✓ AAA
Paper #F8F6F1Amber #F0A8381.7 : 1FAIL — never set Paper text on Amber.
Bark-80 #2A2826Paper-warm #ECE6DB12.6 : 1All sizes ✓ AAA
Bark-60 #4A4642Paper #F8F6F18.1 : 1All sizes ✓ AAA
Bark #0E0E0DRiver #90D0D010.4 : 1All sizes ✓ AAA

Digital vs print

Same palette, calibrated twice.