three signals · each one meaning exactly one thing
#C8102E signal /red/
The gap. Always.
Appears only when marking a stated preference that contradicts revealed behavior. Strike-throughs, "before" columns, the moment where stated and did diverge. If it isn't marking the gap, it isn't red.
Use forStrike-throughs on stated quotes"Before" column backgroundsFiling codes (§, Nº) · numerator onlyHeadlines · buttons · links · icons
oklch 0.53 0.21 22
Contrast 5.88:1 on Kong paper 4.75:1 on ink as --red-on-dark
#1B165B ink /kong/
The voice. Always.
The company voice. The revealed column. The weight of every number we publish. If it isn't our word, it isn't ink.
Use forHeadlines · body · product UI"After" column backgroundsThe highlight behind any numberGradients · tint-overlays · alphas <80%
oklch 0.26 0.12 278
Contrast 16.0:1 on Kong paper
#FFFFFF paper /kong/
The page. Kong white.
The canvas is the theme's light color. Kong paper is pure white, #FFFFFF, on every surface.
Use forEvery marketing canvasOne-pager, deck, essay, paperProduct splash & loading statesOff-white hex in place of the token
oklch 1.00 0.00 0
Against ink 16.0:1
Paired themes.
Light-on-dark theme pairs from the homepage spacebar. One per section, used as a full section takeover, not as an accent. Commit to the pair, or keep the default.
Chart palette.
Five hues for charts and data-viz that need more than greyscale. Distinct from signal red, so the gap stays the gap. Press M to flip light↔dark; the palette rotates with the mode.
--chart-1
--chart-2
--chart-3
--chart-4
--chart-5
Nine rules.
§1Do use red to mark the gap. Stated preferences. Strike-throughs. §codes.Red is not an accent. Not a CTA. Not a link.
§2Do use ink (var(--color)) for the company voice and every number.Never a raw hex, a tint, or a softened ink.
§3Do ship on paper (var(--backgroundColor)). Kong paper is white.Never an off-white hex in place of the token.
§4Do adopt a paired theme for an entire section. Cover, break, closer.Paired themes are takeovers, not accents.
§5Do use one theme per document. The homepage is the exception.Two paired themes on one page reads as inconsistent.
§6Do use the paired-light color as the headline; the paired-dark as the ground.Do not flip the pair for variety.
§7Do treat every color as 100% opacity. Full chroma or nothing.Gradients, tints, and 10–20% alphas are out of system.
§8Do pick one theme per investor, segment, or campaign, and hold it.Mixing themes by slide breaks the document.
§9Do use data-viz greyscale for inside-chart distinctions; the signal stays a signal.Six-color rainbow charts are out of system.
In situ. Same content, three takeovers.
Kong · ink on paper
The customers said a dark, robust blend.
for · everything unless spec says otherwise
Peacock · takeover
The customers said a dark, robust blend.
for · research · academic · field notes
Indigo · takeover
The customers said a dark, robust blend.
for · keynote · academic · paper
Jones · takeover
The customers said a dark, robust blend.
for · investor · heritage · warm
Takeover lab.
Click a theme to see a full section takeover. Red never swaps. The gap is always red.
subconscious · one section, one themeLab · live · Nº 02b
#1B165B · #FFFFFF kong
They said loyalty. They did churn.
Stated preference
73%"Likely to stay 12+ months"
Revealed behavior
41%Still active at day 180
The gap
−32ppmeasured in 14 days
SignalsInk · var(--color) Red · #C8102E · the gap only Paper · var(--backgroundColor)