02 · Palette
Color
Navy and slate do the quiet work; paper carries the reading; amber is the single pop accent. Underneath sits a topographic elevation ramp — terrain for the terrain metaphor. Click any chip to copy its value.
Core palette
Seven named colors
Four brand colors, a brighter amber for dark surfaces, a destructive red, and a strictly functional blue.
Topo ramp
Eight steps of elevation
DiffLab’s core metaphor is terrain: we map complexity and guide clients through it. The ramp climbs from deep navy ocean floor through slate lowlands and warm highlands to snow — paper white at the summit. Use it for elevation-encoded data, contour backgrounds, and depth cues; never as decoration-by-the-handful.
Semantic tokens
Light and dark, one vocabulary
Never style with raw values — style with roles. Each semantic token resolves per theme; the brand site is dark-first, internal apps are light-first, and both draw from this table.
| Token | Role | Light | Dark |
|---|---|---|---|
--dl-bg |
Page background | hsl(210 40% 98%) paper |
hsl(218 44% 18%) navy |
--dl-surface |
Cards, panels | #ffffff |
hsl(218 44% 22%) |
--dl-surface-raised |
Elevated surfaces | #ffffff |
hsl(218 42% 26%) |
--dl-fg |
Primary text | #111827 |
hsl(210 40% 98%) paper |
--dl-fg-muted |
Secondary text | #4B5563 |
hsl(215 20% 72%) |
--dl-border |
Hairlines, dividers | hsl(214 32% 91%) |
hsl(218 30% 30%) |
--dl-accent |
The pop accent | hsl(38 92% 50%) amber |
hsl(43 96% 56%) amber-bright |
--dl-accent-fg |
Text on accent | #ffffff |
hsl(218 44% 18%) navy |
--dl-link |
Links | #0085FF functional blue |
hsl(43 96% 56%) amber-bright |
App status colors
Four fg/bg pairs
Internal apps signal state with paired colors: a strong foreground on a
soft background, rendered as pill badges (radius
--dl-radius-badge). Always use the pair together — never mix
a foreground with another pair’s background.
Pairing rules
Which colors, which surface
Marketing surfaces are dark-first: navy ground, paper text, amber as the single pop. Internal apps are light-first: white surfaces, navy sidebar, functional blue for links and info.
Marketing surface
Navy ground, amber pop
Dark-first. Paper for reading, slate for the quiet parts. No blue here — ever.
Light-first. Navy gradient sidebar, amber active state, and blue links for function.
- Marketing: navy background, paper text, amber accents — dark-first with a working light theme.
- Internal apps: white surfaces, navy gradient sidebar, light-first.
- Amber is the pop accent — one accent, used sparingly, everywhere.
- Use amber-bright
#fbbf24as the accent on dark surfaces. - Blue
#0085FFfor links and info inside app UIs only. - Reach for the topo ramp when encoding depth or elevation.
- Don’t use functional blue on marketing surfaces — not for links, not for decoration.
- Don’t introduce a second accent color alongside amber.
- Don’t flood layouts with amber — it pops because it is scarce.
- Don’t hard-code raw hex where a
--dl-*token exists. - Don’t split a status pair — foregrounds and backgrounds travel together.
- Don’t use destructive red for emphasis; it means danger only.