# Tokens

The **tokens** folder centralizes the design values used in the interface, such as colors, typography, spacing, etc. It builds on the foundations defined in the **base** folder (*colors* and *fonts*) to organize them into reusable design systems. 
This folder is made up of two subfolders:
- themes
- typography

## Themes 

The **themes** folder organizes `colors` from the graphic charter according to display modes (e.g. *light* and *dark*). It structures these colors into two main categories: **decisions** and **options**, represented by their respective subfolders.

This separation distinguishes final design choices (decisions) from available values (options), while facilitating theme management in the interface.

### Decisions

This subfolder contains the main colors used in graphic interface design. These colors reflect concrete design intentions and are organized into four modules:

- **artwork**

    *colors used for illustrations or decorative graphic elements*

- **background**

    *background colors of components and sections*

- **border**

    *colors of borders and separators*

- **text**

    *colors applied to textual content*
    
    
<br/>These colors are used directly in interface components.

### Options

This subfolder contains alternative or secondary values, which can be used to enrich or customize the interface. They are also divided into modules represented by these folders: 

- **illustration**

    *additional colors for visuals*

- **primary**

    *main colors available in the charter*

- **system**

    *system colors (states, alerts, status, etc.)*

<br/>These options serve as a color reference from which decisions are made.

## Typography

This folder organizes `typographic styles` (*titles*, *paragraphs*, etc.) using the fonts defined in the **base** folder.