PageSourceSearch

https://backlight.dev/blog

html backlight.dev collected 2026-09-25 20:16:33 UTC 67,713 bytes, 673 lines download raw bytes

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="{&quot;name&quot;:&quot;Nav&quot;,&quot;value&quot;:true}" props="{&quot;routes&quot;:[1,&quot;[[0,{\&quot;title\&quot;:[0,\&quot;Features\&quot;],\&quot;routes\&quot;:[1,\&quot;[[0,{\\\&quot;pathname\\\&quot;:[0,\\\&quot;/features\\\&quot;],\\\&quot;label\\\&quot;:[0,\\\&quot;Features\\\&quot;]}]]\&quot;]}],[0,{\&quot;title\&quot;:[0,\&quot;Docs\&quot;],\&quot;routes\&quot;:[1,\&quot;[[0,{\\\&quot;pathname\\\&quot;:[0,\\\&quot;/docs\\\&quot;],\\\&quot;label\\\&quot;:[0,\\\&quot;Docs\\\&quot;]}]]\&quot;]}],[0,{\&quot;title\&quot;:[0,\&quot;Pricing\&quot;],\&quot;routes\&quot;:[1,\&quot;[[0,{\\\&quot;pathname\\\&quot;:[0,\\\&quot;/pricing\\\&quot;],\\\&quot;label\\\&quot;:[0,\\\&quot;Pricing\\\&quot;]}]]\&quot;]}],[0,{\&quot;title\&quot;:[0,\&quot;Resources\&quot;],\&quot;routes\&quot;:[1,\&quot;[[0,{\\\&quot;pathname\\\&quot;:[0,\\\&quot;/mastery\\\&quot;],\\\&quot;label\\\&quot;:[0,\\\&quot;Mastery\\\&quot;],\\\&quot;text\\\&quot;:[0,\\\&quot;Articles to learn all about design systems.\\\&quot;]}],[0,{\\\&quot;pathname\\\&quot;:[0,\\\&quot;/sessions\\\&quot;],\\\&quot;label\\\&quot;:[0,\\\&quot;Sessions\\\&quot;],\\\&quot;text\\\&quot;:[0,\\\&quot;Videos and tutorial series with design system experts.\\\&quot;]}],[0,{\\\&quot;pathname\\\&quot;:[0,\\\&quot;/blog\\\&quot;],\\\&quot;label\\\&quot;:[0,\\\&quot;Blog\\\&quot;],\\\&quot;text\\\&quot;:[0,\\\&quot;Latest posts and updates from our team.\\\&quot;]}]]\&quot;]}]]&quot;],&quot;pathname&quot;:[0,&quot;/blog/&quot;],&quot;studioRoute&quot;:[0,&quot;https://studio.backlight.dev&quot;],&quot;class&quot;:[0,&quot;astro-MK7FUWXW&quot;]}" 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 &amp; 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 &quot;Powered by&quot; 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 &quot;Powered by&quot; 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 &quot;Powered by&quot; 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 &quot;Powered by&quot; 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 &gt; </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&amp;utm_medium=badge&amp;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&amp;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.