import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,e as n,o,r}from"./app-h9l50wZ_.js";const l={};function d(c,e){const s=r("design-tokens");return o(),i("div",null,[e[0]||(e[0]=a('<p>Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.</p><p>You can use tokens as SCSS variables or import them in your JS:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>import { tokens } from &#39;system&#39;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',3)),n(s)])}const u=t(l,[["render",d],["__file","DesignTokens.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/styleguide/docs/DesignTokens.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.25,"words":74},"filePathRelative":"styleguide/src/styleguide/docs/DesignTokens.md","localizedDate":"April 5, 2026","excerpt":"<p>Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.</p>"}');export{u as comp,h as data};