Digital Design, September 2026

Towards Easel 3.0

How the next version of our design system can save design and engineering time, with fewer decisions made twice.

Kurt, 30 September 2026. A working draft for the design team.

Contents

1. 01Where Easel is today
2. 02Semantic colour
3. 03Spacing tokens
4. 04Fluid type and spacing
5. 05Figma and components
6. 06With the grain of the web
7. 07One language, one step at a time
8. 08Still to decide

Part 1

Where Easel is today

What has drifted between Figma, Storybook 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 now by an AI agent that copies whatever it finds.

Part 2

Semantic colour

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

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>

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. Palette

   The values. Only other tokens use these.

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

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" />

In Tailwind 3, replacing the default palette leaves semantic names as the only colours on offer

// tailwind.config.js, inside theme
// colors, not extend.colors
colors: {
  "background-primary": "var(--background-primary)",
  "foreground-primary": "var(--foreground-primary)",
  "border-primary": "var(--border-primary)",
  // …and one line for each of the other tokens
},

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

Part 3

Spacing tokens

Starting with the page gutter: one value everyone uses, instead of four that everyone has to remember.

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>

In Figma, the gutter becomes one variable with a mode for each breakpoint

In code, the same token makes the gutter a single decision

:root {
  --page-gutter: var(--spacing-2);
  @media (width >= 390px) {
    --page-gutter: var(--spacing-4);
  }
  @media (width >= 1024px) {
    --page-gutter: var(--spacing-10);
  }
  @media (width >= 1280px) {
    --page-gutter: var(--spacing-12);
  }
}

// tailwind.config.js
extend: {
  spacing: { gutter: "var(--page-gutter)" },
}

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

Change the token once, and every section moves with it

Part 4

Fluid type and spacing

Sizes that grow steadily with the screen instead of jumping at breakpoints, what that means for designers and engineers, and how it works in Figma.

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.

Fluid type grows with the screen, instead of jumping at four breakpoints

clamp() sets a smallest size, a largest size and a steady rate between them

--text-5xl: clamp(3rem, 2.596rem + 1.659vw, 5.25rem);

Today’s 56 type values become 14 lines

--text-5xl: clamp(3rem, 2.596rem + 1.659vw, 5.25rem);
--text-4xl: clamp(2.25rem, 1.891rem + 1.475vw, 4.25rem);
--text-3xl: clamp(1.75rem, 1.435rem + 1.29vw, 3.5rem);
--text-2xl-serif: clamp(1.5rem, 1.298rem + 0.829vw, 2.625rem);
--text-2xl-sans: clamp(1.5rem, 1.365rem + 0.553vw, 2.25rem);
--text-xl-serif: clamp(1.25rem, 1.07rem + 0.737vw, 2.25rem);
--text-xl-sans: clamp(1.125rem, 1.058rem + 0.276vw, 1.5rem);
--text-lg-serif: clamp(1rem, 0.865rem + 0.553vw, 1.75rem);
--text-lg-sans: clamp(0.875rem, 0.763rem + 0.461vw, 1.5rem);
--text-md: clamp(1.125rem, 1.103rem + 0.092vw, 1.25rem);
--text-sm: clamp(1rem, 0.91rem + 0.369vw, 1.5rem);
--text-xs: clamp(0.875rem, 0.808rem + 0.276vw, 1.25rem);
--text-xxs: clamp(0.75rem, 0.728rem + 0.092vw, 0.875rem);
--text-xxxs: clamp(0.75rem, 0.728rem + 0.092vw, 0.875rem);

Fluid spacing grows with the type, so a page keeps its proportions

/* postcss-ruler, for microsites */
@ruler scale({
  pairs: [
    ["sm", 12, 16],
    ["md", 16, 24],
    ["lg", 24, 32],
    ["xl", 32, 48],
    ["2xl", 48, 64],
    ["3xl", 64, 96],
  ],
  prefix: "space",
});

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

In Figma, each token has two values: its smallest and its largest

Part 5

Figma and components

Guidance where designers pick their tokens, and components built from slots rather than variants.

Each token says when to use it, inside Figma where designers pick it

Slots replace a variant for every combination

<Card
  media={<Image … />}
  actions={<Button>View lots</Button>}
>
  Post-War and Contemporary Art
</Card>

Guidance sits next to the component, where people and agents read it

Part 6

With the grain of the web

Let the browser decide what it’s better placed to decide. It knows the screen, the font and the reader’s settings, and we only guess at them.

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

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

Scroll snap gives a carousel its stops, with no script

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.carousel > * {
  scroll-snap-align: start;
}

A RAM grid lets the browser choose the number of columns

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

Part 7

One language, one step at a time

Shared names for designers, engineers and agents, and the order to bring them in.

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.’

Semantic colour first, then spacing, then fluid type

1. 01

   Semantic colour

   Points at today's colours, so nothing changes on screen and there's nothing to check.

2. 02

   Spacing

   Starting with the page gutter.

3. 03

   Fluid type

   Once we know which two screen widths to design for.

Part 8

Still to decide

How we name tokens, how we agree those names as a team, and how we bring all this to engineering.

How four other design systems name their tokens

What we would take from each

How we agree the names as a team

How we bring this to engineering