Overview

Quantum: A set of librairies

Quantum, the Thales Design System for Digital provides a design to development continuum that enables all projects to design and build consistent and qualitative Thales experiences.

It provides a Design workbench, libraries and guidelines to support designers when creating mockups and prototypes and while also a set of librairies to help developers for implementing digital applications.

In order to allow you to consume the elements of the Design System according to your product constraints, we give you the possibility to use the Quantum web libraries with different technologies & levels of granularity.

• @qtm/css provides a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS.
• @qtm/angular provides a library of Angular components.
• @qtm/react provides a library of React components.
• @qtm/vue provides a library of Vue components.
• @qtm/web-components provides a library of Web Components (Custom Elements).
• @qtm/tailwind-preset provides a preset corresponding to the Quantum design system to be used with Tailwind.
• @qtm/tokens provides design tokens aka CSS Custom Properties available in a css and js format.

The Quantum design system is available in many recent frameworks like Angular, React, Vue. However, we did not choose to implemented these components in their native language. The Stencil framework is used to build our web components and generates wrappers to use these web components directly with your favorite framework.

A storybook is available to help you, and provides a lot of code snippets and exemples.

Supported framework versions

• Angular (>= 13.x)
• React (>= 16.x)
• Vue (>= 3.x)

Contributions and Issues

Pull requests are more than welcome. For major changes or if you found a bug please open an issue.

For contribution, please consult this documentation.