Canvas & Current — Brand DNA
Source of truth for every C&C build. All hexes pulled from the supplied logo SVGs (Logo/C&C_Horizontal.svg, C&C_Icon.svg, C&C_Stacked.svg, Inner Taping.svg), not guessed from a screenshot. Measured 2026-09-16.
1. Core palette (from the mark)
| Token | Hex | Role | Source |
|---|---|---|---|
--navy | #051F3F | Ink, primary dark ground, body text on light | logo, 2x per file |
--teal | #67CCCF | Primary action fill, accent text on dark | logo, 2x per file |
--cream | #F8F6F0 | Primary light ground | logo, 1x per file |
Three hues only. Hue families: navy 213.1°, teal 181.7°, cream 45.0° (warm off-white, whitelisted explicitly so the purity audit does not read it as "yellow").
2. The ramp — tints and shades, same hue families only
No new hue families, ever. Every value below is derived from the three above.
NAVY 900 #020E1C 800 #031429 700 #051F3F (BRAND) 600 #283E5A
500 #506279 400 #828F9F 300 #B4BCC5 200 #DADDE2
TEAL ink-900 #1C4B54 ink-800 #296169 ink-700 #35767D 600 #49989E
500 #67CCCF (BRAND) 400 #8DD9DB 300 #B3E6E7 200 #D9F2F3 100 #EDF9F9
CREAM 050 #FCFBF9 100 #F8F6F0 (BRAND) 200 #F2EFE9 300 #E9E6DF 400 #DAD6CD3. Measured contrast — the rules this produces
| Pair | Ratio | Verdict |
|---|---|---|
White on brand teal #67CCCF | 1.89:1 | FAIL — never do this |
| Navy on brand teal | 8.72:1 | PASS — this is the button label |
| Teal text on navy | 8.72:1 | PASS |
| Cream text on navy | 15.25:1 | PASS |
| Navy text on cream | 15.25:1 | PASS |
| White on navy | 16.48:1 | PASS |
| Brand teal as text on cream | 1.75:1 | FAIL — use --teal-ink |
--teal-ink #35767D on cream | 4.81:1 | PASS — accent text on light |
--navy-500 #506279 on cream | 5.78:1 | PASS — muted text on light |
The single most important rule on this brand: brand teal is a mid-lightness fill (L = 0.608). Per house rule §40 it takes navy ink text, never white, on every filled button, chip, badge, active tab and sticky bar. The instinct to put white on a vivid brand color fails at 1.89:1 here, which is worse than the Acorn orange that produced the rule. Teal stays full saturation; the label flips, never the brand color.
4. Accent role hierarchy
Per house rule §11, roles are assigned by function, not by taste.
- Teal = ACTION. Primary CTA fills, the active state, the thing you want clicked. Always carries a navy label.
- Navy = STRUCTURE. Grounds, body copy on light, headings, the footer.
- Cream = BREATH. Light grounds, card surfaces on dark, reversed type.
--teal-ink= DETAIL. Eyebrows, link underlines, small accents on light grounds. Never a fill, never a button.
5. Grounds
Two grounds only, declared once per section, Bootstrap color modes (house §1b / §2d).
- Cream is light mode —
$body-bg: #F8F6F0,$body-color: #051F3F - Navy is dark mode —
$body-bg-dark: #051F3F,$body-color-dark: #F8F6F0
A section declares data-bs-theme="dark" or "light". Never pin colors per section with descendant rules. Never list cards in a ground block.
Muted and accent text read from the ground:
.eyebrow { color: var(--bs-primary-text-emphasis); } // teal on dark, teal-ink on light
.lede { color: var(--bs-secondary-color); } // cream-dim on dark, navy-500 on lightTuned against the worst ground in the set, not against pure black and white: --teal-ink at #35767D clears #E9E6DF as well as #F8F6F0; muted-on-dark is held at #A9BACD so it clears #283E5A (the lightest dark ground) and not just #051F3F.
6. Typography
Google Fonts only (free tier, house §9). Every display size is multiplied by its pairing's --disp-scale (house §4e) and wrapped in max(14px, calc(...)) so the 14px floor lives in the CSS, not in anyone's head.
| Direction | Display | Body | --disp-scale |
|---|---|---|---|
| A — Deep Water | Bricolage Grotesque 800 | Inter | 0.92 |
| B — Chart | Instrument Serif 400 | Inter | 1.06 |
| C — Riptide | Archivo Black 400 | Space Grotesk | 0.90 |
font-synthesis: noneeverywhere. Archivo Black and Instrument Serif ship a single weight; a600request would trigger synthetic bold and turn the face to mud.h1..h5 { font-weight: 400 !important }guard on the single-weight pairings.- Display leading floor
.95(house §41),text-wrap: balanceon every heading,text-wrap: prettyon body. - Section headers and eyebrows render ALL CAPS (house §11).
7. Density tokens
Built smaller than feels right (house §4d). One --gap token retunes the whole page rhythm in one line.
--gap: clamp(46px, 4.8vw, 76px);
--fs-hero: clamp(36px, 4.9vw, 68px);
--fs-xl: clamp(32px, 4.4vw, 58px);
--fs-lg: clamp(27px, 3.3vw, 44px);
--fs-md: clamp(21px, 2.1vw, 29px);
body { font-size: 16px; line-height: 1.58 }8. Canonical widths
1280 desktop, 390 mobile. Both are composition targets, not checks. The xl container is capped at 1240px so it lands on the 1280 canvas minus gutters. The 390 mobile pass ships as one labelled @media (max-width:640px) block appended last.
9. The mark
- Sailboat + wave in a rounded rectangle. Navy field, cream sail-panel, teal water.
- Never let an image model redraw it. Composite the real SVG on top of generated art.
- Favicon is its own single-color job, tested at real 16px — never the lockup scaled down. The sail triangle alone survives 16px; the full lockup does not.
10. Voice
"Canvas" is the surface and the sail. "Current" is the water, the momentum, and the state of being current. The copy leans on that double meaning without ever explaining it. No em dashes in client copy, ever (house §8c). No widows on any heading.