Token Propagation

Token propagation is the systematic updating of design token values across every file, component, and package in your product so that a single brand decision reaches completion without half measures or lingering inconsistencies. Your brand team decides the new primary blue needs to feel more trustworthy after customer interviews. You update the primitive color token in one place. Semantic tokens that reference it update automatically. Every button variant, every status indicator, every chart accent, every marketing hero that uses --color-semantic-primary shifts in perfect sync. Without Claude Code this process is a nightmare of cross repository searches, forgotten utility classes in random folders, late night production bug fixes, and that one enterprise client still running the old version you forgot about. With it you simply describe the outcome in plain language, reference your established token architecture from the CLAUDE.md you have been refining for months, and let the agent hunt down every reference while respecting your existing component boundaries, your lint rules, your type checks, and your visual regression suite. The courage barrier disappears because the model has no ego about suggesting changes and no fear of breaking something it does not understand. It just executes at machine speed while you stay in the art director seat.

It is not a glorified find and replace that any basic script could handle. Real token propagation respects the difference between primitive tokens like --color-blue-500 and semantic ones like --color-semantic-primary that might map differently in dark mode or high contrast themes. It is not something you trust without review because even the best agent can miss context that lives only in your head as a designer who has watched users struggle with contrast for two years. It is not a tool for making the initial decisions about what your token set should contain or whether a particular blue communicates trust to finance users at 2 a.m. Those foundational choices still require human taste, user research, and brand strategy work. The propagation step is where Claude Code shines by removing the tedious, error prone labor that normally follows a good decision and turns it into something that ships before lunch.

A concrete example happened in Q3 2024 with Lumina Health. After user testing revealed their clinical blue felt too cold for patients over 55, the brand team selected a warmer indigo with better accessibility scores. Their system had primitives at the base, semantic tokens in the middle, and component specific applications at the top. The prompt was direct: Update --primitive-indigo-600 to the new hex from our latest Figma variables file. Cascade the change through all semantic color tokens that depend on it including all hover, focus, active, and disabled states in both light and dark modes. Update every component in the React library, the Next.js marketing site, the investor portal, and the Storybook instances. Run typecheck, lint, Chromatic tests, and attach visual before and after comparisons for the main dashboard and the appointment booking flow. Claude Code finished in 23 minutes. The resulting PR touched 143 files but remained focused and readable. It even surfaced a deprecated utility file that was still hardcoding the old color value instead of using the token. Our review caught a small issue with a border radius in one data table that looked unbalanced with the new color weight. We fed that feedback back into the CLAUDE.md for next time, ran the tests again, and merged the update before lunch. What would have been a two week cross team project became a half day task owned entirely by design.

Another concrete case came during Pinnacle Systems 2024 density overhaul. Research showed their tight spacing contributed to fatigue during long trading sessions on their enterprise platform. We adjusted the base spacing unit from 4px to 6px affecting the entire scale from --space-1 all the way through --space-7. This touched grid systems, form layouts, data table cell padding, modal spacing, icon dimensions, and even some chart grid lines that referenced the scale. The monorepo contained four major packages with different tech stacks including a legacy Vue component library from an acquisition. The CLAUDE.md contained explicit instructions about never introducing new spacing utilities, always updating the documentation when the scale changed, and maintaining backward compatibility for the two largest clients still on the old version. Claude followed those rules perfectly. It proposed specific overrides for three components where pure token usage would have created visual problems, generated a clear migration guide with code comments, updated all test snapshots, ran the Playwright visual regression suite against the last production deploy, and produced a detailed summary of risk areas with screenshots. The whole workflow took 90 minutes from opening the terminal to merging the PR. The design team retained full art direction by reviewing every visual change instead of wasting time on the mechanical updates.

The typography unification at VoltBank after their 2025 acquisition provides a third example. They needed to consolidate two different type scales into one coherent system using their new brand font. This involved changing five heading levels, three body sizes, and specific token values for labels, buttons, data visualizations, and legal disclaimers. Because we had documented all the components and their typography token dependencies in CLAUDE.md over the previous six months, the agent avoided creating new inconsistent solutions or hallucinating extra font weights. It updated the core token file, the Tailwind configuration, the CSS custom property definitions, the Figma plugin mappings using the MCP connection for direct frame access, and every usage across the newly combined codebase. It even adjusted some line height ratios to maintain readability at the new sizes and flagged three places where text truncation could occur in narrow sidebar components used by compliance teams. The visual review step caught a weight issue in the navigation that felt too heavy next to the new brand logo. One follow up prompt fixed it. Total time end to end was under two hours.

You should use token propagation with Claude Code whenever your design system has reached sufficient maturity that tokens are truly the single source of truth rather than suggestions. This approach excels for quarterly brand refreshes, accessibility driven contrast updates after legal review, density changes based on user research findings, or system unification after mergers. It requires a well crafted CLAUDE.md that explains your token layers, your testing requirements, examples of past successful updates, and the exact voice you expect in generated changelogs. The repo must have decent test coverage so you can trust the output and move fast. Avoid this workflow when your codebase still relies heavily on magic numbers, inline styles, and scattered hex values with no central token file. The agent will simply propagate bad habits at high speed and create more debt than it clears. Do not use it when you are still exploring what the new visual direction should be or when the change involves subjective taste calls about emotional tone. The model cannot replace the designer's role in feeling whether a change lands with users or aligns with long term brand strategy. Those calls remain human work. Once the direction is set though, hand the propagation to Claude without hesitation and review the diff like you would any junior designer mockup.

Token propagation with Claude Code turns those once terrifying brand evolution moments from dreaded week long fire drills that stall entire roadmaps into predictable repeatable processes that a single designer can ship in minutes while maintaining perfect consistency.