# Colors

Color is one of the fastest things the human brain is able to process and interpret. So yes, big deal. In Thales Design System, color help us bring brand identity and consistency to our products.

## Color themes

Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. Multiple color themes ensure that we can support various environmental requirements from our users.

### Quantum themes

Quantum Design System currently offers 2 color themes: light, and dark.

However, a dark color theme is being evaluated with the Guild to ensure that we create a theme that delivers the correct expectations for our designers and end-users. Thales products can support a number of color themes, allowing users to switch between them. The choice of which color themes to support should be based on the content, platform and user experience.

<Image src={img0} alt="" />

#### Recommendation

Quantum is aimed at being compatible with multiple background colors, to allow designers to choose the best for their users:

- Light theme: White 100, bg25, bg50 and bg100.
- Dark theme: Black 100, bg900, bg850, bg800.

<Image src={img1} alt="" />

## Digitalizing Thales Light & Dark Blue

In the Thales Brand Standards, the Thales blue had been modified for use on digital medium. For the Thales Design System to optimize the communication of Thales Signature while meeting accessibility standards, colors needed a rework.

### Group color palette

The two main Group colors, Thales dark blue and Thales light blue, have a direct correlation with the Thales logo. These colors must be used at values of 100% only (transparency set to 0). On pages inside publications and in online documents/pages, the colors may be used with different transparency levels but not different hue values.

<Image src={img2} alt="" />

### Initial proposal for digital use

In the Thales Brand Standards, the light blue had been modified for use on digital medium. It was intended to be used as the primary color. No change had been applied to the digital dark blue compared to the dark blue from the Thales group palette.

These choices arise some issues that were pinpointed by digital teams at Thales:

- The light blue is not a colour that can be easily compliant with accessibility standards.
- The light blue digital rework did not follow a clear formula based on the colour model approach.
- The dark blue does not have enough vibrancy to really thrive on digital medium.

<Image src={img3} alt="" />

By consequence, some decisions had to be made:

- The light blue must not be used as the primary colour in order to preserve Thales signature while meeting [accessibility standards on the web](https://www.w3.org/WAI/standards-guidelines/wcag/).
- The dark blue colour must be reworked to be optimised for digital use.
- The reworked dark blue colour must be contrast compliant and become the primary colour.

### Creating a dark blue colour for digital use

To achieve a digitalised dark blue for the Thales Design System, a HSL (for hue, saturation, lightness) formula was created in order to generate the Thales dark blue in a digitalised format.

The formula was taken from the Thales Digital Light Blue:

- **H (Hue)** = (original value) - 2
- **S (Saturation)** = (original value) + 42
- **L (Lightness)** = (original value) - 17

<Image src={img4} alt="" />

The purpose of the dark blue is to compliment the TDS light theme, therefore it has been decided that the lightness of the original colour will be maintained to ensure a reasonable level of contrast with black and other dark colours. Hence, the adapted formula has been agreed to maintain this level of contrast.

## Color palettes

Thales Design System’s colours are designed to be clear and accessible. They come in different colour themes. Each theme is constituted of greys, semantic colours (e.g., blue, red, orange, green), and label colours.

<Image src={img5} alt="" />

### Blue Palette

Our primary palette is derived from the Thales Brand Standards, comprised of neutrals, white and blue. These colours are designed to be clear and accessible.

We use blue (`$color.blue.500`) for primary actions, buttons, text links. Text (`$color.bluegrey.900`) is used primarily for body text and headings, white (`$color.white`) is used for surfaces such as cards, and light neutral (`$color.bluegrey.25`) is used for page backgrounds.

<Image src={img6} alt="" />

### Secondary Palette

Our secondary palette contains a variety of colours derived from the Thales Brand Standards additional colour palette. These colours are used to emphasize elements within your user interface and to keep things fresh and interesting.

It is made up of red (`$color.red.500`), yellow (`$color.yellow.500`), green (`$color.green.500`), light blue (`$color.secondary.500`), and magenta (`$color.purple.500`). Each colour is selected intentionally to provide meaningful feedback within our products. See the semantic colour guidelines below for more information.

<Image src={img7} alt="" />

### Color usage

Find appropriate usage for the base Light Theme in Quantum in the palette below.

<Image src={img8} alt="" />
<Image src={img9} alt="" />
<Image src={img10} alt="" />
<Image src={img11} alt="" />
<Image src={img12} alt="" />

### Colour Ramps

The Colour Ramps are a comprehensive set of tint shades, based on Core and Secondary Palettes.
This palette is complementary to the main colours to create emphasis on the colour choice.
Every colour has been tested for WCAG 2.1 contrasts and the results are displayed on the cards.

To check your colour contrasts, we encourage using the [Figma | Stark – Contrast & Accessibility AI Checker](https://www.figma.com/community/plugin/732603254453395948) plugin, available by default for all Thales Figma users.

<Image src={img13} alt="" />
<Image src={img14} alt="" />
<Image src={img15} alt="" />
<Image src={img16} alt="" class="docs-colors-image-half" />

## Semantic Colors

Semantic colours have assigned meanings and are consistently used throughout TDS to set expectations for our users.

Semantic colour helps users to identify status, see actions, locate help, and understand next steps. The consistent use of colour keeps cognitive load low and makes for a unified and engaging user experience.

TDS has different semantic colours (accessible with white to support our light theme) that are associated with the following predefined value states:

<Image src={img17} alt="" />

Semantic colours are to be used if:

- You want to highlight an important status.
- You want to validate fields using form field validation.
- Your platform needs message or alert handling.
- You want to use the value states for a control.

Do not use semantic colours if:

- The colour has no meaning and is used only for decoration.
- You want to use colours in an industry-specific context, where the meaning of the colours differs from the standard semantic meaning. Use industry-specific colours instead.

### When to use which Semantic Colour

Only use a semantic colour if you need to convey the meaning defined for that colour.

#### Accessibility

Most themes are [WCAG AA+](https://www.w3.org/TR/WCAG20/) accessible. If a higher level of accessibility is required, allow the user to activate an accessible theme as a user preference.

AA has a contrast level of 4.5:1 or higher, and AAA has a contrast of at least 7:1. AA Large means the font size must be at least 18 points or 14 points bolded to be AA accessible.

#### Primary/Informative

<Image src={img18} alt="" />

Use this colour for a main action or an informative state.

Use the primary colour if:

- You want to draw attention to a control for an important purpose.
- You want to highlight newly added items, such as a new table row.

Don’t use this colour if you want to highlight an information text. The blue text color is explicitly reserved for links. Use bold or italic formatting instead.

#### Neutral

<Image src={img19} alt="" />

Use this colour as the neutral state of all UI elements.

Use the neutral colour if:

- You want to use the default state of a UI element.
- There is no reason to use another semantic state.
- You want to indicate a neutral object status.
- A message contains non-critical, additional information for users.

#### Success/Positive

<Image src={img20} alt="" />

Use this colour as the positive state when reinforcing that an action was successful/complete.

Use the positive colour if:

- You want to highlight a good or positive status.
- A message contains information about a process that was completed without any issues.

To indicate a successfully completed process, a short notification is enough. In this case, you can use a message toast.

#### Warning/Critical

<Image src={img21} alt="" />

This colour indicates a critical situation, a warning or an action that requires caution.

Use the warning/critical colour if:

- You want to highlight a critical status.
- A minor problem has occurred. The user can carry on working, but might run into an error later on.
- The user input was validated and a minor problem occurred. The user can continue without fixing the problem, but might run into an error later on.
- A message contains information about a warning.

#### Danger/Error/Negative

<Image src={img22} alt="" />

This colour is to be used for errors, or to indicate a bad or negative status/consequence.

Use the negative/critical colour if:

- Something bad has happened, or is about to happen. The issue requires the user’s attention. Until the issue is resolved, the user can’t continue working.
- You want to indicate that a value has caused an error.
- The user needs to be prevented from completing an action.
- The user input failed a validation, and the problem must be fixed before the user can continue.
- A message contains information about an error.

#### Focused

<Image src={img23} alt="" />

This colour is used for focus ring on interactive elements.

### Sources and references

- [Designing Semantic Colours](https://uxplanet.org/designing-systematic-colors-b5d2605b15c) - UX Planet
- [Using Semantic and Industry-Specific Colors](https://www.sap.com/design-system/fiori-design-web/v1-148/foundations/best-practices/ui-elements/how-to-use-semantic-colors) - SAP Fiori Design Guidellines
- [Colours](https://spectrum.adobe.com/page/color/) - Adobe Spectrum
- [DefStan 23-009](https://en.wikipedia.org/wiki/Generic_Vehicle_Architecture#GVA_Defence_Standard_23-009) - Wikipedia
- [ISO 9241](https://www.iso.org/obp/ui/#iso:std:iso:9241:-1:ed-2:v1:en) - ISO

## Dark Mode Colors

To cater for a more various range of display capabilities, we have worked on specific color addition to complete the palette, and make it more friendly for Dark Mode usage.

### Overview of the main palette

Our primary palette is derived from the Thales Brand Standards, comprised of neutrals, white and blue. These colours are designed to be clear and accessible.

<Image src={img24} alt="" />

### Semantic colours for Dark Mode

Our semantic colour palette contains a variety of colours derived from the Thales Brand Standards additional colour palette. These colours are used to emphasize elements within your user interface and to keep things fresh and interesting.

It is made up of red (`$color.dark.red.500`), yellow (`$color.dark.orange.500`), green (`$color.dark.green.500`), bluegreen (`$color.bluegreen.500`). Each colour is selected intentionally to provide meaningful feedback within our products. See the semantic colour guidelines below for more information.

<Image src={img25} alt="" />
<Image src={img26} alt="" class="docs-colors-image-fifth" />

### Color usage

Find appropriate usage for the base Dark Theme in Quantum in the palette below.

<Image src={img27} alt="" />

### Colour Ramps

The Colour Ramps are a comprehensive set of tint shades, based on Core and Secondary Palettes.
This palette is complementary to the main colours to create emphasis on the colour choice.
Every colour has been tested for WCAG 2.1 contrasts and the results are displayed on the cards.

To check your colour contrasts, we encourage using the [Figma | Stark – Contrast & Accessibility AI Checker](https://www.figma.com/community/plugin/732603254453395948) plugin, available by default for all Thales Figma users.

<Image src={img28} alt="" />
<Image src={img29} alt="" />

## Accessible color combinations

Accessibility is of paramount importance when it comes to building products, hence we have provided a collection of the TDS colour combinations that satisfy the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/).

All background/foreground combinations in this section are relative to each tint shade.
If you want to know combinations for universal text colours (white for dark backgrounds, bluegrey-900 for light ones), please refer to the AA/AAA ratings on the extended palette.

<Image src={img30} alt="" />
<Image src={img31} alt="" />
<Image src={img32} alt="" />
<Image src={img33} alt="" class="docs-colors-image-half" />

## International colors

Thales provides solutions for customers across the globe, each with their own cultures where colour and language exist at the root. As designers and solution providers, we must always keep this in mind when building new products.

### Best Practices

Always assume that the colors you are using might have a significant impact on your end users’ understanding according to their culture. For example, in Western Europe and Americas, red is synonym for error, criticality, failure. Whereas in China the red is symbol of happiness, prosperity.

In order to be more inclusive and design for the broadest audience, we recommend to never assume the color can be self-explanatory. Textual indicators or other visual indicators (i.e icons) should always come jointly with the color to express a message. As expressed in the WCAG 1.4.1 rule.

<Image src={img34} alt="" />

More information about this can be found at [informationisbeautiful.net](https://informationisbeautiful.net/visualizations/colours-in-cultures/).



# Typography

## Overview

Typography in Thales Design System plays an essential role in interface readability.
It helps to create a clear visual hierarchy and organize information for a better user’s experience.

### Typeface

Roboto font is used for the Thales Design System. It is designed and maintained by Google Fonts.
Roboto is a copyright free font, which gives it the advantage of being free with no copyright attached and hosted by the Google server (meaning it receives updates easily, each time the font is updated).
Moreover, it has many style variations (thin, light, regular, medium, bold, black, condensed…), which gives a wide variety of font format choice for your design.

Note that it also remains perfectly readable, even in small font sizes and paragraphs of dense text. Modern and sober, it is suitable for Thales products.

[Link to Roboto on Google Fonts](https://fonts.google.com/specimen/Roboto) (No need to download if you use Figma. Roboto is available by default in Figma).

<Image src={typographyOverviewTypeface} alt="" />

#### Specific aeronautic fonts

Note that other font such as B612 can be used if necessary to improve accessibility and comfort of reading.
Provided by collaboration between ENAC and Toulouse III College, it results from a prospective study, which aims to define and validate a font for aeronautical use cases. (Study called: Definition and Validation of an Aeronautical Font).
The font called PolarSys B612 allows to better highlight information on the aircraft cockpit according to readability, reading comfort and cockpit information uniformity.
Their principal characteristics are to maximize the distance between shape and letters, respect the primitive shape of letters and uniform their shapes and separations.

Find more information about this font: [B612 Google Font page](https://fonts.google.com/specimen/B612) and [B612 GitHub repository](https://github.com/polarsys/b612).

### Scale

Typography scale is built on a modular scale based on a 4px baseline grid : All font sizes have a ratio of 1.25, known as the major third type scale. It means that each size is multiplied or divided by 1.25 from the previous size, starting with the base size (16 px or 1rem), and rounded up or down.

<Image src={typographyOverviewScale} alt="" />

### Weights

Font weight adds contrast to lead your reader down the page by adding emphasis and differentiate content hierarchy. It must be carefully balanced with size pairings. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold one.

We suggest using Roboto Regular, Medium, Bold and Black for digital experiences. The Bold and Black weight are ideal for section headers, but should not be used for long text.

<Image src={typographyOverviewWeights} alt="" />

## Text styles

Typography in Thales Design System plays an essential role in interface readability.
It helps to create a clear visual hierarchy and organize information for a better user experience.

Always use the text styles to stay synchronized with the library and keep consistency in visual hierarchy.
If you need to use a new text style, you can add one by following these steps.

### Titles

Titles are the first level of hierarchy text that draws users into the design. They are used to create clear various levels of hierarchies between text or blocs. Titles provide core information or draw attention to the key benefit.

#### Usage

- Main layout title
- Main section title
- Core informations
- Component Heading

<Image src={typographyTextStylesTitlesUsage} alt="" />

#### Recommended colors

<div class="docs-typography-image-row">
  <Image src={typographyTextStylesTitlesRecommendedColors0} alt="" />
  <Image src={typographyTextStylesTitlesRecommendedColors1} alt="" />
</div>

For more color combinations, refer to [Accessible Groupings](/docs/foundations/colors#accessible-color-combinations).

### Subtitles

Subtitles are a level lower in the hierarchy than Titles and are reserved for medium-emphasis text. They are used to create vertical rhythm along with the higher level titles. They help to keep the attention of the user with the design and quickly navigate through the content.

#### Usage

- Subtitles should never appear as the first navigation element in a layout
- Categories
- Sub-section
- Field group heading
- Component heading

<Image src={typographyTextStylesSubtitlesUsage} alt="" />

#### Recommended colors

<Image src={typographyTextStylesSubtitlesRecommendedColors} alt="" />

For more color combinations, refer to [Accessible Groupings](/docs/foundations/colors#accessible-color-combinations).

### Body

Body text is the most common text. It is used for main content and long or short paragraphs. It is a good size for comfortable, long-form reading. Use this for longer body copy in components such as accordion or structured list.

#### Usage

- Paragraphs
- Text line

<Image src={typographyTextStylesBodyUsage} alt="" />

#### Recommended colors

<Image src={typographyTextStylesBodyRecommendedColors} alt="" />

For more color combinations, refer to [Accessible Groupings](/docs/foundations/colors#accessible-color-combinations).

### Caption

Captions are the smallest font size with Overline. They are used sparingly to annotate imagery or add indications that can helps the user.

#### Usage

- Annotations
- Legal content
- Explanatory helper text
- Complementary content
- Legend

<Image src={typographyTextStylesCaptionUsage} alt="" />

#### Recommended colors

<Image src={typographyTextStylesCaptionRecommendedColors0} alt="" />
<Image src={typographyTextStylesCaptionRecommendedColors1} alt="" />

For more color combinations, refer to [Accessible Groupings](/docs/foundations/colors#accessible-color-combinations).

### Overline

An overline is a single line above a chunk of text. When associated with a title or a subtitle, it is used sparingly to add context for the user.
It can also be used to name categories in small components.

#### Usage

- Add context indication
- Category title in small components

<Image src={typographyTextStylesOverlineUsage} alt="" />

#### Recommended colors

<Image src={typographyTextStylesOverlineRecommendedColors} alt="" />

For more color combinations, refer to [Accessible Groupings](/docs/foundations/colors#accessible-color-combinations).

### Code

Roboto Mono is used to display code or snippets. It makes code easier to read and understand for developers.

#### Usage

- Code
- Snippets

<Image src={typographyTextStylesCodeUsage} alt="" />

#### Recommended colors

<Image src={typographyTextStylesCodeRecommendedColors} alt="" />

For more color combinations, refer to [Accessible Groupings](/docs/foundations/colors#accessible-color-combinations).

## Links

Links are used to navigate to another page, or section by clicking on it. They can appear within a sentence or paragraph, or also can exist on their own.

### Usage

When to use:

Links should be use sparingly to:

- Navigate to a different page within the application
- Navigate to an external website
- Scroll quickly to a specific section of the current page
- Link to emails or phone numbers

When not to use:

- Users need to trigger an action.
- Users need to manipulate data.

In these cases, consider using [Buttons](/docs/components/button) instead.

### Text styles

When introducing links into your design, it’s recommended to use the ‘Foundations’ library text styles to stay synchronized with the library.

When you need to create a link using another text style or another style library, we recommend still using the underline to highlight that the text is a link. You can achieve this in the text decoration menu, or with Cmd+u / Ctrl+u.

#### Body

<Image src={typographyLinksTextStylesBody} alt="" />

#### Caption

<Image src={typographyLinksTextStylesCaption} alt="" />

#### Colour styles

By default, links use the primary blue as it provides the strongest perceived affordance of clickability.

However, it is possible to use a neutral variant that can be more appropriate when you need to deprioritize its focus on the screen.

<Image src={typographyLinksTextStylesColourStyles} alt="" />

#### States

<Image src={typographyLinksTextStylesStates0} alt="" />
<Image src={typographyLinksTextStylesStates1} alt="" />

### Underlining

In addition of the colour, underlining a link is important for low-vision users’ accessibility and it is recommended to maximize the affordance. Users shouldn’t have to guess or scrub the page to find out where they can click.

However, there are some cases where it is not necessary to underline a link, such as:

- Navigation menus, breadcrumbs
- Lists of links.

These cases are true only when the page design clearly indicates the area's function.

**Exception:** Underlining is essential if you use link colours such as reds or greens, which cause problems for users with common forms of colour-blindness.

### Sources and references

- [Guidelines for Visualizing Links](https://www.nngroup.com/articles/guidelines-for-visualizing-links/) - Nielsen Norman Group
- [Link](https://carbondesignsystem.com/components/link/usage/) - IBM Carbon
- [Link](https://designsystem.digital.gov/components/link/) - U.S. Web Design System

## Usage guidelines

#### Use library text styles

It is recommended to use library text styles to stay synchronized with the library and keep consistency in visual hierarchy.
Sometimes the style options aren’t suitable for specific scenarios. In these situations, it’s ok to deviate from the size options by taking a font size specified in the scale system.

A consistent typo hierarchy helps the user to navigate through the content and easily find what they are looking for.

<Image src={typographyUsageGuidelinesUseLibraryTextStyles} alt="" />

#### Typography component pairing

Titles, subtitles, body, caption, and overline typography components can be paired together in order to enforce hierarchy of content. It is recommended to use the same sizes while using multiple styles to create balanced relationships between them.

Relationships may sometimes need to be more or less pronounced, so in those use cases, it’s acceptable to combine your own selection of sizes as long as you’re maintaining consistent hierarchy.

<Image src={typographyUsageGuidelinesTypographyComponentPairing} alt="" />

### Formatting

#### Bold

Bold is used to add emphasis within a sentence or tall attention. Use it sparingly to enhance visual hierarchy.

<Image src={typographyUsageGuidelinesFormattingBold} alt="" />

#### Underline

Underline text exclusively for text links. It should never be used to emphasize text.

<Image src={typographyUsageGuidelinesFormattingUnderline} alt="" />

#### Avoid using all caps

All caps is difficult to read and scan and makes the reading speed slowed about 13 to 20 percent. Excepting for specific text styles (e.g. Overline ), prefer using mixed-case.

<Image src={typographyUsageGuidelinesFormattingAvoidUsingAllCaps} alt="" />

### Readability

Readability allows users to efficiently read and process informations in the content. Poor readability can make it challenging for the user to stay focused on the content and scares them away from it. The following guidelines promote good readability.

#### Spacings

White space or negative space, is the area between elements in a design composition. It affects how the user focuses their attention on the content and makes it easier to know what to read and where to begin. Spacing between typographic elements should be open enough to feel light, but close enough to establish a proper relationship between elements.

When setting titles or subtitles and body copy, the white space should be 16px or 32px.

<Image src={typographyUsageGuidelinesReadabilitySpacings} alt="" />

#### Alignment

We recommend to use Left-aligned text for left-to-right languages such as English. It provides the eye a constant starting point for each line, making text easier to read.

<Image src={typographyUsageGuidelinesReadabilityAlignment} alt="" />

##### Don't fully-justify text

By using block-justified text, white spaces are created within paragraphs and make it harder to read, especially for those with cognitive disabilities or dyslexia.

<Image
  src={typographyUsageGuidelinesReadabilityAlignmentDonTFullyJustifyText}
  alt=""
/>

#### Line length

Comfortable line length allows the user’s eyes to flow easily from the end of one line to the beginning of the next. Ideally, blocks of text should be roughly 70 characters wide. Be sure to keep them at least between 50 and 120 characters wide.

<Image src={typographyUsageGuidelinesReadabilityLineLength} alt="" />

### Accessibility

#### Text contrast

The WCAG (Web Content Accessibility Guidelines) are part of a series of web accessibility guidelines that provides sets of recommendations for making content accessible by everyone, regardless of any disability or user device.

To ensure text remains compliant with WCAG 2.1 standards, we provide you in the recommended colors section of each text style the colors that can be used depending of the usage.

<Image src={typographyUsageGuidelinesAccessibilityTextContrast} alt="" />

For black or white usage, you can refer to the contrasts indicated in the Extended Palette. For other color combinations, you can refer to the Accessible Groupings section.

#### References

To learn more about WCAG 2.1, refer to the https://www.w3.org/TR/WCAG21/

To check your color contrasts, we encourage using the [Figma | Stark – Contrast & Accessibility AI Checker](https://www.figma.com/community/plugin/732603254453395948) plugin, available by default for all Thales Figma users.

### Links

#### Don’t underline body text that’s not a link

In a paragraph, underline text exclusively for text links. It should never be used to emphasize text. If you need to emphasize certain words or sentences, using italics or bold is much safer.

<Image
  src={typographyUsageGuidelinesLinksDonTUnderlineBodyTextThatSNotALink}
  alt=""
/>

#### Avoid using colour for text unless it’s a link

Avoid using primary blue for non-link text because it’s the colour with the strongest perceived affordance of clickability. If an user try to click on a blue text that is not clickable, this can results in frustation.

Using a colour for a text is not recommanded unless it’s a link. However, assuming it differs from the link colour, you can sometimes use coloured text without causing major usability problems. For example, in a card, you could show the word "Success" in green and the word "Error" in red. (The fact that the word meanings are clearly different provides the required redundant cue for colour-blind users.)

<Image
  src={typographyUsageGuidelinesLinksAvoidUsingColourForTextUnlessItSALink}
  alt=""
/>

#### Use meaningful link text

Links should explain the link’s purpose and help the user understand the link’s destination.

<Image src={typographyUsageGuidelinesLinksUseMeaningfulLinkText} alt="" />



# Spacing

## Spacing system

Using a consistent spacing system across our products helps bring visual balance in our interfaces, and leads to a better overall UI quality. The Thales Design System spacing system relies on very simple yet solid principles: rhythm and flexibility.

### Spacing scale

As it is the case for the Typography Scale, the spacing method relies on a 4px baseline.
The spacing scale is the key to composing everything, starting at the layout, to the most complex components. Every scale has a name (token), a rem value to ensure interface scalability with the system, and pixels relative equivalences.

| Asset                      | Token name   | Pixels value | Rem value |
| -------------------------- | ------------ | ------------ | --------- |
| <SpacingScale size={2} />  | $spacing.3xs | 2px          | 0.125rem  |
| <SpacingScale size={4} />  | $spacing.xxs | 4px          | 0.25rem   |
| <SpacingScale size={8} />  | $spacing.xs  | 8px          | 0.5rem    |
| <SpacingScale size={12} /> | $spacing.s   | 12px         | 0.75rem   |
| <SpacingScale size={16} /> | $spacing.m   | 16px         | 1rem      |
| <SpacingScale size={24} /> | $spacing.l   | 24px         | 1.5rem    |
| <SpacingScale size={32} /> | $spacing.xl  | 32px         | 2rem      |
| <SpacingScale size={40} /> | $spacing.xxl | 40px         | 2.5rem    |
| <SpacingScale size={48} /> | $spacing.3xl | 48px         | 3rem      |
| <SpacingScale size={56} /> | $spacing.4xl | 56px         | 3.5rem    |
| <SpacingScale size={64} /> | $spacing.5xl | 64px         | 4rem      |
| <SpacingScale size={72} /> | $spacing.6xl | 72px         | 4.5rem    |
| <SpacingScale size={80} /> | $spacing.7xl | 80px         | 5rem      |
| <SpacingScale size={88} /> | $spacing.8xl | 88px         | 5.5rem    |
| <SpacingScale size={96} /> | $spacing.8xl | 96px         | 6rem      |

### Application

Choosing the right spacing at the right place is crucial.

To help you choose wisely while designing interfaces, we have gathered some good practices.

#### Use space to create relationships

In interfaces and design in general, it is stated that elements that are close to each other are seen as related on the functional part. Therefore, the more space you have between elements, the more you tend to seperate them.

**Use small spacings to group related elements (an text input and its label should be very close).**

[Read more about Gestalt’s Principles, and specifically the Law of Proximity.](https://ixdf.org/literature/topics/gestalt-principles#:~:text=Gestalt%20principles%20or%20laws%20are,the%20separate%20simpler%20elements%20involved.)

#### Use space to create structure

When mixing small and large values inside components but also with more structural assets like sections or widgets, you can create visual groups of related things.

By keeping a consistent spacing strategy within your interfaces, the end user will easily find what they are looking for. It’s all about choosing the good combinations, and this system gives space for creativity, and gives you the capacity to adjust spacing for any kind of device, screen size, or context of use.

<Image
  src={spacingSpacingSystemApplication}
  alt=""
  class="docs-spacing-image-panel"
/>



# Grids & layout

## The layout system

The entire layout system of Thales Design System is based on the 8px baseline, and is built upon the spacing scale. All the grids provided in the library are made to help you build better experiences, and bring consistency across your different products, and within product themselves.

### Baseline grid

The baseline grid is a vertical baseline of 8px (0.5 rem) increments. Use the baseline grid in Figma to help you always keep an eye on your vertical rhythm.

**Figma trick: to help you adjust your spacings, we encourage you to change the nudge default amount to 8px Press “cmd + /” and search “nudge amount” then use shift + arrow keys to nudge elements in the interface.**

#### How to use?

To apply the baseline grid to your interfaces, follow these steps:

1. Make sure your layout grids are shown by pressing: <kbd>Ctrl</kbd> + <kbd>G</kbd> (Windows) or <kbd>⌃</kbd> + <kbd>G</kbd> (macOS)
2. Select the frames you want to apply the grid on.
3. In the right panel, click on the styles in Layout Grids section.
4. Select “Grids > Baseline Grid 8”

<Image src={gridsLayoutTheLayoutSystemBaselineGridHowToUse} alt="" />

### Columns Grids and breakpoints

There are countless options when it comes to creating breakpoints.
We wanted to make sure that the Designers could design with reliable and adapted grids that would fit most of the cases. Based on the most commonly used devices and resolutions, we cut down to 5 major breakpoints.

If you need more grids to be created, please contact the Thales Design System Core Team.
You can find the associated statistics by clicking [on this link](https://gs.statcounter.com/screen-resolution-stats/tablet/worldwide/2020).

#### How to use?

To apply grids to your interfaces, follow these steps:

1. Make sur you layout grids shown by pressing: <kbd>Ctrl</kbd> + <kbd>G</kbd> (Windows) or <kbd>⌃</kbd> + <kbd>G</kbd> (macOS)
2. Select the frames you want to apply the grid on.
3. In the right panel, click on the styles in Layout Grids section.
4. Select “Grids > Select your grid”

To help you select the right grid according to your screen size, please follow the breakpoints recommendations below.

#### Breakpoints system

Thales Design System provides layouts with different column structures. You will find 4, 6, 8 and 12 columns grids. For each breakpoint, you will find recommendations on number of columns, gutters and margins to apply.

##### Fluid containers

The fluid grid system is based on fluidity, so the size of columns adapts according to gutters and margin, in this way, the grid will scale with your screen size.

| Breakpoint | Range (px)         | Devices                                                                                                                                     | Columns | Gutters | Margins |
| ---------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- | ------- |
| xxsmall    | 0-360              | smartwatches                                                                                                                                | 4       | 8px     | 16px    |
| xsmall     | **360** - 640      | mobile, small tablets                                                                                                                       | 4       | 8px     | 16px    |
| small      | **640** - 767      | small tablets <abbr title="Portrait mode">P</abbr>, small mobiles <abbr title="Landscape mode">L</abbr>                                     | 8       | 16px    | 32px    |
| medium     | **768** - 991      | tablets (<abbr title="Portrait mode">P</abbr>/<abbr title="Landscape mode">L</abbr>), large mobiles (<abbr title="Landscape mode">L</abbr>) | 8       | 16px    | 32px    |
| large      | **992** - 1199     | medium to large tablets                                                                                                                     | 12      | 16px    | 32px    |
| xlarge     | **1280** and above | large tablets, desktop, large devices                                                                                                       | 12      | 16px    | 32px    |

##### Responsive scale

The breakpoint should always be defined by the min-width value (e.g the breakpoint value for medium should be min-width: 768px)

The columns widths are fluid and should scale according to the viewport size and the associated breakpoint.

##### Fixed width containers

The fixed grid system is based on defined layout sizes, triggered by breakpoints. The maximum width of every containers is based on the breakpoint value and its relative minimum width.

| Breakpoint | Range (px)         | Devices                                                                                                                                     | Columns | Column Size | Gutter |
| ---------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- | ------ |
| xxsmall    | 0-360              | smartwatches                                                                                                                                | 4       | Fluid       | 8px    |
| xsmall     | **360** - 640      | mobile, small tablets                                                                                                                       | 4       | 84px        | 8px    |
| small      | **640** - 767      | small tablets <abbr title="Portrait mode">P</abbr>, small mobiles <abbr title="Landscape mode">L</abbr>                                     | 8       | 66px        | 16px   |
| medium     | **768** - 991      | tablets (<abbr title="Portrait mode">P</abbr>/<abbr title="Landscape mode">L</abbr>), large mobiles (<abbr title="Landscape mode">L</abbr>) | 8       | 82px        | 16px   |
| large      | **992** - 1199     | medium to large tablets                                                                                                                     | 12      | 68px        | 16px   |
| xlarge     | **1280** and above | large tablets, desktop, large devices                                                                                                       | 12      | 92px        | 16px   |

##### Available grids

<Image
  src={
    gridsLayoutTheLayoutSystemColumnGridsAndBreakpointsBreakpointsSystemAvailableGrids
  }
  alt=""
/>

To make it easier, we cut down the number of grid to their initial utility. This means some breakpoints share the same grid.

## Usage guidelines

The entire layout system of Thales Design System is based on the 8px baseline, and is built upon the spacing scale. All the grids provided in the library are made to help you build better experiences, and bring consistency across your different products, and within product themselves.

### Create regions

To help prepare your designs for responsiveness, you should define regions in your layouts to create a consistent structure in the product.
To create regions, use the gutters and the margins as limits to the zones you want to define.
To optimize responsiveness, design the regions for every breakpoint.

<Image
  src={gridsLayoutUsageGuidelinesCreateRegions}
  alt=""
  class="docs-grid-layouts-image-panel"
/>

### Don’t align everything to the grid

When creating regions, you create an enclosed environnement to contextualize components that belong together. Those elements need to be aligned according to their relationships and purpose.
Only align layout regions strictly to the grid and do not compromise the design by doing it with individual components.

<div class="docs-grid-layouts-image-row">
  <Image src={gridsLayoutUsageGuidelinesDonTAlignEverythingToTheGrid0} alt="" />
  <Image src={gridsLayoutUsageGuidelinesDonTAlignEverythingToTheGrid1} alt="" />
</div>

### Don’t fall in the gutter/gap

The grid gutters are here to create space and breathing room between the regions.
Do not, ever, extend a layout region in the gutters and only span them from a column edge to another.

<Image
  src={gridsLayoutUsageGuidelinesDonTFallInTheGutterGap}
  alt=""
  class="docs-grid-layouts-image-panel"
/>

## Layout Grid Examples

### Desktop Fluid Grid

Desktop | 1366 \* 768

<Image src={gridsLayoutLayoutGridExamplesDesktopFluidGrid} alt="" />

### Tablet Fluid Grid

Portrait Tablet | 768 \* 1024

<Image src={gridsLayoutLayoutGridExamplesTabletFluidGrid0} alt="" />

Landscape Tablet | 1200 \* 800

<Image src={gridsLayoutLayoutGridExamplesTabletFluidGrid1} alt="" />

### Mobile Fluid Grid

Mobile | 360 \* 640

<Image src={gridsLayoutLayoutGridExamplesMobileFluidGrid} alt="" />

### Breakpoint: 1280px (x large)

Desktop | 1366 \* 768

<Image src={gridsLayoutLayoutGridExamplesBreakpoint1280pxXLarge} alt="" />

### Breakpoint: 992px (large)

Small Desktop | 1152 \* 700

<Image src={gridsLayoutLayoutGridExamplesBreakpoint992pxLarge} alt="" />

### Breakpoint: 768px (medium)

Tablet | 768 \* 1024

<Image src={gridsLayoutLayoutGridExamplesBreakpoint768pxMedium} alt="" />

### Breakpoint: 640px (small)

Landscape Mobile | 640 \* 360

<Image src={gridsLayoutLayoutGridExamplesBreakpoint640pxSmall} alt="" />

### Breakpoint: 360px (x small)

Mobile | 360 \* 640

<Image src={gridsLayoutLayoutGridExamplesBreakpoint360pxXSmall} alt="" />



# Borders

Borders are used across composition elements to visually contain, separate or highlight some part of the interface. In combination to space and size hierarchy, borders strengthen the visual flow of an interface and offer discrete visual hints to help the user scan through the content and get their bearings.

Borders are made of a set of properties:

- Size (width)
- Radius
- Style
- Color

In the last section below, you’ll find some examples of borders combining those properties and also presets that are approved in the Quantum design system.

## Specifications

### Border size

The size of a Border refers to its thickness. Why the term “size” has been favoured against the term “width” is explained later in the documentation below.

| Asset                   | Token name          | Raw value | Rem value | Usage                                  |
| ----------------------- | ------------------- | --------- | --------- | -------------------------------------- |
| <BorderSize size={0} /> | $border.size.none   | 0px       | 0rem      | Equivalent to no border (border: none) |
| <BorderSize size={1} /> | $border.size.thin   | 1px       | 0.0625rem | Used for dividers and form inputs      |
| <BorderSize size={2} /> | $border.size.medium | 2px       | 0.125rem  | Used as the default value              |
| <BorderSize size={4} /> | $border.size.thick  | 4px       | 0.25rem   | Used for active indicators             |

### Border radius

The radius of a Border refers to the roundness of any of its angles.

| Asset                           | Token name            | Raw value | Rem value | Usage                                             |
| ------------------------------- | --------------------- | --------- | --------- | ------------------------------------------------- |
| <BorderRadius value="0px" />    | $border.radius.none   | 0px       | 0rem      | Equivalent to sharp borders (border-radius: none) |
| <BorderRadius value="2px" />    | $border.radius.medium | 2px       | 0.125rem  | Used as the default value                         |
| <BorderRadius value="4px" />    | $border.radius.large  | 4px       | 0.25rem   | Used for focus rings                              |
| <BorderRadius value="1000px" /> | $border.radius.full   | 1000px    | 62.5rem   | Used to get a full rounded style effect           |
| <BorderRadius value="50%" />    | $border.radius.circle | 50%       | -         | For developer usage only                          |

### Border style

The style of a Border refers to its appearance. Different border styles exist but only the solid style is allowed in Quantum for now.

| Asset                    | Token name            | Value | Usage                     |
| ------------------------ | --------------------- | ----- | ------------------------- |
| <BorderStyle size={4} /> | $border.style.default | solid | Used as the default value |

### Border color

See the [semantic colors in Quantum Foundations](/docs/foundations/colors#semantic-colors) to know which color to apply on a Border.

## Application

The use and application of border token values is pretty straightforward but can be hijacked in some use cases where it visually appears as a border but is, in reality, a container element.

### Examples

#### No border is still border

For example, with the Button component. The Button outline variant has a clear visual border but the Button filled variant, even if no visual border is visible, still has border properties applied to it.

<Image src={bordersApplicationExamplesNoBorderIsStillBorder} alt="" />

#### Full rounded Vs. Circle

Even if the visual end result can be similar in some setups, there is a difference between the full rounded radius and the circle radius. Full rounded radius is used when the shape does not require to be a circle. Circle radius has to be used when the shape must be a circle. For designers in Figma, there is no difference between the two because a % value is not allowed. You have to use a large pixel value like 1000px so whatever the size of your element will be you can guarantee that the visual end result is full rounded. For the developers however, the circle value is better suited when you need a circle shape like an avatar (see example on the right).

<Image src={bordersApplicationExamplesFullRoundedVsCircle} alt="" />

#### Indicator & Separator

Some visual elements look like borders but in reality are container elements with height and width. For example an active Tab indicator or a section separator. In this case, border guidelines are adapted to a container element. The container element width is used as the border width and the block background color as the border color.

As stroke/outline/border lookalike, they must use the specific tokens for borders.

This also explain why the term “size” has been favoured against “width” to name the tokens for borders.

<Image src={bordersApplicationExamplesIndicatorSeparator} alt="" />

### Regular border presets

#### Active indicator

- Is a container element
- Always use a thick size in width or height
- Always use a medium radius on relevant corners

<Image src={bordersApplicationRegularBorderPresetsActiveIndicator} alt="" />

#### Divider line

- Is a container element
- Always use a medium size in width or height
- Always use a medium radius on all corners

<Image src={bordersApplicationRegularBorderPresetsDividerLine} alt="" />

#### Button

- Is the border of the component container
- Always use a medium border size for Button outline
- Always use a medium border radius
- Use the large border radius for the focus ring

<Image src={bordersApplicationRegularBorderPresetsButton} alt="" />

#### Input

- Is the border of the component container
- Always use a thin border size
- Always use a medium border radius
- If not a circle, use the large border radius for the focus ring

<Image src={bordersApplicationRegularBorderPresetsInput} alt="" />



# Shadows & Elevation

Shadows and elevations are used across components and patterns to establish and maintain functional boundaries between them. It helps to create visual hierarchy and focus through depth.

The elevation system is made mainly from [Material Design Elevation system](https://m2.material.io/design/environment/elevation.html#elevation-in-material-design) in which you can find more recommendations and guidelines.

## Shadows

Shadows are used to express the degree of elevation between surfaces. This degree of elevation depends of the size of the shadow and its softness. The closer is the surface from the surface behind it, the smaller and sharpest will be its shadow. In contrary, if the surface is far, the shadow will be larger and softer.

| Token name                                                       | Preview                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Elevation (dp) | Shadow values                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Usage                                                                 |
| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| $shadow-xs-strong<br/>$shadow-xs-light<br/>$shadow-xs-ultralight | <div style="display: flex; flex-direction: column; gap: 10px"><Shadow label="STRONG" boxShadow="0 2px 2px 0 hsla(235, 96%, 10%, 0.14), 0 3px 4px 0 hsla(235, 96%, 10%, 0.14), 0 1px 5px 0 hsla(235, 96%, 10%, 0.2)" /> <Shadow label="LIGHT" boxShadow="0 2px 2px 0 hsla(235, 96%, 10%, 0.04), 0 3px 4px 0 hsla(235, 96%, 10%, 0.04), 0 1px 5px 0 hsla(235, 96%, 10%, 0.08)" /> <Shadow label="ULTRALIGHT" boxShadow="0 2px 2px 0 hsla(235, 96%, 10%, 0.02), 0 3px 4px 0 hsla(235, 96%, 10%, 0.02), 0 1px 5px 0 hsla(235, 96%, 10%, 0.04)" /></div>                    | 2              | <b>Strong</b><br/>0 2px 2px 0 hsla(235, 96%, 10%, 0.14)<br/>0 3px 4px 0 hsla(235, 96%, 10%, 0.14)<br/>0 1px 5px 0 hsla(235, 96%, 10%, 0.2)<br/><br/><b>Light</b><br/>0 2px 2px 0 hsla(235, 96%, 10%, 0.04)<br/>0 3px 4px 0 hsla(235, 96%, 10%, 0.04)<br/>0 1px 5px 0 hsla(235, 96%, 10%, 0.08)<br/><br/><b>Ultralight</b><br/>0 2px 2px 0 hsla(235, 96%, 10%, 0.02)<br/>0 3px 4px 0 hsla(235, 96%, 10%, 0.02)<br/>0 1px 5px 0 hsla(235, 96%, 10%, 0.04)<br/>                 | <ul><li>Cards</li></ul>                                               |
| $shadow-s-strong<br/>$shadow-s-light<br/>$shadow-s-ultralight    | <div style="display: flex; flex-direction: column; gap: 10px"><Shadow label="STRONG" boxShadow="0 2px 4px 0 hsla(235,96%,10%,0.14), 0 4px 5px 0 hsla(235,96%,10%,0.12), 0 1px 10px 0 hsla(235,96%,10%,0.20)" /> <Shadow label="LIGHT" boxShadow="0 2px 4px  0 hsla(235, 96%, 10%, 0.04) , 0 4px 5px  0 hsla(235, 96%, 10%, 0.04), 0 1px 10px 0 hsla(235, 96%, 10%, 0.08)" /> <Shadow label="ULTRALIGHT" boxShadow="0 2px 4px  0 hsla(235, 96%, 10%, 0.02), 0 4px 5px  0 hsla(235, 96%, 10%, 0.02), 0 1px 10px 0 hsla(235, 96%, 10%, 0.04)" /></div>                    | 4              | <b>Strong</b><br/>0 2px 4px 0 hsla(235, 96%, 10%, 0.14)<br/>0 4px 5px 0 hsla(235, 96%, 10%, 0.12)<br/>0 1px 10px 0 hsla(235, 96%, 10%, 0.20)<br/><br/><b>Light</b><br/>0 2px 4px 0 hsla(235, 96%, 10%, 0.04)<br/>0 4px 5px 0 hsla(235, 96%, 10%, 0.04)<br/>0 1px 10px 0 hsla(235, 96%, 10%, 0.08)<br/><br/><b>Ultralight</b><br/>0 2px 4px 0 hsla(235, 96%, 10%, 0.02)<br/>0 4px 5px 0 hsla(235, 96%, 10%, 0.02)<br/>0 1px 10px 0 hsla(235, 96%, 10%, 0.04)<br/>             | <ul><li>Tooltips</li><li>Headers</li></ul>                            |
| $shadow-m-strong<br/>$shadow-m-light<br/>$shadow-m-ultralight    | <div style="display: flex; flex-direction: column; gap: 10px"><Shadow label="STRONG" boxShadow="0 8px 10px 0 hsla(235, 96%, 10%, 0.14) , 0 3px 14px 0 hsla(235, 96%, 10%, 0.12), 0 4px 5px  0 hsla(235, 96%, 10%, 0.20)" /> <Shadow label="LIGHT" boxShadow="0 8px 10px 0 hsla(235, 96%, 10%, 0.04), 0 3px 14px 0 hsla(235, 96%, 10%, 0.04), 0 4px 5px  0 hsla(235, 96%, 10%, 0.08)" /> <Shadow label="ULTRALIGHT" boxShadow="0 8px 10px 0 hsla(235, 96%, 10%, 0.02), 0 3px 14px 0 hsla(235, 96%, 10%, 0.02), 0 4px 5px  0 hsla(235, 96%, 10%, 0.04)" /></div>         | 8              | <b>Strong</b><br/>0 8px 10px 0 hsla(235, 96%, 10%, 0.14)<br/>0 3px 14px 0 hsla(235, 96%, 10%, 0.12)<br/>0 4px 5px 0 hsla(235, 96%, 10%, 0.20)<br/><br/><b>Light</b><br/>0 8px 10px 0 hsla(235, 96%, 10%, 0.04)<br/>0 3px 14px 0 hsla(235, 96%, 10%, 0.04)<br/>0 4px 5px 0 hsla(235, 96%, 10%, 0.08)<br/><br/><b>Ultralight</b><br/>0 8px 10px 0 hsla(235, 96%, 10%, 0.02)<br/>0 3px 14px 0 hsla(235, 96%, 10%, 0.02)<br/>0 4px 5px 0 hsla(235, 96%, 10%, 0.04)<br/>          | <ul><li>Contextual overlays</li><li>Select</li><li>Menu Bar</li></ul> |
| $shadow-l-strong<br/>$shadow-l-light<br/>$shadow-l-ultralight    | <div style="display: flex; flex-direction: column; gap: 10px"><Shadow label="STRONG" boxShadow="0 16px 24px 0 hsla(235, 96%, 10%, 0.14), 0 6px  30px 0 hsla(235, 96%, 10%, 0.12), 0 8px  10px 0 hsla(235, 96%, 10%, 0.20)" /> <Shadow label="LIGHT" boxShadow="0 16px 24px 0 hsla(235, 96%, 10%, 0.04), 0 6px  30px 0 hsla(235, 96%, 10%, 0.04), 0 8px  10px 0 hsla(235, 96%, 10%, 0.08)" /> <Shadow label="ULTRALIGHT" boxShadow="0 16px 24px 0 hsla(235, 96%, 10%, 0.02), 0 6px  30px 0 hsla(235, 96%, 10%, 0.02), 0 8px  10px 0 hsla(235, 96%, 10%, 0.04)" /></div> | 12             | <b>Strong</b><br/>0 16px 24px 0 hsla(235, 96%, 10%, 0.14)<br/>0 6px 30px 0 hsla(235, 96%, 10%, 0.12)<br/>0 8px 10px 0 hsla(235, 96%, 10%, 0.20)<br/><br/><b>Light</b><br/>0 16px 24px 0 hsla(235, 96%, 10%, 0.04)<br/>0 6px 30px 0 hsla(235, 96%, 10%, 0.04)<br/>0 8px 10px 0 hsla(235, 96%, 10%, 0.08)<br/><br/><b>Ultralight</b><br/>0 16px 24px 0 hsla(235, 96%, 10%, 0.02)<br/>0 6px 30px 0 hsla(235, 96%, 10%, 0.02)<br/>0 8px 10px 0 hsla(235, 96%, 10%, 0.04)<br/>    | <ul><li>Dialogs</li><li>Modals</li></ul>                              |
| $shadow-xl-strong<br/>$shadow-xl-light<br/>$shadow-xl-ultralight | <div style="display: flex; flex-direction: column; gap: 10px"><Shadow label="STRONG" boxShadow="0 24px 38px 0 hsla(235, 96%, 10%, 0.14), 0 9px  46px 0 hsla(235, 96%, 10%, 0.12), 0 11px 15px 0 hsla(235, 96%, 10%, 0.20)" /> <Shadow label="LIGHT" boxShadow="0 24px 38px 0 hsla(235, 96%, 10%, 0.04), 0 9px  46px 0 hsla(235, 96%, 10%, 0.04), 0 11px 15px 0 hsla(235, 96%, 10%, 0.08)" /> <Shadow label="ULTRALIGHT" boxShadow="0 24px 38px 0 hsla(235, 96%, 10%, 0.02), 0 9px  46px 0 hsla(235, 96%, 10%, 0.02), 0 11px 15px 0 hsla(235, 96%, 10%, 0.04)" /></div> | 16             | <b>Strong</b><br/>0 24px 38px 0 hsla(235, 96%, 10%, 0.14)<br/>0 9px 46px 0 hsla(235, 96%, 10%, 0.12)<br/>0 11px 15px 0 hsla(235, 96%, 10%, 0.20)<br/><br/><b>Light</b><br/>0 24px 38px 0 hsla(235, 96%, 10%, 0.04)<br/>0 9px 46px 0 hsla(235, 96%, 10%, 0.04)<br/>0 11px 15px 0 hsla(235, 96%, 10%, 0.08)<br/><br/><b>Ultralight</b><br/>0 24px 38px 0 hsla(235, 96%, 10%, 0.02)<br/>0 9px 46px 0 hsla(235, 96%, 10%, 0.02)<br/>0 11px 15px 0 hsla(235, 96%, 10%, 0.04)<br/> | <ul><li>Notifications</li></ul>                                       |

## Elevations

### Principles

The elevation is measured as the distance between surfaces. The distance from the front of one surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows.

Each shadow is corresponding to a unit along the elevation scale going from 2dp to 24dp.

<Image src={shadowsElevationElevationsPrinciple0} alt="" />

Depending of the surface behind them, surfaces with the same elevation can appear differently. In the example below, both surfaces A and B are at the same 8dp elevation. Because the surface B is in front of another surface (C) that already has 4dp elevation, it will cast a different shadow that is also 4dp.

<Image src={shadowsElevationElevationsPrinciple1} alt="" />

### Elevation hierarchy

Like typography styles, elevation can be used in order to enforce hierarchy of content depending on whether they are at similar or different elevations.

#### Content at different elevations

Surfaces in front of other surfaces typically:

- Contain more important content. The example below demonstrates how more important content that is of primary focus appears in front of content that is of secondary focus.

<Image
  src={shadowsElevationElevationsElevationHierarchyContentAtDifferentLevel0}
  alt=""
/>

- Focuses attention while maintaining context

<Image
  src={shadowsElevationElevationsElevationHierarchyContentAtDifferentLevel1}
  alt=""
/>

#### Content on coplanar surfaces

Contents that are placed at the same elevation (or coplanar surfaces) indicate they contain content of same level of hierarchy that have equal importance as one another. For example, all cards in a collection have equal importance.

<Image
  src={shadowsElevationElevationsElevationHierarchyContentOnCoplanarSurfaces}
  alt=""
/>



# Iconography

Iconography in Thales Design System plays an essential role.
It helps to create visual indicators and enhance readability of components, and guide users through a better understanding of actions when used correctly.

Thales Design System uses Material Icons.

<Image
  src={iconography}
  alt="Material Design icons–Open sourced Material Design icons in all 5 themes"
/>

## Google Material Icons (main icons library)

Material Icons library serves as the default and main icons library within Quantum Design System. **Your first reflex should be to look at the [Figma | Material Icons library in Quantum](https://www.figma.com/design/HZQxgQAzw5ZSjkeWNsAIax/Quantum---3.1-Material-Design-Icons--Community-?node-id=557-18875&p=f&t=gCuUZS7fJwi4UfX4-0)** to search for icons. This library alone can cover most of your needs in interface design.

Google Material provides a wide range of day-to-day icons. **It also comes in a variety of styles and rely on a clean, simple form factor style, perfect for carrying functional visual representations.**

Quantum Design System aims **to be as flexible as possible** for product creators like you, designers and developers.
Apart from these reasons, the decision to use Material Icons for our icon base was also taken because **many Thales digital products already use them, thus this brings consistency along the way!**



- Material Icons are available in five styles and a range of downloadable sizes and densities.
- We strongly recommend using only one style set of icon per product (either choose solid, outline or any other style and stick to it).

You can also visit the [Material Icons library](https://fonts.google.com/icons) online to have a better search experience for specific icons.

### How to use this library?

You can use Material icons as a Figma library in your project file. Search for the library [Figma | Material Design icons](https://www.figma.com/community/file/1014241558898418245) in your Figma assets panel.