Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Foundations
Design tokens
Design tokens
The designs tokens are the atoms of visual design, basically define color, typography, spaces, borders, corners, shadows... of a design, in the form of entity with a specific nomenclature. These entities are absorbed through the Figma API by development and converted into styles usable by all technologies from CSS SASS IOs Android...
Benefits
Increases consistency between design and development.
It speeds up changes and allows the development to be updated as the design evolves.
Allows you to create multi-brand themes or hot-switch between a light and dark theme.
It orders and standardizes all the styles of the design system.
Anatomy
The token name will always start with the symbol "$" followed by the "category". Subsequently the necessary elements will appear in the order shown in the "Structure" and always separated by "-": "$color-bg-interactive-pressed-soft".
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
