Skip to content

awesome-design-tokens/dtg-examples

Repository files navigation

Design Tokens Generator Examples

👀 About

Current repo contains reproduction of the same web application using several popular frontend solutions.
The common DNA for those project is Design Tokens, created with the help of Design Tokens Generator.

Some integrations require more effort than others, however in a nutshell the process is similar.
For detailed guides please refer to the documentation on the website.

Please note that for demonstration purposes all projects are built with Vite + ReactJS + Typescript. Essentially integrations should not be different for other frameworks, since projects mostly rely on CSS, Typescript and JSX.

⚙️ Common data

There are 2 shared projects that are used by all projects:

common-data - improvised database, model and assets,
common-tokens - shared foundations - core styles, themes and fonts.

tokens file is practically an export from the Design Tokens Generator.

📖 Projects

CSS Modules
CSS Modules guide

Headless UI
Headless UI guide

Most of application is built with plain JSX and styled with CSS modules.
Design tokens are used in the form of CSS variables.
Headless UI is used in 2 components without any additional setup.

Headless UI
Headless UI guide

Tailwind CSS
Tailwind CSS guide

Since Headless UI works great with Tailwind CSS (naturally),
this app implementation takes the latter for a spin.
Design tokens work via Tailwind theme, Headless UI components are used more or less the same.

Radix UI
Radix UI guide

Emotion
Emotion guide

These two technologies are used merely for sake of brevity and demonstration.
Emotion can be used quite differently, but since it's very much CSS like,
design tokens are also in CSS variables format. Radix UI is used to build 2 components.

Material UI
Material UI guide

Using all MUI technologies is certainly not mandatory, quite the opposite.
Design tokens are implemented via MUI theme layer with experimental CSS variables context.
Despite recommended approach, for demonstration sx property is used dominantly.
All components are built with MUI entities.

Chakra UI
Chakra UI guide

Theming Chakra UI is a very similar dev experience to theming Tailwind CSS.
All components are build with the framework entities.
Design tokens work via Chakra UI theme properties with exception of a couple custom fields.

🌐 Links and References

Images generated with Fusion Brain.
Fonts by Google Fonts.