How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogDesign tokens
What are design tokens?
Design tokens store style values, such as colors and fonts, allowing style values to be applied consistently across designs, code, tools, and platforms. Basically, a token is a piece of UI information. Tokens are used instead of hard-coded values to make it easy to manage the visual style and ensure consistency across products.
Token namings
We support Background/Main tokens for colors, Subhead/Bold for fonts, ic/24/checkbox_filled for icons, img/ua for image.
We support Radius/12 for radius, Indent/12 for indents.
How to use tokens in design
Design tokens are integrated into our component libraries and Modulor. They cover different platforms, color themes, component states, and more. The names of colors and typography in our libraries in Figma correspond to the names of tokens in the repository. This simplifies development: for example, if you change the color in Figma, it will change in different products.
Tokens and development
TypeScript is used to describe tokens. Design tokens are collected in one npm package for quick installation and connection to the project. The generator allows you to export tokens in different formats: scss, less, css in JS, etc.
