Loom
Book a conversation
Menu

The look stays when values become tokens

The base button rule of an open-source notes app, before and after conversion to the tokens Loom generated for it. The browser compares the computed styles: the look stays the same. Partial The "after" rule was written by hand from the generated token names; automatic rewriting is a concept.

The same button. A new structure underneath.

Tokens from real output · rewrite by hand

The base button rule of takenote, an open-source notes app (MIT), before and after conversion. After conversion, the same rule reads the tokens Loom generated for it. Move the slider: the rule converts value by value, and the look stays the same.

Before · _buttons.scss (takenote)
%buttons {
border: 2px solid $primary;
border-radius: 0.3rem;
background: $primary;
color: white;
font-weight: 600;
font-size: 1rem;
padding: 0.5rem 0.75rem;
margin: 0 0 0.5rem 0;
line-height: 1;
}
After · on generated tokens
.button {
border: 2px solid var(--semantic-action-primary);
border-radius: 0.3rem; /* no token yet */
background: var(--semantic-action-primary);
color: var(--palette-gray-10);
font-weight: 600;
font-size: 1rem;
padding: var(--space-3) 0.75rem; /* 12px: off scale */
margin: 0 0 var(--space-3) 0;
line-height: 1;
}

What each token resolves to, in the generated file

  • var(--semantic-action-primary) → {proto.primary} → #5183f5 needs a human decision
  • var(--palette-gray-10) → #ffffff needs a human decision
  • var(--space-3) → 8px needs a human decision

Token names, values and statuses are copied from the token file Loom’s conversion generated for takenote (24 October 2026). The after rule was written by hand for this page from those names; rewriting stylesheets automatically (codemods) is a concept.

Start with a conversation about your system.

We read your system, show you what we found, and agree with your team what to fix first.

Book a conversation Start with a free health check