Tokens first, panic never

Every brief is a surprise

Agency work means the brief is never the same twice. Some clients send a full brand guide. Others send a logo, two colours and a feature list, then say "the rest is up to you". Cool. Cool cool cool.

What stays the same is where I start. Not with screens. With variables.

Quick translation: a variable (also called a token) is a named value like spacing/md = 16 or colour/primary. Every screen points at it. Change the value once and every screen follows.

Without them, two designers read the same brief two ways. One uses 8px gaps, one uses 10. Greys drift a shade apart. Then a developer opens the file and asks the question nobody wants: "So which value is it?"

Mood first, then variables

If the client already has a system, I use it. Starting from zero, I make a couple of directions and pick the mood with the client. That part is always by hand, because it is the part I have to explain and defend. (Note 13 is all about that step.)

Once the direction is locked, it turns into variables: the brand colours spread into a palette, a neutral grey scale, a typeface, spacing and radius. From then on the whole team speaks one language.

The four I always set

• Colour: primary, secondary, neutral, plus semantic success, warning and error.
• Spacing: 4, 8, 12, 16, 24, 32, 48, 64.
• Type: heading 1 to 6, body, caption.
• Radius: small, medium, large, full.

Every component after that points at a token, never a raw number. No project is too small for this. Colour, type and spacing is already a system.

One component, many brands

When one design has to serve more than one brand, Figma Variables earns its keep. One collection, one mode per brand. The components stay the same, you switch the mode and the whole page changes.

Light and dark mode work the same way. It is also why "can we try another primary colour?" stops being a scary message.

Build what gets used

• Variants only for real cases. Six buttons in use means six variants, not twenty.
• Slots over variants. A card with header, body and footer slots (empty spaces you drop content into) fits most places.
• Names that explain themselves. Button/Primary/Large/WithIcon, never Button v2 final.

I would rather add a variant later than look after twenty that nobody touches.