# Tokens > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/tokens | File name | Source | | --------------------- | ------------- | | `settings.tokens.css` | [Github][src] | [src]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.tokens.css **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. ## How to use tokens 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.) For deviations you want to keep swappable, put the overrides in a [theme](/docs/themes) instead of editing the defaults. ## Interface tokens
| File name | Source | | ----------------- | ----------------- | | `settings.ui.css` | [Github][srcUi] |
[srcUi]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css Interface tokens offer an additional layer of abstraction over the raw tokens. They only ever take another token for value and standardize UI decisions in logical groups: semantic aliases like `--ui-border-color` (with a value of `--base-200`) or `--success-*`, plus every component's token defaults (`--bt-*`, `--card-*`, ...). This gives tokens meaning and context, which makes them more intuitive to use, and it's what makes [themes](/docs/themes) powerful: override one interface token and every rule that consumes it follows. `elements.*` and `global.*` files tend to use interface tokens, while `component.*` files mix them with 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 interface token is probably the best option. ## Color Check out [tints.dev](https://www.tints.dev) if you want to make your own palettes programmatically.
### Base | Token | Value | Demo | | ---------- | ------- | ----------------------------------------- | | `base-0` | #fff |
| | `base-50` | #f6f7f9 |
| | `base-100` | #edeef1 |
| | `base-200` | #d6dbe1 |
| | `base-300` | #b2bbc7 |
| | `base-400` | #8897a8 |
| | `base-500` | #697a8e |
| | `base-600` | #546375 |
| | `base-700` | #4a5666 |
| | `base-800` | #3c4550 |
| | `base-900` | #353c45 |
| | `base-950` | #23282e |
|
### Primary | Token | Value | Demo | | ------------- | ------- | -------------------------------------------- | | `primary-50` | #f0f9ff |
| | `primary-100` | #e0f2fe |
| | `primary-200` | #bae6fd |
| | `primary-300` | #7dd3fc |
| | `primary-400` | #38bdf8 |
| | `primary-500` | #0ea5e9 |
| | `primary-600` | #0284c7 |
| | `primary-700` | #0369a1 |
| | `primary-800` | #075985 |
| | `primary-900` | #0c4a6e |
| | `primary-950` | #082f49 |
|
### Feedback | Token | Value | Demo | | ----------- | ------- | ------------------------------------------ | | `yes-100` | #d5f6e8 |
| | `yes-200` | #afebd4 |
| | `yes-300` | #7adbbd |
| | `yes-400` | #46c4a0 |
| | `yes-500` | #13886d |
| | `no-100` | #ffe4e6 |
| | `no-200` | #fecdd3 |
| | `no-300` | #fda4af |
| | `no-400` | #fb7185 |
| | `no-500` | #e11d48 |
| | `maybe-100` | #fff7d6 |
| | `maybe-200` | #fff0b3 |
| | `maybe-300` | #ffd64a |
| | `maybe-400` | #ffc220 |
| | `maybe-500` | #f9a007 |
|
## Dimension Dimension tokens can be used anywhere you need to set `margin`, `padding`, `width`, `height`, etc.
| Token | Value | Demo | | ------- | ----- | ------------------------------------ | | `xs1` | 4px |
| | `xs2` | 8px |
| | `xs3` | 12px |
| | `sm1` | 16px |
| | `sm2` | 20px |
| | `sm3` | 24px |
| | `md1` | 28px |
| | `md2` | 32px |
| | `md3` | 36px |
| | `lg1` | 40px |
| | `lg2` | 44px |
| | `lg3` | 48px |
| | `xl1` | 56px |
| | `xl2` | 64px |
| | `xl3` | 80px |
| | `xxl1` | 96px |
| | `xxl2` | 112px |
| | `xxl3` | 128px |
| | `mega1` | 160px |
| | `mega2` | 192px |
| | `mega3` | 224px |
| | `giga1` | 256px |
| | `giga2` | 288px |
| | `giga3` | 320px |
| | `tera1` | 384px |
| | `tera2` | 480px |
| | `tera3` | 520px |
|
## Aspect ratio | Token | Value | Demo | | --------------- | ------- | ------------------------------------------ | | `ar-square` | 1 |
| | `ar-landscape` | 4/3 |
| | `ar-portrait` | 3/4 |
| | `ar-widescreen` | 16/9 |
| | `ar-golden` | 1.618/1 |
| ## Typography ### Font stack There are 3 font stacks set up by default for the `font-family` CSS Property. | Token | Value | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `text` | ui-sans-serif, system-ui, sans-serif | | `display` | Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, ui-sans-serif, sans-serif | | `monospace` | Dank Mono, Inconsolata, Fira Mono, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, ui-monospace, monospace | 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](https://modernfontstacks.com). If you'd like to bring in your own fonts or [Google fonts](https://fonts.google.com), you can override the `display` and `text` tokens inside your theme file. In case you're curious, `ui-sans-serif` is the system default, `sans-serif` is the browser default, and `system-ui` is the system default, wether serif or sans-serif. ### Font size Check out [typescale.com ](https://typescale.com) if you need help creating your own sizes.
| Token | Value | Demo | | -------------- | -------- | ---------------------------------------------- | | `text-xs` | 0.694rem |
Sample demo text
| | `text-sm` | 0.833rem |
Sample demo text
| | `text-md` | 1rem |
Sample demo text
| | `text-lg` | 1.2rem |
Sample demo text
| | `text-xl` | 1.44rem |
Sample demo text
| | `display-sm` | 1.728rem |
Sample demo text
| | `display-md` | 2.074rem |
Sample demo text
| | `display-lg` | 2.488rem |
Sample demo text
| | `display-xl` | 2.986rem |
Sample demo text
| | `display-mega` | 3.583rem |
Demo text
| | `display-giga` | 4.299rem |
Demo text
|
### Heading sizes Headings use dedicated fluid tokens: each `--heading-*` interpolates with `clamp()` from a minimum size (at 480px viewports and below) to a maximum size (from 1024px up), so the type scale tightens on small screens without media queries. The preferred value mixes `rem` with `vw`, which keeps browser text zoom working. Override any of these in your own theme to change how a heading level scales.
| Token | Min (≤480px) | Max (≥1024px) | | ----------- | -------------------- | ----------------------- | | `heading-1` | `text-xl` (1.44rem) | `display-md` (2.074rem) | | `heading-2` | `text-lg` (1.2rem) | `display-sm` (1.728rem) | | `heading-3` | `text-lg` (1.2rem) | `text-xl` (1.44rem) | | `heading-4` | `text-md` (1rem) | `text-lg` (1.2rem) | | `heading-5` | `text-md` (1rem) | `text-md` (static) | | `heading-6` | `text-md` (1rem) | `text-md` (static) |
### Font weight | Token | Value | Demo | | ------------- | ----- | ----------------------------------------------- | | `extra-light` | 200 |
Sample demo text
| | `light` | 300 |
Sample demo text
| | `book` | 400 |
Sample demo text
| | `semi-bold` | 600 |
Sample demo text
| | `bold` | 700 |
Sample demo text
| | `black` | 900 |
Sample demo text
| ### Letter spacing | Token | Value | Demo | | -------------- | ------- | ------------------------------------------------ | | `tracking-sm` | -0.05em |
Sample demo text
| | `tracking-md` | 0.025em |
Sample demo text
| | `tracking-lg` | 0.05em |
Sample demo text
| | `tracking-xl` | 0.075em |
Sample demo text
| | `tracking-xxl` | 0.15em |
Sample demo text
| ### Line height | Token | Value | Demo | | ------------- | ----- | ------------------------------------------------------------------- | | `leading-xs` | 1 |
Sample demo text
| | `leading-sm` | 1.15 |
Sample demo text
| | `leading-md` | 1.375 |
Sample demo text
| | `leading-lg` | 1.5 |
Sample demo text
| | `leading-xl` | 1.75 |
Sample demo text
| | `leading-xxl` | 2 |
Sample demo text
| ## Borders
### Border radius | Token | Value | Demo | | -------------- | ----- | ----------- | | `radius-sm` | 3px |
| | `radius-md` | 5px |
| | `radius-lg` | 8px |
| | `radius-xl` | 12px |
| | `radius-xxl` | 16px |
| | `radius-round` | 1e5px |
|
### Border width | Token | Value | Demo | | ------------ | ----- | ----------- | | `border-sm` | 1px |
| | `border-md` | 2px |
| | `border-lg` | 4px |
| | `border-xl` | 8px |
| | `border-xxl` | 12px |
|
## Drop Shadow It wouldn't be super useful to list the values here. You can look at them [on Github][githubShadows] if you're curious. [githubShadows]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.tokens.css#L217
| Token | Demo | | ------------ | ----------- | | `shadow-sm` |
| | `shadow-md` |
| | `shadow-lg` |
| | `shadow-xl` |
| | `shadow-xxl` |
|
## Opacity | Token | Value | Demo | | ----- | ----- | ---------------------------------------- | | `o-0` | 0 | Opacity level 0 | | `o-1` | 0.2 | Opacity level 1 | | `o-2` | 0.4 | Opacity level 2 | | `o-3` | 0.6 | Opacity level 3 | | `o-4` | 0.8 | Opacity level 4 | | `o-5` | 1 | Opacity level 5 | ## Z-index | Token | Value | | ---------- | ----------- | | `z-bottom` | -1000000000 | | `z-0` | 0 | | `z-1` | 10 | | `z-2` | 20 | | `z-3` | 30 | | `z-4` | 40 | | `z-5` | 50 | | `z-top` | 1000000000 | ## Transition | Token | Value | | ----------------- | ----------------- | | `transition` | 220ms ease-in-out | | `transition-fast` | 100ms ease-in-out |