Redfish Rust
Section 06
Color
Seven colors, each with a job. Grounded in the landscape we work in: rust-red fish, deep forest green, river teal, olive bank, cream sand. Click any HEX to copy it to the clipboard.
The palette
Seven values · click HEX to copy
Creek Forest
River Teal
Bank Olive
Cream Sand
Charcoal
White
Usage rule
60-30-10 by visual area
Every TCA composition follows this distribution:
60%
Cream Sand
Background, breathing room. Substituted with White only when Cream Sand stock isn't available.
30%
Creek Forest
Type, structural elements, dark surfaces, supporting visuals. The brand's anchor.
10%
One accent
Redfish Rust, River Teal, or Bank Olive. One accent per composition. Don't combine.
Accessibility
WCAG-approved text pairings
The palette is calibrated for accessibility. Pairings below meet WCAG AA or AAA. Pairings not in this table either fail or are reserved for decorative use only.
| Foreground | Background | Contrast | Verdict |
|---|---|---|---|
| Creek Forest | Cream Sand | ~10.7 : 1 | AAA · primary headline & body |
| Charcoal | Cream Sand | ~16.3 : 1 | AAA · long-form body |
| Charcoal | White | ~17.4 : 1 | AAA |
| Cream Sand | Creek Forest | ~10.7 : 1 | AAA · reverse |
| White | Creek Forest | ~10.7 : 1 | AAA · reverse |
| Redfish Rust | Cream Sand | ~5.0 : 1 | AA · accent type & CTAs |
| Redfish Rust | White | ~5.3 : 1 | AA |
| River Teal | Cream Sand | ~5.4 : 1 | AA · links & secondary headings |
| River Teal | White | ~5.8 : 1 | AA |
| Bank Olive | Cream Sand | ~4.8 : 1 | AA · tags, supporting copy 14pt+ |
| Bank Olive | White | ~5.1 : 1 | AA |
Avoid
| Foreground | Background | Contrast | Verdict |
|---|---|---|---|
| Redfish Rust | Creek Forest | ~2.2 : 1 | Fail · decorative only |
| River Teal | Creek Forest | ~2.0 : 1 | Fail · decorative only |
| Bank Olive | Creek Forest | ~2.3 : 1 | Fail · decorative only |
CSS tokens
Direct from tokens.css
:root {
--color-redfish-rust: #B5462A;
--color-creek-forest: #2C3D20;
--color-river-teal: #2D6E7E;
--color-bank-olive: #6B7339;
--color-cream-sand: #FAF7F0;
--color-charcoal: #1A1A1A;
--color-white: #FFFFFF;
--color-bg: var(--color-cream-sand);
--color-bg-inverse: var(--color-creek-forest);
--color-text: var(--color-charcoal);
--color-heading: var(--color-creek-forest);
--color-accent: var(--color-redfish-rust);
--color-link: var(--color-river-teal);
--color-meta: var(--color-bank-olive);
}Source of truth: site/styles/tokens.css · brand/06-color.md.