🎨 Token System

The Token System is the base configuration for all brand identities like colors, fonts, shadows and so on. It is what will be referenced by our Design System for both, the npm package (Code) and Figma Prototypes (Design).

🗂 Folder Structure

For each Brand we are having one folder like anynines or bum. Each Brand can have multiple themes, these can be versions brand-2021 and brand-2022 or themes like light and dark.

💎 Variables

Inside a brands folder you can find variables.ts, where you can make your changes from a central point. These variables are then referenced from all the other files. Usually we only need to change the GREY_COLORS, PRIMARY_COLORS, FONTS and RADIUS. The other variables can also be overwritten but by default reference to the anynines standard. (see defaults.ts)

❓ FAQ

How to add a new brand?

How to sync with Figma?

🅰️ Glossary

Brand

A Brand is represented by a folder with a specific set of files. It's core is the variables.ts file, which then gets referenced by the other files.

Theme

Each brand can have n themes, most commonly a light and dark theme. A theme usually shares most of the variables of the brand but can have slight differences.