Color Semantics
The Signal Colors — the small set that means the same thing everywhere, unlike the vibrant eight
Behavior & governance
The vibrant eight are decoration: one accent per idea, reassigned freely on every new page. Signal colors are the opposite — a fixed vocabulary. If magenta means "probabilistic" on one screen, it means "probabilistic" on every screen, forever, the same way a stop sign is red everywhere and not just at this one intersection. This page defines that vocabulary: what exists today, why each pairing was chosen, and the rule for adding to it later without turning color into noise.
00
Decorative accents vs. signal colors
Three color systems now live side by side, and confusing them is the one real risk. Each answers a different question, and none of them may borrow another's job without saying so.
Teal — "this is the Onboarding section"
Pass — "this check succeeded"
Fail — "this check failed"
Charcoal — "this function is deterministic"
Magenta — "this call is probabilistic"
Three color systems
Section · outcome · identity
Decorative (which section), feedback (what just happened), signal (what this thing is).
A color can only answer one of these questions on a given page. Mixing jobs is how a system trains people to stop trusting color.
Yours: signal colors are read before any label loads — the fastest thing on the screen to notice.
01
Deterministic (charcoal) / Probabilistic (magenta)
Same input, same output, every time — deterministic, and the color should be boring on purpose: charcoal, dark, structurally strong, nothing to look at twice. A model call can answer differently on the next run — probabilistic — and the color should say so: magenta, because a calm color here would be dishonest about the actual risk.
Deterministic
Same in, same out
A currency converter, a hash function, a sort. Boring on purpose — nothing here should demand a second look.
Probabilistic
Could answer differently
An LLM call, a ranking model, a fuzzy match. The color should feel like risk, because there is some.
Light theme
Charcoal 303540Magenta EE4FD3
Dark theme
Charcoal C1C5CDMagenta F877E2
Determinism
Charcoal · Magenta
The first signal pair. Ported from prior work, not invented here.
--charcoal:#303540 is dark enough to double as its own text-on-tint ink — no separate darkening step, unlike the vibrant eight.
--magenta:#EE4FD3 is the same hex as the decorative accent. Verified: 5.99:1 on white as ink, 7.1:1 lifted on charcoal.
Disambiguation: decorative magenta appears as a section highlight (brush, left-border, hero word) with no label attached. Signal magenta ALWAYS appears on a badge, dot, or icon paired with a word like "probabilistic" or "estimate." If it's naming a behavior, it's a signal. If it's just marking a section, it's decoration.
02
Human (terracotta) / Agent (steel)
Independent of determinism — a human can guess, an agent can run a deterministic script. This pair answers a different question: who or what actually produced this thing. Warm and textured for a person, cool and uniform for a machine, and neither one borrows a color that already has a decorative job.
Human
A person made this
Written, approved, or overridden by a person. Warm and slightly imperfect, on purpose.
Agent
An agent made this
Generated, run, or decided by an AI agent with no human in the loop yet. Cool and uniform.
Terracotta BE702D
Steel 60728A
Provenance
Terracotta · Steel
New hexes, not reused — provenance needs its own vocabulary.
Both verified at 6.7:1 / 8.4:1 on white as ink, 7.3:1 / 6.9:1 lifted on charcoal.
Why not coral or blue: both already carry a decorative, page-specific meaning. Reusing them for provenance would mean the same hue answers two unrelated questions depending on which page you're on.
03
Reversible / irreversible — reuses pass and fail, on purpose
The instinct here is to invent a fourth color pair. Don't. "Safe to proceed" and "stop, this can't be undone" is the same feeling --pass and --fail already carry. A new hex for an old meaning is a redundant coinage — the same mistake the Never List exists to catch, just made in color instead of words.
Reversible — undo available
Irreversible — confirm first
Check first, coin second. Before adding a signal color, ask whether an existing pair already carries the feeling you need. Only mint a new hex when the answer is genuinely no — see job 06.
Reversibility
No new hex
The teaching moment of this page: restraint is also a design decision.
--pass / --fail already live in living-styleguide-states.html. This job only documents the reuse — it changes no token.
Yours: same discipline as the vocabulary-ownership rule — reuse the field's real word (or color) rather than invent a private synonym.
04
The confidence gradient — when it isn't binary
A cache hit is certain. A rules-based heuristic is an educated guess. A raw model call is a real gamble. Instead of naming a third color for the middle ground, interpolate between the two poles you already have — the gradient answers "what color is 60% confidence" without adding a word to the vocabulary.
0%50%100%
CertainCached, deterministic, or already verified.
EstimatedA heuristic or rule of thumb — informed, not guaranteed.
ProbabilisticA live model call. Could differ on the next run.
The gradient
One continuum, two named poles
No new named colors between charcoal and magenta.
5 CSS stops: #303540 → #603B65 → #8F4289 → #BF48AE → #EE4FD3, linear-interpolated in RGB.
Yours: use the gradient only when a real numeric confidence exists. A gradient with no number behind it is decoration wearing a lab coat.
05
Using signals in a real UI
A signal color always rides with a label or icon — never alone. Roughly 1 in 12 men can't reliably tell some hue pairs apart, so a badge that's only a colored dot with no word on it has already failed a real fraction of your readers before it's said anything.
convertCurrency(amount, rate)Deterministic
rankSearchResults(query)ProbabilisticAgent
applyDiscountRule(cart)DeterministicHuman
summarizeTicket(thread)ProbabilisticIrreversible send
Real usage
Dot + word, always
A row can carry more than one signal — determinism and provenance answer different questions.
Never ship a signal as color-only. The word is load-bearing; the color is reinforcement.
Yours: this is the same "the interface always answers" principle from States & Feedback, applied to identity instead of outcome.
06
Adding a new signal color
The same obligation that applies to a coined word applies to a coined color: define it, make the definition findable, and don't skip the check that might mean you didn't need a new one at all.
01Check for an existing meaning first.Reversibility didn't need a new color — pass/fail already meant it. Most "new" needs are an old signal in a new outfit.
02Confirm it's answering the identity question, not the section or outcome question.If the answer changes per page, it's a decorative accent, not a signal — it belongs in the vibrant eight's rotation, not here.
03Pick a hue no existing accent or signal already owns.Terracotta and steel were chosen specifically because coral and blue already had decorative jobs.
04Produce all four variants and verify contrast.Light base, light-ink (≥4.5:1 on white), dark-lifted, dark-ink (≥4.5:1 on charcoal) — the same treatment every vibrant-eight color gets.
05Add it here before it ships anywhere else.A signal color with no entry on this page is Fog Two: the next reader fills the gap with a guess about what it means.