Install and setup @founfation-ui/tokens in your project.
To get the most out of @usefui/tokens, it is strongly recommended to use it
with @usefui/components.
pnpm add @usefui/tokens@usefui/tokens comes with large built-in libraries of Design Tokens, you'll
find colors, font-sizes, spacings, opacities and depths definitions. Each
design token come with a key-value and a set of annotations that you can use
in your application.
If you want to create custom library, @usefui/core provides a set of methods
enabling you to do so.
Design tokens offer several benefits over traditional design approaches:
Design tokens ensure that all UI elements have a consistent look and feel across different platforms and devices.
Design tokens can be easily updated and extended to accommodate new design requirements, making it easier to scale a design system.
Design tokens reduce the need for manual coding and enable developers to quickly implement design changes.
Design tokens can be used to create accessible designs by defining appropriate color contrast ratios, font sizes, and other accessibility-related properties.