When Design Says "Coral" and Engineering Ships the Wrong Orange

Slack thread: “Use coral for the CTA.” Engineering greps MDN, finds coral → #FF7F50, ships it. Design opens the staging link and winces — their Figma style Coral / Brand is #FF6F61. The word matched. The color did not.

Three vocabularies in one meeting

Vocabulary	Example	Authority
CSS keywords	coral, tomato, rebeccapurple	Spec / browsers
Brand tokens	color.cta.primary	Design system
Colloquial	”that sunset orange”	Meeting chatter

CSS names are convenient in throwaway demos and teaching. Product UI should key off tokens that resolve to exact coordinates in a color space you control. Colloquial names belong in conversation only until someone binds them to a token.

Handoff playbook that prevents coral-gate

1. In Figma, publish styles with token-aligned names (cta/primary), not poetic duplicates of CSS keywords.
2. In PRs, reference tokens — var(--color-cta-primary) — never raw “coral.”
3. If a ticket must use a word, attach the hex in the same sentence: “coral (#FF6F61).”
4. When importing a moodboard hex, search nearest CSS names only to help non-designers discuss — then discard the name for implementation.

A color name search is handy when a stakeholder says “more like salmon” and you need a shared reference. It is a dictionary, not a source of truth for brand.

Accessibility and “the same red”

Named colors do not encode contrast. Two reds that look related in a name search can fail WCAG on white text. Pair handoff with contrast checks against actual backgrounds. Dark mode tokens often need different hexes under the same semantic name (danger ≠ one hex forever).

Documentation patterns

Good:

:root {
  --color-danger: #b42318; /* semantic; not "CSS red" */
}

Risky:

.button { background: coral; } /* keyword ≠ brand */

List brand hexes in a table in the design README with optional “nearest CSS keyword” for education. Engineers learning the system should never have to guess from English adjectives.

Design tokens across platforms

iOS and Android may receive the same hex via a shared tokens package (Style Dictionary, JSON). Named CSS keywords do not travel there. If marketing still speaks in color words, maintain a glossary: word → token → hex/OKLCH. Update the glossary in the same PR as the token change so Slack search finds the truth.

When approximating a competitor’s palette for a moodboard, nearest-name search is a conversation starter. When shipping your own brand, nearest-name is trivia — ship the measured value.

Picking names that do not collide

Avoid token names that are also CSS keywords (red, gray, coral) unless the value intentionally matches the keyword. Prefer brand/coral-600 or cta/emphasis. Engineers grepping for coral should land in tokens, not in a debate about MDN.

Dark theme variants need paired values under the same semantic key. A single hex named “coral” cannot serve both themes; the semantic name can.

Print and merchandise vendors often ask for Pantone or CMYK. Hex is a starting point, not a press-ready spec — note color management separately so engineering hex does not get blamed for a hoodie that “looks off.”

Designers are not wrong for speaking color language. Engineers are not wrong for wanting hex. The bug is the missing join table between them. Build that table once in tokens, and “coral” becomes a meeting word — while production keeps shipping #FF6F61 until brand updates the token deliberately.