Dissecting Design Systems: Tokens, Components, and Patterns

The Three Layers of a Design System

At its core, a design system is a hierarchy of decisions. Thinking about it in layers helps manage complexity and ensures that every part of your interface is built from a consistent foundation.

We can break this down into three main layers:

1. Tokens: These are the smallest, indivisible building blocks. They are not UI elements themselves, but the raw values that define the UI's visual properties—like a specific hex code for a color, a font size in pixels, or a spacing value.
2. Components: These are the functional, reusable pieces of the user interface, built using tokens. Think of buttons, input fields, cards, and navigation bars. They are the tangible elements users interact with.
3. Patterns: These are larger, reusable solutions to common design problems, composed of multiple components arranged in a specific layout. An onboarding flow, a checkout process, or a search results page are all examples of patterns.

To draw an analogy from your background in finance, you can think of it this way:

• Tokens are like individual transactions or raw data points in a ledger.
• Components are like line items on a financial statement (e.g., "Total Revenue"), which are calculated from those raw data points.
• Patterns are like the complete financial report (e.g., an Income Statement), which arranges various line items to tell a comprehensive story.

These two diagrams perfectly illustrate this hierarchical relationship.

Deconstructing Layer 1: Design Tokens

Design tokens are the single source of truth for your brand's visual language. Instead of hard-coding a color like #4A90E2 every time you need it, you define a token, perhaps named color-action-primary, and use that token instead. This makes your design system scalable and easy to update. Want to change your primary brand color? You only need to update one token, and the change propagates everywhere.

To truly grasp how to structure tokens effectively, it's essential to understand the multi-tiered architecture that modern design systems use. The following video provides a complete guide.

As you can see, structuring tokens isn't just about naming colors. It's about creating a logical system that separates raw values from their intended purpose, which is what allows for powerful features like multi-brand support or light/dark modes with minimal effort.

Deconstructing Layer 2: Components and Atoms

With a solid foundation of tokens, the next layer is components. These are the functional UI elements your users see and interact with. The most common framework for thinking about component structure is Atomic Design, developed by Brad Frost. It breaks components down into even smaller parts:

• Atoms: The most basic UI elements that can't be broken down further. Examples include a label, an input field, or a button. They are often directly styled by design tokens.
• Molecules: Simple groups of atoms functioning together as a unit. A search form, for instance, is a molecule composed of a label atom, an input atom, and a button atom.
• Organisms: More complex UI components composed of atoms and molecules. A site header might be an organism containing a logo (atom), a navigation menu (molecule), and a search form (molecule).

The following video explains this concept practically, clarifying the distinction between different levels of components.

Deconstructing Layer 3: Patterns

The final and broadest layer is patterns. While components are the building blocks, patterns are the blueprints for how to assemble them to solve a recurring user problem. A pattern is a reusable combination of components in a specific layout.

Let's return to the video from Design Pilot, which also provides a great definition of patterns.

The onboarding flow you designed in the previous module is a perfect example of a pattern. It uses various components (buttons, text, progress indicators) arranged in a specific sequence to guide a new user.

Practical Deconstruction: Auditing the IMDb "Kernel" Design System

Now, let's apply these concepts by deconstructing a real-world design system. The process of taking apart an existing interface to identify its tokens, components, and patterns is called a UI audit. It's the very first step in creating or improving a design system.

This case study on the IMDb design system, named "Kernel," is a perfect example.

Your Task: Perform a Mini-Audit

Now it's your turn to be the design system detective. Open the live "Kernel" resources linked in the case study (or use the links below) and find one example for each of the three layers.

1. The Kernel Documentation on ZeroHeight
2. The Kernel UI kit on Figma community

In a notebook or a text file, document your findings:

• Token: Go to the "Tokens" or "Foundations" section in the ZeroHeight documentation. Find a specific color token. Write down its name (e.g., primary-blue-500) and its hex value.
• Component: Go to the "Components" section. Find the Button component. Look at its structure in the Figma file or the documentation. Identify at least two types of tokens it uses (e.g., a color token for the background, a border-radius token for the corners).
• Pattern: Explore the Figma file or documentation to find a Pattern. A good example would be a Carousel. Describe which components make up this pattern (e.g., it's built from multiple Card components and Icon Button components for navigation).

This exercise mimics the exact process you would undertake for a client who needs to bring consistency to their existing product.

Conclusion

Today you've learned to see user interfaces not as static screens, but as a system of interconnected layers. This structured perspective is invaluable for creating designs that are consistent, scalable, and efficient to build and maintain.

Key Takeaways:

• Design systems are hierarchical: They are built on three core layers: Tokens (raw values), Components (UI building blocks), and Patterns (reusable solutions).
• Tokens are the foundation: A well-structured set of design tokens (using a tiered approach like Brand/Alias/Mapped) is the key to a flexible and maintainable system.
• Components have their own hierarchy: Thinking in terms of atoms, molecules, and organisms helps you build components logically from smallest to largest.
• Deconstruction is the first step: Auditing an existing product to identify its constituent parts is the foundational work of any design system project.

Preview of the Next Lesson:

Now that you understand the structure of a design system, it's time to start building one. In our next lesson, you will define a set of design tokens in Figma for colors, spacing, typography, and elevation. This will be a hands-on session where you lay the practical groundwork for your own reusable component library.