Skip to main content
Apply for a Cheap Website
Website explainer · 1:47

Design Tokens Explained: Named Values That Keep Website Styles Consistent

Why give a colour or spacing value a name? A design token lets styles refer to a shared decision.

Jersey Web video: One named value. Many places.

1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.

Download the on-screen text track (VTT)

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

  1. Step 1: Name a repeated choice

    A token can represent a colour, spacing or typography decision.

    On-screen labels: Colour value; Spacing value; Type style.

  2. Step 2: Describe the intended role

    A role-based name can explain where a value belongs.

    On-screen labels: Primary text; Page background; Control border.

  3. Step 3: Reference the shared value

    Components use the token instead of repeating an unrelated local value.

    On-screen labels: Shared reference; Reusable component; Consistent style.

  4. Step 4: Support different themes

    A role can stay consistent while its value changes between themes.

    On-screen labels: Same purpose; Light theme value; Dark theme value.

  5. Step 5: Review the wider effect

    Changing a shared token can affect many places at once.

    On-screen labels: Affected components; Visual differences; Readable contrast.

  6. Step 6: Document the decision

    Explain the token purpose and review new values before release.

    On-screen labels: Clear naming; Usage guidance; Reviewed update.

A practical check for your business

Give shared values meaningful roles and review them in the actual component context. A colour or spacing value needs a clear purpose and a maintainable route into the released website.

Sources and further detail

See it in a diagram

Three cards show a token called primary text, a dark text value in a light theme, and a light text value in a dark theme.
A conceptual design-token example. A semantic token identifies an intended role. Suitable values can change between themes while the role stays consistent.
Read the diagram as text
  1. Primary text: The intended design role
  2. Light theme: A suitable dark text value
  3. Dark theme: A suitable light text value

Review every affected component. A shared value can change many screens. Check contrast and context.

Example roles are conceptual; follow the naming used by your own system.

Diagram by Jersey Web. Open full size · Source and further detail (opens in a new tab)

Common questions

Why give a colour or spacing value a name?

A design token lets styles refer to a shared decision. Review the affected components whenever a shared value changes.

Go further

Guide Read the practical guide More context for planning and maintaining your business website. 5 min read → Jargon Buster Design token explained Read the related Jargon Buster explanation. Read the explanation →

Review the affected components whenever a shared value changes.

Tell Jersey Web what your website needs to do and which part you want help with.

Talk to Jersey Web →

More video tips

All 205 videos →
Length 1:47 Planning and design

UI Components Explained: Reusable Website Controls and Their States

UI components, explained. Length 1:47 Planning and design

Customer Journey Maps: Understand the Steps Around a Website Visit

Map the whole customer journey. Length 1:47 Planning and design

Website Usability Testing: Learn by Watching People Attempt Real Tasks

Watch the website in use.