Tokens, type, and the decisions that stop visual drift

Design tokens explained in practice are names for decisions you do not want to remake on every screen. A token is the color, the size, the radius, the space. The name is the point. A screen that needs ink uses the name ink. It does not carry a private copy of the value.

Visual drift starts in the gap between those two habits. Someone needs a card to look a little quieter, so they paste a hex value into that frame. The card is fine. The next card copies the hex, or invents a neighbor of it. Six weeks later the product has four grays, three of which nobody can tell apart, and no one remembers which one is allowed.

A token is a decision with a name

Treat each token as a sentence the team has agreed to. Paper is the page background. Ink is the text you expect people to read. Line is the hairline between regions. Accent is the one color that means action. The sentence can be wrong, and then you change it once. The sentence cannot be local. A local color is how a product grows a second palette by accident.

The same rule applies to type. A token for body size is the decision that paragraphs are this size, at this line height, in this weight. A token for the page title is a different decision. When a designer sets a headline at an in-between size because the layout felt tight, that size is a new decision hiding inside one frame. Name it, or return to the size you already named.

Radius and space work the same way. A radius token says corners on controls are this round. A space token says related items sit this far apart. Drift in space is harder to see than drift in color, and it makes a product feel assembled even when the palette is disciplined. If two cards use different padding, they read as two products.

Where type drifts first

Type drifts before color on a lot of early products, because type is easy to nudge. A heading is a pixel too large for the card, so the size becomes 22 instead of the named 24. A label feels heavy, so the weight drops on that one screen. None of these edits look like a rebellion. Each one is a reasonable response to a tight layout.

The fix is a short scale and a rule for exceptions. Four sizes cover a marketing page and a simple product: title, section, body, label. Weights stay at the ones the brand actually uses, often a regular and a medium. If a screen cannot be set with those, the layout is the problem. Tightening the card, or cutting a line of copy, keeps the scale intact. Inventing a fifth size teaches the next person that the scale is optional.

Write the scale where both design and code can see it. In Figma, text styles with the same names the code uses. In the repository, those names as theme values. Hanabi's builds use Tailwind on React and TypeScript, so a type token is a utility the component already consumes. An engineer should not have to translate "the big one" into a pixel value during review.

Line length belongs with type even when it is not a token in the strict sense. A measure that is comfortable on the marketing site and a measure that fits a dashboard column are different decisions. Name them if both exist. Leaving line length to each layout is how articles become too wide and tables become unreadably narrow.

Color, hex values, and contrast

A hex value in a one-off screen is the usual start of color drift. The person who pasted it can still see the original swatch in their head. The next person sees two blues and picks a third to split the difference. Naming the color stops the negotiation. There is accent, and there is the color you are asking to add. Adding it means retiring something or accepting a longer list on purpose.

Contrast is part of the color decision, not a coat of polish. The W3C's Web Content Accessibility Guidelines describe a shared standard so content can be perceived and operated. A token pair should be checked as a pair: ink on paper, muted text on a surface, accent on the button fill. If a pair fails, change the token. Do not keep the pretty value and hope a later audit will negotiate with it. A dark theme, if you have one, is a second set of pairs with the same names. That second set is its own decision, made with the first.

Limit the list. One neutral family is enough for an early product: paper, a raised surface, ink, muted ink, and a line. One accent. One danger color if errors need to be unmistakable. Brand work sometimes wants a second accent for illustration. Put that in the brand notes, and keep it out of product text until a screen truly needs it. Every extra color is a future argument.

How a value sneaks back in

Drift returns through imports. A charting library ships its own palette. A component kit ships its own gray. An icon set ships its own stroke color. If those values land on the page unchanged, you have invited a second system in through a dependency. Map them to your tokens at the boundary. The chart uses ink and accent. The kit button uses your radius and your focus ring. The icon inherits current color so it matches the text it sits beside.

Drift also returns through haste. A landing page is due, the token page feels slow to open, and someone ships a section with raw values "just for this launch." That section becomes the reference for the next landing page. The cure is dull and effective: raw values are a review comment, the same way a broken link is a review comment. The page can still ship once the values point at names.

Screenshots in a pitch deck are a quieter leak. A deck that restyles the product to look more dramatic will be treated as the new target. If the deck needs a different crop or a quieter background, say so on the slide. Do not let a presentation file become the unofficial token source.

What to do when you find the drift

Collect the stray values before you invent a new system to solve them. Open the product and the site and list the colors, sizes, and radii that appear more than once. You will usually find a real scale hiding under the accidents: two grays that are almost the named ones, a title size that shows up three times under three numbers. Promote the repeated decisions. Delete the rest by pointing the screens back at the names.

Then make the named list the path of least resistance. If using a token is harder than typing a hex value, people will type the hex value. In Figma, styles and variables should be the obvious picker. In code, the theme should be the import that components already use. A wiki page of hex codes will lose to the inspector.

The brand side of this work is the same instinct at a smaller scope. A team that only has a logo still needs a short list of type and color so the next page does not improvise. That companion piece is a brand system small enough to use.

If the names, the type, and the components need to be set with the build, Hanabi's services include that system as part of the product and the site. The goal is a handful of decisions the next screen can obey.