Reference
Styleguide
Colors, typography, components, and textures used across the Arbutus Code website. A single source of truth for the brand.
Color Palette
Bark
#8B6F47
Primary structural tone
Terracotta
#9C4A2C
Accent / CTA emphasis
Forest
#4A5D3F
Secondary supporting tone
Mist
#E8E6E3
Soft background layer
Stone
#616161
Muted text and metadata
Deep Ocean
#2C3E50
Primary text / dark surface
Extended Palette
bark-light
bark-dark
terracotta-light
terracotta-dark
forest-light
forest-dark
mist
cream
parchment
ocean-light
ocean-dark
Typography
Type System
Heading Stack
Cabinet Grotesk
Weights used: 500, 700, 800
Body Stack
Inter + system UI fallback
Default line-height: 1.7
Headings — Cabinet Grotesk
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text — Inter
Extra Large: The quick brown fox jumps over the lazy dog.
Large: The quick brown fox jumps over the lazy dog.
Base: The quick brown fox jumps over the lazy dog.
Small: The quick brown fox jumps over the lazy dog.
Extra Small: The quick brown fox jumps over the lazy dog.
Monospace: The quick brown fox jumps over the lazy dog.
Accessibility Color Matrix
This matrix renders every non-identical foreground/background pairing from the full brand palette using explicit hex values. No Tailwind text/background utility classes are used in test cards, so Lighthouse reflects true color math.
Coverage
- Total tested combinations:
240 - Rendered (AA pass only):
64 - Pruned large-only combos:
28 - Pruned fail combos:
148
Status Rules
- PASS AA:
ratio
>= 4.5 - LARGE ONLY:
ratio
3.0 - 4.49 - FAIL:
ratio
< 3.0 - Only PASS AA cards are rendered below for final verification.
Passing Brand Color Combinations (Hex-Locked)
Background: Bark Light (#A68B64)
Ocean Dark
The quick brown fox jumps over the lazy dog.
#1A2530 on #A68B64 — 4.81:1 PASS AA
Background: Bark Dark (#6B5535)
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #6B5535 — 5.67:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #6B5535 — 6.66:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #6B5535 — 6.23:1 PASS AA
Background: Terracotta (#9C4A2C)
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #9C4A2C — 4.92:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #9C4A2C — 5.78:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #9C4A2C — 5.41:1 PASS AA
Background: Terracotta Light (#F0A385)
Forest Dark
The quick brown fox jumps over the lazy dog.
#3A4A32 on #F0A385 — 4.66:1 PASS AA
Deep Ocean
The quick brown fox jumps over the lazy dog.
#2C3E50 on #F0A385 — 5.38:1 PASS AA
Ocean Dark
The quick brown fox jumps over the lazy dog.
#1A2530 on #F0A385 — 7.61:1 PASS AA
Background: Terracotta Dark (#7D3B23)
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #7D3B23 — 6.69:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #7D3B23 — 7.86:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #7D3B23 — 7.35:1 PASS AA
Background: Forest (#4A5D3F)
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #4A5D3F — 5.76:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #4A5D3F — 6.76:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #4A5D3F — 6.33:1 PASS AA
Background: Forest Light (#5E7550)
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #5E7550 — 4.79:1 PASS AA
Background: Forest Dark (#3A4A32)
Terracotta Light
The quick brown fox jumps over the lazy dog.
#F0A385 on #3A4A32 — 4.66:1 PASS AA
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #3A4A32 — 7.64:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #3A4A32 — 8.98:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #3A4A32 — 8.41:1 PASS AA
Background: Mist (#E8E6E3)
Bark Dark
The quick brown fox jumps over the lazy dog.
#6B5535 on #E8E6E3 — 5.67:1 PASS AA
Terracotta
The quick brown fox jumps over the lazy dog.
#9C4A2C on #E8E6E3 — 4.92:1 PASS AA
Terracotta Dark
The quick brown fox jumps over the lazy dog.
#7D3B23 on #E8E6E3 — 6.69:1 PASS AA
Forest
The quick brown fox jumps over the lazy dog.
#4A5D3F on #E8E6E3 — 5.76:1 PASS AA
Forest Dark
The quick brown fox jumps over the lazy dog.
#3A4A32 on #E8E6E3 — 7.64:1 PASS AA
Stone
The quick brown fox jumps over the lazy dog.
#616161 on #E8E6E3 — 4.97:1 PASS AA
Deep Ocean
The quick brown fox jumps over the lazy dog.
#2C3E50 on #E8E6E3 — 8.82:1 PASS AA
Ocean Light
The quick brown fox jumps over the lazy dog.
#3D5166 on #E8E6E3 — 6.57:1 PASS AA
Ocean Dark
The quick brown fox jumps over the lazy dog.
#1A2530 on #E8E6E3 — 12.48:1 PASS AA
Background: Cream (#FAF8F5)
Bark Dark
The quick brown fox jumps over the lazy dog.
#6B5535 on #FAF8F5 — 6.66:1 PASS AA
Terracotta
The quick brown fox jumps over the lazy dog.
#9C4A2C on #FAF8F5 — 5.78:1 PASS AA
Terracotta Dark
The quick brown fox jumps over the lazy dog.
#7D3B23 on #FAF8F5 — 7.86:1 PASS AA
Forest
The quick brown fox jumps over the lazy dog.
#4A5D3F on #FAF8F5 — 6.76:1 PASS AA
Forest Light
The quick brown fox jumps over the lazy dog.
#5E7550 on #FAF8F5 — 4.79:1 PASS AA
Forest Dark
The quick brown fox jumps over the lazy dog.
#3A4A32 on #FAF8F5 — 8.98:1 PASS AA
Stone
The quick brown fox jumps over the lazy dog.
#616161 on #FAF8F5 — 5.84:1 PASS AA
Deep Ocean
The quick brown fox jumps over the lazy dog.
#2C3E50 on #FAF8F5 — 10.36:1 PASS AA
Ocean Light
The quick brown fox jumps over the lazy dog.
#3D5166 on #FAF8F5 — 7.72:1 PASS AA
Ocean Dark
The quick brown fox jumps over the lazy dog.
#1A2530 on #FAF8F5 — 14.66:1 PASS AA
Background: Parchment (#F5F0EB)
Bark Dark
The quick brown fox jumps over the lazy dog.
#6B5535 on #F5F0EB — 6.23:1 PASS AA
Terracotta
The quick brown fox jumps over the lazy dog.
#9C4A2C on #F5F0EB — 5.41:1 PASS AA
Terracotta Dark
The quick brown fox jumps over the lazy dog.
#7D3B23 on #F5F0EB — 7.35:1 PASS AA
Forest
The quick brown fox jumps over the lazy dog.
#4A5D3F on #F5F0EB — 6.33:1 PASS AA
Forest Dark
The quick brown fox jumps over the lazy dog.
#3A4A32 on #F5F0EB — 8.41:1 PASS AA
Stone
The quick brown fox jumps over the lazy dog.
#616161 on #F5F0EB — 5.47:1 PASS AA
Deep Ocean
The quick brown fox jumps over the lazy dog.
#2C3E50 on #F5F0EB — 9.70:1 PASS AA
Ocean Light
The quick brown fox jumps over the lazy dog.
#3D5166 on #F5F0EB — 7.22:1 PASS AA
Ocean Dark
The quick brown fox jumps over the lazy dog.
#1A2530 on #F5F0EB — 13.73:1 PASS AA
Background: Stone (#616161)
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #616161 — 4.97:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #616161 — 5.84:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #616161 — 5.47:1 PASS AA
Background: Deep Ocean (#2C3E50)
Terracotta Light
The quick brown fox jumps over the lazy dog.
#F0A385 on #2C3E50 — 5.38:1 PASS AA
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #2C3E50 — 8.82:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #2C3E50 — 10.36:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #2C3E50 — 9.70:1 PASS AA
Background: Ocean Light (#3D5166)
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #3D5166 — 6.57:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #3D5166 — 7.72:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #3D5166 — 7.22:1 PASS AA
Background: Ocean Dark (#1A2530)
Bark Light
The quick brown fox jumps over the lazy dog.
#A68B64 on #1A2530 — 4.81:1 PASS AA
Terracotta Light
The quick brown fox jumps over the lazy dog.
#F0A385 on #1A2530 — 7.61:1 PASS AA
Mist
The quick brown fox jumps over the lazy dog.
#E8E6E3 on #1A2530 — 12.48:1 PASS AA
Cream
The quick brown fox jumps over the lazy dog.
#FAF8F5 on #1A2530 — 14.66:1 PASS AA
Parchment
The quick brown fox jumps over the lazy dog.
#F5F0EB on #1A2530 — 13.73:1 PASS AA
Components
Tags
Card
Label
Card Title
Card description text. Cards use borders, not shadows or glassmorphism.
Dividers
Standard divider (gradient fade)
Short divider (bark accent)
Blockquote
Technology is infrastructure, not decoration. Every site built with the understanding that it needs to actually work for the people using it.
Texture
Subtle parchment grain overlay
Design Principles
What We Avoid
- × Multi-color gradients
- × Glassmorphism
- × Glow / bloom
- × hover:scale
- × Bouncy / spring
- × Generic flat vector
- × Emojis
What We Do
- → Asymmetrical, editorial structures
- → Subtle organic textures
- → Earthy, muted palette
- → Max 0.4s transitions, ease only
- → Content-first, whitespace as breathing room
- → Borders over shadows on cards
- → 4-8px max border radius