Skip to content

Token Exceptions

Colors deliberately kept off the token system, and where they live. Everything not listed here is on the shared tokens (core + product) — these are the considered exceptions.

Hero slideshow gradients

~32 values · content data

The rotating hero phrase (“job site” / “team coordination”…) cycles through a set of background gradients defined as a data array. These vary per slide — they're content, not styling drift — so collapsing them onto tokens would flatten the slideshow.

slide Aslide Bslide C
components/marketing/home-config.ts

Problem illustration

~27 values · illustration

The animated Time / Money / Sanity graphic uses one distinct color per concept plus a navy scene gradient. Like the dashboard's categorical palettes, these are an illustration's content — they must stay mutually distinct, so they're kept raw rather than collapsed onto the semantic tokens.

TimeMoneySanity
components/ui/problem-solution-cards.tsxcomponents/marketing/problem-section.tsx

Device & browser bezels

~7 values · fixed dark

The product previews sit inside a near-black browser window / phone bezel. The bezel is the physical frame around the “screen” and is intentionally dark in both themes. The displays themselves are NOT exceptions — they're on the product palette (app-*) and pinned to the light theme so they never half-flip.

browser framebezel / URL bar
components/ui/dashboard-mockup.tsxcomponents/ui/mobile-app-mockup.tsxcomponents/ui/feature-demo-section.tsx

Design-system swatches

~15 values · reference

These very pages render raw color and shadow values as live examples (the color grid, the shadow demos). The hard-coded values ARE the documentation — they show what the tokens resolve to, so they're deliberately literal.

app/design/colors/page.tsxapp/design/components/page.tsxapp/design/shadows/page.tsxapp/design/_components/design-kit.tsx

False positives (not colors)

2 matches · n/a

Two strings match a color regex but aren't colors: a GitHub issue reference (#11538) in a code comment, and the HTML entity ' (an apostrophe) escaped in the contact API. Listed so a future audit doesn't chase them.

components/layout/translate-guard.tsxapp/api/contact/route.ts