1<!DOCTYPE html><html class="astro-MK7FUWXW" lang="en"><head><style>:where(img){height:auto}</style> 2 3 <link href="/css/fluid-typograhy.css" rel="stylesheet"> 4 <meta charset="utf-8"> 5<meta content="width=device-width,initial-scale=1,viewport-fit=cover" name="viewport"> 6<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin=""> 7 8 9<link href="/styles.css" rel="stylesheet"> 10<link href="https://backlight.dev/blog" rel="canonical"> 11 12 13 14<!-- Favicon --> 15<link href="/img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"> 16<link href="/img/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"> 17<link href="/img/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"> 18 19<link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Backlight - Build Design Systems - Tool for front-end teams"> 20<link href="/site.webmanifest" rel="manifest"> 21<meta content="#f8c307" name="theme-color"> 22 23<!-- Common --> 24<title>Backlight - Build Design Systems - Tool for front-end teams</title> 25<meta content="Empower your front-end with a collaborative design system platform: code, design, stories, tests, documentation, versioning, npm release and more. Start now!" name="description"> 26 27<!-- OpenGraph --> 28<meta content="Backlight - Build Design Systems - Tool for front-end teams" property="og:title"> 29<meta content="Empower your front-end with a collaborative design system platform: code, design, stories, tests, documentation, versioning, npm release and more. Start now!" property="og:description"> 30<meta content="https://backlight.dev/img/meta.jpg" property="og:image"> 31 32 33<!-- Twitter --> 34<meta content="summary_large_image" name="twitter:card"> 35<meta content="backlight_dev" name="twitter:site"> 36<meta content="Backlight - Build Design Systems - Tool for front-end teams" name="twitter:title"> 37<meta content="Empower your front-end with a collaborative design system platform: code, design, stories, tests, documentation, versioning, npm release and more. Start now!" name="twitter:description"> 38<meta content="https://backlight.dev/img/meta.jpg" name="twitter:image">
39<script data-site="DAVUOHYU" defer="" src="https://cdn.usefathom.com/script.js"></script>
vendor: 1 bytes, line 39
39
40<script>{let t="https://studio.backlight.dev";window.addEventListener("load",()=>{document.querySelectorAll("a[href='/get-started']").forEach(e=>{e.addEventListener("click",()=>fathom.trackGoal("T9SAQPWS",0))}),document.querySelectorAll(`a[href^='${t}']`).forEach(e=>{e.addEventListener("click",()=>fathom.trackGoal("T9SAQPWS",0))}),document.querySelectorAll("a[href^='/edit']").forEach(e=>{e.addEventListener("click",()=>fathom.trackGoal("T9SAQPWS",0))}),document.querySelectorAll("a[href^='/signup']").forEach(e=>{e.addEventListener("click",()=>fathom.trackGoal("T9SAQPWS",0))}),document.querySelectorAll("a[href^='/starterkits']").forEach(e=>{e.addEventListener("click",()=>fathom.trackGoal("T9SAQPWS",0))}),document.querySelectorAll("a[href^='/signin']").forEach(e=>{e.addEventListener("click",()=>fathom.trackGoal("T9SAQPWS",0))}),document.querySelectorAll("a[href^='https://calendly.com/backlight_/demo']").forEach(e=>{e.addEventListener("click",()=>fathom.trackGoal("FE9WM7LZ",0))})})} 41</script>
41 42 43 <link href="/assets/eee711e5.67a900e6.css" rel="stylesheet"> 44<link href="/assets/f4cdb511.6a0b617c.css" rel="stylesheet"> 45<link href="/assets/43cef319.cae0fa76.css" rel="stylesheet"> 46<link href="/assets/blog-_...253fd69c.css" rel="stylesheet"></head> 47 <body class="astro-MK7FUWXW font-space-grotesk" style="color:#fff;background:#171717"> 48 <div class="astro-MK7FUWXW" style="text-align:center;background:tomato;padding:1rem">Backlight.dev is shutting down June 1st 2025. For more information, please contact <a href="mailto:[email protected]" class="astro-MK7FUWXW" style="color:#fff">[email protected]</a></div> 49 <div class="astro-MK7FUWXW nav-container"> 50 <style>astro-island,astro-slot{display:contents}</style>
50<script>(self.Astro=self.Astro||{}).visible=(a,o,t)=>{const e=async()=>{await(await a())()};let i=new IntersectionObserver(r=>{for(const s of r)if(s.isIntersecting){i.disconnect(),e();break}});for(let r=0;r<t.children.length;r++){const s=t.children[r];i.observe(s)}},window.dispatchEvent(new Event("astro:visible"));var l;{const a={0:t=>t,1:t=>JSON.parse(t,o),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,o)),5:t=>new Set(JSON.parse(t,o)),6:t=>BigInt(t),7:t=>new URL(t)},o=(t,e)=>{if(t===""||!Array.isArray(e))return e;const[i,r]=e;return i in a?a[i](r):void 0};customElements.get("astro-island")||customElements.define("astro-island",(l=class extends HTMLElement{constructor(){super(...arguments),this.hydrate=()=>{if(!this.hydrator||this.parentElement&&this.parentElement.closest("astro-island[ssr]"))return;const t=this.querySelectorAll("astro-slot"),e={},i=this.querySelectorAll("template[data-astro-template]");for(const s of i){const n=s.closest(this.tagName);!n||!n.isSameNode(this)||(e[s.getAttribute("data-astro-template")||"default"]=s.innerHTML,s.remove())}for(const s of t){const n=s.closest(this.tagName);!n||!n.isSameNode(this)||(e[s.getAttribute("name")||"default"]=s.innerHTML)}const r=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),o):{};this.hydrator(this)(this.Component,r,e,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),window.removeEventListener("astro:hydrate",this.hydrate),window.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((t,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener("astro:hydrate",this.hydrate),await import(this.getAttribute("before-hydration-url")),this.start()}start(){const t=JSON.parse(this.getAttribute("opts")),e=this.getAttribute("client");if(Astro[e]===void 0){window.addEventListener(`astro:${e}`,()=>this.start(),{once:!0});return}Astro[e](async()=>{const i=this.getAttribute("renderer-url"),[r,{default:s}]=await Promise.all([import(this.getAttribute("component-url")),i?import(i):()=>()=>{}]),n=this.getAttribute("component-export")||"default";if(!n.includes("."))this.Component=r[n];else{this.Component=r;for(const h of n.split("."))this.Component=this.Component[h]}return this.hydrator=s,this.hydrate},t,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},l.observedAttributes=["props"],l))} 51</script>
51<astro-island await-children="" before-hydration-url="data:text/javascript;charset=utf-8,//[no before-hydration script]" client="visible" component-export="default" component-url="/navbar.764f5020.js" opts="{"name":"Nav","value":true}" props="{"routes":[1,"[[0,{\"title\":[0,\"Features\"],\"routes\":[1,\"[[0,{\\\"pathname\\\":[0,\\\"/features\\\"],\\\"label\\\":[0,\\\"Features\\\"]}]]\"]}],[0,{\"title\":[0,\"Docs\"],\"routes\":[1,\"[[0,{\\\"pathname\\\":[0,\\\"/docs\\\"],\\\"label\\\":[0,\\\"Docs\\\"]}]]\"]}],[0,{\"title\":[0,\"Pricing\"],\"routes\":[1,\"[[0,{\\\"pathname\\\":[0,\\\"/pricing\\\"],\\\"label\\\":[0,\\\"Pricing\\\"]}]]\"]}],[0,{\"title\":[0,\"Resources\"],\"routes\":[1,\"[[0,{\\\"pathname\\\":[0,\\\"/mastery\\\"],\\\"label\\\":[0,\\\"Mastery\\\"],\\\"text\\\":[0,\\\"Articles to learn all about design systems.\\\"]}],[0,{\\\"pathname\\\":[0,\\\"/sessions\\\"],\\\"label\\\":[0,\\\"Sessions\\\"],\\\"text\\\":[0,\\\"Videos and tutorial series with design system experts.\\\"]}],[0,{\\\"pathname\\\":[0,\\\"/blog\\\"],\\\"label\\\":[0,\\\"Blog\\\"],\\\"text\\\":[0,\\\"Latest posts and updates from our team.\\\"]}]]\"]}]]"],"pathname":[0,"/blog/"],"studioRoute":[0,"https://studio.backlight.dev"],"class":[0,"astro-MK7FUWXW"]}" renderer-url="/client.da9843de.js" ssr="" uid="Z1KFoA8"><nav class="astro-MK7FUWXW text-white mt-2" data-v-f77355f8=""><div class="mx-auto px-2" data-v-f77355f8=""><div class="block items-center justify-between md:flex vitepress-flex" data-v-f77355f8=""><div class="text-xl flex flex-col mr-4 mt-2 px-2 space-y-2" data-v-f77355f8="" base="" data-v-5b4fcec4="" pathname="/blog/"><a href="/" class="flex flex-col flex-shrink-0 logo" data-v-5b4fcec4="" aria-label="Home">
51<svg class="h-8 mt-1" viewBox="0 0 860.39 135" xmlns="http://www.w3.org/2000/svg" data-v-5b4fcec4=""><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-5b4fcec4="" 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-5b4fcec4="" 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-5b4fcec4="" 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-5b4fcec4="" transform="translate(-13.42 -14)"></path><path d="M477.52,119V14h9V119Z" class="secondary" data-v-5b4fcec4="" 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-5b4fcec4="" 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-5b4fcec4="" 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-5b4fcec4="" 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-5b4fcec4="" transform="translate(-13.42 -14)"></path></svg><div class="logo-description" data-v-5b4fcec4="">Design systems, code-side</div></a><span data-v-5b4fcec4=""><!--[--><!--]--></span></div><div class="desktop-slot" data-v-f77355f8=""><!--[--><!--]--></div><label aria-controls="mobile-menu" aria-expanded="false" class="btn md:hidden" data-v-f77355f8="" for="navexpander" tabindex="{0}"><span class="sr-only" data-v-f77355f8="">Open main menu</span><svg class="block h-6 w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-v-f77355f8="" fill="none" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16" data-v-f77355f8="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></label><input class="hidden" data-v-f77355f8="" id="navexpander" type="checkbox"><div class="hidden items-start md:block md:items-end mobile-menu" data-v-f77355f8="" id="mobile-menu"><!--[--><!--[--><div data-v-52aee83d=""><div data-v-52aee83d=""><a href="/features" class="block ml-2 nav-link px-2 py-1 text-inherit" target="_self" data-v-52aee83d=""><!--[--><span class="border-0 border-b-4 border-solid border-transparent pb-1 inline-block" data-v-52aee83d="">Features</span><!--]--></a></div></div><div data-v-52aee83d=""><div data-v-52aee83d=""><a href="/docs" class="block ml-2 nav-link px-2 py-1 text-inherit" target="_self" data-v-52aee83d=""><!--[--><span class="border-0 border-b-4 border-solid border-transparent pb-1 inline-block" data-v-52aee83d="">Docs</span><!--]--></a></div></div><div data-v-52aee83d=""><div data-v-52aee83d=""><a href="/pricing" class="block ml-2 nav-link px-2 py-1 text-inherit" target="_self" data-v-52aee83d=""><!--[--><span class="border-0 border-b-4 border-solid border-transparent pb-1 inline-block" data-v-52aee83d="">Pricing</span><!--]--></a></div></div><div data-v-52aee83d=""><div data-v-52aee83d=""><button aria-controls="ressources-dropdown" aria-expanded="false" class="dropdown-padding dropdown__title" data-v-52aee83d="" 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-52aee83d="">Resources <svg class="ml-2 iconify--codicon inline" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-v-52aee83d="" height="16" preserveAspectRatio="xMidYMid meet" role="img" style="transform:rotate(90deg)" width="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" fill="currentColor" clip-rule="evenodd" fill-rule="evenodd"></path></svg></span></button><div class="dropdown__menu" id="ressources-dropdown" data-v-52aee83d="" style="display:none"><!--[--><a href="/mastery" class="block ml-2 nav-link px-2 py-1 text-inherit" target="_self" data-v-52aee83d=""><!--[--><span class="text-primary whitespace-nowrap" data-v-52aee83d="">
51Mastery<svg class="inline iconify--codicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-v-52aee83d="" height="16" preserveAspectRatio="xMidYMid meet" role="img" style="transform:rotate(0)" width="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" fill="currentColor" clip-rule="evenodd" fill-rule="evenodd"></path></svg></span><p class="text-sm mb-4 mt-2" data-v-52aee83d="">Articles to learn all about design systems.</p><!--]--></a><a href="/sessions" class="block ml-2 nav-link px-2 py-1 text-inherit" target="_self" data-v-52aee83d=""><!--[--><span class="text-primary whitespace-nowrap" data-v-52aee83d="">Sessions<svg class="inline iconify--codicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-v-52aee83d="" height="16" preserveAspectRatio="xMidYMid meet" role="img" style="transform:rotate(0)" width="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" fill="currentColor" clip-rule="evenodd" fill-rule="evenodd"></path></svg></span><p class="text-sm mb-4 mt-2" data-v-52aee83d="">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" target="_self" data-v-52aee83d=""><!--[--><span class="text-primary whitespace-nowrap" data-v-52aee83d="">Blog<svg class="inline iconify--codicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-v-52aee83d="" height="16" preserveAspectRatio="xMidYMid meet" role="img" style="transform:rotate(0)" width="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619l4.357-4.357z" fill="currentColor" clip-rule="evenodd" fill-rule="evenodd"></path></svg></span><p class="text-sm mb-4 mt-2" data-v-52aee83d="">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 md:ml-2" data-v-52aee83d=""> Log in </a><!--]--><div class="mobile-slot" data-v-f77355f8=""><!--[--><!--]--></div></div></div></div></nav></astro-island> 52 </div> 53 <main class="astro-MK7FUWXW"> 54 <main class="astro-N5JXDAXG dark gradient max-w-3xl mx-auto w-full"> 55 <header class="astro-N5JXDAXG py-20 text-center"> 56 <h1 class="astro-N5JXDAXG lg:text-6xl mb-2 sm:text-5xl text-4xl">Blog</h1> 57 <p class="astro-N5JXDAXG lg:text-2xl sm:text-xl text-gray-light text-lg"> 58 Updates and News about Backlight and Design Systems 59 </p> 60 </header> 61 <ul class="astro-N5JXDAXG"> 62 <li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg" data-title-card=""> 63 <a href="/blog/how-your-favourite-ui-libraries-manage-their-icons" class="astro-N5JXDAXG"> 64 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 65 <img alt="Hero image with a set of icons at the background." decoding="async" height="627" src="/img/blog/how-your-favourite-ui-libraries-manage-their-icons.jpg.jpg" width="1200" class="astro-N5JXDAXG rounded-xl" sizes="100vw" srcset="/img/blog/how-your-favourite-ui-libraries-manage-their-icons.jpg.jpg 1200w, /img/blog/[email protected] 900w" fetchpriority="high"> 66 </div> 67 <div class="astro-N5JXDAXG p-6"> 68 <span class="astro-N5JXDAXG my-2 opacity-75"> 69 Wed, 07 Sep 2022 70 </span> 71 <h2 class="astro-N5JXDAXG my-2 text-xl">How your favourite UI libraries manage their icons</h2> 72 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 73 What are the good practices while working with icons. 74 </p> 75 <p class="astro-N5JXDAXG my-2 opacity-75"> 76 77 by 78 Andrico Karoulla 79 </p> 80 </div> 81 </a> 82 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 83 <a href="/blog/how-to-manage-icons-in-your-UI-library-part-1" class="astro-N5JXDAXG"> 84 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 85 <img alt="Hero image with a set of icons at the background." decoding="async" height="627" src="/img/blog/how-to-manage-icons-in-your-UI-library-part-1.jpg.jpg" width="1200" class="astro-N5JXDAXG roun
85ded-xl" fetchpriority="high"> 86 </div> 87 <div class="astro-N5JXDAXG p-6"> 88 <span class="astro-N5JXDAXG my-2 opacity-75"> 89 Thu, 07 Jul 2022 90 </span> 91 <h2 class="astro-N5JXDAXG my-2 text-xl">How to manage icons in your UI library</h2> 92 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 93 What are the good practices while working with icons. 94 </p> 95 <p class="astro-N5JXDAXG my-2 opacity-75"> 96 97 by 98 Andrico Karoulla 99 </p> 100 </div> 101 </a> 102 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 103 <a href="/blog/5-things-to-avoid-when-building-a-design-system" class="astro-N5JXDAXG"> 104 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 105 <img alt="Multiples components designed around the same idea" decoding="async" height="627" src="/img/blog/5-things-to-avoid-when-building-a-design-system.jpg.jpg" width="1200" class="astro-N5JXDAXG rounded-xl" sizes="100vw" srcset="/img/blog/5-things-to-avoid-when-building-a-design-system.jpg.jpg 1200w, /img/blog/[email protected] 900w" fetchpriority="high"> 106 </div> 107 <div class="astro-N5JXDAXG p-6"> 108 <span class="astro-N5JXDAXG my-2 opacity-75"> 109 Tue, 21 Jun 2022 110 </span> 111 <h2 class="astro-N5JXDAXG my-2 text-xl">5 Things to avoid when building a design system</h2> 112 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 113 What are the biggest slip-up when building a design system. 114 </p> 115 <p class="astro-N5JXDAXG my-2 opacity-75"> 116 117 by 118 Sonia Singla 119 </p> 120 </div> 121 </a> 122 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 123 <a href="/blog/naming-conventions-for-design-systems" class="astro-N5JXDAXG"> 124 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 125 <img alt="Showing naming convention utility with some components" decoding="async" height="627" src="/img/blog/naming-conventions-for-design-systems.jpg.jpg" width="1200" class="astro-N5JXDAXG rounded-xl" sizes="100vw" srcset="/img/blog/naming-conventions-for-design-systems.jpg.jpg 1200w, /img/blog/[email protected] 900w" fetchpriority="high"> 126 </div> 127 <div class="astro-N5JXDAXG p-6"> 128 <span class="astro-N5JXDAXG my-2 opacity-75"> 129 Thu, 16 Jun 2022 130 </span> 131 <h2 class="astro-N5JXDAXG my-2 text-xl">Naming conventions for design systems</h2> 132 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 133 Why naming conventions are that important for design systems. 134 </p> 135 <p class="astro-N5JXDAXG my-2 opacity-75"> 136 137 by 138 Ardena 139 </p> 140 </div> 141 </a> 142 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 143 <a href="/blog/the-3-pillars-of-a-successful-design-system" class="astro-N5JXDAXG"> 144 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 145 <img alt="3 pillars carrying a design system." decoding="async" height="627" src="/img/blog/the-3-pillars-of-a-successful-design-system.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/the-3-pillars-of-a-successful-design-system.jpg.webp 1200w, /img/blog/[email protected] 900w"> 146 </div> 147 <div class="astro-N5JXDAXG p-6"> 148 <span class="astro-N5JXDAXG my-2 opacity-75"> 149 Thu, 02 Jun 2022 150 </span> 151 <h2 class="astro-N5JXDAXG my-2 text-xl">The 3 pillars of a successful design system</h2> 152 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 153 Adopting a design system can lead to tremendous benefits. 154 </p> 155 <p class="astro-N5JXDAXG my-2 opacity-75"> 156 157 by 158 Sonia Singla 159 </p> 160 </div> 161 </a> 162 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 163 <a href="/blog/advocating-for-your-design-system" class="astro-N5JXDAXG"> 164 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 165 <img alt="Using a megaphone to advocate for design system." decoding="async" height="627" src="/img/blog/advocating-for-your-design-system.jpg.webp" width="1200" class="astro-N5JXDAXG roun
165ded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/advocating-for-your-design-system.jpg.webp 1200w, /img/blog/[email protected] 900w"> 166 </div> 167 <div class="astro-N5JXDAXG p-6"> 168 <span class="astro-N5JXDAXG my-2 opacity-75"> 169 Tue, 24 May 2022 170 </span> 171 <h2 class="astro-N5JXDAXG my-2 text-xl">Advocating for your design system</h2> 172 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 173 Advocacy is a valuable tool for team members working on a design system. 174 </p> 175 <p class="astro-N5JXDAXG my-2 opacity-75"> 176 177 by 178 Sonia Singla 179 </p> 180 </div> 181 </a> 182 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 183 <a href="/blog/5-reasons-to-use-web-components-in-your-design-system" class="astro-N5JXDAXG"> 184 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 185 <img alt="Multiples articles demonstrating that some IT powerhouses are adoping web components." decoding="async" height="627" src="/img/blog/5-reasons-to-use-web-components-in-your-design-system.jpg.webp" width="1098" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/5-reasons-to-use-web-components-in-your-design-system.jpg.webp 1098w, /img/blog/[email protected] 798w"> 186 </div> 187 <div class="astro-N5JXDAXG p-6"> 188 <span class="astro-N5JXDAXG my-2 opacity-75"> 189 Thu, 19 May 2022 190 </span> 191 <h2 class="astro-N5JXDAXG my-2 text-xl">5 Reasons to use web components in your design system</h2> 192 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 193 Why web components are so important for your design system 194 </p> 195 <p class="astro-N5JXDAXG my-2 opacity-75"> 196 197 by 198 Sonia Singla, Joren 199 </p> 200 </div> 201 </a> 202 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 203 <a href="/blog/how-to-best-document-design-system-animation" class="astro-N5JXDAXG"> 204 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 205 <img alt="Animation of a toggle button being switch on." decoding="async" height="627" src="/img/blog/how-to-best-document-design-system-animation.png.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy"> 206 </div> 207 <div class="astro-N5JXDAXG p-6"> 208 <span class="astro-N5JXDAXG my-2 opacity-75"> 209 Thu, 05 May 2022 210 </span> 211 <h2 class="astro-N5JXDAXG my-2 text-xl">How to best document Design System animation</h2> 212 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 213 Animation offers a solid experience that no other form of content can match. 214 </p> 215 <p class="astro-N5JXDAXG my-2 opacity-75"> 216 217 by 218 Sonia Singla 219 </p> 220 </div> 221 </a> 222 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 223 <a href="/blog/governance-in-design-system" class="astro-N5JXDAXG"> 224 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 225 <img alt="Title and image representing Design System governance." decoding="async" height="627" src="/img/blog/governance-in-design-system.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/governance-in-design-system.jpg.webp 1200w, /img/blog/[email protected] 900w"> 226 </div> 227 <div class="astro-N5JXDAXG p-6">
228 <span class="astro-N5JXDAXG my-2 opacity-75"> 229 Tue, 03 May 2022 230 </span> 231 <h2 class="astro-N5JXDAXG my-2 text-xl">Governance in Design System</h2> 232 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 233 How design system governance can help you overcome design system challenges. 234 </p> 235 <p class="astro-N5JXDAXG my-2 opacity-75"> 236 237 by 238 Sonia Singla 239 </p> 240 </div> 241 </a> 242 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 243 <a href="/blog/best-practices-for-integrating-content-design-in-your-design-system" class="astro-N5JXDAXG"> 244 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 245 <img alt="banner image showing best practices to integrate content design into yout design system." decoding="async" height="627" src="/img/blog/best-practices-for-integrating-content-design-in-your-design-system/CD-in-DS.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/best-practices-for-integrating-content-design-in-your-design-system/CD-in-DS.jpg.webp 1200w, /img/blog/best-practices-for-integrating-content-design-in-your-design-system/[email protected] 900w"> 246 </div> 247 <div class="astro-N5JXDAXG p-6"> 248 <span class="astro-N5JXDAXG my-2 opacity-75"> 249 Thu, 28 Apr 2022 250 </span> 251 <h2 class="astro-N5JXDAXG my-2 text-xl">Best practices for integrating content design in your design system</h2> 252 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 253 Ensuring a constistent efficiency while integrating content design in your design system. 254 </p> 255 <p class="astro-N5JXDAXG my-2 opacity-75"> 256 257 by 258 Ardena 259 </p> 260 </div> 261 </a> 262 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 263 <a href="/blog/10-must-have-components-for-your-design-system" class="astro-N5JXDAXG"> 264 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 265 <img alt="Illustration of suitcase with components inside it and title of the article" decoding="async" height="627" src="/img/blog/10-must-have-components-for-your-design-system/must-have-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/10-must-have-components-for-your-design-system/must-have-hero.jpg.webp 1200w, /img/blog/10-must-have-components-for-your-design-system/[email protected] 900w"> 266 </div> 267 <div class="astro-N5JXDAXG p-6"> 268 <span class="astro-N5JXDAXG my-2 opacity-75"> 269 Wed, 20 Apr 2022 270 </span> 271 <h2 class="astro-N5JXDAXG my-2 text-xl">10 must-have components for your design system</h2> 272 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 273 The must-have components every design system needs. 274 </p> 275 <p class="astro-N5JXDAXG my-2 opacity-75"> 276 277 by 278 ThaÃs 279 </p> 280 </div> 281 </a> 282 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 283 <a href="/blog/the-importance-of-accessibility-in-design-systems" class="astro-N5JXDAXG"> 284 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 285 <img alt="Image representing accessibility in design systems" decoding="async" height="627" src="/img/blog/the-importance-of-accessibility-in-design-systems/accessibility-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/the-importance-of-accessibility-in-design-systems/accessibility-hero.jpg.webp 1200w, /img/blog/the-importance-of-accessibility-in-design-systems/[email protected] 900w"> 286 </div> 287 <div class="astro-N5JXDAXG p-6">
288 <span class="astro-N5JXDAXG my-2 opacity-75"> 289 Mon, 11 Apr 2022 290 </span> 291 <h2 class="astro-N5JXDAXG my-2 text-xl">The importance of accessibility in design systems</h2> 292 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 293 Weaving A11y into the fabric of your design system 294 </p> 295 <p class="astro-N5JXDAXG my-2 opacity-75"> 296 297 by 298 ThaÃs 299 </p> 300 </div> 301 </a> 302 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 303 <a href="/blog/why-your-design-system-needs-content-design" class="astro-N5JXDAXG"> 304 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 305 <img alt="Banner image Why your design system need content design" decoding="async" height="627" src="/img/blog/why-your-design-system-needs-content-design/hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/why-your-design-system-needs-content-design/hero.jpg.webp 1200w, /img/blog/why-your-design-system-needs-content-design/[email protected] 900w"> 306 </div> 307 <div class="astro-N5JXDAXG p-6"> 308 <span class="astro-N5JXDAXG my-2 opacity-75"> 309 Thu, 07 Apr 2022 310 </span> 311 <h2 class="astro-N5JXDAXG my-2 text-xl">Why your design system needs content design</h2> 312 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 313 âWords are too important to be neglected.â 314 </p> 315 <p class="astro-N5JXDAXG my-2 opacity-75"> 316 317 by 318 Ardena 319 </p> 320 </div> 321 </a> 322 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 323 <a href="/blog/how-do-design-systems-improve-developer-efficiency" class="astro-N5JXDAXG"> 324 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 325 <img alt="Title and image representing developer efficiency" decoding="async" height="627" src="/img/blog/developer-efficiency/developer-efficiency-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/developer-efficiency/developer-efficiency-hero.jpg.webp 1200w, /img/blog/developer-efficiency/[email protected] 900w"> 326 </div> 327 <div class="astro-N5JXDAXG p-6"> 328 <span class="astro-N5JXDAXG my-2 opacity-75"> 329 Wed, 23 Mar 2022 330 </span> 331 <h2 class="astro-N5JXDAXG my-2 text-xl">How do design systems improve developer efficiency?</h2> 332 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 333 If an organization wants to grab the Fast Mover Advantage, its prime focus should be "How to enhance developer/designer efficiency?" With this drastic expansion comes a dire need for the organization's product to streamline design work. 334 </p> 335 <p class="astro-N5JXDAXG my-2 opacity-75"> 336 337 by 338 Sonia Singla 339 </p> 340 </div> 341 </a> 342 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 343 <a href="/blog/design-system-documentation-best-practices" class="astro-N5JXDAXG"> 344 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 345 <img alt="Illustration representing the Documentation blog post" decoding="async" height="627" src="/img/blog/documentation-best-practices/documentation-best-practices-blog-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/documentation-best-practices/documentation-best-practices-blog-hero.jpg.webp 1200w, /img/blog/documentation-best-practices/[email protected] 900w"> 346 </div> 347 <div class="astro-N5JXDAXG p-6">
348 <span class="astro-N5JXDAXG my-2 opacity-75"> 349 Tue, 01 Mar 2022 350 </span> 351 <h2 class="astro-N5JXDAXG my-2 text-xl">Design System documentation best practices</h2> 352 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 353 The key aspects of a design system documentation and some guidelines on what to cover. 354 </p> 355 <p class="astro-N5JXDAXG my-2 opacity-75"> 356 357 by 358 ThaÃs 359 </p> 360 </div> 361 </a> 362 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 363 <a href="/blog/design-tokens" class="astro-N5JXDAXG"> 364 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 365 <img alt="Title and image representing Design Tokens, Tools & Specification" decoding="async" height="627" src="/img/blog/design-tokens/hero.webp.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/design-tokens/hero.webp.webp 1200w, /img/blog/design-tokens/[email protected] 900w"> 366 </div> 367 <div class="astro-N5JXDAXG p-6"> 368 <span class="astro-N5JXDAXG my-2 opacity-75"> 369 Mon, 28 Feb 2022 370 </span> 371 <h2 class="astro-N5JXDAXG my-2 text-xl">Design Tokens and how a W3C specification will help going forward</h2> 372 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 373 What are design tokens, how do tools use them and how will the W3C spec change things? 374 </p> 375 <p class="astro-N5JXDAXG my-2 opacity-75"> 376 377 by 378 Joren, ThaÃs 379 </p> 380 </div> 381 </a> 382 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 383 <a href="/blog/at-figma-community" class="astro-N5JXDAXG"> 384 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 385 <img alt="Title and image representing Backlight at Figma Community" decoding="async" height="522" src="/img/blog/figma-community-blog-hero.jpg.webp" width="1000" class="astro-N5JXDAXG rounded-xl" loading="lazy"> 386 </div> 387 <div class="astro-N5JXDAXG p-6"> 388 <span class="astro-N5JXDAXG my-2 opacity-75"> 389 Thu, 10 Feb 2022 390 </span> 391 <h2 class="astro-N5JXDAXG my-2 text-xl">Backlight is now also @ Figma Community</h2> 392 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 393 Backlight has its own community page in Figma to share the libraries that match the coded starter-kits. 394 </p> 395 <p class="astro-N5JXDAXG my-2 opacity-75"> 396 397 by 398 ThaÃs 399 </p> 400 </div> 401 </a> 402 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 403 <a href="/blog/best-practices-w-eslint-part-3" class="astro-N5JXDAXG"> 404 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 405 <img alt="ESLint logo next to Backlight screenshot" decoding="async" height="627" src="/img/blog/best-practices-w-eslint/hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/best-practices-w-eslint/hero.jpg.webp 1200w, /img/blog/best-practices-w-eslint/[email protected] 900w"> 406 </div> 407 <div class="astro-N5JXDAXG p-6"> 408 <span class="astro-N5JXDAXG my-2 opacity-75"> 409 Fri, 04 Feb 2022 410 </span> 411 <h2 class="astro-N5JXDAXG my-2 text-xl">Encouraging design system best practices with ESLint rules</h2> 412 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 413 Ensuring a consistent experience when developing a common library or Design System as a team could quickly become a high-challenge. Here are our advices on how to use Esl
413int to enforce this experience's consistency. 414 </p> 415 <p class="astro-N5JXDAXG my-2 opacity-75"> 416 <span class="astro-N5JXDAXG block"> 417 A <em class="astro-N5JXDAXG">Design System Best Practices with ESLint</em> series episode 418 </span> 419 by 420 Andrico Karoulla 421 </p> 422 </div> 423 </a> 424 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 425 <a href="/blog/why-should-developers-build-with-design-systems" class="astro-N5JXDAXG"> 426 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 427 <img alt="Banner image Why should developers build with Design Systems" decoding="async" height="627" src="/img/blog/why-should-developers-build-with-design-systems/why-should-developers-build-with-design-systems.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/why-should-developers-build-with-design-systems/why-should-developers-build-with-design-systems.jpg.webp 1200w, /img/blog/why-should-developers-build-with-design-systems/[email protected] 900w"> 428 </div> 429 <div class="astro-N5JXDAXG p-6"> 430 <span class="astro-N5JXDAXG my-2 opacity-75"> 431 Wed, 26 Jan 2022 432 </span> 433 <h2 class="astro-N5JXDAXG my-2 text-xl">Why should developers build with Design Systems?</h2> 434 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 435 Discover benefits of building with a Design System on the developer side. Speed-up development, improve collaboration, increase quality and consistency of code. 436 </p> 437 <p class="astro-N5JXDAXG my-2 opacity-75"> 438 439 by 440 Remi 441 </p> 442 </div> 443 </a> 444 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 445 <a href="/blog/best-practices-w-eslint-part-2" class="astro-N5JXDAXG"> 446 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 447 <img alt="ESLint logo next to Backlight screenshot" decoding="async" height="627" src="/img/blog/best-practices-w-eslint/hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/best-practices-w-eslint/hero.jpg.webp 1200w, /img/blog/best-practices-w-eslint/[email protected] 900w"> 448 </div> 449 <div class="astro-N5JXDAXG p-6"> 450 <span class="astro-N5JXDAXG my-2 opacity-75"> 451 Fri, 14 Jan 2022 452 </span> 453 <h2 class="astro-N5JXDAXG my-2 text-xl">Translating Your Design System Best Practices to ESLint</h2> 454 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 455 Ensuring a consistent experience when developing a common library or Design System as a team could quickly become a high-challenge. Here are our advices on how to use Eslint to enforce this experience's consistency. 456 </p> 457 <p class="astro-N5JXDAXG my-2 opacity-75"> 458 <span class="astro-N5JXDAXG block"> 459 A <em class="astro-N5JXDAXG">Design System Best Practices with ESLint</em> series episode 460 </span> 461 by 462 Andrico Karoulla 463 </p> 464 </div> 465 </a> 466 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 467 <a href="/blog/introducing-bricks-a-mui-design-system" class="astro-N5JXDAXG"> 468 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 469 <img alt="BRICKS card marked "Powered by" MUI, React" decoding="async" height="627" src="/img/blog/bricks-hero.jpg.webp" width="1200" class="astro-N5JXDAXG roun
469ded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/bricks-hero.jpg.webp 1200w, /img/blog/[email protected] 900w"> 470 </div> 471 <div class="astro-N5JXDAXG p-6"> 472 <span class="astro-N5JXDAXG my-2 opacity-75"> 473 Fri, 10 Dec 2021 474 </span> 475 <h2 class="astro-N5JXDAXG my-2 text-xl">Introducing BRICKS - a Design System based on MUI</h2> 476 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 477 BRICKS is a React Design System starter-kit for Backlight, based on MUI. 478 </p> 479 <p class="astro-N5JXDAXG my-2 opacity-75"> 480 481 by 482 Pierrick, Mihai 483 </p> 484 </div> 485 </a> 486 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 487 <a href="/blog/interactive-stories-with-play-and-user-events" class="astro-N5JXDAXG"> 488 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 489 <img alt="Screenshot of radio buttons stories in Backlight" decoding="async" height="675" src="/img/blog/user-events.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/user-events.jpg.webp 1200w, /img/blog/[email protected] 900w"> 490 </div> 491 <div class="astro-N5JXDAXG p-6"> 492 <span class="astro-N5JXDAXG my-2 opacity-75"> 493 Fri, 03 Dec 2021 494 </span> 495 <h2 class="astro-N5JXDAXG my-2 text-xl">Interactive Stories with CSF Play and User-Events</h2> 496 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 497 Component Story Format is here, and it brings an awesome new feature! Let's play with it and the user event testing library to create gorgeous demos! When a picture is worth a thousand words, show to your teammates how your components are supposed to be used, right in the documentation. 498 </p> 499 <p class="astro-N5JXDAXG my-2 opacity-75"> 500 501 by 502 m4dz 503 </p> 504 </div> 505 </a> 506 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 507 <a href="/blog/introducing-yogi-a-chakra-ui-design-system" class="astro-N5JXDAXG"> 508 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 509 <img alt="Yogi card marked "Powered by" Chakra UI, React, emotion, and System-UI" decoding="async" height="627" src="/img/blog/yogi-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/yogi-hero.jpg.webp 1200w, /img/blog/[email protected] 900w"> 510 </div> 511 <div class="astro-N5JXDAXG p-6"> 512 <span class="astro-N5JXDAXG my-2 opacity-75"> 513 Wed, 17 Nov 2021 514 </span> 515 <h2 class="astro-N5JXDAXG my-2 text-xl">Introducing Yogi - a Chakra UI Design System</h2> 516 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 517 YOGI is a React Design System starter-kit for Backlight, based on Chakra UI. 518 </p> 519 <p class="astro-N5JXDAXG my-2 opacity-75"> 520 521 by 522 Pierrick, Georges, Mihai 523 </p> 524 </div> 525 </a> 526 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 527 <a href="/blog/best-practices-w-eslint-part-1" class="astro-N5JXDAXG"> 528 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 529 <img alt="ESLint logo next to Backlight screenshot" decoding="async" height="627" src="/img/blog/best-practices-w-eslint/hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/best-practices-w-eslint/hero.jpg.webp 1200w, /img/blog/best-practices-w-eslint/[email protected] 900w"> 530 </div> 531 <div class="astro-N5JXDAXG p-6">
532 <span class="astro-N5JXDAXG my-2 opacity-75"> 533 Tue, 16 Nov 2021 534 </span> 535 <h2 class="astro-N5JXDAXG my-2 text-xl">How Eslint Can Enforce Your Design System Best Practices</h2> 536 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 537 Ensuring a consistent experience when developing a common library or Design System as a team could quickly become a high-challenge. Here are our advices on how to use Eslint to enforce this experience's consistency. 538 </p> 539 <p class="astro-N5JXDAXG my-2 opacity-75"> 540 <span class="astro-N5JXDAXG block"> 541 A <em class="astro-N5JXDAXG">Design System Best Practices with ESLint</em> series episode 542 </span> 543 by 544 Andrico Karoulla 545 </p> 546 </div> 547 </a> 548 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 549 <a href="/blog/browserify-to-rollup" class="astro-N5JXDAXG"> 550 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 551 <img alt="Browserify to Rollup hero image" decoding="async" height="627" src="/img/blog/browserify-to-rollup/rollup-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/browserify-to-rollup/rollup-hero.jpg.webp 1200w, /img/blog/browserify-to-rollup/[email protected] 900w"> 552 </div> 553 <div class="astro-N5JXDAXG p-6"> 554 <span class="astro-N5JXDAXG my-2 opacity-75"> 555 Thu, 04 Nov 2021 556 </span> 557 <h2 class="astro-N5JXDAXG my-2 text-xl">Browserify to Rollup - Unifying our playground in a single bundle</h2> 558 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 559 After creating a playground for style-dictionary by making use of Browserify, we will now show how we migrated to Rollup to unify our playground in a single bundle. 560 </p> 561 <p class="astro-N5JXDAXG my-2 opacity-75"> 562 563 by 564 Joren 565 </p> 566 </div> 567 </a> 568 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 569 <a href="/blog/nodejs-in-browser" class="astro-N5JXDAXG"> 570 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 571 <img alt="Style-dictionary-play screenshot" decoding="async" height="627" src="/img/blog/nodejs-in-browser/sd-play-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/nodejs-in-browser/sd-play-hero.jpg.webp 1200w, /img/blog/nodejs-in-browser/[email protected] 900w"> 572 </div> 573 <div class="astro-N5JXDAXG p-6"> 574 <span class="astro-N5JXDAXG my-2 opacity-75"> 575 Tue, 02 Nov 2021 576 </span> 577 <h2 class="astro-N5JXDAXG my-2 text-xl">NodeJS in the Browser - Creating a playground for style-dictionary</h2> 578 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 579 Creating a playground for style-dictionary, by making the library work in the browser and using VSCode's monaco editor. 580 </p> 581 <p class="astro-N5JXDAXG my-2 opacity-75"> 582 583 by 584 Joren 585 </p> 586 </div> 587 </a> 588 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 589 <a href="/blog/creating-a-design-system-from-scratch-for-halloween" class="astro-N5JXDAXG"> 590 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 591 <img alt="Blog title in gradient background with 2 pumpkins." decoding="async" height="627" src="/img/blog/spooky/spooky-blog-hero-img.jpg.webp" width="1120" class="astro-N5JXDAXG roun
591ded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/spooky/spooky-blog-hero-img.jpg.webp 1120w, /img/blog/spooky/[email protected] 820w"> 592 </div> 593 <div class="astro-N5JXDAXG p-6"> 594 <span class="astro-N5JXDAXG my-2 opacity-75"> 595 Fri, 29 Oct 2021 596 </span> 597 <h2 class="astro-N5JXDAXG my-2 text-xl">Creating a Design System from scratch for Halloween</h2> 598 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 599 Our team got inspired by halloween and thought `what if we could dress our components up for the occasion as well?!` 600 </p> 601 <p class="astro-N5JXDAXG my-2 opacity-75"> 602 603 by 604 ThaÃs, Charlène, Joren 605 </p> 606 </div> 607 </a> 608 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 609 <a href="/blog/introducing-furious-a-fast-design-system" class="astro-N5JXDAXG"> 610 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 611 <img alt="Furious card marked "Powered by" FAST and Web Components" decoding="async" height="627" src="/img/blog/furious/OG_Meta_-_Furious-min.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/furious/OG_Meta_-_Furious-min.jpg.webp 1200w, /img/blog/furious/[email protected] 900w"> 612 </div> 613 <div class="astro-N5JXDAXG p-6"> 614 <span class="astro-N5JXDAXG my-2 opacity-75"> 615 Wed, 27 Oct 2021 616 </span> 617 <h2 class="astro-N5JXDAXG my-2 text-xl">Introducing Furious, the FAST Design System</h2> 618 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 619 Furious is a Design System Starter Kit for Backlight, based on FAST Frame by Microsoft. 620 </p> 621 <p class="astro-N5JXDAXG my-2 opacity-75"> 622 623 by 624 Pierrick, Mikhail, Thomas, m4dz 625 </p> 626 </div> 627 </a> 628 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 629 <a href="/blog/introducing-origami-a-react-native-design-system" class="astro-N5JXDAXG"> 630 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 631 <img alt="Origami card marked "Powered by" React Native Paper and React Native" decoding="async" height="627" src="/img/blog/origami-hero.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/origami-hero.jpg.webp 1200w, /img/blog/[email protected] 900w"> 632 </div> 633 <div class="astro-N5JXDAXG p-6"> 634 <span class="astro-N5JXDAXG my-2 opacity-75"> 635 Wed, 13 Oct 2021 636 </span> 637 <h2 class="astro-N5JXDAXG my-2 text-xl">Introducing Origami - a React Native design system</h2> 638 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 639 Origami is a React Native design system starter kit, using the React Native Paper component library. 640 </p> 641 <p class="astro-N5JXDAXG my-2 opacity-75"> 642 643 by 644 Pierrick, Georges, Mihai 645 </p> 646 </div> 647 </a> 648 </li><li class="astro-N5JXDAXG bg-gray-dark max-w-full rounded-lg"> 649 <a href="/blog/why-backlight" class="astro-N5JXDAXG"> 650 <div class="astro-N5JXDAXG block banner-image max-h-96 overflow-hidden rounded-t-lg"> 651 <img alt="Backlight logo on dark gradient." decoding="async" height="627" src="/img/blog/why-backlight.jpg.webp" width="1200" class="astro-N5JXDAXG rounded-xl" loading="lazy" sizes="100vw" srcset="/img/blog/why-backlight.jpg.webp 1200w, /img/blog/[email protected] 900w"> 652 </div> 653 <div class="astro-N5JXDAXG p-6">
654 <span class="astro-N5JXDAXG my-2 opacity-75"> 655 Thu, 30 Sep 2021 656 </span> 657 <h2 class="astro-N5JXDAXG my-2 text-xl">Why Backlight?</h2> 658 <p class="astro-N5JXDAXG my-2 post-description text-sm"> 659 We have been working on Backlight within closed doors with early access customers for more than 2 years now. This month, we launched publicly and everybody can experience Backlight by themselves. 660 </p> 661 <p class="astro-N5JXDAXG my-2 opacity-75"> 662 663 by 664 Georges 665 </p> 666 </div> 667 </a> 668 </li> 669 </ul> 670 </main> 671 </main> 672 <footer class="astro-MK7FUWXW text-white overflow-hidden relative" data-v-000ac43e="" id="footer"><div class="relative flex-col get-started" data-v-000ac43e=""><div class="shadow" data-v-000ac43e=""></div><div class="mx-auto max-w-7xl" data-v-000ac43e=""><h2 class="mb-8 lg:w-1/2 sub-title" data-v-000ac43e=""> Create your design system with Backlight today </h2><a href="https://backlight.dev/studio" class="text-primary link text-base" data-v-000ac43e=""> Sign up > </a><!----><img alt="Backlight interface image" decoding="async" height="1774" src="/img/landing/main-screenshot.png.webp" width="2784" class="get-started-img w-full" loading="lazy" sizes="100vw" srcset="/img/landing/main-screenshot.png.webp 2784w, /img/landing/[email protected] 1584w, /img/landing/[email protected] 1284w, /img/landing/[email protected] 984w" data-v-000ac43e=""></div></div><div class="relative w-full" data-v-000ac43e=""><div class="flex flex-col links max-w-7xl md:px-8 mx-auto px-4 py-12 sm:flex-row sm:py-20 text-white" data-v-000ac43e=""><div class="flex flex-col gradient lg:m-0 m-4 mb-8 sm:mb-4" data-v-000ac43e=""><img alt="Backlight logo" decoding="async" height="88" src="/assets/logo/bkl.svg.svg" width="96" class="w-24" loading="lazy" data-v-000ac43e=""><a href="https://divRIOTS.com" class="mt-2" data-v-000ac43e=""> by <img alt="â¹divâºRIOTS logo" decoding="async" height="16" src="/img/divriots.svg.svg" width="93" class="inline h-4" loading="lazy" data-v-000ac43e=""></a><div class="copyright my-8" data-v-000ac43e=""> Copyright © 2025 Backlight.dev </div><div class="flex" data-v-000ac43e=""><a href="https://backlight.dev/chat" class="flex flex items-center items-center action px-2 py-1" target="_discord" data-v-000ac43e="" aria-label="discord"><!----><svg class="w-auto h-5" viewBox="0 0 71 55" height="55" width="71" fill="none"><g clip-path="url(#discord-icon)"><path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C1
6727.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="currentColor"></path></g><defs><clipPath id="discord-icon"><rect fill="white" height="55" width="71"></rect></clipPath></defs></svg></a><a href="https://twitter.com/backlight_dev" class="flex items-center action px-2 py-1" target="_blank" data-v-000ac43e="" aria-label="twitter"><!----><svg class="w-auto h-6" viewBox="-44.7006 -60.54775 387.4052 363.2865" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M93.719 242.19c112.46 0 173.96-93.168 173.96-173.96 0-2.646-.054-5.28-.173-7.903a124.338 124.338 0 0030.498-31.66c-10.955 4.87-22.744 8.148-35.11 9.626 12.622-7.57 22.313-19.543 26.885-33.817a122.62 122.62 0 01-38.824 14.841C239.798 7.433 223.915 0 206.326 0c-33.764 0-61.144 27.381-61.144 61.132 0 4.798.537 9.465 1.586 13.941-50.815-2.557-95.874-26.886-126.03-63.88a60.977 60.977 0 00-8.279 30.73c0 21.212 10.794 39.938 27.208 50.893a60.685 60.685 0 01-27.69-7.647c-.009.257-.009.507-.009.781 0 29.61 21.075 54.332 49.051 59.934a61.218 61.218 0 01-16.122 2.152 60.84 60.84 0 01-11.491-1.103c7.784 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.798-.28-14.584-.846 27.059 17.344 59.189 27.464 93.722 27.464"></path></svg></a><a href="https://www.youtube.com/channel/UCeBNmb3t0KEQpOYKy_TVAjA" class="flex flex items-center items-center action px-2 py-1" target="_blank" data-v-000ac43e="" aria-label="youtube"><!----><svg class="w-auto h-5" viewBox="0 4 30 15" height="55" width="71" fill="none"><defs><mask id="play-icon"><rect fill="white" height="100" width="100" x="0" y="0"></rect><path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" fill="black"></path></mask></defs><path d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042
6720 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z" fill="currentColor" mask="url(#play-icon)"></path></svg></a><a href="https://backlight.dev/rss.xml" class="flex flex items-center items-center action px-2 py-1" target="_" data-v-000ac43e="" aria-label="Subscribe to our rss feed"><!----><svg class="w-auto h-5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="currentColor"><path d="M5 13H3v-2c1.11 0 2 .89 2 2zM3 3v1a9 9 0 0 1 9 9h1C13 7.48 8.52 3 3 3zm0 4v1c2.75 0 5 2.25 5 5h1c0-3.31-2.69-6-6-6z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></a></div></div><div class="cols" data-v-000ac43e=""><div class="col lg:pl-20" data-v-000ac43e=""><p data-v-000ac43e="">Links</p><!--[--><ul data-v-000ac43e=""><!--[--><li data-v-000ac43e=""><a href="/features" data-v-000ac43e="">Features</a></li><!--]--></ul><ul data-v-000ac43e=""><!--[--><li data-v-000ac43e=""><a href="/docs" data-v-000ac43e="">Docs</a></li><!--]--></ul><ul data-v-000ac43e=""><!--[--><li data-v-000ac43e=""><a href="/pricing" data-v-000ac43e="">Pricing</a></li><!--]--></ul><ul data-v-000ac43e=""><!--[--><li data-v-000ac43e=""><a href="/mastery" data-v-000ac43e="">Mastery</a></li><li data-v-000ac43e=""><a href="/sessions" data-v-000ac43e="">Sessions</a></li><li data-v-000ac43e=""><a href="/blog" data-v-000ac43e="">Blog</a></li><!--]--></ul><!--]--></div><div class="col" data-v-000ac43e=""><p data-v-000ac43e="">Support</p><ul data-v-000ac43e=""><!--[--><li data-v-000ac43e=""><a href="https://discord.com/invite/XkQxSU9" data-v-000ac43e="">Community</a></li><li data-v-000ac43e=""><a href="mailto:[email protected]" data-v-000ac43e="">Send us an email</a></li><li data-v-000ac43e=""><a href="/legal/terms-of-service" data-v-000ac43e="">Terms of Service</a></li><li data-v-000ac43e=""><a href="/legal/privacy-policy" data-v-000ac43e="">Privacy Policy</a></li><!--]--></ul></div><div class="col" data-v-000ac43e=""><p data-v-000ac43e="">Get in touch</p><a href="https://backlight.dev/chat" class="btn-outline demo" target="_blank" data-v-000ac43e="" rel="noopener noreferrer nofollow"> Chat with us </a><a href="https://www.producthunt.com/posts/backlight?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-backlight" class="mt-4" target="_blank" data-v-000ac43e=""><img alt="Backlight - Make design systems that front-end teams want to use | Product Hunt" decoding="async" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=312123&theme=light" width="250" loading="lazy" data-v-000ac43e=""></a></div></div></div></div></footer> 673 </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.