Tokens before templates

The page is a late decision

Teams like to start with a template because a page looks like progress. A homepage, a card, a hero. The trouble shows up on the third page, when the spacing no longer matches and nobody can say which value is the real one.

Tokens are the earlier decision. Color roles, type steps, space, radius. The template should be assembled from those, not the other way around.

If you draw the page first, the template becomes a hiding place for one-off choices. Copy it twice and you have three systems.

Templates multiply whatever you left vague

A template is a multiplier. A fuzzy spacing rule becomes twenty fuzzy screens. A color with no role gets reused as a button, a background, and an error, because it was nearby in the file.

We would rather delay the first template than ship a page that cannot be repeated. The delay is shorter than the cleanup.

Name the decisions

Before a layout, we name the set. What is a surface. What is text on that surface. How type scales. How much space sits between a heading and a paragraph. Each name has to be usable by someone who did not draw the first page.

We keep the set small. A ramp with too many steps invites people to pick by eye again, which is how the template starts inventing.

Then we try the tokens on one unglamorous component: a form, a list, a card with a long title. If the tokens fail there, they are not ready to support a template.

Then draw the page

Once the tokens hold, the template is mostly arrangement. You are placing decisions that already exist, not discovering new ones in the margins.

Tokens before templates means the second page takes less time than the first, and still looks like the same product.