Surfaces
Every section uses one of five surfaces — canvas · light-grey · primary · dark-blue · ink-deep. Each surface prescribes which colors to use for headings, body text, emphasis, and CTAs so the content stays readable. This page documents what goes on which background. The single source for color values is app/_v2/tokens.css; guardrails live in docs/design.md.
Color Matrix by Surface
Recommended text, emphasis, and CTA colors for each of the five surfaces. Key rule: when the title uses primary, CTAs must use dark or sky — never repeat the same color. sky-blue is reserved for emphasis text only and is never used as a section background.
| Surface | Title | Subtitle | Body | Body (muted) | Emphasis | Recommended CTA color |
|---|---|---|---|---|---|---|
| canvas | primary · ink-deep | ink-deep | ink | grey | primary | dark + sky |
| light-grey | primary | ink-deep | ink | grey | primary | dark + sky |
| primary | white | sky-light | white | sky-light | sky | white + dark |
| dark-blue | white | white | white | light-grey | sky | white + primary |
| ink-deep | white · sky | white | light-grey | grey | sky | white + primary/sky |
In Practice
The matrix applied directly to all five surfaces. The CTA chips are illustrations of the recommended color pairings — real button components use the outline-default .btn (Button docs). This demo shows the brand surface definitions in light mode and stays fixed regardless of the dark mode toggle.
Change We Build Together
Heading, body, and CTA colors are determined by the chosen surface.
8-Week AI Bootcamp
Heading, body, and CTA colors are determined by the chosen surface.
3 Program Tracks
Heading, body, and CTA colors are determined by the chosen surface.
Learn from Working AI Engineers
Heading, body, and CTA colors are determined by the chosen surface.
AI Is Your Colleague
Heading, body, and CTA colors are determined by the chosen surface.
Section Rotation
Scrolling top to bottom, never place the same-color surface in two consecutive sections. The recommended cadence alternates canvas → primary → light-grey → canvas … — not enforced, but use it as a baseline for page rhythm.
- Recommended sequence — canvas → primary → light-grey → canvas. As long as you avoid consecutive same-color sections, the order can follow the content.
- ink-deep full-card as a variation — place an ink-deep rounded box inside a canvas section to add visual breathing room.
- CTAs follow the section surface — on primary → white + dark; on dark-blue → white + primary.
Rules
Contrast rules for placing colors on a surface. Follows the color guardrails in design.md §4·§5.
Never use a CTA the same color as its background. A primary CTA on a primary surface or an ink-deep CTA on ink-deep disappears — the contrast is too low. Always choose a tone that clearly differs from the background.
Do not use a standalone primary CTA on ink-deep — use sky instead. Primary blue lacks sufficient contrast against the deep navy background. Lift emphasis and CTAs to sky (same rule as dark mode link colors).
Only one dark surface per section. Stacking dark tones — e.g. a primary card on ink-deep, or an ink-deep card on primary — feels suffocating. Content on dark surfaces should use white, sky, or light-grey to breathe.
Never use sky-blue as a section background. Sky is reserved for emphasis text and accents only — never as a large-area background.
Only these five surfaces. Do not introduce arbitrary background colors beyond canvas · light-grey · primary · dark-blue · ink-deep. Depth is expressed through solid fills plus shadow or border lines — Gradients are restricted to LIGHT×LIGHT wash only.