diff --git a/src/tokens/README.md b/src/tokens/README.md new file mode 100644 index 0000000..091775a --- /dev/null +++ b/src/tokens/README.md @@ -0,0 +1,57 @@ +# 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* + + +
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.)* + +
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.