> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/foundations/colors/static-colors.md).

# Couleurs statiques

### Surfaces (applats de couleur)

Chaque couleur à sa signification, ce système assure une compréhension optimale des informations de tous types que nous transmettons aux utilisateurs. Elles sont utilisés dans les [caption](broken://pages/3r5GuFv21odzxln4bKdK) par exemple.

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>background</strong></td><td><code>primitive/white/white</code></td><td>rgba(252, 252, 253, 1)</td><td><a href="/files/oRjYfnwyP5sK7Q37OIpK">/files/oRjYfnwyP5sK7Q37OIpK</a></td></tr><tr><td><strong>neutral</strong></td><td><code>primitive/squid/opacity/50</code></td><td>rgba(197, 185, 187, 0.14)</td><td><a href="/files/QuiulERdH97xYnUbe2GX">/files/QuiulERdH97xYnUbe2GX</a></td></tr><tr><td><strong>negative</strong></td><td><code>primitive/red/tint/50</code></td><td>rgba(255, 235, 239, 1)</td><td><a href="/files/WmMRi1dTPhiUB1rYGJVA">/files/WmMRi1dTPhiUB1rYGJVA</a></td></tr><tr><td><strong>attention</strong></td><td><code>primitive/orange/tint/50</code></td><td>rgba(255, 241, 235, 1)</td><td><a href="/files/6V0eUpUY567nJAv52gKq">/files/6V0eUpUY567nJAv52gKq</a></td></tr><tr><td><strong>positive</strong></td><td><code>primitive/green/tint/50</code></td><td>rgba(225, 254, 245, 1)</td><td><a href="/files/7wYprHjDhHM0g5B5Zm4g">/files/7wYprHjDhHM0g5B5Zm4g</a></td></tr><tr><td><strong>information</strong></td><td><code>primitive/blue/tint/50</code></td><td>rgba(225, 248, 254, 1)</td><td><a href="/files/47JZo7vwsFjQXgIbL5DA">/files/47JZo7vwsFjQXgIbL5DA</a></td></tr><tr><td><strong>notification</strong></td><td><code>primitive/red/tint/600</code></td><td>rgba(229, 0, 45, 1)</td><td><a href="/files/ptgYzzyR9pS3l210JA2m">/files/ptgYzzyR9pS3l210JA2m</a></td></tr><tr><td><strong>separator</strong></td><td><code>primitive/squid/opacity/200</code></td><td>rgba(184, 168, 171, 0.32)</td><td><a href="/files/HUp1mzuLwT5hICFEBF4J">/files/HUp1mzuLwT5hICFEBF4J</a></td></tr></tbody></table>

***

### Typographies

{% tabs %}
{% tab title="neutral" %}

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>neutral-light</strong></td><td><code>primitive/squid/opacity/500</code></td><td>rgba(31, 20, 21, 0.61)</td><td><a href="/files/NLMe1TjGy9HAiZjxMQ5P">/files/NLMe1TjGy9HAiZjxMQ5P</a></td></tr><tr><td><strong>neutral-medium</strong></td><td><code>primitive/squid/opacity/700</code></td><td>rgba(23, 13, 14, 0.8)</td><td><a href="/files/opwJALeLnjX41v8vjeZs">/files/opwJALeLnjX41v8vjeZs</a></td></tr><tr><td><strong>neutral-hard</strong></td><td><code>primitive/squid/opacity/950</code></td><td>rgba(19, 12, 12, 1)</td><td><a href="/files/PCzjGT9pqHHReaz106Bg">/files/PCzjGT9pqHHReaz106Bg</a></td></tr><tr><td><strong>neutral-on-dark</strong></td><td><code>primitive/white/white</code></td><td>rgba(252, 252, 253, 1)</td><td><a href="/files/ltUox4ALm4YblK8PNc6U">/files/ltUox4ALm4YblK8PNc6U</a></td></tr></tbody></table>
{% endtab %}

{% tab title="negative" %}

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>negative-light</strong></td><td><code>primitive/red/tint/600</code></td><td>rgba(229, 0, 45, 1)</td><td><a href="/files/HBz8AbQBfe9l7fKWCh3e">/files/HBz8AbQBfe9l7fKWCh3e</a></td></tr><tr><td><strong>negative-medium</strong></td><td><code>primitive/red/tint/700</code></td><td>rgba(214, 0, 42, 1)</td><td><a href="/files/2sWfjee7ExTS4f6ED4SC">/files/2sWfjee7ExTS4f6ED4SC</a></td></tr></tbody></table>
{% endtab %}

{% tab title="attention" %}

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>attention-light</strong></td><td><code>primitive/orange/tint/600</code></td><td>rgba(199, 73, 0, 1)</td><td><a href="/files/36BeBNqarByL0MI9y9rP">/files/36BeBNqarByL0MI9y9rP</a></td></tr><tr><td><strong>attention-medium</strong></td><td><code>primitive/orange/tint/700</code></td><td>rgba(189, 72, 0, 1)</td><td><a href="/files/vEYZaHWiyCAtsUGGhzRr">/files/vEYZaHWiyCAtsUGGhzRr</a></td></tr></tbody></table>
{% endtab %}

{% tab title="positive" %}

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>positive-light</strong></td><td><code>primitive/green/tint/600</code></td><td>rgba(0, 133, 84, 1)</td><td><a href="/files/u1pzf5hC8K9CsEsI1yvA">/files/u1pzf5hC8K9CsEsI1yvA</a></td></tr><tr><td><strong>positive-medium</strong></td><td><code>primitive/green/tint/700</code></td><td>rgba(0, 128, 81, 1)</td><td><a href="/files/qw10i1j7b6aHD6Qkzs8Z">/files/qw10i1j7b6aHD6Qkzs8Z</a></td></tr></tbody></table>
{% endtab %}

{% tab title="information" %}

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>information-light</strong></td><td><code>primitive/blue/tint/600</code></td><td>rgba(0, 114, 214, 1)</td><td><a href="/files/DAJxNDX92VTOrbcYGEsa">/files/DAJxNDX92VTOrbcYGEsa</a></td></tr><tr><td><strong>information-medium</strong></td><td><code>primitive/blue/tint/700</code></td><td>rgba(0, 106, 219, 1)</td><td><a href="/files/VWuetRGtj4UBKKERt8Wp">/files/VWuetRGtj4UBKKERt8Wp</a></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

***

### Strokes (couleur de traits)

<table data-view="cards"><thead><tr><th></th><th>Variable</th><th>Valeur</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>light</strong></td><td><code>primitive/squid/opacity/50</code></td><td>rgba(197, 185, 187, 0.14)</td><td><a href="/files/XUX3ELRh9Iz1rZ6mQDeC">/files/XUX3ELRh9Iz1rZ6mQDeC</a></td></tr><tr><td><strong>medium</strong></td><td><code>primitive/squid/opacity/100</code></td><td>rgba(209, 199, 201, 0.2)</td><td><a href="/files/gRsJTgS9QjPIjXpSqz2W">/files/gRsJTgS9QjPIjXpSqz2W</a></td></tr><tr><td><strong>hard</strong></td><td><code>primitive/squid/opacity/200</code></td><td>rgba(184, 168, 171, 0.32)</td><td><a href="/files/x4vpdBB6fsqSuCDiVLk5">/files/x4vpdBB6fsqSuCDiVLk5</a></td></tr></tbody></table>