1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><link rel="preload" href="/_next/static/media/light-s.p.0.l_ki6v4zk.z.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/medium-s.p.09lwn-2inrh~p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/regular-s.p.0k4lvmtqazd_s.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/regular-s.p.0xpj2n4y2rqe4.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/thin-s.p.0ql6e4vn78d-1.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/chunks/0zomgh5wfqe8~.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/0t2lvx-itnkqz.js"/>
1<script src="/_next/static/chunks/0-w966uza5eby.js" async=""></script>
1<script src="/_next/static/chunks/0wcttnlv848hr.js" async=""></script>
1<script src="/_next/static/chunks/0rwwge57xnfls.js" async=""></script>
1<script src="/_next/static/chunks/128aahewwf1we.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-0y53uqj30unk_.js" async=""></script>
1<script src="/_next/static/chunks/0x.73w57rn4ou.js" async=""></script>
1<script src="/_next/static/chunks/0i.l9589uvx0j.js" async=""></script>
1<script src="/_next/static/chunks/0gu_hr344wsz..js" async=""></script>
1<script src="/_next/static/chunks/0hyze3fij9yu1.js" async=""></script>
1<script src="/_next/static/chunks/0aq90zks05qct.js" async=""></script>
1<script src="/_next/static/chunks/10hrqvw5jx5rj.js" async=""></script>
1<script src="/_next/static/chunks/05~vn1sqe6mgo.js" async=""></script>
1<script src="/_next/static/chunks/0in1mp3n.2ytm.js" async=""></script>
1<script src="/_next/static/chunks/052dnpysv.-7b.js" async=""></script>
1<script src="/_next/static/chunks/167tw3-g3z24x.js" async=""></script>
1<script src="/_next/static/chunks/0an_vsw04uvaf.js" async=""></script>
1<script src="/_next/static/chunks/0piuzxr.1h~hf.js" async=""></script>
1<script src="/_next/static/chunks/0am8brcdari6m.js" async=""></script>
1<script src="/_next/static/chunks/0g0o2.exjqggz.js" async=""></script>
1<script src="/_next/static/chunks/0dkqyr6nk4gb2.js" async=""></script>
1<script src="/_next/static/chunks/0hcdq9gd6snim.js" async=""></script>
1<script src="/_next/static/chunks/0j7z0ev.zs50x.js" async=""></script>
1<script src="/_next/static/chunks/0yn8iui730-ql.js" async=""></script>
1<script src="/_next/static/chunks/04wh9pcmzngmu.js" async=""></script>
1<script src="/_next/static/chunks/0uc7.7wd_h9a9.js" async=""></script>
1<script src="/_next/static/chunks/0208cqocz2sle.js" async=""></script>
1<meta name="next-size-adjust" content=""/><meta name="theme-color" content="#000000"/><meta name="color-scheme" content="light"/><title>Equal IQ â Design System â Tobi</title><meta name="description" content="A cohesive design system built to scale the Equal IQ platform with consistent patterns, tokens, and reusable components."/><link rel="author" href="https://tobi.computer"/><meta name="author" content="Tobi"/><meta name="keywords" content="Tobi,design engineer,frontend engineer,web developer,product design,UI engineering,portfolio"/><meta name="creator" content="Tobi"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://tobi.computer/equal-iq-design-system"/><meta property="og:title" content="Equal IQ â Design System"/><meta property="og:description" content="A cohesive design system built to scale the Equal IQ platform with consistent patterns, tokens, and reusable components."/><meta property="og:url" content="https://tobi.computer/equal-iq-design-system"/><meta property="og:type" content="article"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Equal IQ â Design System"/><meta name="twitter:description" content="A cohesive design system built to scale the Equal IQ platform with consistent patterns, tokens, and reusable components."/><link rel="icon" href="/favicon.ico?favicon.17o1izqkiv4h0.ico" sizes="48x48" type="image/x-icon"/>
1<script src="/_next/static/chunks/03~yq9q893hmn.js" noModule=""></script>
1</head><body class="isolate sansfont_66677788-module__1FKZVW__variable seriffont_8137418-module__U3m-2G__variable font-sans antialiased"><div hidden=""><!--$--><!--/$--></div>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Person","@id":"https://tobi.computer/#person","name":"Tobi","url":"https://tobi.computer","jobTitle":"Design Engineer","description":"Tobi is a design engineer building thoughtful, polished web experiences.","image":"https://tobi.computer/images/me.png"},{"@type":"WebSite","@id":"https://tobi.computer/#website","url":"https://tobi.computer","name":"Tobi","description":"Tobi is a design engineer building thoughtful, polished web experiences.","publisher":{"@id":"https://tobi.computer/#person"},"inLanguage":"en-US"}]}</script>
1<div class="w-full relative h-dvh">
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","light",null,["light","dark","paper"],null,true,true)</script>
1<div class="h-dvh w-full overflow-y-auto"><div><div style="opacity:0"><main style="--archive-drawer-width:65vw" data-popup-open="false" data-archive-open="false" class="root w-full min-w-0 isolate relative duration-750 ease-out-expo transition-transform motion-reduce:transition-none motion-reduce:duration-0 data-[popup-open='true']:translate-y-[calc(10dvh)] motion-reduce:data-[popup-open='true']:translate-y-0 md:data-[archive-open='true']:-translate-x-[20%] motion-reduce:md:data-[archive-open='true']:translate-x-0"><button type="button" tabindex="0" data-slot="button" aria-label="Back to index" class="h-8 px-2 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center bg-secondary text-secondary-foreground not-disabled:hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground rounded-full text-sm backdrop-blur-sm focus:outline-none active:scale-95 transition-all duration-200 cursor-pointer font-normal fixed top-3 left-3 z-100 pr-3.5"><span class="flex gap-1 items-center"><svg class="size-3.5 group-hover:-translate-x-0.5 transition-transform duration-500 ease-out-expo" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.0002 20L8.4144 13.4142C7.63335 12.6332 7.63335 11.3669 8.4144 10.5858L15.0002 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>Back</span></button><article class="gap-4 px-4 pt-10 md:pt-0"><header class="relative max-w-2xl mx-auto overflow-hidden pb-4 bg-muted/50 rounded-4xl px-0.5 mt-3"><div class="relative min-h-[200px] w-full mb-6"><div class="pointer-events-none absolute bottom-0 left-0 w-full overflow-hidden "><div class="pt-[100%]"></div><div class=" pointer-events-auto absolute left-0 top-0 h-full w-full overflow-hidden [&_canvas]:relative [&_canvas]:-left-px [&_canvas]:-top-px [&_canvas]:!max-w-none [&_canvas]:min-h-[calc(100%+2px)] [&_canvas]:min-w-[calc(100%+2px)] [&_canvas]:max-h-[calc(100%+2px)] [&_canvas]:max-w-[calc(100%+2px)] "></div></div></div><div class="relative z-10 max-w-3xl flex flex-col px-4"><div class="flex items-end justify-between gap-3"><div class="min-w-0 flex-1"><h1 class="text-xl font-serif">Equal IQ â Design System</h1><p class="mt-1 text-muted-foreground leading-relaxed">Turn every deal into revenue, all in one system</p><div class="mt-4 flex items-center gap-3 text-muted-foreground"><time class="text-sm border border-border rounded-full px-3 py-1" dateTime="2026-06">2026</time></div></div><div class="shrink-0 self-end"><a target="_blank" rel="noopener noreferrer" href="https://equal-iq.com"><button type="button" tabindex="0" data-slot="button" class="text-sm h-8 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center cursor-pointer text-foreground underline-offset-4 not-disabled:hover:underline rounded-full font-normal gap-1 px-3"><div class="relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent [background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] ] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] text-sm whitespace-nowrap [--base-color:var(--color-foreground)] [--base-gradient-color:#fff]" style="--spread:28px;background-image:var(--bg), linear-gradient(var(--base-color), var(--base-color));background-position:100% center">Visit Equal IQ</div><svg class="size-3 shrink-0 -rotate-45" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 5.75L20.25 12L14 18.25M19.5 12H3.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></a></div></div></div></header><div data-slot="divider" aria-hidden="true" class="my-4"></div><div data-article-content="true" class="col-span-8 max-w-2xl mx-auto md:pt-3 pb-[calc(50svh-2rem)]"><div><h2 id="overview" class="mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight">Overview</h2> 2<figure class="mt-4 not-first:mb-8 first:my-4"><button type="button" aria-label="Play video" style="--aspect-ratio:1.5491679273827534" class="group relative grid w-full aspect-(--aspect-ratio) cursor-pointer overflow-hidden rounded-lg border border-border/50 [&>*]:[grid-area:1/1]"><img draggable="false" alt="" aria-hidden="true" loading="lazy" decoding="async" data-nimg="fill" class="size-full scale-110 object-cover blur-xl transition-opacity duration-700 ease-out opacity-100" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 768px" srcSet="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FP02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75"/><span class="pointer-events-none z-10 grid size-14 place-self-ce
2nter place-items-center rounded-full bg-black/25 text-white backdrop-blur-md transition-opacity duration-300 [&>*]:[grid-area:1/1] opacity-100"><span class="flex" style="opacity:1;filter:blur(0px);transform:none"><svg class="size-6 translate-x-px" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z" fill="currentColor"></path></svg></span></span></button></figure> 3<p class="first:mt-0 mb-6 leading-normal text-foreground/85">Equal IQ is a deal and contract management platform for the music industry. 4It helps artists, labels, and producers understand complex agreements, track deals through their lifecycle, and manage obligations without needing a legal background.</p> 5<p class="first:mt-0 mb-6 leading-normal text-foreground/85">I joined as the lead front-end design engineer, responsible for the design system, component architecture, and building out the core product interfaces.</p> 6<h2 id="the-problem" class="mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight">The Problem</h2> 7<figure class="mt-4 not-first:mb-8 first:my-4"><button type="button" aria-label="Play video" style="--aspect-ratio:1.3726541554959786" class="group relative grid w-full aspect-(--aspect-ratio) cursor-pointer overflow-hidden rounded-lg border border-border/50 [&>*]:[grid-area:1/1]"><img draggable="false" alt="" aria-hidden="true" loading="lazy" decoding="async" data-nimg="fill" class="size-full scale-110 object-cover blur-xl transition-opacity duration-700 ease-out opacity-100" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 768px" srcSet="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FBgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75"/><span class="pointer-events-none z-10 grid size-14 place-self-center place-items-center rounded-full bg-black/25 text-white backdrop-blur-md transition-opacity duration-300 [&>*]:[grid-area:1/1] opacity-100"><span class="flex" style="opacity:1;filter:blur(0px);transform:none"><svg class="size-6 translate-x-px" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z" fill="currentColor"></path></svg></span></span></button></figure>
8<p class="first:mt-0 mb-6 leading-normal text-foreground/85">Contracts in the music industry are dense and full of jargon. Most artists sign deals without fully understanding what they're agreeing to. Existing tools are either too legal-focused or too generic. There was nothing purpose-built that could break down a contract into plain language, track what you owe and what you're owed, and keep everything organized in one place.</p> 9<h2 id="what-i-built" class="mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight">What I Built</h2> 10<figure class="mt-4 not-first:mb-8 first:my-4"><button type="button" aria-label="Play video" style="--aspect-ratio:1.517037037037037" class="group relative grid w-full aspect-(--aspect-ratio) cursor-pointer overflow-hidden rounded-lg border border-border/50 [&>*]:[grid-area:1/1]"><img draggable="false" alt="" aria-hidden="true" loading="lazy" decoding="async" data-nimg="fill" class="size-full scale-110 object-cover blur-xl transition-opacity duration-700 ease-out opacity-100" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 768px" srcSet="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FUDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75"/><span class="pointer-events-none z-10 grid size-14 place-self-center place-items-center rounded-full bg-black/25 text-white backdrop-blur-md transition-opacity duration-300 [&>*]:[grid-area:1/1] opacity-100"><span class="flex" style="opacity:1;filter:blur(0px);transform:none"><svg class="size-6 translate-x-px" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z" fill="currentColor"></path></svg></span></span></button></figure> 11<h3 id="design-system-and-components" class="mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight">Design System and Components</h3> 12<p class="first:mt-0 mb-6 leading-normal text-foreground/85">I designed and implemented a modular component system using Base UI and Tailwind CSS. This included theming (light and dark mode), a custom sidebar navigation, resizable panels, drag-and-drop interfaces, and reusable layout primitives that scaled across every view in the app.</p> 13<figure class="mt-4 not-first:mb-8 first:my-4"><button type="button" aria-label="Play video" style="--aspect-ratio:1.3333333333333333" class="group relative grid w-full aspect-(--aspect-ratio) cursor-pointer overflow-hidden rounded-lg border border-border/50 [&>*]:[grid-area:1/1]"><img draggable="false" alt="" aria-hidden="true" loading="lazy" decoding="async" data-nimg="fill" class="size-full scale-110 object-cover blur-xl transition-opacity duration-700 ease-out opacity-100" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 768px" srcSet="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimage.mux.com%2FDxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75"/><span class="pointer-events-none z-10 grid size-14 place-self-ce
13nter place-items-center rounded-full bg-black/25 text-white backdrop-blur-md transition-opacity duration-300 [&>*]:[grid-area:1/1] opacity-100"><span class="flex" style="opacity:1;filter:blur(0px);transform:none"><svg class="size-6 translate-x-px" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z" fill="currentColor"></path></svg></span></span></button></figure> 14<h3 id="dashboard" class="mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight">Dashboard</h3> 15<p class="first:mt-0 mb-6 leading-normal text-foreground/85">A customizable widget grid where users configure their home screen â portfolio snapshots, calendar events, inbox previews, delivery trackers, and task lists. Users can drag, resize, toggle, and reset their layout. I built the widget system, drag-and-drop grid, and customization controls.</p> 16<h3 id="deal-pipeline-and-vault" class="mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight">Deal Pipeline and Vault</h3> 17<p class="first:mt-0 mb-6 leading-normal text-foreground/85">A Kanban-style board where users move deals through stages: Lead, In Progress, Signing, Delivery, and Complete. 18Each card shows deal value, progress, document count, and collaborators. I built both the board and table views with drag-and-drop transitions and filtering by deal type.</p> 19<p class="first:mt-0 mb-6 leading-normal text-foreground/85">A hierarchical file management system for contracts, recordings, and related documents. It pulls files from Google Drive and Dropbox and associates them with specific deals. I designed the file browser, breadcrumb navigation, folder structure, and detail panels.</p> 20<h3 id="ai-chat-assistant" class="mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight">AI Chat Assistant</h3> 21<p class="first:mt-0 mb-6 leading-normal text-foreground/85">A workspace-aware AI assistant for querying deals, contracts, and deliverables. It lives as a dockable panel that can be positioned anywhere in the interface or opened full-page. I designed the multi-surface layout system, suggested prompts, and conversation UI.</p> 22<figure class="mt-4 not-first:mb-8 first:my-4"><button type="button" aria-label="Play video" style="--aspect-ratio:1.3333333333333333" class="group relative grid w-full aspect-(--aspect-ratio) cursor-pointer overflow-hidden rounded-lg border border-border/50 [&>*]:[grid-area:1/1]"><img draggable="false" alt="" aria-hidden="true" loading="lazy" decoding="async" data-nimg="fill" class="size-full scale-110 object-cover blur-xl transition-opacity duration-700 ease-out opacity-100" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 768px" srcSet="/_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimage.mux.com%2F2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00%2Fthumbnail.webp%3Ffit_mode%3Dpreserve%26time%3D0%26width%3D100&w=3840&q=75"/><span class="pointer-events-none z-10 grid size-14 place-self-ce
22nter place-items-center rounded-full bg-black/25 text-white backdrop-blur-md transition-opacity duration-300 [&>*]:[grid-area:1/1] opacity-100"><span class="flex" style="opacity:1;filter:blur(0px);transform:none"><svg class="size-6 translate-x-px" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z" fill="currentColor"></path></svg></span></span></button></figure> 23<h2 id="stack" class="mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight">Stack</h2> 24<p class="first:mt-0 mb-6 leading-normal text-foreground/85">Frontend was built with React 19, TypeScript, Base UI, Tailwind CSS, Recharts, Motion 25If you'd like to explore the design system, you can find it <a target="_blank" rel="noopener noreferrer" class="text-foreground
25/60 underline underline-offset-2 hover:text-foreground" href="https://equal-iq.tobi.computer">here</a></p> 26<h2 id="notes" class="mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight">Notes</h2> 27<p class="first:mt-0 mb-6 leading-normal text-foreground/85">Equal IQ is currently in closed beta.</p></div><div class="mt-16"><div class="text-muted-foreground mb-2">See more projects</div><nav aria-label="Project navigation" class="grid grid-cols-1 gap-3 md:grid-cols-2"><a aria-label="Previous project: Equal IQ â Pilot" class="group grid grid-cols-[auto_1fr] gap-3 rounded-4xl bg-muted/80 p-3 text-foreground transition-colors duration-150 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 items-start text-left" href="/equal-iq-pilot"><div><img alt="" loading="lazy" width="96" height="96" decoding="async" data-nimg="1" class="size-18 object-contain" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fp%2Fequal-iq%2F1.png&w=96&q=75 1x, /_next/image?url=%2Fimages%2Fp%2Fequal-iq%2F1.png&w=256&q=75 2x" src="/_next/image?url=%2Fimages%2Fp%2Fequal-iq%2F1.png&w=256&q=75"/></div><div><span class="space-y-1"><span class="block text-balance font-serif text-md">Equal IQ â Pilot</span><span class="block text-pretty text-sm text-muted-foreground leading-0.8">Your Deals. Your Revenue. One System</span></span></div></a><a aria-label="Next project: Oratory AI" class="group grid grid-cols-[auto_1fr] gap-3 rounded-4xl bg-muted/80 p-3 text-foreground transition-colors duration-150 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 items-start text-left" href="/oratory-ai"><div><img alt="" loading="lazy" width="96" height="96" decoding="async" data-nimg="1" class="size-18 object-contain" style="color:transparent" src="/images/p/oratory/1.svg"/></div><div><span class="space-y-1"><span class="block text-balance font-serif text-md">Oratory AI</span><span class="block text-pretty text-sm text-muted-foreground leading-0.8">Marketing site for Oratoryâs AI-Native Web Design Sprints</span></span></div></a></nav></div></div></article><div class="fixed bottom-5.5 top-4 md:top-auto md:bottom-4 right-4 z-50"></div><!--$--><!--/$--></main></div><header data-orientation="horizontal" aria-orientation="horizontal" role="toolbar" class="fixed bottom-5 left-1/2 z-10 mx-auto w-full max-w-sm -translate-x-1/2 overflow-hidden rounded-2xl p-1 text-header-foreground shadow-sm md:bottom-6 md:max-w-sm backdrop-blur-lg backdrop-saturate-300 backdrop-brightness-200 backdrop-contrast-100 [background:var(--color-header)] transition-[opacity,translate] duration-300 ease-out motion-reduce:transition-none"><div style="background-color:var(--color-header-scroll-progress)" class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true"><div class="absolute top-0 left-0 h-full w-full -z-[1] bg-foreground scale-x-[1.05] origin-right" style="background-color:var(--color-header-scroll-progress);clip-path:inset(0% 100% 0% 0% round 6px)"></div></div><div class="flex items-center justify-between"><nav data-orientation="horizontal" role="group" aria-label="Main" class="flex items-center gap-0"><a data-orientation="horizontal" tabindex="-1" class="relative block rounded-xl px-1.5 py-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" href="/"><div><div class="inline-flex items-center gap-1.5">Index</div></div></a><a data-orientation="horizontal" tabindex="-1" class="relative block rounded-xl px-1.5 py-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" href="/lab"><div><div class="inline-flex items-center gap-1.5">Lab</div></div></a><a data-orientation="horizontal" tabindex="-1" class="relative block rounded-xl px-1.5 py-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" href="/archive"><div><div class="inline-flex items-center gap-1.5">Archive</div></div></a></nav><div data-orientation="horizontal" role="group" aria-label="Site" class="flex w-fit items-center gap-0"><button type="button" data-orientation="horizontal" data-focusable="" aria-disabled="false" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-controls="about-panel" data-about-open="false" class="block rounded-xl px-1.5 py-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[about-open="true"]:bg-header-indicator">Info</button><button type="button" aria-disabled="false" aria-haspopup="menu" id="base-ui-_R_3elqbtb_" data-slot="tooltip-trigger" data-orientation="horizontal" data-focusable="" tabindex="-1" aria-label="Theme Switcher" class="flex size-8 items-center justify-center rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 data-
27popup-open:bg-header-indicator"><svg class="size-4.5" aria-hidden="true" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16V8Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16V20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5V8Z" fill="currentColor"></path></svg></button></div></div></header></div></div></div>
27<script src="/_next/static/chunks/0t2lvx-itnkqz.js" id="_R_" async=""></script>
27<script>(self.__next_f=self.__next_f||[]).push([0])</script>
27<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[339756,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\"],\"default\"]\n3:I[837457,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\"],\"default\"]\n4:I[956204,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/0gu_hr344wsz..js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/0aq90zks05qct.js\"],\"PointerBlobBackground\"]\n5:I[522016,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\",\"/_next/static/chunks/0uc7.7wd_h9a9.js\",\"/_next/static/chunks/0208cqocz2sle.js\"],\"\"]\n6:I[167881,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/0gu_hr344wsz..js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/0aq90zks05qct.js\"],\"Button\"]\n9:I[897367,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\"],\"OutletBoundary\"]\na:\"$Sreact.suspense\"\nd:I[897367,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\"],\"ViewportBoundary\"]\nf:I[897367,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\"],\"MetadataBoundary\"]\n12:I[168027,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0zomgh5wfqe8~.css\",\"style\"]\n:HL[\"/_next/static/media/light-s.p.0.l_ki6v4zk.z.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/medium-s.p.09lwn-2inrh~p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/regular-s.p.0k4lvmtqazd_s.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/regular-s.p.0xpj2n4y2rqe4.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/thin-s.p.0ql6e4vn78d-1.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
27<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"equal-iq-design-system\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(main)\",{\"children\":[[\"slug\",\"equal-iq-design-system\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0zomgh5wfqe8~.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0x.73w57rn4ou.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0i.l9589uvx0j.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"isolate sansfont_66677788-module__1FKZVW__variable seriffont_8137418-module__U3m-2G__variable font-sans antialiased\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@graph\\\":[{\\\"@type\\\":\\\"Person\\\",\\\"@id\\\":\\\"https://tobi.computer/#person\\\",\\\"name\\\":\\\"Tobi\\\",\\\"url\\\":\\\"https://tobi.computer\\\",\\\"jobTitle\\\":\\\"Design Engineer\\\",\\\"description\\\":\\\"Tobi is a design engineer building thoughtful, polished web experiences.\\\",\\\"image\\\":\\\"https://tobi.computer/images/me.png\\\"},{\\\"@type\\\":\\\"WebSite\\\",\\\"@id\\\":\\\"https://tobi.computer/#website\\\",\\\"url\\\":\\\"https://tobi.computer\\\",\\\"name\\\":\\\"Tobi\\\",\\\"description\\\":\\\"Tobi is a design engineer building thoughtful, polished web experiences.\\\",\\\"publisher\\\":{\\\"@id\\\":\\\"https://tobi.computer/#person\\\"},\\\"inLanguage\\\":\\\"en-US\\\"}]}\"}}],[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"relative isolate grid h-svh place-items-center overflow-hidden bg-background px-6\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"div\",null,{\"className\":\"relative z-10 flex max-w-md flex-col items-center gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text -white mix-blend-difference text-9xl font-bold\",\"children\":\"404\"}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[\"$\",\"$L6\",null,{\"className\":\"w-full font-normal\",\"variant\":\"link\",\"rounded\":true,\"children\":\"Go to Home\"}]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/052dnpysv.-7b.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/167tw3-g3z24x.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/0an_vsw04uvaf.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/0am8brcdari6m.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-8\",{\"src\":\"/_next/static/chunks/0g0o2.exjqggz.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-9\",{\"src\":\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-10\",{\"src\":\"/_next/static/chunks/0hcdq9gd6snim.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-11\",{\"src\":\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-12\",{\"src\":\"/_next/static/chunks/0yn8iui730-ql.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-13\",{\"src\":\"/_next/static/chunks/0hyze3fij9yu1.js\",\"async\":true,\"nonce\":\"$undefined\"}
27],[\"$\",\"script\",\"script-14\",{\"src\":\"/_next/static/chunks/04wh9pcmzngmu.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L7\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L8\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0uc7.7wd_h9a9.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0208cqocz2sle.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@b\"}]}]]}],{},null,false,null]},null,false,\"$@c\"]},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],\"$L11\"]}],false]],\"m\":\"$undefined\",\"G\":[\"$12\",[\"$L13\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"6Z36iBzIJtyKfvqFH7nwD\"}\n"])</script>
27<script>self.__next_f.push([1,"14:[]\nc:\"$W14\"\n11:[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]\n13:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0zomgh5wfqe8~.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script>
27<script>self.__next_f.push([1,"15:I[43384,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\",\"/_next/static/chunks/0uc7.7wd_h9a9.js\",\"/_next/static/chunks/0208cqocz2sle.js\"],\"ProjectLayout\"]\n16:I[170521,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\",\"/_next/static/chunks/0uc7.7wd_h9a9.js\",\"/_next/static/chunks/0208cqocz2sle.js\"],\"VideoPlayer\"]\n"])</script>
27<script>self.__next_f.push([1,"8:[\"$\",\"$L15\",null,{\"meta\":{\"title\":\"Equal IQ â Design System\",\"subtitle\":\"Turn every deal into revenue, all in one system\",\"description\":\"A cohesive design system built to scale the Equal IQ platform with consistent patterns, tokens, and reusable components.\",\"cover\":{\"type\":\"image\",\"src\":\"https://cdn.sanity.io/images/b045sycc/production/5758be157032232aff331f1fa6043ad4b12666f2-1280x800.png\"},\"icon\":[\"/images/p/equal-iq/1.png\",\"/images/p/equal-iq/2.png\"],\"date\":\"2026-06\",\"tags\":[\"Design Systems\",\"Frontend\"],\"protected\":false,\"link\":{\"label\":\"Visit Equal IQ\",\"url\":\"https://equal-iq.com\"}},\"navigation\":{\"previous\":{\"slug\":\"equal-iq-pilot\",\"title\":\"Equal IQ â Pilot\",\"subtitle\":\"Your Deals. Your Revenue. One System\",\"description\":\"Pilot program for Equal IQ, a platform designed to make financial literacy accessible and engaging for underrepresented communities.\",\"cover\":{\"type\":\"image\",\"src\":\"https://cdn.sanity.io/images/b045sycc/production/c8c4fa90407f22643f1a73084144544f1d3d97c1-1280x800.png\"},\"icon\":[\"/images/p/equal-iq/1.png\",\"/images/p/equal-iq/2.png\"],\"date\":\"2026-09\",\"tags\":[\"Product Design\",\"Education\"],\"link\":{\"label\":\"Visit Pilot\",\"url\":\"https://eiq-pilot.tobi.computer\"}},\"next\":{\"slug\":\"oratory-ai\",\"title\":\"Oratory AI\",\"subtitle\":\"Marketing site for Oratoryâs AI-Native Web Design Sprints\",\"description\":\"Marketing site for Oratoryâs AI-Native Web Design Sprints\",\"cover\":{\"type\":\"video\",\"playbackId\":\"RXHkL00u9d2fz8FjPwLy5NFcFv6f4IdgAS5N3px401cWM\"},\"icon\":[\"/images/p/oratory/1.svg\"],\"date\":\"2026-03\",\"tags\":[\"Product Design\",\"Engineering\",\"AI\"],\"link\":{\"label\":\"Visit Oratory\",\"url\":\"https://www.oratory.co/ai-native\"}}},\"children\":[[\"$\",\"h2\",null,{\"id\":\"overview\",\"className\":\"mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight\",\"children\":\"Overview\"}],\"\\n\",[\"$\",\"$L16\",null,{\"playbackId\":\"P02BCE7mroFjkyl6uHIeJexxCA1d1gBv2YwTPRP89frg\",\"aspectRatio\":1.5491679273827534}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"Equal IQ is a deal and contract management platform for the music industry.\\nIt helps artists, labels, and producers understand complex agreements, track deals through their lifecycle, and manage obligations without needing a legal background.\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"I joined as the lead front-end design engineer, responsible for the design system, component architecture, and building out the core product interfaces.\"}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"the-problem\",\"className\":\"mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight\",\"children\":\"The Problem\"}],\"\\n\",[\"$\",\"$L16\",null,{\"playbackId\":\"BgM602100iSGZwT00OjxxgqSoU8i2Jmfdg1w2tVwutQm2c\",\"aspectRatio\":1.3726541554959786}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"Contracts in the music industry are dense and full of jargon. Most artists sign deals without fully understanding what they're agreeing to. Existing tools are either too legal-focused or too generic. There was nothing purpose-built that could break down a contract into plain language, track what you owe and what you're owed, and keep everything organized in one place.\"}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"what-i-built\",\"className\":\"mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight\",\"children\":\"What I Built\"}],\"\\n\",[\"$\",\"$L16\",null,{\"playbackId\":\"UDjwN0255r00ew402x02D019JbJq007M31oSDYUETWThK7NEU\",\"aspectRatio\":1.517037037037037}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"design-system-and-components\",\"className\":\"mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight\",\"children\":\"Design System and Components\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground
27/85\",\"children\":\"I designed and implemented a modular component system using Base UI and Tailwind CSS. This included theming (light and dark mode), a custom sidebar navigation, resizable panels, drag-and-drop interfaces, and reusable layout primitives that scaled across every view in the app.\"}],\"\\n\",\"$L17\",\"\\n\",\"$L18\",\"\\n\",\"$L19\",\"\\n\",\"$L1a\",\"\\n\",\"$L1b\",\"\\n\",\"$L1c\",\"\\n\",\"$L1d\",\"\\n\",\"$L1e\",\"\\n\",\"$L1f\",\"\\n\",\"$L20\",\"\\n\",\"$L21\",\"\\n\",\"$L22\",\"\\n\",\"$L23\"]}]\n"])</script>
27<script>self.__next_f.push([1,"17:[\"$\",\"$L16\",null,{\"playbackId\":\"DxT4BolT7eUobHgdGNNtsotlQ8IxXiaLOofqrMYJLWg\",\"aspectRatio\":1.3333333333333333}]\n18:[\"$\",\"h3\",null,{\"id\":\"dashboard\",\"className\":\"mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight\",\"children\":\"Dashboard\"}]\n19:[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"A customizable widget grid where users configure their home screen â portfolio snapshots, calendar events, inbox previews, delivery trackers, and task lists. Users can drag, resize, toggle, and reset their layout. I built the widget system, drag-and-drop grid, and customization controls.\"}]\n1a:[\"$\",\"h3\",null,{\"id\":\"deal-pipeline-and-vault\",\"className\":\"mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight\",\"children\":\"Deal Pipeline and Vault\"}]\n1b:[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"A Kanban-style board where users move deals through stages: Lead, In Progress, Signing, Delivery, and Complete.\\nEach card shows deal value, progress, document count, and collaborators. I built both the board and table views with drag-and-drop transitions and filtering by deal type.\"}]\n1c:[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"A hierarchical file management system for contracts, recordings, and related documents. It pulls files from Google Drive and Dropbox and associates them with specific deals. I designed the file browser, breadcrumb navigation, folder structure, and detail panels.\"}]\n1d:[\"$\",\"h3\",null,{\"id\":\"ai-chat-assistant\",\"className\":\"mt-10 mb-3 text-xl scroll-mt-24 text-muted-foreground font-serif leading-tight\",\"children\":\"AI Chat Assistant\"}]\n1e:[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"A workspace-aware AI assistant for querying deals, contracts, and deliverables. It lives as a dockable panel that can be positioned anywhere in the interface or opened full-page. I designed the multi-surface layout system, suggested prompts, and conversation UI.\"}]\n1f:[\"$\",\"$L16\",null,{\"playbackId\":\"2jI6TfUHgivx025019wyw1MR00kDaFpNfMXcT9F8s5t00T00\",\"aspectRatio\":1.3333333333333333}]\n20:[\"$\",\"h2\",null,{\"id\":\"stack\",\"className\":\"mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight\",\"children\":\"Stack\"}]\n21:[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":[\"Frontend was built with React 19, TypeScript, Base UI, Tailwind CSS, Recharts, Motion\\nIf you'd like to explore the design system, you can find it \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-foreground/60 underline underline-offset-2 hover:text-foreground\",\"href\":\"https://equal-iq.tobi.computer\",\"children\":\"here\"}]]}]\n22:[\"$\",\"h2\",null,{\"id\":\"notes\",\"className\":\"mt-0 not-first:mt-12 mb-2 scroll-mt-24 text-xl text-muted-foreground font-serif leading-tight\",\"children\":\"Notes\"}]\n23:[\"$\",\"p\",null,{\"className\":\"first:mt-0 mb-6 leading-normal text-foreground/85\",\"children\":\"Equal IQ is currently in closed beta.\"}]\n"])</script>
27<script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, viewport-fit=cover\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#000000\"}],[\"$\",\"meta\",\"3\",{\"name\":\"color-scheme\",\"content\":\"light\"}]]\n"])</script>
27<script>self.__next_f.push([1,"24:I[27201,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\"],\"IconMark\"]\nb:null\n"])</script>
27<script>self.__next_f.push([1,"10:[[\"$\",\"title\",\"0\",{\"children\":\"Equal IQ â Design System â Tobi\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A cohesive design system built to scale the Equal IQ platform with consistent patterns, tokens, and reusable components.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://tobi.computer\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Tobi\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Tobi,design engineer,frontend engineer,web developer,product design,UI engineering,portfolio\"}],[\"$\",\"meta\",\"5\",{\"name\":\"creator\",\"content\":\"Tobi\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://tobi.computer/equal-iq-design-system\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Equal IQ â Design System\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"A cohesive design system built to scale the Equal IQ platform with consistent patterns, tokens, and reusable components.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://tobi.computer/equal-iq-design-system\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:title\",\"content\":\"Equal IQ â Design System\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:description\",\"content\":\"A cohesive design system built to scale the Equal IQ platform with consistent patterns, tokens, and reusable components.\"}],[\"$\",\"link\",\"16\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.17o1izqkiv4h0.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"$L24\",\"17\",{}]]\n"])</script>
27<script>self.__next_f.push([1,"25:I[363178,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\"],\"ThemeProvider\"]\n26:I[255667,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\"],\"default\"]\n27:I[128739,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\"],\"Providers\"]\n28:I[587491,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\"],\"InfoPanel\"]\n29:I[55416,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/chunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\"],\"SpotifyCubePreloader\"]\n2a:I[349786,[\"/_next/static/chunks/0x.73w57rn4ou.js\",\"/_next/static/chunks/0i.l9589uvx0j.js\",\"/_next/static/chunks/10hrqvw5jx5rj.js\",\"/_next/static/chunks/05~vn1sqe6mgo.js\",\"/_next/static/chunks/0in1mp3n.2ytm.js\",\"/_next/static/chunks/052dnpysv.-7b.js\",\"/_next/static/chunks/167tw3-g3z24x.js\",\"/_next/static/chunks/0an_vsw04uvaf.js\",\"/_next/static/chunks/0piuzxr.1h~hf.js\",\"/_next/static/chunks/0am8brcdari6m.js\",\"/_next/static/chunks/0g0o2.exjqggz.js\",\"/_next/static/chunks/0dkqyr6nk4gb2.js\",\"/_next/static/chunks/0hcdq9gd6snim.js\",\"/_next/static/c"])</script>
27<script>self.__next_f.push([1,"hunks/0j7z0ev.zs50x.js\",\"/_next/static/chunks/0yn8iui730-ql.js\",\"/_next/static/chunks/0hyze3fij9yu1.js\",\"/_next/static/chunks/04wh9pcmzngmu.js\"],\"Header\"]\n7:[\"$\",\"div\",null,{\"className\":\"w-full relative h-dvh\",\"children\":[\"$\",\"$L25\",null,{\"defaultTheme\":\"light\",\"attribute\":\"class\",\"themes\":[\"light\",\"dark\",\"paper\"],\"children\":[\"$\",\"$L26\",null,{\"root\":\"asChild\",\"options\":{\"lerp\":0.2},\"className\":\"h-dvh w-full overflow-y-auto\",\"children\":[[\"$\",\"$L27\",null,{\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"relative isolate grid h-svh place-items-center overflow-hidden bg-background px-6\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"div\",null,{\"className\":\"relative z-10 flex max-w-md flex-col items-center gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text -white mix-blend-difference text-9xl font-bold\",\"children\":\"404\"}],[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[\"$\",\"$L6\",null,{\"className\":\"w-full font-normal\",\"variant\":\"link\",\"rounded\":true,\"children\":\"Go to Home\"}]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L28\",null,{}]]}],[\"$\",\"$L29\",null,{}],[\"$\",\"$L2a\",null,{\"labCount\":56,\"archiveCount\":30}]]}]}]}]\n"])</script>
27</body></html><!-- This script is automatically inserted by Netlify for Real User Monitoring (RUM). -->
28<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiYTRjNzQwZmUtNjVlNi00YWFiLWE0MWYtMjBmZmQxMTE0OWU1IiwiYWNjb3VudF9pZCI6IjViYjFiZjM2YjEzZmIxNTJjODk1ZDAxZiIsImRlcGxveV9pZCI6IjZhNWU4MWM2NGMyODk5NDkwZDVkY2UxNiIsImlzcyI6Im5ldGxpZnkifQ.OfjBtLP3kRJp7-96qnsNq6NZXXENxzaNocW1jKaSN0s"></script>
vendor: 1 bytes, line 28
28
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.