1<!DOCTYPE html><html lang="en-US"><head><style>:where(img){height:auto}</style> 2 <meta charset="utf-8"> 3 <meta content="width=device-width,initial-scale=1" name="viewport"> 4 <title>Welcome to Backlight's documentation | Backlight.dev Documentation</title> 5 <meta content="Design Systems, code-side" name="description"> 6 <link href="/docs/assets/style.61f7f04d.css" rel="stylesheet"> 7 <link href="/docs/assets/app.8df3c31b.js" rel="modulepreload"> 8 <link href="/docs/assets/index.md.1cc9956c.lean.js" rel="modulepreload"> 9 10 <meta content="â¹divâºRIOTS" name="author"> 11 <link href="https://backlight.dev/docs" rel="canonical"> 12 <meta content="designsystems, design-systems, react, vue, svelte, stencil, angular, webcomponent, webcomponents, web-component, web-components" name="keywords"> 13 <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="true"> 14 <style>@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/spacegrotesk/v6/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2)format("woff2")}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/spacegrotesk/v6/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2)format("woff2")}</style> 15 <meta content="#f8c307" name="theme-color"> 16 <link href="/docs/assets/favicon.png" rel="icon" type="image/png"> 17 <meta content="summary_large_image" name="twitter:card"> 18 <meta content="@backlight_dev" name="twitter:site"> 19 <meta content="Welcome to Backlight's documentation" name="twitter:title"> 20 <meta content="Design Systems, code-side" name="twitter:description"> 21 <meta content="https://backlight.dev/docs/img/og/indexmd.jpg" name="twitter:image"> 22 <meta content="website" property="og:type"> 23 <meta content="en-US" property="og:locale"> 24 <meta content="https://backlight.dev/docs/" property="og:site"> 25 <meta content="Backlight.dev" property="og:site_name"> 26 <meta content="Welcome to Backlight's documentation" property="og:title"> 27 <meta content="Design Systems, code-side" property="og:description"> 28 <meta content="https://backlight.dev/docs/img/og/indexmd.jpg" property="og:image"> 29
29<script src="https://cdn.usefathom.com/script.js" data-site="DAVUOHYU" defer="true"></script>
29 30 </head> 31 <body> 32 <div id="app"><!--[--><div class="gradient theme"><div class="wrapper"><div class="nav-bar"><nav class="mt-2 text-white" data-v-3b16943f=""><div class="mx-auto px-2" data-v-3b16943f=""><div class="block items-center justify-between md:flex vitepress-flex" data-v-3b16943f=""><div class="mt-2 flex flex-col mr-4 px-2 space-y-2 text-xl" data-v-3b16943f="" base="/docs/" data-v-4de1a8ce="" pathname="/index"><a href="/" class="flex flex-col flex-shrink-0 logo" aria-label="Home" data-v-4de1a8ce=""><svg viewBox="0 0 860.39 135" xmlns="http://www.w3.org/2000/svg" class="h-8 mt-1" data-v-4de1a8ce=""><path d="M13.42,119V101.6h13.8V31.4H13.42V14h54a40.27,40.27,0,0,1,16.73,3.23,25.81,25.81,0,0,1,11.1,9.15,24.83,24.83,0,0,1,4,14.17v1.5q0,7.2-2.7,11.78a21.4,21.4,0,0,1-6.37,7.05,28.06,28.06,0,0,1-7,3.52v2.7a27.26,27.26,0,0,1,7.2,3.37,20.93,20.93,0,0,1,6.68,7.13q2.78,4.65,2.77,12.15v1.5a26.73,26.73,0,0,1-4,14.92A26,26,0,0,1,84.6,115.7,39.09,39.09,0,0,1,68,119ZM47,57.2h18.3a15.82,15.82,0,0,0,10.13-3.15,10.48,10.48,0,0,0,4-8.7v-1.5q0-5.7-3.9-8.77T65.32,32H47ZM47,101h18.6q6.45,0,10.43-3.15t4-9v-1.5q0-5.85-3.9-9T65.62,75.2H47Z" class="primary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M196.87,45.05h17.55v74H197.17l-.9-10.8c-4.2,8.7-15.75,12.9-24,13-21.9.15-38.1-13.35-38.1-39.3,0-25.5,17-38.85,38.55-38.7,9.9,0,19.35,4.65,23.55,12ZM152.47,82c0,14.1,9.75,22.5,21.9,22.5,28.8,0,28.8-44.85,0-44.85C162.22,59.6,152.47,67.85,152.47,82Z" class="primary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M292.27,121.1a42.29,42.29,0,0,1-19.58-4.5,33.85,33.85,0,0,1-13.87-13q-5.1-8.55-5.1-20.7v-2.1q0-12.15,5.1-20.7a33.85,33.85,0,0,1,13.87-13,42.29,42.29,0,0,1,19.58-4.5q10.65,0,18.3,3.75a32.78,32.78,0,0,1,12.37,10.27,35.83,35.83,0,0,1,6.23,14.78l-18.3,3.9a21.55,21.55,0,0,0-2.7-8.1,15.14,15.14,0,0,0-5.93-5.7,19.57,19.57,0,0,0-9.52-2.1,21.26,21.26,0,0,0-10.28,2.47,17.66,17.66,0,0,0-7.2,7.35,24.92,24.92,0,0,0-2.62,11.93v1.5a24.83,24.83,0,0,0,2.62,11.92,17.63,17.63,0,0,0,7.2,7.36,21.37,21.37,0,0,0,10.28,2.47q8.55,0,13-4.42a20.78,20.78,0,0,0,5.63-11.63l18.3,4.35a41.27,41.27,0,0,1-6.68,14.48,32.87,32.87,0,0,1-12.37,10.27Q302.92,121.1,292.27,121.1Z" class="primary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M367.72,119V14h18.9V72.05h2.7l24.6-27.45h24.6l-34.35,36L439.72,119h-24.3l-26.1-29.55h-2.7V119Z" class="primary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M477.52,119V14h9V119Z" class="secondary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M539.92,33.5a7.68,7.68,0,0,1-7.8-7.8,7.47,7.47,0,0,1,2.25-5.62,7.77,7.77,0,0,1,13.35,5.62,7.68,7.68,0,0,1-2.18,5.55A7.48,7.48,0,0,1,539.92,33.5Zm-4.5,85.5V46.1h9V119Z" class="secondary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M589.71,82.85v-1.8q0-11.55,4.73-19.8A33.37,33.37,0,0,1,607.11,48.5a35.3,35.3,0,0,1,17.7-4.5q12,0,18.68,4.73a30.9,30.9,0,0,1,9.82,10.72h1.8V46.1h8.4v91.5q0,5.4-2.85,8.4t-8.7,3h-49.8v-8.1h48q4.65,0,4.65-4.5V105.05H653a29.89,29.89,0,0,1-5.47,7,26.57,26.57,0,0,1-9.08,5.62,37.56,37.56,0,0,1-13.65,2.18A35.7,35.7,0,0,1,607,115.4a32.64,32.64,0,0,1-12.68-12.82Q589.71,94.26,589.71,82.85Zm37.2,29q12.45,0,20.18-7.8t7.72-21.45v-1.2q0-13.8-7.72-21.52T626.91,52.1q-12.3,0-20.1,7.73T599,81.35v1.2q0,13.65,7.8,21.45T626.91,111.8Z" class="secondary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M712.41,119V14h9V58.85h1.8a26.58,26.58,0,0,1,5-6.83,24.26,24.26,0,0,1,8.4-5.25,35.86,35.86,0,0,1,13-2,32.07,32.07,0,0,1,14.55,3.3A25.5,25.5,0,0,1,774.74,58q4,6.6,4,16.65V119h-9V75.2q0-12-6-17.18t-16.05-5.17a25.71,25.71,0,0,0-18.75,7.35q-7.5,7.35-7.5,22.35V119Z" class="secondary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path><path d="M851,119c-3.89,0-6.82-1-8.77-3s-2.92-4.8-2.92-8.4V54.2h-23.4V46.1h23.4V18.8h9V46.1h25.5v8.1h-25.5v52.2q0,4.5,4.5,4.5h17.1V119Z" class="secondary" data-v-4de1a8ce="" transform="translate(-13.42 -14)"></path></svg><div class="logo-description" data-v-4de1a8ce="">Design systems, code-side</div></a><span data-v-4de1a8ce=""><!--[--><!--]--></span></div><div class="desktop-slot" data-v-3b16943f=""><!--[--><!--[--><div id="search-box" search-index="/search-index.json"><form action="" novalidate="" role="search"><label for="search-input" aria-label="Search"><input id="search-input" type="search" aria-autocomplete="list" autocapitalize="off" autocomplete="off" autocorrect="off" enterkeyhint="go" maxlength="64" spellcheck="false"></label></form><ul id="search-hits"></ul><div id="search-overlay"></div></div><!--]--><!--]--></div><label for="navexpander" aria-controls="mobile-menu" aria-expanded="false" class="btn md:hidden" data-v-3b16943f="" tabindex="{0}"><span class="sr-only" data-v-3b16943f="">
32Open main menu</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="block h-6 w-6" data-v-3b16943f="" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16" data-v-3b16943f="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></label><input id="navexpander" type="checkbox" class="hidden" data-v-3b16943f=""><div class="hidden items-start md:block md:items-end mobile-menu" data-v-3b16943f="" id="mobile-menu"><!--[--><!--[--><div data-v-5a40d390=""><div data-v-5a40d390=""><a href="/features" class="block ml-2 nav-link px-2 py-1 text-inherit" data-v-5a40d390="" target="_self"><!--[--><span class="border-0 border-b-4 border-solid border-transparent pb-1 inline-block" data-v-5a40d390="">Features</span><!--]--></a></div></div><div data-v-5a40d390=""><div data-v-5a40d390=""><a href="/docs" class="block ml-2 nav-link px-2 py-1 text-inherit" data-v-5a40d390="" target="_self"><!--[--><span class="border-0 border-b-4 border-solid border-transparent pb-1 inline-block" data-v-5a40d390="">Docs</span><!--]--></a></div></div><div data-v-5a40d390=""><div data-v-5a40d390=""><a href="/pricing" class="block ml-2 nav-link px-2 py-1 text-inherit" data-v-5a40d390="" target="_self"><!--[--><span class="border-0 border-b-4 border-solid border-transparent pb-1 inline-block" data-v-5a40d390="">Pricing</span><!--]--></a></div></div><div data-v-5a40d390=""><div data-v-5a40d390=""><button class="dropdown-padding dropdown__title" aria-controls="ressources-dropdown" aria-expanded="false" data-v-5a40d390="" type="button"><span class="ml-2 border-0 border-b-4 border-solid border-transparent dropdown-link inline-flex md:ml-0 pb-1" data-v-5a40d390="">Resources <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" class="ml-2 iconify--codicon inline" role="img" data-v-5a40d390="" style="transform:rotate(90deg)"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" clip-rule="evenodd" fill-rule="evenodd" fill="currentColor"></path></svg></span></button><div class="dropdown__menu" id="ressources-dropdown" data-v-5a40d390="" style="display:none"><!--[--><a href="/mastery" class="block ml-2 nav-link px-2 py-1 text-inherit" data-v-5a40d390="" target="_self"><!--[--><span class="text-primary whitespace-nowrap" data-v-5a40d390="">Mastery<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" class="iconify--codicon inline" role="img" data-v-5a40d390="" style="transform:rotate(0)"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" clip-rule="evenodd" fill-rule="evenodd" fill="currentColor"></path></svg></span><p class="mt-2 mb-4 text-sm" data-v-5a40d390="">Articles to learn all about design systems.</p><!--]--></a><a href="/sessions" class="block ml-2 nav-link px-2 py-1 text-inherit" data-v-5a40d390="" target="_self"><!--[--><span class="text-primary whitespace-nowrap" data-v-5a40d390="">Sessions<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" class="iconify--codicon inline" role="img" data-v-5a40d390="" style="transform:rotate(0)"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" clip-rule="evenodd" fill-rule="evenodd" fill="currentColor"></path></svg></span><p class="mt-2 mb-4 text-sm" data-v-5a40d390="">Videos and tutorial series with design system experts.</p><!--]--></a><a href="/blog" class="block ml-2 nav-link px-2 py-1 text-inherit" data-v-5a40d390="" target="_self"><!--[--><span class="text-primary whitespace-nowrap" data-v-5a40d390="">Blog<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" class="iconify--codicon inline" role="img" data-v-5a40d390="" style="transform:rotate(0)"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" clip-rule="evenodd" fill-rule="evenodd" fill="currentColor"></path></svg></span>
32<p class="mt-2 mb-4 text-sm" data-v-5a40d390="">Latest posts and updates from our team.</p><!--]--></a><!--]--></div></div></div><!--]--><a href="https://studio.backlight.dev" class="inline-block btn-outline login-button mb-4 md:ml-2" data-v-5a40d390=""> Log in </a><!--]--><div class="mobile-slot" data-v-3b16943f=""><!--[--><!--[--><div id="search-box" search-index="/search-index.json"><form action="" novalidate="" role="search"><label for="search-input" aria-label="Search"><input id="search-input" type="search" aria-autocomplete="list" autocapitalize="off" autocomplete="off" autocorrect="off" enterkeyhint="go" maxlength="64" spellcheck="false"></label></form><ul id="search-hits"></ul><div id="search-overlay"></div></div><!--]--><!--]--></div></div></div></div></nav></div><span><style>.nav-bar a.nav-link[href^="/docs/"] span{border-color:var(--c-brand)}</style></span><aside class="sidebar" data-v-21ec2145="" id="theme-sidebar"><!--[--><!--]--><ul class="sidebar-links" data-v-21ec2145=""><!--[--><li class="sidebar-link"><a href="/docs/" class="sidebar-link-item active"><!---->Welcome</a><!----></li><li class="sidebar-link"><a href="/docs/getting-started" class="sidebar-link-item"><!---->Getting started</a><!----></li><li class="sidebar-link"><a href="/docs/online-ide" class="sidebar-link-item"><!---->Online Studio</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/git" class="sidebar-link-item"><!---->Git Integration</a><!----></li><li class="sidebar-link"><a href="/docs/user-preferences" class="sidebar-link-item"><!---->User's Preferences</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/cli" class="sidebar-link-item"><!---->CLI</a><!----></li><li class="sidebar-link"><a href="/docs/previews" class="sidebar-link-item"><!---->Previews</a><!----></li><li class="sidebar-link"><a href="/docs/collaboration" class="sidebar-link-item"><!---->Collaboration</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/invite" class="sidebar-link-item"><!---->Invite</a><!----></li><li class="sidebar-link"><a href="/docs/share" class="sidebar-link-item"><!---->Share</a><!----></li><li class="sidebar-link"><a href="/docs/comments" class="sidebar-link-item"><!---->Comments</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/design-tokens" class="sidebar-link-item"><!---->Design Tokens</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/design-tokens-using-sd-figma" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lib/style-dictionary.png.webp" style="" width="16" decoding="async">Using Style-Dictionary & Figma</a><!----></li><li class="sidebar-link"><a href="/docs/figma-tokens" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3e%3cpath d='M300 0H100C44.77 0 0 44.77 0 100v200c0 55.23 44.77 100 100 100h200c55.23 0 100-44.77 100-100V100C400 44.77 355.23 0 300 0ZM171 265.92c0 .59-.02 1.18-.05 1.76.03.77.05 1.54.05 2.32 0 27.61-22.39 50-50 50s-50-22.39-50-50 22.39-50 50-50c.78 0 1.55.02 2.31.05.58-.04 1.17-.05 1.76-.05h16.85c16.06 0 29.08 13.02 29.08 29.08v16.85Zm19-108.23c0 17.84-14.46 32.31-32.31 32.31h-33.34C88.75 189.65 60 160.68 60 125s29.1-65 65-65 64.64 28.74 65 64.33v33.37ZM256 340c-30.38 0-55-24.62-55-55 0-.36 0-.72.01-1.08 0-.26-.01-.53-.01-.79v-23.76c0-16.22 13.15-29.37 29.37-29.37h23.76c.26 0 .52 0 .78.01.36 0 .72-.01 1.09-.01 30.38 0 55 24.62 55 55s-24.62 55-55 55Zm25.29-140.01c-.3 0-.6.01-.9.01h-30.77c-16.36 0-29.61-13.26-29.61-29.61v-30.77c0-.31 0-.61.01-.91.69-32.54 27.28-58.7 59.99-58.7s60 26.86 60 60-26.17 59.3-58.71 59.99Z' style='fill:white'/%3e%3c/svg%3e" style="" width="16">Using Figma Tokens Plugin</a><!----></li><li class="sidebar-link"><a href="/docs/specify" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23624DE3' d='m61.991 62 20.747 11.937-20.747 11.959-20.658-11.948L61.991 62zm41.342-23.93L124 50.007v23.958l-20.667-11.9V38.07zm-62-35.895V26.17l-20.666 11.9V14.112L41.333 2.175zM20.667 85.93 0 73.993V50.035l20.667 11.9V85.93zm61.99-59.825L62 14.157 82.658 2.21l20.747 11.958-20.747 11.937zm-41.332 71.79 20.747 11.937-20.747 11.958-20.658-11.947 20.658-11.948zm41.342 23.93V97.83l20.666-11.9v23.958l-20.666 11.937z'/%3e%3cpath fill='%23AB9FF4' d='M62 38.07v23.995l20.667 11.9V50.007z'/%3e%3cpath fill='%238D7CF6' d='M62 38.07v23.995l-20.667 11.9V50.007z'/%3e%3cpath fill='%23AB9FF4' d='m103.325 62 20.747 11.937-20.747 11.959-20.658-11.948L103.325 62zm-82.667 0L0 50.052l20.658-11.948 20.747 11.959L20.658 62zm62.009-11.965V26.041l20.666-11.9v23.957L82.667 50.035zm-41.334 23.93v23.994l-20.666 11.9V85.903l20.666-11.937zm41.334 47.86L62 109.888V85.93l20.667 11.9v23.995zM41.333 2.175 62 14.112V38.07l-20.667-11.9V2.175z'/%3e%3c/g%3e%3c/svg%3e" style="" width="16">Using Specify</a><!----></li><li class="sidebar-link"><a href="/docs/design-tokens-using-css-custom-properties" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='492' height='492' viewBox='85.5 210.272 437.29 491.728'%3e%3cpath fill='%231572B6' d='M128.668 652.845 89.21 210.272h433.58l-39.5 442.503L305.735 702z'/%3e%3cpath fill='%2333A9DC' d='m306 664.375 143.474-39.776 33.755-378.14H306z'/%3e%3cpath fill='white' d='m167.739 293.569-.308 54.766H390.34l-.08 35.375H167.203l-.161 54.766h222.909l-.293 62.462-84.061 29.75-83.639-29.75.063-27.087h-54.765l-.251 65.719 138.353 49.289 138.877-49.289.467-98.873.141-19.834.568-127.292-277.672-.002z'/%3e%3c/svg%3e" style="" width="16">Using CSS Custom properties</a><!----></li><li class="sidebar-link"><a href="/docs/design-tokens-using-system-ui" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='enable-background:new 0 0 158.78 138.51' viewB
32ox='0 0 158.78 138.51'%3e%3cpath d='M79.37.11c11.33 0 22.66.2 33.98-.1 4.54-.12 7.04 1.17 9.25 5.41 5.39 10.31 11.57 20.2 17.4 30.27 5.99 10.36 11.88 20.78 17.95 31.1 1.08 1.83 1.11 3.07.03 4.93-9.82 16.79-19.51 33.66-29.23 50.51-2.41 4.18-4.89 8.32-7.1 12.6-1.28 2.47-2.73 3.7-5.75 3.68-24.32-.13-48.65-.13-72.97 0-3 .02-4.41-1.21-5.78-3.63-7.46-13.16-15.09-26.23-22.64-39.34C9.94 87.62 5.49 79.63.83 71.76-.25 69.93-.29 68.68.8 66.83 6.7 56.8 12.42 46.67 18.22 36.58c6.38-11.1 12.82-22.17 19.11-33.32C38.64.95 40.18.02 42.88.05c12.16.13 24.33.06 36.49.06zm.02 19.19C64.73 44.7 50.58 69.2 36.28 93.97h86.22c-14.36-24.88-28.46-49.3-43.11-74.67zM74.18 8.88c-2.09-.18-3.22-.35-4.34-.35-7.16-.02-14.32.17-21.47-.09-3.2-.12-4.74 1.28-6.17 3.83-4.54 8.12-9.27 16.14-13.9 24.2C22.51 46.55 16.82 56.7 10.9 66.7c-1.23 2.07-1 3.41.15 5.34 3.99 6.71 7.75 13.55 11.65 20.32.43.75 1.17 1.34 2 2.27 16.5-28.6 32.75-56.77 49.48-85.75zm10.51.03c16.57 28.97 32.96 57.29 49.77 86.22 5.01-8.71 9.52-16.63 14.13-24.48.89-1.51.1-2.48-.56-3.62-3.64-6.34-7.25-12.69-10.89-19.02-7.05-12.24-14.15-24.44-21.13-36.72-1.25-2.2-2.83-2.85-5.24-2.81-7.15.12-14.31.02-21.46.05-1.27.01-2.53.2-4.62.38zm-54.94 95.47c4.85 8.47 9.3 16.41 14.01 24.19.56.93 2.55 1.39 3.89 1.4 21.14.08 42.28.03 63.42.1 2.24.01 3.71-.59 4.83-2.63 3.7-6.69 7.57-13.28 11.34-19.93.51-.91.79-1.95 1.26-3.13H29.75z' style='fill:white'/%3e%3c/svg%3e" style="" width="16">Using System-UI</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/stories" class="sidebar-link-item"><!---->Stories</a><!----></li><li class="sidebar-link"><a href="/docs/tests" class="sidebar-link-item"><!---->Tests</a><!----></li><li class="sidebar-link"><a href="/docs/documentation" class="sidebar-link-item"><!---->Documentation</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/export-doc" class="sidebar-link-item"><!---->Export static site</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/using-ds" class="sidebar-link-item"><!---->Using the design system in your app</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/using-ds" class="sidebar-link-item"><!---->Standard procedure</a><!----></li><li class="sidebar-link"><a href="/docs/using-ds-on-cra" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11.5 -10.232 23 20.463'%3e%3ccircle r='2.05' fill='%2361dafb'/%3e%3cg fill='none' stroke='%2361dafb'%3e%3cellipse rx='11' ry='4.2'/%3e%3cellipse rx='11' ry='4.2' transform='rotate(60)'/%3e%3cellipse rx='11' ry='4.2' transform='rotate(120)'/%3e%3c/g%3e%3c/svg%3e" style="" width="16">Create React App (CRA)</a><!----></li><li class="sidebar-link"><a href="/docs/using-ds-on-nuxt3" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='124' height='124' fill='none' viewBox='0 0 124 124'%3e%3cpath fill='%2380EEC0' fill-rule='evenodd' d='M55.75 27.155c-3.222-5.54-11.278-5.54-14.5 0L6.134 87.535C2.912 93.075 6.94 100 13.384 100h27.413c-2.753-2.407-3.773-6.57-1.69-10.142L65.704 44.27 55.75 27.155Z' clip-rule='evenodd'/%3e%3cpath fill='%2300DC82' d='M78 40.4c2.667-4.533 9.333-4.533 12 0l29.06 49.4c2.667 4.533-.666 10.199-5.999 10.199H54.938c-5.333 0-8.666-5.666-6-10.199L78 40.4Z'/%3e%3c/svg%3e" style="" width="16">Nuxt 3</a><!----></li><li class="sidebar-link"><a href="/docs/using-ds-on-nextjs" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lib/nextjs.svg.svg" style="" width="16" decoding="async">Next.js 11 and earlier</a><!----></li><li class="sidebar-link"><a href="/docs/using-ds-on-nextjs12" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lib/nextjs.svg.svg" style="" width="16" decoding="async">Next.js 12 and later</a><!----></li><li class="sidebar-link"><a href="/docs/using-ds-on-11ty" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/jpeg;base64,/9j/2wBDAAgICAgJCAkKCgkNDgwODRMREBARExwUFhQWFBwrGx8bGx8bKyYuJSMlLiZENS8vNUROQj5CTl9VVV93cXecnNH/2wBDAQgICAgJCAkKCgkNDgwODRMREBARExwUFhQWFBwrGx8bGx8bKyYuJSMlLiZENS8vNUROQj5CTl9VVV93cXecnNH/wgARCABgAGADASIAAhEBAxEB/8QAGgABAAMBAQEAAAAAAAAAAAAAAAYHCAQFA//EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAKhAAAAAAAd9slLrH8gh63KjAAAO3WmPtcla/Hz+8sSiL7hRUHm6IzycYAGucjaQIQ8wWlT1qU0aTyNpjM4AAAAm8IE4g4AAAAAAAf/EADgQAAEEAQMCAQcJCQAAAAAAAAIBAwQFBgAREgchEyAiMDE2dbM3UFJicXJ2grQUMjNBUWGDosL/2gAIAQEAAT8A+ZqyukWlhFgx+PivuIA8l2TddP8ASFyHUzpkm2FXmY7riNtt9twHWKdOJ+RQgnrNajxSMhRdlM/N1muMNYxasQW5JPocUHlIk27qRDrJcJp6vCoFswryyzGOrikXbd0fQV0+TWzo02MSI8waGCqm6b6KU9MwVZb67uv0nin942N110gu7B2a7Tm4iw2YjrwD9dXA11Oq5lvm1XAhghvu1wcfym4Wsvx6ws8Qj1kMBKQKsf6ag4Bkk4posR294r6sObuJ++Kb6pcctbye7BgsorzYEZoS8UFBXbU6G/AmSYcgeLzDpNmm++xCuy+VF+Ttj8Pj+n10c9p5vu1z4oa6oWc2qzWrnQneEhquBQL7TcTWbXllT4q3PhPIEhTZTkooXY9dJr2TOs75qU5zekbSv+S1hdWMDLM1eNEDg+PD7Ht3dWMspthNll6333HV/OSl5UX5O2Pw+P6fXRz2nm+7XPihrrH7TwvdrfxT11L74Iz9+Nrp1YfsGXVhKuwPETBf5E7ayZGKqjyieP8AFkMdy/oXBGg8uNmeNpgjcQrJtJI0/gKz35cxa4a6YXFbUZBIfsJIsNHBNtDL6SmBa6n3Fbb5BGfr5IvtBBBtTH6SGZap8ww66xiNWXr4AQMg2+07yFDVv1EJDq8Wsh5NIdoFUobDrTjCopF3FBVe6/W11Wm+BiTbHqWVIaFR/sPn+jwbLGMYsJL78Qn2n2fDLh2IdZvmK5PKjeEwTMWOheGBdyVT/mXzR//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8AE//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8AE//Z" style="" width="16">11ty (with Nunjucks)</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/visual-review" class="sidebar-link-item"><!---->Visual review</a><!----></li><li class="sidebar-link"><a href="/docs/howtos" class="sidebar-link-item"><!---->How tos</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/imports" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/webp;base64,UklGRsAEAABXRUJQVlA4TLQEAAAvj8FjEFegJgASNkcDTnCrqG0j5ij0e3vyh3gK27ZBYXEgEEjS3R/gAGHLIEK8iOg4oevv/Z60g0egc9vW2zZ6AJimwwRySR2c7S6njs5mpxw6UI7slGl0ytLXKQH43vxdp/c90PerZhjR/wn4l31x7L+x/8b+G/tv7L+x/8b+G/vvf3SZk+H2sQXv6/yra3/Sd+MrL+e2LWbZ65B+OZ49HmWPHlSycJc9IuF7H+3IqlElc2dvyeV7i1PWJrfJEUqDkJzPlBANAlIYbwK0HJDObolOFpDW+BAbE5HiDWjqpHra4vKUlN8tUckCbRTnoDRIPyjLVEGLSa0CdxmSHlVwFZNaFc4gWaYq5pA0KmERyaiKXUZkohKrkESVOEdkQJUsEJmoBiNSq0QXkYwquYPIs2pcINKsRoFIVImYATFUySlElquxg8ikg9lPw+HnhdcPQ4kLRJpi7y3/+Muj4JfK0dcdure/VBOKD/nnzWL0cwmPvpT1k3DOv2ze/FSKSCa0xpJZ+yd2EBnI3LUizEvhDy4ReSZzztKm/b0SkUmRxIoxv/0mYURaIjvs8ktIlELSFMmdsGnTGSQNiZhdP8khqUmkzuR/c5HEDmaBxDlmJJl7QwmZ8RrrDQxZJmK9oYTMeE0BGYtcesOZN6SYBRIJZpEElZDVRfYga4jchawpQjliLZkUsUkZygHrCd21eGVCtIsXS1GBVySVlHA1pOiuRaslRlMWrJ4c9cEyDmgFK44c0MpvbGro+Fik6YJWfl/OY5E7TqiPVOaG+kBxzQ31gWo5oj5OA1fUh4kjV9SHacIZ9VHK3NEKSFx3R+sgPVNA6xiZUAFtQMQTGmgfokwF5QhxU0VSIpQFGqhrAeIJFdRHyAQqaB8gfqqDCoC4rqOLUKaD9gDi2zqoBIgbOqYQMpEK2geIBzpiCxC/U0G7CPE7FbFFiJ9ooF2I+JaGxELEtxTQOUbcUXAXJO64o3z0xVcd31fCbXeroy/l0WjazhKU2LRdUY4Sc9vVDk7ccXQXKO64oQIo7rg5R4o7Tlah4o6LLlam7oAsVGwiBwVWnIVyZ2DxIBBbRYuXxabg4qZUgpcJhQgv7kmVeHFDKAdsIHQBGNdlzhDryewgxpHIKmQtb+iJpJAZkSnIuOYNTYkuZi1v+EPiLmZ3JBLMehJ3MVv2hp5EF7Nn3nBHYgoKo2cSncG01dKSSLGgbqmkLrEKBiWFjlBiBw2iAw2GJE/xoBUFPZFzQGjaOmuKXCJCd0tXgUgBCcWbbp6RqMWEqFu6iERiRoXovRW7TaJdYOjukdAgkFlFhuh9KZGFJHs64pJX7ks3RC+2f+lLSMKXI05j7ooo+WB/JrtJ4iU+RHTl5dyn4cnw88LfJJ8wRCpTbzjzhsIXYvaF1BvOvcH6Qsq+cOELsfWFVfaF0hdS9oXcF6bYFwpfWGVPiEtf2GdPmGJPiEtQ+Ka6nFHht8oOGBdeCjStMzKcRXo2GBs2bS0HjA7zYqghPmSA2LwNnE2XDBGzeewm2WKNFXrzqpKFFHP2OhS
327u8U6KzSCvy78LRDPbrNWJJjZLM6/uvZX8M2V+6/mPw1ZMRg/NCcnrB+Tao799x9c" style="" width="16">Import modules</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/technologies" class="sidebar-link-item"><!---->Technologies</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/javascript" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 630 630'%3e%3cpath fill='%23f7df1e' d='M0 0h630v630H0z'/%3e%3cpath d='M423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z'/%3e%3c/svg%3e" style="" width="16">JavaScript</a><!----></li><li class="sidebar-link"><a href="/docs/typescript" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3e%3cpath fill='%23007acc' d='M0 32v32h64.002V-.002H0zm51.577-2.55c1.625.406 2.865 1.128 4.003 2.306.59.63 1.463 1.778 1.534 2.052.02.08-2.763 1.95-4.45 2.997-.06.04-.305-.223-.58-.63-.823-1.2-1.686-1.717-3.007-1.808-1.94-.132-3.2.884-3.18 2.58 0 .498.07.792.274 1.2.427.884 1.22 1.412 3.708 2.49 4.582 1.97 6.542 3.27 7.76 5.12 1.36 2.062 1.666 5.354.742 7.802-1.016 2.662-3.535 4.47-7.08 5.07-1.097.193-3.698.163-4.876-.05-2.57-.457-5.008-1.727-6.512-3.393-.59-.65-1.737-2.347-1.666-2.47.03-.04.295-.203.59-.376l2.377-1.37 1.84-1.067.386.57c.538.823 1.717 1.95 2.428 2.326 2.042 1.077 4.846.924 6.227-.315.59-.538.833-1.097.833-1.92 0-.742-.09-1.067-.477-1.625-.498-.71-1.514-1.31-4.4-2.56-3.302-1.422-4.724-2.306-6.024-3.708-.752-.813-1.463-2.113-1.758-3.2-.244-.904-.305-3.17-.112-4.084.68-3.2 3.088-5.415 6.563-6.075 1.128-.213 3.75-.132 4.856.142zm-15.025 2.67.02 2.62h-8.33v23.67H22.35V34.74h-8.33v-2.57l.07-2.64c.03-.04 5.1-.06 11.246-.05l11.185.03z'/%3e%3c/svg%3e" style="" width="16">TypeScript</a><!----></li><li class="sidebar-link"><a href="/docs/jsx" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 630 630'%3e%3cpath fill='%23f7df1e' d='M0 0h630v630H0z'/%3e%3cpath d='M423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z'/%3e%3c/svg%3e" style="" width="16">JSX</a><!----></li><li class="sidebar-link"><a href="/docs/component-story-format" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='256' height='319' preserveAspectRatio='xMidYMid' viewBox='0 0 256 319'%3e%3cdefs%3e%3cpath id='a' d='M9.872 293.324.012 30.574C-.315 21.895 6.338 14.54 15.005 14L238.494.032c8.822-.552 16.42 6.153 16.972 14.975.02.332.031.665.031.998v286.314c0 8.839-7.165 16.004-16.004 16.004-.24 0-.48-.005-.718-.016l-213.627-9.595c-8.32-.373-14.963-7.065-15.276-15.388z'/%3e%3cmask id='b' fill='white'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3c/defs%3e%3cuse xlink:href='%23a' fill='%23ff4785'/%3e%3cpath fill='white' d='m188.665 39.127 1.527-36.716L220.884 0l1.322 37.863a2.387 2.387 0 0 1-3.864 1.96l-11.835-9.325-14.013 10.63a2.387 2.387 0 0 1-3.829-2.001zm-39.251 80.853c0 6.227 41.942 3.243 47.572-1.131 0-42.402-22.752-64.684-64.415-64.684
32-41.662 0-65.005 22.628-65.005 56.57 0 59.117 79.78 60.249 79.78 92.494 0 9.052-4.433 14.426-14.184 14.426-12.705 0-17.729-6.49-17.138-28.552 0-4.786-48.458-6.278-49.936 0-3.762 53.466 29.548 68.887 67.665 68.887 36.935 0 65.892-19.687 65.892-55.326 0-63.36-80.961-61.663-80.961-93.06 0-12.728 9.455-14.425 15.07-14.425 5.909 0 16.546 1.042 15.66 24.801z' mask='url(%23b)'/%3e%3c/svg%3e" style="" width="16">Component Story Format</a><!----></li><li class="sidebar-link"><a href="/docs/custom-elements-manifest" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='161' height='132' viewBox='0 0 161 132'%3e%3cdefs%3e%3clinearGradient id='a' x1='0%25' y1='50%25' y2='50%25'%3e%3cstop offset='0%25' stop-color='%232A3B8F'/%3e%3cstop offset='100%25' stop-color='%2329ABE2'/%3e%3c/linearGradient%3e%3clinearGradient id='b' x1='100%25' x2='0%25' y1='50%25' y2='50%25'%3e%3cstop offset='0%25' stop-color='%23B4D44E'/%3e%3cstop offset='100%25' stop-color='%23E7F716'/%3e%3c/linearGradient%3e%3c/defs%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23166DA5' d='m160.6 65.9-17.4 29.3-24.4-29.7 24.4-28.9z'/%3e%3cpath fill='%238FDB69' d='m141.3 100.2-26.5-31.7-15.9 26.6 24.7 36.1z'/%3e%3cpath fill='%23166DA5' d='m141 31.4-26.2 31.8-15.9-26.6L123.6.9z'/%3e%3cpath fill='url(%23a)' d='M61.1 31.4H141L123.4.7H78.7zm53.7 31.9H159l-15.9-26.8H98.8' opacity='.95'/%3e%3cpath fill='url(%23b)' d='M141.3 100.3H61l17.6 30.5h45zm-26.5-31.9H159l-15.9 26.8H98.8' opacity='.95'/%3e%3cpath fill='%23010101' d='M78.6 130.8 41 65.8 79.1.8H37.9L.4 65.8l37.5 65z'/%3e%3c/g%3e%3c/svg%3e" style="" width="16">Custom Elements Manifest</a><!----></li><li class="sidebar-link"><a href="/docs/react" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11.5 -10.232 23 20.463'%3e%3ccircle r='2.05' fill='%2361dafb'/%3e%3cg fill='none' stroke='%2361dafb'%3e%3cellipse rx='11' ry='4.2'/%3e%3cellipse rx='11' ry='4.2' transform='rotate(60)'/%3e%3cellipse rx='11' ry='4.2' transform='rotate(120)'/%3e%3c/g%3e%3c/svg%3e" style="" width="16">React</a><!----></li><li class="sidebar-link"><a href="/docs/preact" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='256' height='296' preserveAspectRatio='xMidYMid' viewBox='0 0 256 296'%3e%3cpath fill='%23673ab8' d='m128 0 128 73.9v147.8l-128 73.9L0 221.7V73.9z'/%3e%3cg fill='white'%3e%3cpath d='M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704 51.055-39.888 80.24-88.345 63.224-110.126-17.017-21.78-71.095-5.184-122.15 34.704-51.055 39.89-80.24 88.346-63.224 110.126zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253 11.322-18.797 30.541-39.548 54.06-57.923 23.52-18.375 48.303-32.004 69.281-38.442 19.922-6.113 34.277-5.075 39.92 2.148 5.644 7.223 3.178 21.403-7.573 39.254-11.322 18.797-30.541 39.547-54.06 57.923s-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147z'/%3e%3cpath d='M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126 51.055 39.889 105.133 56.485 122.15 34.704zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148-20.978-6.437-45.761-20.066-69.28-38.441-23.52-18.376-42.74-39.126-54.06-57.923-10.752-17.851-13.218-32.03-7.575-39.254s19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442 23.52 18.375 42.739 39.126 54.06 57.923 10.752 17.85 13.218 32.03 7.574 39.254z'/%3e%3cpath d='M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604 0-10.826-8.776-19.603-19.603-19.603s-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604z'/%3e%3c/g%3e%3c/svg%3e" style="" width="16">Preact</a><!----></li><li class="sidebar-link"><a href="/docs/vue" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196.32 170.02'%3e%3cpath fill='%2342b883' d='M120.83 0 98.16 39.26 75.49 0H0l98.16 170.02L196.32 0z'/%3e%3cpath fill='%2335495e' d='M120.83 0 98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0z'/%3e%3c/svg%3e" style="" width="16">Vue 3</a><!----></li><li class="sidebar-link"><a href="/docs/svelte" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lib/svelte.svg.svg" style="" width="16" decoding="async">Svelte</a><!----></li><li class="sidebar-link"><a href="/docs/stencil" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='240' height='182' fill='none' viewBox='0 0 240 182'%3e%3cpath fill='white' d='M88.502 128H181l-50 54H39z'/%3e%3cpath fill='black' d='M88.502 128H181L63.751 155z' opacity='.4'/%3e%3cpath fill='white' d='M240 64H49.974L0 118h190.026zM108.844 0H201l-49.77 54H59z'/%3e%3c/svg%3e" style="" width="16">Stencil</a><!----></li><li class="sidebar-link"><a href="/docs/riot" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='111' height='116' fill='none' viewBox='0 0 111 116'%3e%3cg fill='%23ed1846'%3e%3cpath d='M0 1.647C0 .737.737 0 1.647 0h73.674C95.026 0 111 16.028 111 35.8v6.308c0 .91-.737 1.647-1.647 1.647H88.861c-.91 0-1.647-.738-1.647-1.
32647v-6.309c0-6.59-5.324-11.933-11.893-11.933H25.433c-.91 0-1.647.737-1.647 1.647v80.238c0 .909-.74 1.653-1.648 1.59C9.77 106.492 0 96.157 0 83.531z'/%3e%3cpath d='M45.254 47.732c-.91 0-1.653.74-1.591 1.648.843 12.412 11.145 22.218 23.73 22.218H83.25a3.97 3.97 0 0 1 3.964 3.978v30.175c0 .909.74 1.653 1.648 1.59C101.23 106.492 111 96.157 111 83.531v-7.955c0-15.378-12.424-27.844-27.75-27.844z'/%3e%3c/g%3e%3c/svg%3e" style="" width="16">Riot</a><!----></li><li class="sidebar-link"><a href="/docs/uce" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3e%3cpath fill='white' d='M229.05 276.15c-23.568 25.26-44.076 37.891-61.523 37.891-11.198 0-21.615-4.297-31.25-12.891v10.352c0 11.979 1.823 24.023 5.469 36.133 4.166 13.411 6.25 22.266 6.25 26.562 0 5.99-1.888 10.937-5.664 14.844-3.776 3.906-8.464 5.86-14.062 5.86-5.73 0-10.286-2.28-13.672-6.836-3.386-4.558-5.078-10.026-5.078-16.406 0-4.688 1.692-13.151 5.078-25.391 3.906-13.542 5.859-26.693 5.86-39.453v-177.15h32.226v115.82c0 11.719 1.01 20.313 3.028 25.78 2.018 5.47 5.598 9.929 10.742 13.38 5.143 3.45 10.97 5.175 17.48 5.175 11.587 0 26.626-7.942 45.116-23.828v-136.33h32.422v135.74c0 11.458 1.172 19.37 3.516 23.73 2.344 4.362 6.315 6.543 11.914 6.543 8.854 0 14.583-8.658 17.188-25.977h7.031c-2.474 29.557-14.974 44.336-37.5 44.336-9.766 0-17.87-3.287-24.316-9.863-6.445-6.575-9.863-15.918-10.254-28.027z'/%3e%3c/svg%3e" style="" width="16">µce</a><!----></li><li class="sidebar-link"><a href="/docs/prism" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3e%3cpath fill='%231a1a1a' d='M-1-1h194v194H-1z'/%3e%3cpath fill='white' stroke='white' stroke-opacity='null' stroke-width='1.5' d='m24.214 131.154 25.461-88.013c3.335-11.53 9.77-19.797 14.37-18.466 4.601 1.33 5.627 11.757 2.292 23.286l-25.46 88.013c-3.336 11.53-9.77 19.798-14.371 18.467-4.601-1.33-5.627-11.757-2.292-23.287z'/%3e%3cpath fill='white' stroke='white' stroke-opacity='null' stroke-width='1.5' d='m63.092 138.893-6.928-91.359c-.908-11.968 2.228-21.964 7.004-22.326 4.776-.363 9.384 9.046 10.291 21.014l6.928 91.36c.908 11.968-2.228 21.964-7.004 22.326-4.776.362-9.383-9.046-10.291-21.015z'/%3e%3cpath fill='white' stroke='white' stroke-opacity='null' stroke-width='1.5' d='M141.659 118.032 71.628 49.659c-9.174-8.957-13.9-18.996-10.553-22.423 3.346-3.427 13.496 1.055 22.67 10.012l70.031 68.373c9.174 8.956 13.899 18.996 10.553 22.423-3.346 3.427-13.496-1.056-22.67-10.012z'/%3e%3cpath fill='white' stroke='white' stroke-opacity='null' stroke-width='1.5' d='m80.373 142.314 65.421-21.844c8.57-2.861 16.748-1.498 18.265 3.045 1.517 4.543-4.2 10.546-12.771 13.408l-65.422 21.844c-8.57 2.861-16.747 1.498-18.264-3.045-1.517-4.543 4.2-10.546 12.771-13.408z'/%3e%3cpath fill='white' stroke='white' stroke-opacity='null' stroke-width='1.5' d='m35.36 139.327 34.221 5.214c4.483.683 7.533 5.075 6.811 9.81-.721 4.735-4.94 8.02-9.423 7.337l-34.222-5.214c-4.483-.683-7.532-5.075-6.81-9.81.72-4.736 4.94-8.02 9.423-7.337z'/%3e%3c/svg%3e" style="" width="16">Prism</a><!----></li><li class="sidebar-link"><a href="/docs/assemblyscript" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/webp;base64,UklGRjwFAABXRUJQVlA4TDAFAAAvX8AXEN5Q0LYNk/CnvT8CETEBAOJjqrX7akRrtrVjkvS/x7Zt27Zt27Ztvs/7fu9Xd3OlbBTb7ryqqu7CeKadscczmRF9lW3bXRFPx9P4RhlwAAAgmMxetm3btm2dtm3btm3ztG3bdrmNJEmR/PftoYWDFo6ZGVqYiO3/BLittW1NkqClO6WWOkLGwN1dfubXyFtzMtlbsQkjfAsE09ram9jIyJ4gkQyARFZZx8gwyN6RyMjIbyg3AQAgDe7uJyH05CQCMTQQAfQkAqdLAE4C2GQC1gJ80hlRoGftHY/AVPgnIsWaRCQQSDHzrCmmHhLTZdaYLkKy/jtrfkCErSGwolb7FCTnsEcYExamxN7PUIT9qS2EhCnS3woKVva3JsyI9/wE6G85BS33vq/m1juFxJx/LQUvFT7jq2k1YSY2Hv61OmiPucJFgUxS4TyH3lM4SFJgk6R8Yw7RcFYdNsDDBhgQA2ALKuwixD2kuIcYd+DyNiECUFWuKZ9uqJ5isA7ic4RVdkf/9saDvf/vnC9c6Iby6RC9aB3Ih6rAT/l3PtwWdCAp1gF8TrDPXjiRej+xogOUCFXgDO9K9Yr8LinGPzC+afAt7VuJtFF85UKqE7YgA4mwDZP3woU0wScWrp9I2zF2marqzET46ZkNaaLDspS1PrGhjz2zoyyRC+I7TfiS9I5UcYAa1XmEWUQYpTc+LCkdQqp6ux6ZuZKYqfI7H3ZH+1bd64GJ6/0fJ0y4ILorponcGy/m0gO0IsI6S50bAbahwzDHsB3YPLA0VVT8JYjiOz9OyG+CB8zMyO4Z31RfubEyWJq5AeIzV9I9hEhIo4q9MSe5ucM2IQOWbp7inqnn1KAJUrVgNIClm2ywT0uJgAbpju5NMiztHKBF9T4nvArZAAOppREh/fT1e+PG/sHLeOZAgj6xoV34PKgaNDQ5Vrl0ZMg1xZOk73y46hJUiUuSO3Uu6HC9cqEf8NtHjh6qHd/8A6mjlHfNuKF+cmnZz/jFR7Uwfx8lQtouCK/UvQ0TDjGKhEcmrpBP/VS1S79W0kRxkutXfuhw6S5CxMvoFaLaeRc+QoqOsIrUPRL+EBYEWHZFdhekq+ZvQ
32QfS0yYMhG8FXYafcYZ/FaQ691NSwjZs3ipXZ8x44UTC/BBjzAsHCtIJdaRkqrrrPnZBcic0zSTA+GHR4BBtOkAvIg00NrkGZ2ZGs6CVIIOs/MSGAnRuiTRU1F2NmRkrhBculBFiBtkRRlGbn/6WArrlhR34PFdB0BkJmBnsIcTeLT4t44k3Q91tmLO1pzA2IwkzGN/uoWcEVynoLNQJnOFdCTotITMot0j3jG/RGKLusZnULS88saHMCx8zylI+3h3tm7AIz6mCHqBFJBiPl5EXtEgctmFCk5D37ZBuad4EmNX2axG/f6Vusa4o7jRqSwNmBuOnNqne0jxleA2WinEYMCGO9sKMDRCotLz/7z7eniExRsVXbgyLs0gjv/FhA+DbSSpO2wABAAN2YPOWSfcMb7G6xNJRsEg9l436NJe1llZXF1ReFIcxGr3wDzyycHkk2fFPpGHx9ATnDFavilHBYrKLEFWsfBVcLXXBmNGU3KQNEIg0TVhBgj0FPUAvwviskFTHSiwmuSZhERbMIqkNM7595ULJzF2NxTknuFJ3Sy6JbnlBv8WMbiPnJjA/h8VtHStMxRKkIrVhZtDtFO/siQX5FXrPAotLt7LYmEyuLGeYmQHNi3r/8sKF8oV8z3uGt+q6f8Ci4ymW4msi/vaJaw==" style="" width="16">AssemblyScript</a><!----></li><li class="sidebar-link"><a href="/docs/wat" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='612' height='612'%3e%3cpath fill='%23654ff0' d='M376 0v3.3c0 38.76-31.42 70.17-70.17 70.17-38.76 0-70.17-31.42-70.17-70.17V0H0v612h612V0z'/%3e%3cpath fill='white' d='M142.16 329.81h40.56l27.69 147.47h.5l33.28-147.47h37.94l30.06 149.28h.59l31.56-149.28h39.78L332.43 546.5h-40.25l-29.81-147.47h-.78L229.68 546.5h-41zm287.69 0h63.94l63.5 216.69h-41.84l-13.81-48.22H428.8l-10.66 48.22h-40.75zm24.34 53.41-17.69 79.5h55.06l-20.31-79.5z'/%3e%3c/svg%3e" style="" width="16">WebAssembly Text Format</a><!----></li><li class="sidebar-link"><a href="/docs/css" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='492' height='492' viewBox='85.5 210.272 437.29 491.728'%3e%3cpath fill='%231572B6' d='M128.668 652.845 89.21 210.272h433.58l-39.5 442.503L305.735 702z'/%3e%3cpath fill='%2333A9DC' d='m306 664.375 143.474-39.776 33.755-378.14H306z'/%3e%3cpath fill='white' d='m167.739 293.569-.308 54.766H390.34l-.08 35.375H167.203l-.161 54.766h222.909l-.293 62.462-84.061 29.75-83.639-29.75.063-27.087h-54.765l-.251 65.719 138.353 49.289 138.877-49.289.467-98.873.141-19.834.568-127.292-277.672-.002z'/%3e%3c/svg%3e" style="" width="16">CSS</a><!----></li><li class="sidebar-link"><a href="/docs/sass" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lang/sass.svg.svg" style="" width="16" decoding="async">Sass</a><!----></li><li class="sidebar-link"><a href="/docs/less" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lang/less.svg.svg" style="" width="16" decoding="async">Less</a><!----></li><li class="sidebar-link"><a href="/docs/markdown" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'%3e%3cpath fill='%23d3d3d3' d='M950.154 192H73.846C33.127 192 0 225.127 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846c0-40.719-33.125-73.846-73.846-73.846zM576 703.875 448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-.125zm191.091 32L608 512h96V320h128v192h96z'/%3e%3c/svg%3e" style="" width="16">markdown</a><!----></li><li class="sidebar-link"><a href="/docs/mdjs" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'%3e%3cpath fill='%23d3d3d3' d='M950.154 192H73.846C33.127 192 0 225.127 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846c0-40.719-33.125-73.846-73.846-73.846zM576 703.875 448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-.125zm191.091 32L608 512h96V320h128v192h96z'/%3e%3c/svg%3e" style="" width="16">mdjs</a><!----></li><li class="sidebar-link"><a href="/docs/md-vue" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'%3e%3cpath fill='%23d3d3d3' d='M950.154 192H73.846C33.127 192 0 225.127 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846c0-40.719-33.125-73.846-73.846-73.846zM576 703.875 448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-.125zm191.091 32L608 512h96V320h128v192h96z'/%3e%3c/svg%3e" style="" width="16">
32MD Vue</a><!----></li><li class="sidebar-link"><a href="/docs/mdx" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='2.42em' height='1em' aria-hidden='true' style='-ms-transform:rotate(360deg)%3b-webkit-transform:rotate(360deg)%3btransform:rotate(360deg)' viewBox='0 0 512 212'%3e%3cpath fill='white' d='M19.478 2.783h473.044c9.22 0 16.695 7.475 16.695 16.695V192c0 9.22-7.475 16.696-16.695 16.696H19.478c-9.22 0-16.695-7.475-16.695-16.696V19.478c0-9.22 7.475-16.695 16.695-16.695z'/%3e%3cpath fill='%23EAEAEA' d='M19.478 0h473.044C503.279 0 512 8.72 512 19.478V192c0 10.758-8.72 19.478-19.478 19.478H19.478C8.721 211.478 0 202.758 0 192V19.478C0 8.721 8.72 0 19.478 0zm0 5.565c-7.684 0-13.913 6.23-13.913 13.913V192c0 7.684 6.23 13.913 13.913 13.913h473.044c7.684 0 13.913-6.229 13.913-13.913V19.478c0-7.684-6.23-13.913-13.913-13.913H19.478z'/%3e%3cpath d='m272.696 40.203-.002 84.896L303.88 93.92l15.74 15.741-57.642 57.638-58.37-58.369 15.742-15.74 31.085 31.084V40.203zM72.162 162.98V97.231l40.255 40.257 40.56-40.557v65.383h22.26V43.192l-62.819 62.816-62.517-62.521v119.492z'/%3e%3cpath fill='%23F9AC00' d='m447.847 36.651 15.74 15.741-47.15 47.147 45.7 45.7-15.74 15.742-45.701-45.7-45.7 45.7-15.741-15.741 45.695-45.7-47.146-47.148 15.74-15.74 47.152 47.145z'/%3e%3c/svg%3e" style="" width="16">MDX</a><!----></li><li class="sidebar-link"><a href="/docs/mdsvex" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'%3e%3cpath fill='%23d3d3d3' d='M950.154 192H73.846C33.127 192 0 225.127 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846c0-40.719-33.125-73.846-73.846-73.846zM576 703.875 448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-.125zm191.091 32L608 512h96V320h128v192h96z'/%3e%3c/svg%3e" style="" width="16">MDsveX</a><!----></li><li class="sidebar-link"><a href="/docs/nunjucks" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lib/nunjucks.png.jpg" style="" width="16" decoding="async">Nunjucks</a><!----></li><li class="sidebar-link"><a href="/docs/pug" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lib/pug.svg.svg" style="" width="16" decoding="async">pug</a><!----></li><li class="sidebar-link"><a href="/docs/vscode-custom-data-format" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/logo/vscode.svg.svg" style="" width="16" decoding="async">VS Code Custom Data Format</a><!----></li><li class="sidebar-link"><a href="/docs/style-dictionary" class="sidebar-link-item"><img alt="Icon prefix" fetchpriority="high" height="16" src="/assets/lib/style-dictionary.png.webp" style="" width="16" decoding="async">Style Dictionary</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/root-files" class="sidebar-link-item"><!---->Supported config files</a><ul class="sidebar-links"><li class="sidebar-link"><a href="/docs/package-json" class="sidebar-link-item"><!---->package.json</a><!----></li><li class="sidebar-link"><a href="/docs/studio-config-json" class="sidebar-link-item"><!---->studio.config.json</a><!----></li><li class="sidebar-link"><a href="/docs/tsconfig-json" class="sidebar-link-item"><!---->tsconfig.json</a><!----></li><li class="sidebar-link"><a href="/docs/tailwind-config-js" class="sidebar-link-item"><!---->tailwind.config.js</a><!----></li><li class="sidebar-link"><a href="/docs/eslint" class="sidebar-link-item"><!---->eslint</a><!----></li><li class="sidebar-link"><a href="/docs/prettier" class="sidebar-link-item"><!---->prettier</a><!----></li><li class="sidebar-link"><a href="/docs/stories-preview" class="sidebar-link-item"><!---->stories.preview</a><!----></li><li class="sidebar-link"><a href="/docs/custom-elements-manifest-analyzer-config" class="sidebar-link-item"><!---->custom-elements-manifest.config.mjs</a><!----></li><li class="sidebar-link"><a href="/docs/sd-config" class="sidebar-link-item"><!---->sd.config.{json,js}</a><!----></li></ul></li><li class="sidebar-link"><a href="/docs/technologies-demos" class="sidebar-link-item"><!---->Technology demos</a><!----></li><li class="sidebar-link"><a href="/docs/design-system-examples" class="sidebar-link-item"><!---->Design system examples</a><!----></li><li class="sidebar-link"><a href="/docs/faq" class="sidebar-link-item"><!---->FAQ</a><!----></li>
32<!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-61db0836=""><div class="container" data-v-61db0836=""><!--[--><!--]--><div class="content" data-v-61db0836="" style="position:relative"><div><blockquote><p>Use the search bar at the top of the page to quickly find the information you need.</p></blockquote><h1 id="welcome-to-backlight-s-documentation" tabindex="-1">Welcome to <a href="https://backlight.dev" target="_blank" rel="noopener noreferrer">Backlight's</a> documentation <a href="#welcome-to-backlight-s-documentation" class="header-anchor" aria-hidden="true">#</a></h1><p><a href="https://backlight.dev" target="_blank" rel="noopener noreferrer">Backlight</a> is a collaborative platform empowering front-end teams to build and ship great design systems. Backlight is code-centric, but it also embraces collaboration across all disciplines: developers, designers, UX writers and product owners.</p><h2 id="discovering-backlight" tabindex="-1">Discovering Backlight? <a href="#discovering-backlight" class="header-anchor" aria-hidden="true">#</a></h2><section class="list" data-v-b1ef75d8=""><!--[--><a href="/docs/getting-started" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="32" width="32" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" class="iconify--codicon iconify" role="img"><g fill="currentColor"><path d="M14.491 1c-3.598.004-6.654 1.983-8.835 4H1.5l-.5.5v3l.147.354l.991.991l.001.009l4 4l.009.001l.999.999L7.5 15h3l.5-.5v-4.154c2.019-2.178 3.996-5.233 3.992-8.846l-.501-.5zM2 6h2.643a23.828 23.828 0 0 0-2.225 2.71L2 8.294V6zm5.7 8l-.42-.423a23.59 23.59 0 0 0 2.715-2.216V14H7.7zm-1.143-1.144L3.136 9.437C4.128 8 8.379 2.355 13.978 2.016c-.326 5.612-5.987 9.853-7.421 10.84zM4 15v-1H2v-2H1v3h3zm6.748-7.667a1.5 1.5 0 1 0-2.496-1.666a1.5 1.5 0 0 0 2.495 1.666z" clip-rule="evenodd" fill-rule="evenodd"></path></g></svg></i> Getting started</h3><p data-v-b1ef75d8=""></p></div></a><!--]--></section><h2 id="user-guides" tabindex="-1">User guides <a href="#user-guides" class="header-anchor" aria-hidden="true">#</a></h2><section class="list" data-v-b1ef75d8=""><!--[--><a href="/docs/online-ide" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M6 10V9h9v1H6zm4-4h5v1h-5V6zm5-3v1H6V3h9zm-9 9v1h9v-1H6z"></path><path d="M1 2.795l.783-.419 5.371 3.581v.838l-5.371 3.581L1 9.957V2.795zm1.007.94v5.281l3.96-2.64-3.96-2.64z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> Online Studio</h3><p data-v-b1ef75d8="">Code components, review PR visually, write documentation and release your design system directly online.</p></div></a><a href="/docs/cli" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M6 10V9h9v1H6zm4-4h5v1h-5V6zm5-3v1H6V3h9zm-9 9v1h9v-1H6z"></path><path d="M1 2.795l.783-.419 5.371 3.581v.838l-5.371 3.581L1 9.957V2.795zm1.007.94v5.281l3.96-2.64-3.96-2.64z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> CLI</h3><p data-v-b1ef75d8="">Code components locally, write documentation with your favorite IDE and link the design system directly into your app.</p></div></a><a href="/docs/previews" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><!----> Previews</h3><p data-v-b1ef75d8="">Stories, tests, documentation and design files are rendered automatically in the preview panel.</p></div></a><a href="/docs/visual-review" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><!----> Visual review</h3><p data-v-b1ef75d8="">Review your pull requests visually. Backlight detects visual regression to speed up your review process.</p></div></a>
32<!--]--></section><h2 id="building-design-systems" tabindex="-1">Building design systems <a href="#building-design-systems" class="header-anchor" aria-hidden="true">#</a></h2><section class="list" data-v-b1ef75d8=""><!--[--><a href="/docs/design-tokens" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M9.588 2.215A5.808 5.808 0 0 0 8 2c-.554 0-1.082.073-1.588.215l-.006.002c-.514.141-.99.342-1.432.601A6.156 6.156 0 0 0 2.82 4.98l-.002.004A5.967 5.967 0 0 0 2.21 6.41 5.986 5.986 0 0 0 2 8c0 .555.07 1.085.21 1.591a6.05 6.05 0 0 0 1.548 2.651c.37.365.774.677 1.216.94a6.1 6.1 0 0 0 1.435.609A6.02 6.02 0 0 0 8 14c.555 0 1.085-.07 1.591-.21.515-.145.99-.348 1.426-.607l.004-.002a6.16 6.16 0 0 0 2.161-2.155 5.85 5.85 0 0 0 .6-1.432l.003-.006A5.807 5.807 0 0 0 14 8c0-.554-.072-1.082-.215-1.588l-.002-.006a5.772 5.772 0 0 0-.6-1.423l-.002-.004a5.9 5.9 0 0 0-.942-1.21l-.008-.008a5.902 5.902 0 0 0-1.21-.942l-.004-.002a5.772 5.772 0 0 0-1.423-.6l-.006-.002zm4.455 9.32a7.157 7.157 0 0 1-2.516 2.508 6.966 6.966 0 0 1-1.668.71A6.984 6.984 0 0 1 8 15a6.984 6.984 0 0 1-1.86-.246 7.098 7.098 0 0 1-1.674-.711 7.3 7.3 0 0 1-1.415-1.094 7.295 7.295 0 0 1-1.094-1.415 7.098 7.098 0 0 1-.71-1.675A6.985 6.985 0 0 1 1 8c0-.643.082-1.262.246-1.86a6.968 6.968 0 0 1 .711-1.667 7.156 7.156 0 0 1 2.509-2.516 6.895 6.895 0 0 1 1.675-.704A6.808 6.808 0 0 1 8 1a6.8 6.8 0 0 1 1.86.253 6.899 6.899 0 0 1 3.083 1.805 6.903 6.903 0 0 1 1.804 3.083C14.916 6.738 15 7.357 15 8s-.084 1.262-.253 1.86a6.9 6.9 0 0 1-.704 1.674z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> Design Tokens</h3><p data-v-b1ef75d8="">How to manage your design tokens.</p></div></a><a href="/docs/stories" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor"><path d="M13.5 1.5L15 0h7.5L24 1.5V9l-1.5 1.5H15L13.5 9V1.5zm1.5 0V9h7.5V1.5H15zM0 15V6l1.5-1.5H9L10.5 6v7.5H18l1.5 1.5v7.5L18 24H1.5L0 22.5V15zm9-1.5V6H1.5v7.5H9zM9 15H1.5v7.5H9V15zm1.5 7.5H18V15h-7.5v7.5z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> Stories</h3><p data-v-b1ef75d8="">How to create isolated instances of components to apply component-driven development.</p></div></a><a href="/docs/tests" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M13.893 13.558L10 6.006v-4h1v-1H9.994V1l-.456.005H5V2h1v3.952l-3.894 7.609A1 1 0 0 0 3 15.006h10a1 1 0 0 0 .893-1.448zm-7-7.15L7 6.193V2.036l2-.024v4.237l.11.215 1.827 3.542H5.049l1.844-3.598zM3 14.017l1.54-3.011h6.916l1.547 3L3 14.017z"></path></svg></i> Tests</h3><p data-v-b1ef75d8="">Automated unit testing of your components.</p></div></a><a href="/docs/using-ds" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M14.207 1.707L13.5 1l-6 6-6-6-.707.707 6.353 6.354h.708l6.353-6.354zm0 6L13.5 7l-6 6-6-6-.707.707 6.353 6.354h.708l6.353-6.354z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> Using the design system in your app</h3><p data-v-b1ef75d8="">How to use a Backlight design system in your application.</p></div></a><a href="/docs/design-system-examples" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M8 3L7 4v8l1 1h6l1-1V4l-1-1H8zm6 9H8V4h6v8zM5 9V5h1V4H4.5l-.5.5v7l.5.5H6v-1H5V9zM2 8V6h1V5H1.5l-.5.5v5l.5.5H3v-1H2V8z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> Design system examples</h3><p data-v-b1ef75d8="">Design systems made with Backlight.</p></div></a>
32<!--]--></section><h2 id="for-reference" tabindex="-1">For reference <a href="#for-reference" class="header-anchor" aria-hidden="true">#</a></h2><section class="list" data-v-b1ef75d8=""><!--[--><a href="/docs/technologies" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M4.708 5.578L2.061 8.224l2.647 2.646-.708.708-3-3V7.87l3-3 .708.708zm7-.708L11 5.578l2.647 2.646L11 10.87l.708.708 3-3V7.87l-3-3zM4.908 13l.894.448 5-10L9.908 3l-5 10z"></path></svg></i> Technologies</h3><p data-v-b1ef75d8="">Reference guides of all technologies supported.</p></div></a><a href="/docs/root-files" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor"><path d="M19.85 8.75l4.15.83v4.84l-4.15.83 2.35 3.52-3.43 3.43-3.52-2.35-.83 4.15H9.58l-.83-4.15-3.52 2.35-3.43-3.43 2.35-3.52L0 14.42V9.58l4.15-.83L1.8 5.23 5.23 1.8l3.52 2.35L9.58 0h4.84l.83 4.15 3.52-2.35 3.43 3.43-2.35 3.52zm-1.57 5.07l4-.81v-2l-4-.81-.54-1.3 2.29-3.43-1.43-1.43-3.43 2.29-1.3-.54-.81-4h-2l-.81 4-1.3.54-3.43-2.29-1.43 1.43L6.38 8.9l-.54 1.3-4 .81v2l4 .81.54 1.3-2.29 3.43 1.43 1.43 3.43-2.29 1.3.54.81 4h2l.81-4 1.3-.54 3.43 2.29 1.43-1.43-2.29-3.43.54-1.3zm-8.186-4.672A3.43 3.43 0 0 1 12 8.57 3.44 3.44 0 0 1 15.43 12a3.43 3.43 0 1 1-5.336-2.852zm.956 4.274c.281.188.612.288.95.288A1.7 1.7 0 0 0 13.71 12a1.71 1.71 0 1 0-2.66 1.422z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> Supported config files</h3><p data-v-b1ef75d8="">Description of all root files supported.</p></div></a><a href="/docs/technologies-demos" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M8 3L7 4v8l1 1h6l1-1V4l-1-1H8zm6 9H8V4h6v8zM5 9V5h1V4H4.5l-.5.5v7l.5.5H6v-1H5V9zM2 8V6h1V5H1.5l-.5.5v5l.5.5H3v-1H2V8z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> Technology demos</h3><p data-v-b1ef75d8="">Demos of how some technologies can be used in Backlight.</p></div></a><a href="/docs/faq" class="card" data-v-b1ef75d8=""><!----><div class="wrapper" data-v-b1ef75d8=""><h3 data-v-b1ef75d8=""><i class="icon" data-v-b1ef75d8=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M7.5 1a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zm0 12a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm1.55-8.42a1.84 1.84 0 0 0-.61-.42A2.25 2.25 0 0 0 7.53 4a2.16 2.16 0 0 0-.88.17c-.239.1-.45.254-.62.45a1.89 1.89 0 0 0-.38.62 3 3 0 0 0-.15.72h1.23a.84.84 0 0 1 .506-.741.72.72 0 0 1 .304-.049.86.86 0 0 1 .27 0 .64.64 0 0 1 .22.14.6.6 0 0 1 .16.22.73.73 0 0 1 .06.3c0 .173-.037.343-.11.5a2.4 2.4 0 0 1-.27.46l-.35.42c-.12.13-.24.27-.35.41a2.33 2.33 0 0 0-.27.45 1.18 1.18 0 0 0-.1.5v.66H8v-.49a.94.94 0 0 1 .11-.42 3.09 3.09 0 0 1 .28-.41l.36-.44a4.29 4.29 0 0 0 .36-.48 2.59 2.59 0 0 0 .28-.55 1.91 1.91 0 0 0 .11-.64 2.18 2.18 0 0 0-.1-.67 1.52 1.52 0 0 0-.35-.55zM6.8 9.83h1.17V11H6.8V9.83z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></i> FAQ</h3><p data-v-b1ef75d8="">Frequently Asked Questions.</p></div></a><!--]--></section><h2 id="need-help" tabindex="-1">Need help? <a href="#need-help" class="header-anchor" aria-hidden="true">#</a></h2><ul><li><a href="https://backlight.dev/chat" target="_blank" rel="noopener noreferrer">Discord <code>#help</code> channel</a> for Backlight.</li><li><a href="https://github.com/divriots/backlight.dev/issues/new/choose" target="_blank" rel="noopener noreferrer">Open an issue</a></li><li>High-priority email support (for <a href="https://backlight.dev/pricing" target="_blank" rel="noopener noreferrer">PRO and ENTERPRISE plans</a> only)</li></ul></div></div><footer class="page-footer" data-v-61db0836="" data-v-717fff18=""><div class="edit" data-v-717fff18=""><div class="edit-link" data-v-717fff18="" data-v-ce696772=""><!----></div></div><div class="updated" data-v-717fff18=""><!----></div></footer><div class="next-and-prev-link" data-v-b4bcaaa6="" data-v-61db0836=""><div class="container" data-v-b4bcaaa6=""><div class="prev" data-v-b4bcaaa6=""><!----></div><div class="next" data-v-b4bcaaa6=""><a href="/docs/getting-started" class="link" data-v-b4bcaaa6=""><span class="text" data-v-b4bcaaa6="">Getting started</span><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon icon-next" data-v-b4bcaaa6=""><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,
3219.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!--[--><!--]--></div><!----><button class="sidebar-toggle" data-v-be1198d0=""><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" data-v-be1198d0=""><g fill="currentColor"><path d="M16 5H0V4h16v1zm0 8H0v-1h16v1zm0-4.008H0V8h16v.992z"></path></g></svg></button><!--]--></div> 33
33<script>__VP_HASH_MAP__=JSON.parse('{"advanced-scm-integration.md":"b5e9a3c6","assemblyscript.md":"0b561cd4","cli.md":"dd04f6db","collaboration.md":"c965fb21","comments.md":"c6239ee0","component-story-format.md":"0f789a58","css.md":"b72a215e","custom-elements-manifest-analyzer-config.md":"aa05df96","custom-elements-manifest.md":"ac25d4b5","demos.md":"3a455126","design-system-examples.md":"75190e37","design-tokens-using-css-custom-properties.md":"b5988b8d","design-tokens-using-sass-variables.md":"944c428a","design-tokens-using-sd-figma.md":"9e8345f2","design-tokens-using-system-ui.md":"87383ae4","design-tokens.md":"dceeaee3","doc-context.md":"eba93d9c","documentation.md":"19dda5d7","eslint.md":"5f29a701","export-doc.md":"70c42461","faq.md":"9a79f018","figma-tokens.md":"4cdc9f8e","getting-started.md":"dd9d2b05","git.md":"c1a9f365","howtos.md":"db843fe6","imports.md":"96b17cef","index.md":"1cc9956c","invite.md":"24379e28","javascript.md":"d9466b61","jsx.md":"72838c8b","less.md":"9373803e","make-your-first-design-system.md":"e8106db9","markdown.md":"5780ffda","md-vue.md":"8b71a935","mdjs.md":"65ead283","mdsvex.md":"f64b081c","mdx.md":"150e0926","nunjucks.md":"242d6494","online-ide.md":"c081b68f","package-json.md":"60c7396e","preact.md":"ae2bfc71","prettier.md":"2b72e966","previews.md":"23a7af53","prism.md":"cac1b8f5","publish.md":"543375b3","pug.md":"d70d9763","react.md":"20e405af","riot.md":"f2fad30b","root-files.md":"880ad191","sass.md":"98b0564d","sd-config.md":"ab64bc58","share.md":"641605e3","specify.md":"b34c38ee","stencil.md":"3639144e","stories-preview.md":"f32a5ba5","stories.md":"66230285","studio-config-json.md":"5058074c","style-dictionary.md":"2987029c","svelte.md":"51ea9e85","tailwind-config-js.md":"98c1957f","technologies-demos.md":"a6ef2f7d","technologies.md":"d62667ab","tests.md":"d80038cb","tsconfig-json.md":"88bf5ddf","typescript.md":"cee78d83","uce.md":"6b7b9848","user-preferences.md":"2ffcd865","using-ds-on-11ty.md":"b27a81bd","using-ds-on-cra.md":"4a2ca775","using-ds-on-nextjs.md":"41f75d2f","using-ds-on-nextjs12.md":"07e93fb4","using-ds-on-nuxt3.md":"fb0fa590","using-ds.md":"f7225d42","visual-review.md":"6d3562bd","vscode-custom-data-format.md":"845c4b26","vscode-extension.md":"ae5cd58a","vue.md":"6f0685f4","wat.md":"1e3a1ad1"}'); 34</script>
34 35
35<script src="/docs/assets/app.8df3c31b.js" async="" type="module"></script>
35 36 37 38</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.