> 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/tokens.md).

# Tokens

### Qu'est ce qu'un token ?

<figure><img src="/files/tCrDgJTzz9315hDtORzQ" alt=""><figcaption></figcaption></figure>

Un token est une valeur de référence du Design System. On part d’une **valeur RAW** (ex : `#130C0C`), que l’on transforme en **variable** pour pouvoir la manipuler dans le code et dans Figma (ex : `--primitive-squid-opacity-950`).

Ensuite, on crée un **token sémantique** qui décrit une utilisation précise — par exemple la couleur de fond d’un bouton primary (ex : `--interactive-primary-background`).

<details>

<summary>Objectifs</summary>

* utiliser les mêmes valeurs partout,
* réduire les variations inutiles,
* faciliter les mises à jour,
* limiter le temps passé à corriger ou aligner les interfaces,
* permettre aux designers de parler le même langage que les développeurs,
* limiter les divergences entre maquettes et production.

</details>

<details>

<summary>Impact sur la performance et la maintenance</summary>

En pratique, l’usage des tokens permet :

* **moins de travail répété** : une valeur définie une fois est réutilisée partout ;
* **des mises à jour plus rapides** : une modification de token peut mettre à jour tout un ensemble de composants ;
* **un code plus clair** : les styles sont centralisés et mieux structurés, ce qui limite les régressions ;
* **une meilleure maîtrise des coûts** : moins de temps passé à harmoniser, corriger ou “rattraper” des écarts visuels.

</details>

***

### Ce que couvrent les tokens

Les tokens ne décrivent pas les composants, mais leurs **fondations**.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Couleurs</strong></td><td>Couleurs interactives et statiques</td><td><a href="/files/vshcswnZPdSXxOqeriqB">/files/vshcswnZPdSXxOqeriqB</a></td><td><a href="/pages/Xx2AicUBAOI0ffQY4yA7">/pages/Xx2AicUBAOI0ffQY4yA7</a></td></tr><tr><td><strong>Typographies</strong></td><td>Tailles de texte, graisses, hauteurs de ligne</td><td><a href="/files/A58ccKPoF1bLbsHm3jrN">/files/A58ccKPoF1bLbsHm3jrN</a></td><td><a href="/pages/6jP5kIgYMJUnCpxTJCLC">/pages/6jP5kIgYMJUnCpxTJCLC</a></td></tr><tr><td><strong>Icônes</strong></td><td>Tailles et épaisseurs des pictogrammes</td><td><a href="/files/TcrW7QKdURHVkWMSIoUc">/files/TcrW7QKdURHVkWMSIoUc</a></td><td><a href="/pages/yu0rsInI5n9deYMbFUKE">/pages/yu0rsInI5n9deYMbFUKE</a></td></tr></tbody></table>