Tokens, components and patterns

Take a look at what we call different elements of our design system.

Token header


Tokens are styles that contain a single value. We have tokens for colour, radius, spacing, and typography. These are the smallest things we can make in design and deliver in code.


Components use tokens to build very simple interfaces. For instance, a button uses a radius token, spacing token, colour token (style in Figma) and typography token to collectively make the component.

Components can’t be broken apart.

🎒 Backpack Components

Let’s look at what we mean when we say 'Backpack components'. These exist as two things:

  1. In code
  2. As Figma designs

Figma Components

Component' is also the technical term Figma uses for a reusable design. The Backpack team encourages you to make your own reusable components as it can help to speed up your workflow, knowing they’ll eventually become a code component — or as we call it — a Backpack Component.


A pattern is a collection of 🎒 Bpk Components and/or 🎒 Bpk Tokens (Typography, Spacing, Colours etc) arranged together into a design.

If a pattern is made agnostic of all verticals, it could easily become a 🎒 Bpk Component. See our Card List or Snippet as good examples.


Pattern or Component 748px


Figma Libraries are where we publish Tokens, Components, and Patterns. We’ve written a guide to how our Library structure works.

Who owns what?

🎒 Backpack Tokens and Components

  • Design owned by Adam / Giles
  • Code maintained by Koala Squad
  • Collectively this is referred to as Backpack

⚡️ Agreed Patterns

  • Design owned by Adam / Giles, and jointly owned by anyone in Product Design
  • Code isn’t owned by Koala Squad (this might have joint owners)
  • Code lives in different databases
  • If it exists in the live product, it can live in Agreed Patterns, e.g Global Navigation and Global Footer
  • If it’s a cross-product design we’re all working towards, it can also live here, e.g Inventory Cards


New pattern libraries

There are two new libraries in Backpack Core Libraries.

⚡️ Agreed Patterns

See above ☝️

👴🏻 Legacy Patterns

Anything that pre-dates Agreed Patterns lives here. You can find all the old Inventory Cards or Search Controls here.

Other considerations

When is something Legacy vs Agreed?

We currently have two sets of Search Controls live that look very different. If the intention is to move away from something or it doesn’t have a designer working on it, it's Legacy.