31 lines
1.5 KiB
Markdown
31 lines
1.5 KiB
Markdown
# Summary
|
|
|
|
**Current version : 1.1.3**
|
|
|
|
This project defines the *visual foundations* of the **design system** and establishes a strategy for structuring styles to guarantee their *reusability* in the design of graphic interfaces.
|
|
|
|
The architecture is based on the principle of **design tokens**, enabling basic components (colors, typography, sizes, etc.) to be separated and exposed as centralized CSS variables, facilitating design consistency and maintenance.
|
|
|
|
## Project structure
|
|
|
|
The project is organized into three main modules:
|
|
|
|
- [**base**](./src/base/README.md)
|
|
|
|
Contains the fundamental elements of the graphic charter: color palettes and typographic definitions.
|
|
|
|
- [**tokens**](./src/tokens/README.md)
|
|
|
|
Structures and transforms basic components into thematic tokens (light/dark), organized into categories (decisions, options, etc.) for direct use in interfaces.
|
|
|
|
- [**output**](./output/)
|
|
|
|
* Contains [`variables.css`](./output/variables.css) file, containing all global CSS variables ready for integration into front-end projects.
|
|
|
|
* Contains [`typography.module.css`](./output/typography.module.css) file, containing the CSS classes defining the different typographic variants available.
|
|
|
|
|
|
## Important
|
|
|
|
In order to encourage the adoption of best practices, tools and technologies used in the NTIC market, this graphic charter is inspired by the [**French government's Design System (DSFR)**](https://www.systeme-de-design.gouv.fr/). It takes up the basic components, while **streamlining** and adapting them to the specific needs of the project.
|