Getting started
Quantum can be consumed through several layers, each layer corresponds to a different kind of system resource.
Not every team will need every layer, but everyone should at least use the DNA and the Foundations: DNA defines the guiding principles of the system, while Foundations provide the key visual attributes needed to apply them consistently across products and experiences.
The main Quantum layers are:
- DNA
- Foundations
- Components
- Extensions
- Templates
In addition to these layers, Quantum also provides Patterns and Processes, which support the system but do not belong strictly to the layer architecture.
DNA
DNA is the expressive layer of Quantum. It captures the brand guidelines, the design intent, and the principles that shape the overall identity and character of the system.
This layer helps teams understand not only what to build, but also the spirit in which Quantum should be applied.
Foundations
Foundations define the design decisions that make the system coherent across products. They include all the subatomic visual attributes of a user interface, such as color, typography, spacing, and so on.
Along with DNA, Foundations are part of the minimum layers that everyone should use.
Design tokens belong to this layer as structured foundation resources. They translate foundational decisions into reusable values that can be consumed across design and development tools.
Check out the following resources for more details:
Components
Components are the reusable UI building blocks of Quantum, such as buttons, inputs, cards, navigation elements, and other interface atoms and molecules.
They help teams design and build faster while staying aligned with system standards. Component-related tokens can also support this layer by encoding reusable component values and behaviors.
Depending on your workflow, Quantum components can be consumed through design libraries or development libraries.
Check out the following resources for more details:
- Components
- Figma | Quantum component libraries
- Penpot | Quantum component library
- Web development libraries
Extensions
Extensions are larger functional assemblies built around broader product needs or domain capabilities. They go beyond isolated components and cover bigger concepts such as data visualization.
This layer is useful when teams need reusable solutions for complex and specific capabilities.
On the implementation side, they often depend on dedicated external libraries and ecosystems.
Check out the Extensions for more details.
Templates
Templates are higher-level starting points that help teams work from complete page structures, UI references, and reusable layouts.
They are useful when teams need to accelerate delivery, align around concrete page-level examples, or start from pre-assembled references rather than from individual components alone.
Check out the following resources for more details:
Patterns
Patterns are not a layer of the system itself. They are reusable solutions to common UX problems and interaction needs.
They help teams address recurring needs consistently and align with how the company delivers these user experiences, including the underlying engineering decisions and supporting systems behind them, such as data infrastructure and authentication management.
Check out the Patterns for more details.
Processes
Processes are also outside the layer architecture. They describe how projects interact with Quantum through recurring workflows and collaboration practices, including how they use and extend it.
This includes topics such as design-development hand-off, component creation and maintenance, documentation workflows, accessibility-first practices, contribution models, review processes, and other recurring interactions around Quantum.
The processes currently documented in Quantum are:
Processes help teams use Quantum effectively across the full product lifecycle, and more process-oriented documentation will be added over time.