58 lines
1.8 KiB
Markdown
58 lines
1.8 KiB
Markdown
|
# 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.
|