Skip to main content
Home/Recipes/Refactor hardcoded colors to token variables
Code & Tokens

32.Refactor hardcoded colors to token variables

Developer

Overview

Extract tokens from the live site. Use Cursor to find every hardcoded color, spacing, or radius value in the codebase and replace it with the correct token variable.

Codebases accumulate hardcoded values over time: hex colors in component files, pixel spacing values in utility classes, arbitrary border radii scattered across stylesheets. Extract the live site's token set with Dembrandt to establish the correct values, then load both the extraction JSON and the codebase into Cursor. Ask the agent to audit every hardcoded value, match it against the token set, and replace it with the correct CSS variable reference. The result is a codebase with a single source of truth for every visual property.

Extract live tokens

Terminal
dembrandt app.company.com --json-only
Cursor prompt
# With extraction JSON and codebase in context:
"Find every hardcoded color (#hex, rgb(), hsl()),
spacing value (px, rem), and border-radius in this codebase.
Replace each with the matching CSS variable from the
extracted token set. Show a summary of all replacements."
Output

Codebase with hardcoded values replaced by token variables.

Browse all

All recipes →

43 workflows