Docs :: Tokens

Design tokens are the “atoms” of a design system. They define the design elements of a user interface, such as colors, typography, and spacing.

In mCSS, tokens are CSS custom properties that provide a flexible, coherent, and harmonious set of values designed to make implementing UI/UX projects fast and easy.

When you start a new project, open settings.tokens.css and change the values of as many tokens as necessary to match the design you’re planning to implement. (Things like spacing might not need to change, but you’ll almost certainly need to customize your base and primary colors for instance.)

Themes offer an additional layer of abstraction for tokens (ie. settings.theme.default.css). These tokens only ever take another token for value and are useful to standardize UI elements in logical groups. For example, you can have a --light-border-color with a value of --base-100. This allows you to create tokens with meaning and context which makes them more intuitive to use.

elements.*, global.*, and page.* files tend to use abstracted theme tokens, while component.* generally use low level tokens. There are no hard and fast rules about the type of token you should use in your custom component. Just try to think where else this style is used in the design and if it comes up in many places with the same context, a new theme token is probably the best option.

Dimension tokens can be used anywhere you need to set margin, padding, width, height, etc.

Font stack

There are 3 font stacks set up by default for the font-family CSS Property.

These stacks are optimized for fonts available on device, to maximize for speed and alleviate any layout shifts or flashes. You can find more stacks at Modern Font Stacks.

If you’d like to bring in your own fonts or Google fonts, you can override the display and text tokens inside your theme file.

Font size

Check out typescale.com if you need help creating your own sizes.

Font weight

Letter spacing

Line height

Check out tints.dev if you want to make your own palettes programmatically.

It wouldn’t be super useful to list the values here. You can look at them on Github if you’re curious.

Opacity

Z-index

Transition