# Introduction

Welcome to Quantum, the Thales Group digital Design System.

## Who is this for?

Quantum is for everyone involved in designing, building, and improving digital products and user interfaces across all entities of the Thales Group: primarily software designers and software developers, but also product teams, UX practitioners, and contributors involved in shaping consistent user experiences.

## What is this for?

It’s designed to support software design and development across projects of every size, from simple interfaces to complex digital ecosystems. Quantum is also multi-platform and multi-device, helping teams create consistent experiences for websites, mobile apps, embedded systems, and desktop applications.

## Why a Design System?

For a group like Thales, which delivers many different digital products, a Design System is essential to create consistency across user interfaces, but also across the teams who design and build them.

It establishes a shared brand expression, a common language, and reusable foundations that help software designers and developers work toward the same goal, even when products, domains, and use cases differ. By reusing design assets, components, patterns, and code, teams can move faster, reduce duplication, and generate economies at scale in both design and development.

At the same time, a Design System strengthens the front-end community around shared practices and standards, and helps maximize the final and perceived quality of products by delivering a more coherent, robust, and premium user experience.

It also plays a key role in the age of AI. As its resources are structured, standardized, and validated as a shared pillar, Quantum provides the essential foundation to make product teams more AI-operable. By organizing design knowledge, components, patterns, and implementation assets in a reliable and reusable way, the Design System helps AI-enabled tools understand, support, and scale product creation with greater consistency and confidence.

## How does this take shape?

Quantum is materialized through a complete ecosystem of shared resources for both design and development. It includes design foundations, guidelines, design tokens, reusable components, patterns, documentation, and implementation libraries that help teams create consistent user interfaces across digital products.

These assets are made to support real product work across platforms and devices, while enabling software designers and developers to rely on the same principles, the same language, and the same building blocks.

## Where to start?

Head over to the [Getting started](/docs/welcome/getting-started) section to explore the essentials and take your first steps with Quantum.


# 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:

1. **DNA**
1. **Foundations**
1. **Components**
1. **Extensions**
1. **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:

- [Foundations](/docs/foundations/)
- [GitLab | Quantum Design Tokens](https://gitlab.thalesdigital.io/thales-design-system/quantum-tokens/)

## 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](/docs/components/)
- [Figma | Quantum component libraries](https://www.figma.com/files/915304642490219366/project/25113705/%F0%9F%8C%8D-Thales-Design-System?fuid=812250648660319132)
- [Penpot | Quantum component library](https://forms.cloud.microsoft/e/3n7KHWQ285)
- [Web development libraries](https://developers.quantum.thalesdigital.io)

## 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](/docs/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:

- [Figma | UI references](https://www.figma.com/files/915304642490219366/project/25113705/%F0%9F%8C%8D-Thales-Design-System?fuid=812250648660319132)
- [Templates](/docs/patterns-templates/)

## 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](/docs/patterns-templates/) 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:

- [Working with AI](/docs/working-with-ai/)

Processes help teams use Quantum effectively across the full product lifecycle, and more process-oriented documentation will be added over time.


# Meet the Core Team

The Quantum core team guides the product vision, design direction, and technical execution for the platform. Below is a quick overview of the folks working full-time on Quantum.

| Name             | Role                   |
| ---------------- | ---------------------- |
| Aurélien Brigaud | Designer (Contractor)  |
| Bogdan Vasile    | Developer              |
| Edgar Lechaudel  | Design Lead            |
| Emilien Vivier   | Developer (Apprentice) |
| Julien Déramond  | Tech Lead              |
| Oana Vasilescu   | Designer               |