What is the difference between using design tokens and just styling it with CSS?

[mondermurshed]

Hello, first of all, thank you for providing this amazing library!

I am a beginner with the FluentUI library (and honestly with UI libraries in Blazor in general), and I’ve recently come across the concept of design tokens. I tried comparing them with CSS by doing the same styling tasks, and I was able to get the same result.

The only difference I can currently see is that design tokens seem to be the way to change the theme mode and colors globally for the whole application — something that’s not as straightforward with plain CSS.

I’ve read through the demo instructions, but I still couldn’t fully figure out when I should use design tokens instead of CSS.

I know this might be a beginner-level question, but I really tried and couldn’t find a clear answer.

[vnbaaij]

It is 'just' a way to abstract away using css variables directly and make modifications more easily.
For example, you just set the Accent or Base color with a Design Token and all related and derived css variables are then updated bij the script.