Design tokens in existing CSS.

How stylesheets drift

Projects tend to start with a small palette and a clear spacing scale. A few months of edits later there are six slightly different grays and four values that all mean "base padding," because each change was made locally without a view of what already existed.

The usual fix is grep-and-replace: search for #3b82f6, find twelve instances, replace them with var(--color-primary). Then it turns out three of those were deliberately different, or one was hiding in a utility class, and the rest of the afternoon goes to checking pages in the browser for what broke.

Where grep falls short

Grep matches text, not meaning. It can't tell a hex code in a comment from one in a border property, and it won't tell you that two values are close enough that they were probably meant to be the same one.

Take this CSS:

.card {
  background-color: #f9fafb;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.button-secondary {
  background-color: #f3f4f6;
  padding: 15px;
  color: #374151;
}

Are #f9fafb and #f3f4f6 two distinct tokens, or did two people pick "off-white" at different times? Is 15px deliberate, or a typo for 16px? Grep can't answer either question — someone has to look at the rendered result while making the call.

Consolidating with Kerf

The design token tool in Kerf Pro scans the project folder for repeated colors, spacing, and typography, and also groups near-duplicate colors and near-duplicate numeric values as merge candidates. You select a repeated value, give it a name like --gray-50, and Kerf rewrites every instance across your CSS files. Because this happens inside the editor, the live preview shows the effect of each replacement as it's made.

Before and after

Consider a fragmented stylesheet:

/* Before consolidation */
.header {
  color: #111827;
  margin-bottom: 24px;
}

.sidebar-item {
  color: #1f2937;
  padding-left: 23px;
}

.footer-text {
  color: #111827;
}

Kerf flags #111827 and #1f2937 as visually similar grays, and 23px and 24px as near-duplicate spacing values. You confirm the merge; Kerf writes the tokens and rewrites every reference:

/* After Kerf consolidation */
:root {
  --text-main: #111827;
  --spacing-lg: 24px;
}

.header {
  color: var(--text-main);
  margin-bottom: var(--spacing-lg);
}

.sidebar-item {
  color: var(--text-main);
  padding-left: var(--spacing-lg);
}

.footer-text {
  color: var(--text-main);
}

What you end up with

The point of the exercise is a stylesheet where each color and spacing value exists once, under a name, so the next theme change is an edit to one line. Doing the consolidation where you can see each replacement render makes it a routine cleanup rather than a risky one.