Digital Design, 14 October 2026

Easel 3: where we start

One foundation for Figma and code: what is proposed, how it works, and what we decide together.

Kurt, 14 October 2026. For the design team.

Contents

1. 01Where Easel is today
2. 02Tokens and patterns
3. 03The proposal
4. 04Type
5. 05Spacing and the page gutter
6. 06Widths and layout
7. 07Semantic colour
8. 08Everything else
9. 09The path

Part 1

Where Easel is today

What has drifted between Figma and code, and why it keeps happening.

Easel has drifted, in Figma and in code

Every inconsistency is a decision someone has to make again

First by a designer, then by an engineer, and soon by an AI agent that copies whatever it finds.

Easel’s foundation grew as we needed it. Now we know enough to simplify it

Part 2

Tokens and patterns

A token is a decision with a name

In Figma a token is a variable. A pattern is how we agree to use it

Tokens come in three layers

1. Component tokens

   One component’s own colours, used only inside that component.

   • button-primary-background
   • button-primary-foreground
   • button-primary-border
   • button-secondary-background
   • button-secondary-foreground
   • button-secondary-border

2. Semantic tokens

   A job anywhere on the page. Designers and engineers use these every day.

   • background-primary
   • foreground-primary
   • foreground-secondary
   • border-primary

3. Primitive tokens

   The values. Only other tokens use these.

   • black
   • black-300
   • white
   • white-alpha-60
   • grey-400
   • brand-c-red

Designers, engineers and agents share one set of names

1. Figma variable

   foreground-primary

2. CSS

   --foreground-primary

3. Tailwind

   text-foreground-primary

4. An agent's brief

   ‘Use foreground-primary.’

Part 3

The proposal

Fewer values, one set of names, and sizes that grow smoothly with the screen instead of jumping at breakpoints.

Fewer values to keep in step, and fewer frames to draw

• 62→12

  type sizes

• 39→16

  text styles

• 62→3

  line heights

• 7→2

  widths to draw

What the proposal covers, and where each part stands

• Type

  12 sizes and 16 roles, each size set at 390, 1440 and 2560. Drafted, with the 2560 sizes still to tune.

• Spacing

  One scale of 15 steps, and fluid steps that grow with the type.

• Page gutter

  One token: 16 at 390 and 48 at 1440, then growing like the rest of the spacing.

• Widths we draw

  390 and 1440, plus any width where the layout changes, such as the switch to the mobile view. 2560 is checked.

• Colour

  Tokens named for their job, so one component works in any section. The names are placeholders.

• Everything else

  Radius, shadows, motion and sizes.

  Planned

Part 4

Type

Too big on large screens today, and far harder to manage than it needs to be.

Type that jumps at breakpoints can only be right for one screen size at a time

Type was made bigger for people viewing on large screens. Now others find it too big.

The same text on a 2560px screen, today and as proposed

Each size grows smoothly to 1440, then more gently to 2560

Two layers, and the same name everywhere

A first draft: the larger headings

Role390 · 1440 · 2560

• heading-xxl48 · 56 · 60

  Post-War and Contemporary Art

• heading-xl36 · 48 · 54

  Post-War and Contemporary Art

• heading-l28 · 32 · 34

  Upcoming auctions

• heading-m-sans24 · 28 · 30

  20th/21st Century Evening Sale

• heading-m-serif24 · 28 · 30

  20th/21st Century Evening Sale

The smaller headings and body text

Role390 · 1440 · 2560

• heading-s-sans18 · 18 · 20

  From free valuations to market advice

• heading-s-serif20 · 24 · 26

  From free valuations to market advice

• heading-xs-sans14 · 16 · 17

  From free valuations to market advice

• heading-xs-serif16 · 20 · 22

  From free valuations to market advice

• body16 · 16 · 18

  Our specialists are here to answer your questions

• body-s14 · 14 · 16

  Our specialists are here to answer your questions

• body-xs12 · 12 · 14

  Our specialists are here to answer your questions

Labels and actions

Role390 · 1440 · 2560

• label14 · 14 · 16

  18 Sep – 2 Oct · Online

• label-s12 · 12 · 14

  18 Sep – 2 Oct · Online

• action-l16 · 16 · 18

  Browse auction

• action14 · 14 · 16

  Browse auction

The whole system has three line heights: 100%, 120% and 140%

In code, one class replaces four

<h1
  class="text-4xl md:text-4xl-lg
  2xl:text-4xl-xl 3xl:text-4xl-2xl"
></h1>

<h1 class="easel-heading-xl"></h1>

--easel-text-4xl: calc(
  2.25rem + clamp(0rem, (100vw - 390px) * 0.01143, 0.75rem) +
    clamp(0rem, (100vw - 1440px) * 0.00536, 0.375rem)
);

Keeping each largest size within 2.5 times its smallest keeps browser zoom working

Part 5

Spacing and the page gutter

One scale where every step looks different, and spacing that grows with the type.

Figma’s spacing scale has 16 steps. The proposal has 15, each visibly different

The steps we drop are little used, and each has a near neighbour

A scale gives us the values. It doesn’t say which one to use

Fixed spacing jumps at a breakpoint. A fluid step grows with the type

Gentle steps by default, and strong steps where a design asks for more

The question of naming

Five of seven other systems number their spacing

A fluid step is two steps of the scale

To discuss: numbers, t-shirt sizes, or both?

In code, a fluid step is one variable

<div class="p-4 md:p-6"></div>

<div class="p-md"></div>

--easel-space-md: clamp(1rem, 0.8143rem + 0.7619vw, 1.5rem);

In Figma, a fluid step is one variable with a mode for each width

The page gutter is four values to remember, in Figma and in code

<header class="px-2 sm:px-4 md:px-10 lg:px-12"></header>

The gutter becomes one token: 16, 48, then growing with the text

--easel-page-gutter: clamp(1rem, min(0.2571rem + 3.0476vw, 2.5179rem + 0.5357vw), 3.375rem);

<header class="px-gutter"></header>

Above 1440, everything keeps growing, more gently

From 1440 to 2560, every type size grows by 1 to 6px

From 1440 to 2560, every space grows by an eighth, as body text does

The page gutter follows the same rule, 48 to 54. A fluid step grows from its 1440 size, so 24 → 48 reaches 54.

Fluid steps grow to 1440, then every step grows by an eighth

Each token at the widths we check

Part 6

Widths and layout

Which frames we draw once type and spacing grow without us.

We design two widths and check the others

1. 390
2. 768If the layout changes
3. 1024If the layout changes
4. 1280If the layout changes
5. 1440
6. 1920If the layout changes
7. 2560Check

Some layouts change at a breakpoint. Others follow the space they have

A RAM grid lets the browser choose the number of columns

grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));

ch sets a line length in characters, at any type size

.article p {
  max-inline-size: 65ch;
}

Text widths need a scale too, set in characters

Above 2560, the page only gets wider

Type and spacing stop growing at 2560, so a bigger screen spreads the same layout further apart. Text sections stretch and leave a lot of empty space.

The prototype compares four ways to treat a wide screen

Two widths, or more: 2560 for pictures and grids, narrower for text

To decide: on screens wider than 2560, can pages jump between contained and edge to edge?

Part 7

Semantic colour

Tokens named for their job rather than their colour, so one component works in any section.

The decision for today: start now, or park it?

Today a colour variable names a colour. A semantic one names its job

<h2 class="text-black">…</h2>
<p class="text-black-300">…</p>

<h2 class="text-foreground-primary">…</h2>
<p class="text-foreground-secondary">…</p>

One card, three sections

In Figma, each scheme is a mode

In code, each mode is one block of variables

[data-color-scheme="light"] {
  --background-primary: var(--color-white);
  --foreground-primary: var(--color-black);
  --button-primary-background: var(--color-brand-c-red);
  --button-primary-foreground: var(--color-white);
  --button-primary-border: var(--color-brand-c-red);
}
[data-color-scheme="red"] {
  --background-primary: var(--color-brand-c-red);
  --foreground-primary: var(--color-white);
  --button-primary-background: var(--color-white);
  --button-primary-foreground: var(--color-brand-c-red);
  --button-primary-border: var(--color-white);
}

The classes stay the same

<section data-color-scheme="red" class="bg-background-primary">
  <h2 class="text-foreground-primary">Post-War and Contemporary Art</h2>
  <Button variant="primary">View lots</Button>
</section>

// Inside Button, written once
<a class="bg-button-primary-background text-button-primary-foreground border-button-primary-border" />

Designers choose a section’s scheme, not the colour of everything inside it

How four other design systems name their tokens

What we would take from each

Part 8

Everything else

Type, spacing and colour are the start. The same treatment applies to the rest.

Radius, shadows, motion and sizes need a system too

• Radius

  21 one-off values in code, in 11 different sizes.

• Shadows

  11 one-off shadows. Six are variants of one 24px blur.

• Motion

  16 one-off easing curves. 12 are the same curve, all in the header.

• Widths and heights

  323 one-off sizes, in 189 different values.

• Aspect ratios

  15 one-off ratios, in six values.

• And more

  Possible scales too: background blur, letter spacing, font weights, border widths, opacity, durations, layers and icon sizes.

Part 9

The path

How this reaches Figma and code without a big change that slows every squad down.

Eight steps, none of them a big bang

Progress is a count, not an opinion

What we decide today

From an agreed date, new design work uses the agreed tokens

So the four of us are consistent before we ask engineering to be.

Two things to name today, not solve

See it working