Foundation
Colour
Surfaces
Five steps from true black. Every one of them is a neutral — the ramp is the entire structural vocabulary of the interface.
--background0 0% 0%
The page
--background-secondary0 0% 4%
Sidebars
--surface0 0% 7.5%
Modals, cards, toolbars
--background-tertiary0 0% 10%
Inset wells
--background-hover0 0% 15%
Hover
Steps of 4, 3.5, 2.5 and 5 percentage points. They are close together on purpose: the difference between two surfaces should be felt rather than noticed, and the hairline border is what actually draws the edge.
Text
Four steps of emphasis, and a discipline about which one is the default.
--foreground0 0% 100%
Headings, active
--foreground-secondary0 0% 63%
Body copy
--foreground-tertiary0 0% 42%
Metadata
--foreground-disabled0 0% 29%
Unavailable
Body copy is secondary, not foreground
This is the mistake most often made against this system. Pure white is reserved for headings, active navigation and anything that must win — set it on everything and the hierarchy flattens to nothing. Read a paragraph in 63% and it is comfortable; read a screen in 100% and it is exhausting.
Status
The only saturated colour. Reserved for meaning, never for decoration.
--success112 100% 55%
Positive deltas
--warning38 92% 50%
Attention
--destructive0 84% 60%
Irreversible
--chart-5217 91% 60%
Chart series
Success is a deliberately neon green — it exists to make an upward trend legible at a glance against black, not to be pleasant in a paragraph. Do not use it for text longer than a delta.
A note on Lantern's own glow
This site uses a warm accent the product does not.
The amber wash behind the hero, the eyebrow labels and the caveat panels is --lantern, and it is --warning reused verbatim rather than a new brand colour. It is documentation chrome — it names the system, it is not part of it. Never use it in a component.