{"_path":"/guide/introduction","_draft":false,"_partial":false,"_empty":false,"title":"Introduction","description":"What makes Design Tokens so useful.","excerpt":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Design Tokens Community Group's goal is to provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale.\n"},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/community/design-tokens","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Source"}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"text","value":"Learn more about "},{"type":"element","tag":"a","props":{"href":"https://backlight.dev/blog/design-tokens","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Design Tokens"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]},{"type":"text","value":" offers a straightforward way to use Design Tokens definition inside your Nuxt app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is powered by "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Style Dictionary"}]},{"type":"text","value":", a powerful library by Amazon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can define a set of Design Tokens as they would define a set of configurations options for their app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, these tokens get processed by Style Dictionary on each file save, and gets injected into your Nuxt app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This allows global usage of tokens anywhere in the app, even in external files like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tailwind.config"}]},{"type":"text","value":"..."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Design Tokens Community Group's goal is to provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale.\n"},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/community/design-tokens","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Source"}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"text","value":"Learn more about "},{"type":"element","tag":"a","props":{"href":"https://backlight.dev/blog/design-tokens","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Design Tokens"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]},{"type":"text","value":" offers a straightforward way to use Design Tokens definition inside your Nuxt app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is powered by "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Style Dictionary"}]},{"type":"text","value":", a powerful library by Amazon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can define a set of Design Tokens as they would define a set of configurations options for their app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, these tokens get processed by Style Dictionary on each file save, and gets injected into your Nuxt app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This allows global usage of tokens anywhere in the app, even in external files like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tailwind.config"}]},{"type":"text","value":"..."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.guide:1.introduction.md","_source":"content","_file":"1.guide/1.introduction.md","_extension":"md"}