Design Tokens

Design Tokens are the absolute smallest building blocks of a design system. They are agnostic, single-value variables - like hex codes for color, pixel values for spacing, or font names for typography. They are stored in a centralized format.

e.g.

token.css

:root {

   /* PRIMITIVES TOKENS */

   --color-off: antiquewhite;

   --color-red: red;

   --color-green: green;

}

[data-theme="dark"] {

   /* PRIMITIVES TOKENS for dark theme */

   --color-off: darkslategrey;

}

:root,

[data-theme="dark"] {

   /* SEMANTIC TOKENS */

   --bg-color-main: var(--color-off);

   /* COMPONENT TOKENS */

   --body-bg-main: var(--bg-color-main);

}

style.css

body {

background-color: var(--body-bg-main);

}