Using raw values directly bypasses the system

What it is

Writing #1677FF, 13px, or a shadow copied off a screenshot inside a component opens a private fork beside the token graph. Hardcoded value bypass is not a taste in authoring; it is a second source of truth. Theme generation, density shifts, and audits walk the token graph and never see the literal. The UI still imports the library; the decision has already leaked.

Bypass happens at the call site. It is a different failure from “the tokens were not layered.” Layers can be perfect and a literal can still slip around them.

Why it happens

A token pipeline can update only the nodes it owns. A literal was never a node, so retargeting a theme, changing density, or asking “who still uses this blue” all miss it. It shows up in visual regression as the one surface that did not follow, yet a search for the token name finds nothing — only the hex, which also appears legally inside the primitive file, mixing false hits with real leaks.

Bypass copies itself. The next author sees the literal on a neighboring component and treats it as the value in force. The token source becomes documentation; the copies become the product. The system does not fail by lacking tokens. It fails when tokens exist and call sites still have a side door.

Where it stops holding

Third-party embeds, user-agent styles, and values inside a CSS reset were never on your graph; they are not bypass. Prototypes written before a token set exists may use literals, but those literals must be absorbed before they land on the main branch. Quantitative palettes in data visualization sometimes need computed color rather than role tokens — that is deliberate off-system use and must be marked, not mixed with pasted hex. Email clients that cannot resolve custom properties may emit flattened literals at build time; those are artifacts, not source-level bypass.

Applying it

• Lint product styles and components so hex, raw px, and raw type sizes are legal only inside the primitive token file.
• Record exceptions as an explicit allowlist (third-party selectors, viz scales). A comment that says “for now” is not a standing exception.
• After swapping a semantic color, run visual diff and flag screenshots where only one page failed to follow.
• How to check: search the repo for # and for px not wrapped in a token function. Every hit is either on the allowlist or rewritten to a semantic name. Hits outside the allowlist mean the system was bypassed.

Related

• Same group: R1.01.1 Tokens turn design decisions into named, distributable values · R1.01.2 Semantic tokens and primitive tokens need separate layers · R1.01.4 Theme switching retargets the semantic layer, not raw values
• Nearby: R1.18 Adoption and compliance metrics · R1.09 Token layers and semantic naming
• Search terms: hardcoded value bypass · magic number · token lint