PageSourceSearch

https://www.designtokens.org/about/

html designtokens.org collected 2026-10-02 03:28:24 UTC 36,162 bytes, 73 lines download raw bytes

1<!DOCTYPE html><html lang="en" data-astro-cid-ne7nocz5> <head><!-- Global Metadata --><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/svg+xml" href="/favicon.ico"><link rel="sitemap" href="/sitemap-index.xml"><link rel="alternate" type="application/rss+xml" title="Design Tokens Community Group" href="https://www.designtokens.org/rss.xml"><meta name="generator" content="Astro v6.1.10"><!-- Canonical URL --><link rel="canonical" href="https://www.designtokens.org/about/"><!-- Primary Meta Tags --><title>About | Design Tokens Community Group</title><meta name="title" content="About | Design Tokens Community Group"><meta name="description" content="The DTCG’s goal is to provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale."><meta property="twitter:card" content="summary_large_image"><meta property="twitter:site" content="@DesignTokens"><meta property="twitter:creator" content="@DesignTokens"><meta property="og:url" content="https://www.designtokens.org/about/"><meta property="og:title" content="About | Design Tokens Community Group"><meta property="og:description" content="The DTCG’s goal is to provide standards upon which products and design tools can rely for sharing stylistic pieces of a design system at scale."><meta property="og:type" content="website"><meta property="og:image" content="https://www.designtokens.org/assets/images/social.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="539">
1<script>(function(){const THEME_LS_KEY = "dtcg_theme";
2
3  // Theme switcher — prevent FOUC by blocking before page loads
4  if (typeof localStorage !== 'undefined') {
5    const theme = localStorage.getItem(THEME_LS_KEY);
6    if (theme) {
7      document.documentElement.setAttribute('data-theme', theme);
8    }
9  }
10})();</script>
10<link rel="stylesheet" href="/_astro/Blank.FFNFTCvv.css">
11<style>.md-content{max-width:65ch}.md-content h1:not(:first-child),.md-content h2:not(:first-child),.md-content h3:not(:first-child),.md-content h4:not(:first-child),.md-content h5:not(:first-child),.md-content h6:not(:first-child){padding-top:1em}.md-content p,.md-content blockquote{margin-block:1em;line-height:1.5}.md-content li{margin-block:.25em;line-height:1.5}.md-content table,.md-content ol,.md-content ul,.md-content pre{margin-block:1.5em}.md-content>:is(h1,h2,h3,h4,h5,h6,p,ul,ol)+*{margin-block-start:var(--base-space-6)}.md-content>*+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--base-space-8)}.md-content>:is(h1,h2,h3,h4,h5,h6,p)+:is(ul,ol){padding-inline-start:var(--base-space-8)}.md-content h1{font-weight:600;font-size:clamp(var(--font-size-xxxl),2rem + 1vw,var(--font-size-xxxxl));line-height:1}.md-content h2{font-weight:600;font-size:var(--font-size-xxxl);line-height:1.125}.md-content h3{font-weight:600;font-size:var(--font-size-xxl);line-height:1.125}.md-content h4{font-weight:600;font-size:var(--font-size-xl);line-height:1.25}.md-content h5{font-weight:600;font-size:var(--font-size-lg);line-height:1.25}.md-content h6{font-weight:600;font-size:var(--font-size-md);text-transform:uppercase;line-height:1.25}
12.hero[data-astro-cid-bbe6dxrz]{margin-block-end:2rem}
13</style>
13<script type="module" src="/_astro/page.DHhHZKgE.js"></script>
13</head> <body data-astro-cid-ne7nocz5> <div class="header-size--mobile" data-astro-cid-ne7nocz5><header class="header" data-astro-cid-mbhh4qub> <a href="/" data-astro-cid-mbhh4qub="true" class="dtcg-logo dtcg-link" data-astro-cid-zjaf7drf> <svg width="1em" height="1em" class="icon icon--light" data-astro-cid-zjaf7drf="true" data-icon="dtcg-logo">   <symbol id="ai:local:dtcg-logo" viewBox="0 0 32 32"><path fill="var(--color-text)" d="M16.132.308a2 2 0 0 1 .86.26l12 6.857A2 2 0 0 1 30 9.162V22.84c0 .717-.385 1.38-1.008 1.737l-12 6.856a2 2 0 0 1-.492.198v.002q-.082.02-.164.033l-.057.01a2 2 0 0 1-.183.016l-.066.003a2 2 0 0 1-.477-.052l-.053-.01v-.004a2 2 0 0 1-.375-.133l-.117-.063-12-6.856A2 2 0 0 1 2 22.839V9.163a2 2 0 0 1 .212-.896l.026-.052.014-.023a2 2 0 0 1 .102-.165l.029-.042a2 2 0 0 1 .51-.49l.115-.07 12-6.856a2 2 0 0 1 .86-.26l.014-.002h.236zM3 22.85l4.515-2.579a.495.495 0 0 1 .67.194.495.495 0 0 1-.174.675l-4.5 2.573 11.989 6.85V16.29L3 9.148zm13.5-6.56v14.272l11.988-6.85-4.5-2.57a.495.495 0 0 1-.175-.677.496.496 0 0 1 .671-.194L29 22.851V9.162l-.001-.014zm-8.242-2.308a.473.473 0 0 1 .699-.28l5.291 3.024a.5.5 0 0 1 .252.434v6.094c0 .313-.286.55-.589.468a8 8 0 0 1-5.653-9.74m14.784-.28a.473.473 0 0 1 .7.28 8 8 0 0 1-5.652 9.74.473.473 0 0 1-.59-.468V17.16a.5.5 0 0 1 .252-.434zM16.5 6.515a.495.495 0 0 1-.5.487.495.495 0 0 1-.5-.487V1.438L3.512 8.288 16 15.424l12.487-7.136L16.5 1.438zM16 8c2.214 0 4.218.9 5.666 2.354a.474.474 0 0 1-.115.745l-5.303 3.03a.5.5 0 0 1-.496 0l-5.304-3.03a.473.473 0 0 1-.115-.745A7.97 7.97 0 0 1 16 8"/></symbol><use href="#ai:local:dtcg-logo"></use>  </svg> <svg width="1em" height="1em" class="icon icon--dark" data-astro-cid-zjaf7drf="true" data-icon="dtcg-logo-inverse">   <symbol id="ai:local:dtcg-logo-inverse" viewBox="0 0 32 32"><path fill="var(--color-text)" d="M15.008.567a2 2 0 0 1 1.984 0l12 6.857A2 2 0 0 1 30 9.161V22.84a2 2 0 0 1-1.008 1.736l-12 6.857a2 2 0 0 1-1.984 0l-12-6.857A2 2 0 0 1 2 22.84V9.16a2 2 0 0 1 1.008-1.736z"/><path fill="var(--color-bg)" d="m16.875 31.495-.112.05q.06-.025.12-.054zm-.747-30.182a1 1 0 0 1 .368.124l11.99 6.85h.001l.01.005a1 1 0 0 1 .503.87V22.84q-.002.152-.047.294v.009l-.015.036a1 1 0 0 1-.064.143l-.032.053-.024.037a1 1 0 0 1-.109.132l-.01.01a1 1 0 0 1-.084.073l-.015.013a1 1 0 0 1-.104.07l-12 6.856-.06.028a1 1 0 0 1-.436.101 1 1 0 0 1-.496-.13l-12-6.856-.08-.05-.018-.015a1 1 0 0 1-.101-.087l-.015-.014a1 1 0 0 1-.078-.088l-.016-.022-.049-.073-.017-.03a1 1 0 0 1-.052-.101l-.008-.022-.023-.065-.003-.014A1 1 0 0 1 3 22.84V9.162l.009-.134a1 1 0 0 1 .462-.713l.034-.023.008-.005 11.99-6.85a1 1 0 0 1 .625-.124M4 22.28l4.384-2.504a.496.496 0 0 1 .67.194.493.493 0 0 1-.173.674l-4.363 2.493L15.5 29.41V16.29L4 9.717zm12.5-5.99v13.121l10.98-6.274-4.362-2.493a.493.493 0 0 1-.173-.674.494.494 0 0 1 .67-.194L28 22.28V9.718zm-7.34-1.78c.067-.312.42-.45.697-.292l4.391 2.509a.5.5 0 0 1 .252.434v5.055c0 .319-.295.556-.6.46a7 7 0 0 1-4.74-8.166m12.982-.292c.277-.159.631-.02.699.292a7 7 0 0 1-4.741 8.167c-.305.095-.6-.142-.6-.461V17.16a.5.5 0 0 1 .252-.434zm-5.643-6.7c0 .27-.229.484-.499.484a.495.495 0 0 1-.501-.485V2.59L4.519 8.862 16 15.423l11.478-6.56-10.979-6.274zM16 9c1.835 0 3.506.707 4.754 1.863.234.216.175.592-.103.75l-4.403 2.517a.5.5 0 0 1-.496 0l-4.404-2.517c-.278-.158-.337-.534-.103-.75A6.98 6.98 0 0 1 16 9M15.125.507q-.06.03-.117.062l-12 6.856 12-6.857a2 2 0 0 1 .117-.061"/></symbol><use href="#ai:local:dtcg-logo-inverse"></use>  </svg> <span class="name" data-astro-cid-zjaf7drf> <span class="capital" data-astro-cid-zjaf7drf>D</span><span class="lowercase" data-astro-cid-zjaf7drf>e</span><span class="lowercase" data-astro-cid-zjaf7drf>s</span><span class="lowercase" data-astro-cid-zjaf7drf>i</span><span class="lowercase" data-astro-cid-zjaf7drf>g</span><span class="lowercase" data-astro-cid-zjaf7drf>n</span><span class="symbol" data-astro-cid-zjaf7drf> </span><span class="capital" data-astro-cid-zjaf7drf>T</span><span class="lowercase" data-astro-cid-zjaf7drf>o</span><span class="lowercase" data-astro-cid-zjaf7drf>k</span><span class="lowercase" data-astro-cid-zjaf7drf>e</span><span class="lowercase" data-astro-cid-zjaf7drf>n</span><span class="lowercase" data-astro-cid-zjaf7drf>s</span><span class="symbol" data-astro-cid-zjaf7drf> </span><span class="capital" data-astro-cid-zjaf7drf>C</span><span class="lowercase" data-astro-cid-zjaf7drf>o</span><span class="lowercase" data-astro-cid-zjaf7drf>m</span><span class="lowercase" data-astro-cid-zjaf7drf>m</span><span class="lowercase" data-astro-cid-zjaf7drf>u</span><span class="lowercase" data-astro-cid-zjaf7drf>n</span><span class="lowercase" data-astro-cid-zjaf7drf>i</span><span class="lowercase" data-astro-cid-zjaf7drf>t</span><span class="lowercase" data-astro-cid-zjaf7drf>y</span><span class="symbol" data-astro-cid-zjaf7drf> </span><span class="capital" data-astro-cid-zjaf7drf>G</span><span class="lowercase" data-astro-cid-zjaf7drf>r</span><span class="lowercase" data-astro-cid-zjaf7drf>o</span><span class="lowercase" data-astro-cid-zjaf7drf>u</span><span class="lowercase" data-astro-cid-zjaf7drf>p</span> </span> </a> <button class="nav-toggle" id="nav-toggle" aria-controls="site-nav" aria-expanded="false" data-astro-cid-mbhh4qub> <svg width="1em" height="1em" class="nav-toggle-open" aria-label="Open navigation" role="graphics-symbol img" data-astro-cid-mbhh4qub="true" data-icon="align-justify">   <symbol id="ai:local:align-justify" viewBox="0 0 24 24">
13<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12h18M3 18h18M3 6h18"/></symbol><use href="#ai:local:align-justify"></use>  </svg> <svg width="1em" height="1em" class="nav-toggle-close" aria-label="Close navigation" role="graphics-symbol img" data-astro-cid-mbhh4qub="true" data-icon="cross">   <symbol id="ai:local:cross" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12"/></symbol><use href="#ai:local:cross"></use>  </svg> </button> <div id="site-nav" class="mobile-menu" data-astro-cid-mbhh4qub> <nav class="nav" aria-label="Main" data-astro-cid-mbhh4qub> <ul class="u-list-reset nav-main" data-astro-cid-mbhh4qub> <li data-astro-cid-mbhh4qub> <a class="link" data-astro-prefetch href="/technical-reports/" data-astro-cid-mbhh4qub> <span class="link-focus-ring" data-astro-cid-mbhh4qub>Technical Reports</span> </a> </li><li data-astro-cid-mbhh4qub> <a class="link" data-astro-prefetch href="/contribute/" data-astro-cid-mbhh4qub> <span class="link-focus-ring" data-astro-cid-mbhh4qub>Contribute</span> </a> </li><li data-astro-cid-mbhh4qub> <a class="link" data-astro-prefetch href="/blog/" data-astro-cid-mbhh4qub> <span class="link-focus-ring" data-astro-cid-mbhh4qub>Blog</span> </a> </li><li data-astro-cid-mbhh4qub> <a class="link" aria-current="page" data-astro-prefetch href="/about/" data-astro-cid-mbhh4qub> <span class="link-focus-ring" data-astro-cid-mbhh4qub>About</span> </a> </li> </ul> <ul class="u-list-reset nav-extra" data-astro-cid-mbhh4qub> <li class="theme-switcher" data-astro-cid-mbhh4qub><div class="wrapper" data-astro-cid-dz5h74bc> <label class="label" for="theme-switcher-fnukqX" data-astro-cid-dz5h74bc>Theme</label> <select id="theme-switcher-fnukqX" class="select" data-theme-switcher data-astro-cid-dz5h74bc> <optgroup label="Core" data-astro-cid-dz5h74bc> <option value="auto" data-astro-cid-dz5h74bc>System</option> <option value="light" data-astro-cid-dz5h74bc>Light</option> <option value="dark" data-astro-cid-dz5h74bc>Dark</option> </optgroup> <optgroup label="Fun" data-astro-cid-dz5h74bc> <option value="matrix" data-astro-cid-dz5h74bc>Matrix</option> <option value="nier" data-astro-cid-dz5h74bc>NieR</option> <option value="rebeccapurple" data-astro-cid-dz5h74bc>rebeccapurple</option> <option value="sunset" data-astro-cid-dz5h74bc>Sunset</option> <option value="virtualboy" data-astro-cid-dz5h74bc>VirtualBoy</option> <option value="zengarden" data-astro-cid-dz5h74bc>Zen Garden</option> </optgroup> </select> <svg width="1em" height="1em" class="chevron" aria-hidden="true" data-astro-cid-dz5h74bc="true" data-icon="chevron-down">   <symbol id="ai:local:chevron-down" viewBox="0 0 512 512"><path fill="currentColor" d="M256 294.1 383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0z"/></symbol><use href="#ai:local:chevron-down"></use>  </svg> </div> 
13<script>(function(){const THEME_LS_KEY = "dtcg_theme";
14
15  function changeTheme(theme) {
16    if (theme === 'auto') {
17      document.documentElement.removeAttribute('data-theme');
18      localStorage.removeItem(THEME_LS_KEY);
19    } else {
20      document.documentElement.setAttribute('data-theme', theme);
21      localStorage.setItem(THEME_LS_KEY, theme);
22    }
23  }
24
25  document.querySelectorAll('select[data-theme-switcher]').forEach((el) => {
26    el.addEventListener('change', (evt) => changeTheme(evt.target.value));
27  });
28
29  // init
30  if (localStorage.getItem(THEME_LS_KEY)) {
31    const theme = localStorage.getItem(THEME_LS_KEY);
32    changeTheme(theme);
33    document.querySelectorAll('select[data-theme-switcher]').forEach((el) => {
34      el.value = theme;
35    });
36  }
37})();</script>
37</li> <li data-astro-cid-mbhh4qub> <a class="social-link social-link--md" href="https://github.com/design-tokens/community-group" target="_blank" title="GitHub" data-astro-cid-v6thz4ju><svg width="1em" height="1em" aria-hidden="true" data-astro-cid-mbhh4qub="true" data-astro-cid-v6thz4ju="true" data-icon="github">   <symbol id="ai:local:github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></symbol><use href="#ai:local:github"></use>  </svg></a> </li> </ul> </nav> <div class="search" data-astro-cid-mbhh4qub><button class="search-btn" type="button" aria-controls="search-dialog" aria-expanded="false" data-astro-cid-otpdt6jm> <svg width="1em" height="1em" aria-hidden="true" data-astro-cid-otpdt6jm="true" data-icon="search">   <symbol id="ai:local:search" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0m18 11-6-6"/></symbol><use href="#ai:local:search"></use>  </svg>
38Search
39<kbd data-astro-cid-otpdt6jm>/</kbd> </button></div> </div> </header> 
39<script type="module">function s(n){const e=n.currentTarget,t=e.getAttribute("aria-expanded")==="true";e.setAttribute("aria-expanded",t?"false":"true"),document.getElementById("site-nav").classList.toggle("is-open"),t?(document.querySelector("main").classList.remove("u-display:none"),document.querySelector("footer").classList.remove("u-display:none")):(document.querySelector("main").classList.add("u-display:none"),document.querySelector("footer").classList.add("u-display:none"))}document.getElementById("nav-toggle").addEventListener("click",s);</script>
39</div> <div class="header-size--desktop" data-astro-cid-ne7nocz5><header class="header" data-astro-cid-3ef6ksr2> <a href="/" data-astro-cid-3ef6ksr2="true" class="dtcg-logo" data-astro-cid-zjaf7drf> <svg width="1em" height="1em" viewBox="0 0 32 32" class="icon icon--light" data-astro-cid-zjaf7drf="true" data-icon="dtcg-logo">   <use href="#ai:local:dtcg-logo"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 32 32" class="icon icon--dark" data-astro-cid-zjaf7drf="true" data-icon="dtcg-logo-inverse">   <use href="#ai:local:dtcg-logo-inverse"></use>  </svg> <span class="name" data-astro-cid-zjaf7drf> <span class="capital" data-astro-cid-zjaf7drf>D</span><span class="lowercase" data-astro-cid-zjaf7drf>e</span><span class="lowercase" data-astro-cid-zjaf7drf>s</span><span class="lowercase" data-astro-cid-zjaf7drf>i</span><span class="lowercase" data-astro-cid-zjaf7drf>g</span><span class="lowercase" data-astro-cid-zjaf7drf>n</span><span class="symbol" data-astro-cid-zjaf7drf> </span><span class="capital" data-astro-cid-zjaf7drf>T</span><span class="lowercase" data-astro-cid-zjaf7drf>o</span><span class="lowercase" data-astro-cid-zjaf7drf>k</span><span class="lowercase" data-astro-cid-zjaf7drf>e</span><span class="lowercase" data-astro-cid-zjaf7drf>n</span><span class="lowercase" data-astro-cid-zjaf7drf>s</span><span class="symbol" data-astro-cid-zjaf7drf> </span><span class="capital" data-astro-cid-zjaf7drf>C</span><span class="lowercase" data-astro-cid-zjaf7drf>o</span><span class="lowercase" data-astro-cid-zjaf7drf>m</span><span class="lowercase" data-astro-cid-zjaf7drf>m</span><span class="lowercase" data-astro-cid-zjaf7drf>u</span><span class="lowercase" data-astro-cid-zjaf7drf>n</span><span class="lowercase" data-astro-cid-zjaf7drf>i</span><span class="lowercase" data-astro-cid-zjaf7drf>t</span><span class="lowercase" data-astro-cid-zjaf7drf>y</span><span class="symbol" data-astro-cid-zjaf7drf> </span><span class="capital" data-astro-cid-zjaf7drf>G</span><span class="lowercase" data-astro-cid-zjaf7drf>r</span><span class="lowercase" data-astro-cid-zjaf7drf>o</span><span class="lowercase" data-astro-cid-zjaf7drf>u</span><span class="lowercase" data-astro-cid-zjaf7drf>p</span> </span> </a> <div class="search" data-astro-cid-3ef6ksr2><button class="search-btn" type="button" aria-controls="search-dialog" aria-expanded="false" data-astro-cid-otpdt6jm> <svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-otpdt6jm="true" data-icon="search">   <use href="#ai:local:search"></use>  </svg>
40Search
41<kbd data-astro-cid-otpdt6jm>/</kbd> </button></div> <nav class="nav" aria-label="Main" data-astro-cid-3ef6ksr2> <ul class="u-list-reset nav-main" data-astro-cid-3ef6ksr2> <li data-astro-cid-3ef6ksr2> <a class="link" data-astro-prefetch href="/technical-reports/" data-astro-cid-3ef6ksr2> <span class="link-focus-ring" data-astro-cid-3ef6ksr2>Technical Reports</span> </a> </li><li data-astro-cid-3ef6ksr2> <a class="link" data-astro-prefetch href="/contribute/" data-astro-cid-3ef6ksr2> <span class="link-focus-ring" data-astro-cid-3ef6ksr2>Contribute</span> </a> </li><li data-astro-cid-3ef6ksr2> <a class="link" data-astro-prefetch href="/blog/" data-astro-cid-3ef6ksr2> <span class="link-focus-ring" data-astro-cid-3ef6ksr2>Blog</span> </a> </li><li data-astro-cid-3ef6ksr2> <a class="link" aria-current="page" data-astro-prefetch href="/about/" data-astro-cid-3ef6ksr2> <span class="link-focus-ring" data-astro-cid-3ef6ksr2>About</span> </a> </li> </ul> <ul class="u-list-reset nav-extra" data-astro-cid-3ef6ksr2> <li class="theme-switcher" data-astro-cid-3ef6ksr2><div class="wrapper" data-astro-cid-dz5h74bc> <label class="label" for="theme-switcher-eqmua3" data-astro-cid-dz5h74bc>Theme</label> <select id="theme-switcher-eqmua3" class="select" data-theme-switcher data-astro-cid-dz5h74bc> <optgroup label="Core" data-astro-cid-dz5h74bc> <option value="auto" data-astro-cid-dz5h74bc>System</option> <option value="light" data-astro-cid-dz5h74bc>Light</option> <option value="dark" data-astro-cid-dz5h74bc>Dark</option> </optgroup> <optgroup label="Fun" data-astro-cid-dz5h74bc> <option value="matrix" data-astro-cid-dz5h74bc>
41Matrix</option> <option value="nier" data-astro-cid-dz5h74bc>NieR</option> <option value="rebeccapurple" data-astro-cid-dz5h74bc>rebeccapurple</option> <option value="sunset" data-astro-cid-dz5h74bc>Sunset</option> <option value="virtualboy" data-astro-cid-dz5h74bc>VirtualBoy</option> <option value="zengarden" data-astro-cid-dz5h74bc>Zen Garden</option> </optgroup> </select> <svg width="1em" height="1em" viewBox="0 0 512 512" class="chevron" aria-hidden="true" data-astro-cid-dz5h74bc="true" data-icon="chevron-down">   <use href="#ai:local:chevron-down"></use>  </svg> </div> 
41<script>(function(){const THEME_LS_KEY = "dtcg_theme";
42
43  function changeTheme(theme) {
44    if (theme === 'auto') {
45      document.documentElement.removeAttribute('data-theme');
46      localStorage.removeItem(THEME_LS_KEY);
47    } else {
48      document.documentElement.setAttribute('data-theme', theme);
49      localStorage.setItem(THEME_LS_KEY, theme);
50    }
51  }
52
53  document.querySelectorAll('select[data-theme-switcher]').forEach((el) => {
54    el.addEventListener('change', (evt) => changeTheme(evt.target.value));
55  });
56
57  // init
58  if (localStorage.getItem(THEME_LS_KEY)) {
59    const theme = localStorage.getItem(THEME_LS_KEY);
60    changeTheme(theme);
61    document.querySelectorAll('select[data-theme-switcher]').forEach((el) => {
62      el.value = theme;
63    });
64  }
65})();</script>
65</li> <li data-astro-cid-3ef6ksr2> <a class="social-link social-link--md" href="https://github.com/design-tokens/community-group" target="_blank" title="GitHub" data-astro-cid-v6thz4ju><svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-3ef6ksr2="true" data-astro-cid-v6thz4ju="true" data-icon="github">   <use href="#ai:local:github"></use>  </svg></a> </li> </ul> </nav> </header></div>  <main class="page"> <h1 class="hero text-heading1" data-astro-cid-bbe6dxrz="true">  About  </h1>   
65<script type="module">const i=typeof document<"u"?document.querySelector(".md-content"):void 0,s=.15;let r=0,o=[];function a(e,t){let n;return(...u)=>{clearTimeout(n),n=setTimeout(()=>{e(...u)},t)}}function l(){if(i){o=[];for(const e of i.querySelectorAll("h2,h3"))e.parentElement.classList.contains("toc")||o.push(window.scrollY+e.getBoundingClientRect().y)}}function c(e=0){i&&i.querySelectorAll(".toc a").forEach((t,n)=>{n===e?t.setAttribute("aria-current","location"):t.removeAttribute("aria-current")})}l();c();typeof globalThis.addEventListener=="function"&&(globalThis.addEventListener("scroll",()=>{let e=0;if(window.scrollY>=.3*window.innerHeight)for(let t=1;t<o.length&&!(window.scrollY+s*window.innerHeight<o[t]);t++)e=t;e!==r&&(r=e,c(r))}),globalThis.addEventListener("resize",a(()=>l(),50)));</script>
65 <div class="md-content"> <h2 id="principles"><a aria-hidden="true" tabindex="-1" href="#principles"><span class="icon icon-link"></span></a>Principles</h2>
66<h3 id="1-inclusive"><a aria-hidden="true" tabindex="-1" href="#1-inclusive"><span class="icon icon-link"></span></a>1. Inclusive</h3>
67<p>Allow anyone to become familiar with design tokens. Empower people, no matter what their skills and tool choices are, as they develop new mental models, acquire skills, and implement tools to scale design in their projects. Everyone is welcome to join the conversation and share use-cases with the community.</p>
68<h3 id="2-focused-yet-extensible"><a aria-hidden="true" tabindex="-1" href="#2-focused-yet-extensible"><span class="icon icon-link"></span></a>2. Focused, yet extensible</h3>
69<p>Stay focused on the smallest surface area necessary to cover the most commonly referenced use-cases. Be a platform that opens the door to a wide range of possibilities. This small footprint helps maintain simplicity with zero dependencies. Extensibility allows the community to incubate new ideas that will define the future of design tokens.</p>
70<h3 id="3-stable"><a aria-hidden="true" tabindex="-1" href="#3-stable"><span class="icon icon-link"></span></a>3. Stable</h3>
71<p>Provide a stable foundation that users and tool makers can put in place and depend on in the long term. For example, by using existing and trusted standards (unless conflicting with the two first principles).</p><div class="toc"><h4 id="contents">Contents</h4><ol><li><a href="#principles">Principles</a><ol><li><a href="#1-inclusive">1. Inclusive</a></li><li><a href="#2-focused-yet-extensible">2. Focused, yet extensible</a></li><li><a href="#3-stable">3. Stable</a></li></ol></li></ol></div> </div>  </main>  <footer class="footer" data-astro-cid-sz7xmlte> <div data-astro-cid-sz7xmlte="true" style="--space:var(--base-space-4);--align-items:start" class="a-stack a-stack--vertical">  <p data-astro-cid-sz7xmlte="true" class="text-sm">  <span data-astro-cid-sz7xmlte>© 2026</span> <span data-astro-cid-sz7xmlte>Design Tokens Community Group</span>  </p> <a style="color: var(--color-text-subdued)" href="https://www.netlify.com" target="_blank" data-astro-cid-sz7xmlte="true" class="text-xs"> Deploys by Netlify </a>  </div> <nav class="nav" data-astro-cid-sz7xmlte> <div class="subnav" data-astro-cid-sz7xmlte> <h2 style="color: var(--color-text-subdued)" data-astro-cid-sz7xmlte="true" class="text-body"> Spec </h2> <ul class="u-list-reset" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="/technical-reports/" aria-label="Technical Reports" data-astro-cid-sz7xmlte> Technical Reports  </a> </li><li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="/faq/" aria-label="FAQ" data-astro-cid-sz7xmlte> FAQ  </a> </li><li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="/resources/" aria-label="Resources" data-astro-cid-sz7xmlte> Resources  </a> </li><li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="/glossary/" aria-label="Glossary" data-astro-cid-sz7xmlte> Glossary  </a> </li><li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="/contribute/" aria-label="Contribute" data-astro-cid-sz7xmlte> Contribute  </a> </li> </ul> </div> <div class="subnav" data-astro-cid-sz7xmlte> <h2 style="color: var(--color-text-subdued)" data-astro-cid-sz7xmlte="true" class="text-body"> Community Group </h2> <ul class="u-list-reset" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a aria-current="page" data-astro-prefetch class="link" href="/about/" data-astro-cid-sz7xmlte> About  </a> </li><li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="/blog/" data-astro-cid-sz7xmlte> Blog  </a> </li><li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="/press-kit/" data-astro-cid-sz7xmlte> Press kit  </a> </li><li data-astro-cid-sz7xmlte> <a aria-current="false" data-astro-prefetch class="link" href="https://opencollective.com/design-tokens" target="_blank" data-astro-cid-sz7xmlte> Donate <svg width="1em" height="1em" role="graphics-symbol img" aria-label="(new tab)" data-astro-cid-sz7xmlte="true" data-icon="external">   <symbol id="ai:local:external" viewBox="0 0 15 15">
71<path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V8.5a.5.5 0 0 0-1 0V12H3V3h3.5a.5.5 0 0 0 0-1zm9.854.146a.5.5 0 0 1 .146.351V5.5a.5.5 0 0 1-1 0V3.707L6.854 8.854a.5.5 0 1 1-.708-.708L11.293 3H9.5a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .354.146" clip-rule="evenodd"/></symbol><use href="#ai:local:external"></use>  </svg> </a> </li> </ul> </div> <div class="subnav" data-astro-cid-sz7xmlte> <h2 style="color: var(--color-text-subdued)" data-astro-cid-sz7xmlte="true" class="text-body"> Social </h2> <ul class="u-list-reset a-stack a-stack--wrap" data-astro-cid-sz7xmlte="true" style="--space:var(--base-space-0);--align-items:start"> <li data-astro-cid-sz7xmlte> <a class="social-link social-link--md" href="https://github.com/design-tokens/community-group" target="_blank" title="GitHub" data-astro-cid-v6thz4ju><svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" data-astro-cid-sz7xmlte="true" data-astro-cid-v6thz4ju="true" data-icon="github">   <use href="#ai:local:github"></use>  </svg></a> </li><li data-astro-cid-sz7xmlte> <a class="social-link social-link--md" href="https://discord.gg/fkK6ZUXRkp" target="_blank" title="Discord" data-astro-cid-v6thz4ju><svg width="1em" height="1em" aria-hidden="true" data-astro-cid-sz7xmlte="true" data-astro-cid-v6thz4ju="true" data-icon="discord">   <symbol id="ai:local:discord" viewBox="0 0 24 24"><path fill="currentColor" d="M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0 13 13 0 0 0-.617-1.25.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.08.08 0 0 0 .084-.028 14 14 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13 13 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10 10 0 0 0 .372-.292.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01q.181.149.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028 19.8 19.8 0 0 0 6.002-3.03.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418"/></symbol><use href="#ai:local:discord"></use>  </svg></a> </li><li data-astro-cid-sz7xmlte> <a class="social-link social-link--md" href="https://www.w3.org/community/design-tokens" target="_blank" title="W3C Community Group" data-astro-cid-v6thz4ju><svg width="1em" height="1em" aria-hidden="true" data-astro-cid-sz7xmlte="true" data-astro-cid-v6thz4ju="true" data-icon="w3c">   <symbol id="ai:local:w3c" viewBox="0 0 24 24"><g fill="currentColor"><path d="M20.94 15.381a1.05 1.05 0 0 0-1.486.173c-.45.572-.857.916-1.322 1.116-.857.368-1.584.213-2.287-.49-.688-.689-1.359-1.44-2.01-2.166q-.476-.535-.96-1.065-.83-.902-1.66-1.801l-.05-.053A267 267 0 0 1 7.511 7.09 4.32 4.32 0 0 0 3.668 5.7C2.22 5.918 1.05 6.854.371 8.334a3.93 3.93 0 0 0 .577 4.227c1.775 2.079 3.272 3.797 5.026 5.414.718.66 1.586 1.012 2.51 1.017.6.003 1.503-.065 2.425-.692.404-.274.78-.557.945-.987a1.06 1.06 0 0 0-.383-1.234 1 1 0 0 0-1.249.048q-.069.058-.15.131c-.574.507-1.287 1.138-2.74.084-1.333-.966-2.364-2.232-3.56-3.699a81 81 0 0 0-1.223-1.477 1.8 1.8 0 0 1-.26-1.936c.263-.57.768-1.28 1.693-1.419a2.26 2.26 0 0 1 1.955.704 266 266 0 0 0 3.683 4.036q.854.922 1.704 1.848.474.519.947 1.05c.668.747 1.357 1.517 2.086 2.246 1.315 1.316 2.95 1.65 4.605.938.795-.343 1.478-.9 2.149-1.753a1.076 1.076 0 0 0-.172-1.5"/><path d="M22.594 9.45c.683-.327 1.221-.943 1.273-1.69.13-1.298-.928-2.54-2.485-2.732-.955-.122-1.842.164-2.47.69-.336.282-.427.804-.136 1.172.319.383.686.45 1.287.117.215-.123.539-.226.895-.201.67.047.863.658.845.935-.004.041 0 .987-.945.92l-.357-.024c-.397-.027-.794.348-.823.776-.032.457.299.855.71.885l.438.03c1.207.084 1.08 1.118 1.055 1.283-.023.476-.779 1.282-2.126.365-.457-.31-3.718-4.447-3.718-4.447-1.545-2.017-4.17-2.372-6.243-.844a1.07 1.07 0 0 0 .46 1.917c.282.044.56-.
71024.788-.193 1.413-1.042 2.673-.42 3.32.425 0 0 3.502 4.547 4.403 5.029a4.5 4.5 0 0 0 1.816.537c1.906.133 3.066-.927 3.38-2.38.205-.951-.405-2.14-1.367-2.57"/></g></symbol><use href="#ai:local:w3c"></use>  </svg></a> </li><li data-astro-cid-sz7xmlte> <a class="social-link social-link--md" href="https://www.linkedin.com/company/design-tokens-community-group" target="_blank" title="LinkedIn" data-astro-cid-v6thz4ju><svg width="1em" height="1em" aria-hidden="true" data-astro-cid-sz7xmlte="true" data-astro-cid-v6thz4ju="true" data-icon="linkedin">   <symbol id="ai:local:linkedin" viewBox="0 0 382 382"><path fill="currentColor" d="M347.445 0H34.555C15.471 0 0 15.471 0 34.555v312.889C0 366.529 15.471 382 34.555 382h312.889C366.529 382 382 366.529 382 347.444V34.555C382 15.471 366.529 0 347.445 0M118.207 329.844c0 5.554-4.502 10.056-10.056 10.056H65.345c-5.554 0-10.056-4.502-10.056-10.056V150.403c0-5.554 4.502-10.056 10.056-10.056h42.806c5.554 0 10.056 4.502 10.056 10.056zM86.748 123.432c-22.459 0-40.666-18.207-40.666-40.666S64.289 42.1 86.748 42.1s40.666 18.207 40.666 40.666-18.206 40.666-40.666 40.666M341.91 330.654a9.247 9.247 0 0 1-9.246 9.246H286.73a9.247 9.247 0 0 1-9.246-9.246v-84.168c0-12.556 3.683-55.021-32.813-55.021-28.309 0-34.051 29.066-35.204 42.11v97.079a9.246 9.246 0 0 1-9.246 9.246h-44.426a9.247 9.247 0 0 1-9.246-9.246V149.593a9.247 9.247 0 0 1 9.246-9.246h44.426a9.247 9.247 0 0 1 9.246 9.246v15.655c10.497-15.753 26.097-27.912 59.312-27.912 73.552 0 73.131 68.716 73.131 106.472z"/></symbol><use href="#ai:local:linkedin"></use>  </svg></a> </li><li data-astro-cid-sz7xmlte> <a class="social-link social-link--md" href="https://x.com/DesignTokens" target="_blank" title="X (formerly Twitter)" data-astro-cid-v6thz4ju><svg width="1em" height="1em" aria-hidden="true" data-astro-cid-sz7xmlte="true" data-astro-cid-v6thz4ju="true" data-icon="x">   <symbol id="ai:local:x" viewBox="0 0 24 24"><path fill="currentColor" d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></symbol><use href="#ai:local:x"></use>  </svg></a> </li><li data-astro-cid-sz7xmlte> <a class="social-link social-link--md" href="https://bsky.app/profile/designtokens.org" target="_blank" title="Bluesky" data-astro-cid-v6thz4ju><svg width="1em" height="1em" aria-hidden="true" data-astro-cid-sz7xmlte="true" data-astro-cid-v6thz4ju="true" data-icon="bluesky">   <symbol id="ai:local:bluesky" viewBox="0 0 24 24"><path fill="currentColor" d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></symbol><use href="#ai:local:bluesky"></use>  </svg></a> </li><li data-astro-cid-sz7xmlte> <a class="social-link social-link--md" href="https://opencollective.com/design-tokens" target="_blank" title="OpenCollective" data-astro-cid-v6thz4ju><svg width="1em" height="1em" aria-hidden="true" data-astro-cid-sz7xmlte="true" data-astro-cid-v6thz4ju="true" data-icon="open-collective">   <symbol id="ai:local:open-collective" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.94 11.94 0 0 0 12 0m9.865 5.166-3.109 3.107A7.7 7.7 0 0 1 19.715 12a7.7 7.7 0 0 1-.959 3.727l3.109 3.107A11.94 11.94 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834"/></symbol><use href="#ai:local:open-collective"></use>  </svg></a> </li> </ul> </div> </nav> </footer> <dialog id="search-dialog" class="dialog" aria-label="Search" aria-modal="true" closedby="any" data-astro-cid-euff75kw> <button id="search-close-btn" class="close" type="type" aria-label="close" data-astro-cid-euff75kw><svg width="1em" height="1em" viewBox="0 0 24 24" data-astro-cid-euff75kw="true" data-icon="cross">   <use href="#ai:local:cross"></use>  </svg></button> <div id="search" class="pagefind-init" data-pagefind-ui data-bundle-path="/pagefind/" data-ui-options="{&#34;showImages&#34;:false}"></div> 
71<script type="module" src="/_astro/Search.astro_astro_type_script_index_0_lang.C8yiBvoI.js"></script>
71 </dialog> 
71<script type="module">function o(){const e=document.getElementById("search-dialog");e.showModal(),e.querySelector("input").focus()}function t(){document.getElementById("search-dialog").close(),document.activeElement?.blur()}document.querySelectorAll('[aria-controls="search-dialog"]').forEach(e=>{e.addEventListener("click",o)});document.getElementById("search-close-btn").addEventListener("click",t);addEventListener("keydown",e=>{e.key==="/"&&(o(),e.preventDefault())});</script>
71  
72<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="665fa8be-0ec2-447d-837a-3a7f6e3f986c" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiNjY1ZmE4YmUtMGVjMi00NDdkLTgzN2EtM2E3ZjZlM2Y5ODZjIiwiYWNjb3VudF9pZCI6IjU5MDkzNjc0YTcwMGM0NWE4YjM2MTM5MSIsImRlcGxveV9pZCI6IjZhYTA5NmFjZjM4NjlmMDAwOWQzYzJkOCIsImlzc3VlciI6Im5mc2VydmVyIn0.b_a8s_CnOZeCoi7ZWh0TURDFNP0NjVoC3--Nw3Jksg4"></script>
72
73</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.