PageSourceSearch

https://webmimic.com/

html webmimic.com collected 2026-10-02 01:48:11 UTC 166,767 bytes, 14 lines download raw bytes

1<!DOCTYPE html><!--TiwmrlRsVmE___9L6_lwV--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/features/left-icon.png"/><link rel="preload" as="image" href="/features/right-icon.png"/><link rel="preload" as="image" href="/landing-page/1.jpg"/><link rel="preload" as="image" href="https://creatorstoolbox.com/badges/featured-on-creators-toolbox.svg?v=brand-supplied-20260927-4"/><link rel="stylesheet" href="/_next/static/chunks/34d933785a17edf3.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/f163d9b1826fa528.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/14a0ee43b0f847a3.js"/>
1<script src="/_next/static/chunks/efaa58374b957228.js" async=""></script>
1<script src="/_next/static/chunks/bbf89c5280eb1f0c.js" async=""></script>
1<script src="/_next/static/chunks/c16efd9677d8c131.js" async=""></script>
1<script src="/_next/static/chunks/50321753022f7ccb.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-aa2b7267c849d6ca.js" async=""></script>
1<script src="/_next/static/chunks/761a087da77e91bc.js" async=""></script>
1<script src="/_next/static/chunks/d495d0406869b1e8.js" async=""></script>
1<script src="/_next/static/chunks/ce4099ecc5288731.js" async=""></script>
1<script src="/_next/static/chunks/3f62c15bfd071855.js" async=""></script>
1<script src="/_next/static/chunks/ae369873e10e4662.js" async=""></script>
1<script src="/_next/static/chunks/d1752f1c422f9f39.js" async=""></script>
1<script src="/_next/static/chunks/3ac255bcedcde2fd.js" async=""></script>
1<script src="/_next/static/chunks/d96012bcfc98706a.js" async=""></script>
1<script src="/_next/static/chunks/2532f69a4166d704.js" async=""></script>
1<script src="https://clerk.webmimic.com/npm/@clerk/clerk-js@6/dist/clerk.browser.js" data-clerk-js-script="true" async="" crossorigin="anonymous" data-clerk-publishable-key="pk_live_Y2xlcmsud2VibWltaWMuY29tJA"></script>
1<meta name="next-size-adjust" content=""/><link rel="preload" href="https://clerk.webmimic.com/npm/@clerk/ui@1/dist/ui.browser.js" as="script" crossorigin="anonymous"/><title>Extract Design Systems from Any Website — Clone GSAP, Framer Motion &amp; Lottie</title><meta name="description" content="webmimic is the Chrome extension to extract design tokens, generate design.md for Claude &amp; Figma, clone GSAP/Framer Motion animations, and run WCAG 2.1 accessibility audits. 214 curated systems, 2k+ animations, 1.3s median extraction. Free to start."/><meta name="author" content="webmimic"/><meta name="keywords" content="extract design system from website,design tokens chrome extension,design.md generator,WCAG 2.1 accessibility audit,clone GSAP animations,Framer Motion extractor,Lottie animation extractor,Tailwind config export,Figma design system export,AI component cloner,reverse engineer website design,Google Stitch design system,Claude design skills"/><meta name="creator" content="webmimic"/><meta name="robots" content="index, follow"/><link rel="canonical" href="https://webmimic.com"/><meta property="og:title" content="webmimic — Extract Design Systems, Clone GSAP &amp; Framer Motion"/><meta property="og:description" content="Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma &amp; Google Stitch. Clone GSAP, Framer Motion &amp; Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating."/><meta property="og:url" content="https://webmimic.com"/><meta property="og:site_name" content="webmimic"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://webmimic.com/og-card.png?v=3"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="webmimic — extract design systems, design tokens, and animations from any website"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="webmimic — Extract Design Systems, Clone GSAP &amp; Framer Motion"/><meta name="twitter:description" content="Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma &amp; Google Stitch. Clone GSAP, Framer Motion &amp; Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating."/><meta name="twitter:image" content="https://webmimic.com/og-card.png?v=3"/><link rel="icon" href="/favicon.ico?favicon.33ba039d.ico" sizes="32x32" type="image/x-icon"/>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased"><div hidden=""><!--$--><!--/$--></div><div class="overflow-x-hidden"><header class="fixed top-0 left-0 right-0 z-50 transition-[background-color,border-color,box-shadow] duration-300 bg-transparent"><div class="h-[66px] flex items-center justify-between text-[14px] mx-auto w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16 text-[#090b12]"><a class="inline-flex items-center gap-[8px]" href="/"><img alt="webmimic — design system extraction Chrome extension" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="rounded-[6px]" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=32&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75"/><span class="font-extrabold text-xl tracking-tight">Webmimic</span></a><nav class="hidden md:flex gap-11 ml-[105px] text-[#111827]"><a href="/features" class="hover:text-[#1463ff] transition-colors">Features</a><a href="/motion" class="hover:text-[#1463ff] transition-colors">Motion</a><a href="/design-systems" class="hover:text-[#1463ff] transition-colors">Design Systems</a><a href="/about" class="hover:text-[#1463ff] transition-colors">About</a><a href="/credits" class="hover:text-[#1463ff] transition-colors">Pricing</a><a href="/tutorials" class="hover:text-[#1463ff] transition-colors">Tutorials</a></nav><div class="flex min-h-[38px] min-w-[120px] items-center justify-end gap-[30px]"><a href="/sign-in" class="min-h-[38px] inline-flex items-center gap-[10px] px-[18px] rounded-lg text-[12px] font-bold whitespace-nowrap bg-[#05070a] text-white shadow-[0_10px_20px_rgba(0,0,0,.18)]">Sign in<!-- --> <span>→</span></a></div></div></header><section class="relative overflow-hidden min-h-screen bg-white flex flex-col items-center justify-center"><div aria-hidden="true" class="absolute inset-0 pointer-events-none bg-[url(&#x27;/features/bg-image.jpg&#x27;)] bg-cover bg-center bg-no-repeat"></div><div aria-hidden="true" class="absolute inset-0 pointer-events-none" style="background:radial-gradient(ellipse 52% 42% at 96% 6%, #ffffff 0%, rgba(255,255,255,0.96) 28%, rgba(255,255,255,0.55) 52%, transparent 78%), radial-gradient(ellipse 52% 42% at 4% 94%, #ffffff 0%, rgba(255,255,255,0.96) 28%, rgba(255,255,255,0.55) 52%, transparent 78%), linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.92) 8%, transparent 24%, transparent 76%, rgba(255,255,255,0.92) 92%, #ffffff 100%)"></div><div class="absolute left-4 sm:left-8 lg:left-12 xl:left-16 top-1/2 -translate-y-1/2 hidden md:block z-[2] pointer-events-none select-none"><div class="relative"><img src="/features/left-icon.png" alt="" class="relative z-[2] w-[88px] sm:w-[120px] lg:w-[150px] xl:w-[180px] h-auto"/><span aria-hidden="true" class="absolute w-5 h-5 rounded-full border-[5px] border-[#141414] bg-transparent shadow-[0_10px_22px_rgba(0,0,0,.22)] -bottom-3 -left-5 z-[1]"></span><span aria-hidden="true" class="absolute rounded-full w-2.5 h-2.5 bg-gradient-to-br from-[#2f2f2f] to-[#0a0a0a] shadow-[0_8px_18px_rgba(0,0,0,.28)] -top-2 right-0 z-[3]"></span><span aria-hidden="true" class="absolute rounded-full w-3.5 h-3.5 bg-gradient-to-br from-white to-[#e7edf5] shadow-[0_8px_16px_rgba(0,0,0,.12),inset_0_-1px_2px_rgba(0,0,0,.05)] top-4 -right-8 lg:-right-10 z-[1]"></span><span aria-hidden="true" class="absolute w-4 h-4 bg-gradient-to-br from-[#434343] to-[#101010] shadow-[0_10px_20px_rgba(0,0,0,.24)] top-10 -left-7 opacity-80 z-[1]" style="clip-path:polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)"></span></div></div><div class="absolute right-4 sm:right-8 lg:right-12 xl:right-16 top-1/2 -translate-y-1/2 hidden md:block z-[2] pointer-events-none select-none"><div class="relative"><img src="/features/right-icon.png" alt="" class="relative z-[2] w-[88px] sm:w-[120px] lg:w-[150px] xl:w-[180px] h-auto"/><span aria-hidden="true" class="absolute rounded-full w-3.5 h-3.5 bg-gradient-to-br from-[#ffffff] via-[#d8dee8] to-[#9aa6b8] shadow-[0_8px_18px_rgba(0,0,0,.16)] -top-4 -left-6 z-[3]"></span><span aria-hidden="true" class="absolute w-4 h-4 bg-gradient-to-br from-[#434343] to-[#101010] shadow-[0_10px_20px_rgba(0,0,0,.24)] -bottom-4 -right-5 z-[1]" style="clip-path:polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)"></span><span aria-hidden="true" class="absolute rounded-full w-2.5 h-2.5 bg-gradient-to-br from-[#2f2f2f] to-[#0a0a0a] shadow-[0_8px_18px_rgba(0,0,0,.28)] bottom-2 -left-3 z-[1]"></span><span aria-hidden="true" class="absolute rounded-full w-2.5 h-2.5 bg-gradient-to-br from-white to-[#e7edf5] shadow-[0_8px_16px_rgba(0,0,0,.12),inset_0_-1px_2px_rgba(0,0,0,.05)] -top-1 right-0 z-[1]"></span></div></div><div class="absolute inset-0 pointer-events-none" style="mask-image:linear-gradient(to right,  transparent 0%, black 14%, black 86%, transparent 100%),linear-gradient(to bottom, transparent 0%, black 26%, black 82%, transparent 100%);-webkit-mask-image:linear-gradient(to right,  transparent 0%, black 14%, black 86%, transparent 100%),linear-gradient(to bottom, transparent 0%, black 26%, black 82%, transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in"><svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="hp-grid" width="46" height="46" patternUnits="userSpaceOnUse"><path d="M 46 0 L 0 0 0 46" fill="none" stroke="#dce8f5" stroke-width="0.7"></path></pattern><radialGradient id="hp-glow1" cx="50%" cy="44%" r="48%"><stop offset="0%" stop-color="#b8d4ff" stop-opacity="0.38"></stop><stop offset="55%" stop-color="#cce0ff" stop-opacity="0.14"></stop><stop offset="100%" stop-color="#e8f2ff" stop-opacity="0"></stop></radialGradient><radialGradient id="hp-glow2" cx="28%" cy="32%" r="36%"><stop offset="0%" stop-color="#d4e8ff" stop-opacity="0.28"></stop><stop offset="100%" stop-color="#d4e8ff" stop-opacity="0"></stop></radialGradient><radialGradient id="hp-glow3" cx="74%" cy="68%" r="34%"><stop offset="0%" stop-color="#c4d8ff" stop-opacity="0.22"></stop><stop offset="100%" stop-color="#c4d8ff" stop-opacity="0"></stop></radialGradient></defs><rect width="100%" height="100%" fill="url(#hp-grid)"></rect><rect width="100%" height="100%" fill="url(#hp-glow1)"></rect><rect width="100%" height="100%" fill="url(#hp-glow2)"></rect><rect width="100%" height="100%" fill="url(#hp-glow3)"></rect></svg></div><div class="mx-auto relative z-10 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16 flex flex-col items-center text-center pt-[80px] pb-16"><div class="flex flex-col items-center"><div class="h-[30px] px-[10px] flex items-center gap-3 rounded-[20px] text-[12px] text-[#637083] bg-[#f3f8ff] border border-[#e8f1ff]" style="opacity:0;transform:translateY(26px)"><b class="text-[#1463ff]">v2.0</b><span>Now with AI + Motion Cloning</span><i class="not-italic text-[#1463ff]">→</i></div><h1 class="mt-[16px] mb-[20px] leading-[.955] tracking-[-0.055em] font-bold text-[#090b12] text-[clamp(46px,6.2vw,56px)]" style="opacity:0;transform:translateY(26px)">Extract. Clone.<br/>Build Beautiful<br/>Websites<!-- --> <span class="text-[#778091]">10x Faster.</span></h1><p class="max-w-[520px] mb-8 text-md text-[#657185] mx-auto" style="opacity:0;transform:translateY(26px)">Copy animations. Extract design systems. Generate design.md. Ship production-ready websites with AI + webmimic.</p><div class="flex items-center gap-[14px] flex-wrap justify-center" style="opacity:0;transform:translateY(26px)"><a href="https://chromewebstore.google.com/detail/webmimic/bbpgmiacfpaedefjadkebhjnoeakkono" class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[21px] rounded-lg bg-[#05070a] text-white text-[13px] font-bold shadow-[0_10px_20px_rgba(0,0,0,.18)] whitespace-nowrap" target="_blank" rel="noopener noreferrer"><span class="w-[19px] h-[19px] rounded-full relative inline-flex shrink-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,.12)]" style="background:conic-gradient(#f7d44a 0 33%, #2fb660 0 66%, #ef4335 0 84%, #f7d44a 0)"><span class="absolute w-[7px] h-[7px] rounded-full bg-[#2c8dff] inset-[6px]"></span></span>Add to Chrome <span>→</span></a><a href="https://webmimic.com/tutorials" class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[21px] rounded-lg text-[#171b24] text-[13px] font-bold whitespace-nowrap border border-[#dce3ee] bg-[rgba(255,255,255,.82)] shadow-[0_8px_18px_rgba(15,23,42,.05)]"><span class="text-[11px]">▶</span>View Demo</a></div><div class="flex items-center gap-[18px] mt-8 justify-center" style="opacity:0;transform:translateY(26px)"><div class="flex pl-[3px]"><span class="w-7 h-7 rounded-full -ml-[5px] border-2 border-white inline-block" style="background:linear-gradient(135deg,#f5c38a,#34506d 55%,#111827)"></span><span class="w-7 h-7 rounded-full -ml-[5px] border-2 border-white inline-block" style="background:linear-gradient(135deg,#e0a36f,#ece1cf 45%,#1f2937)"></span><span class="w-7 h-7 rounded-full -ml-[5px] border-2 border-white inline-block" style="background:linear-gradient(135deg,#9dc7e8,#ffe1a4 50%,#3e5065)"></span><span class="w-7 h-7 rounded-full -ml-[5px] border-2 border-white inline-block" style="background:linear-gradient(135deg,#f4b7b7,#5163ac 58%,#101827)"></span><span class="w-7 h-7 rounded-full -ml-[5px] border-2 border-white inline-block" style="background:linear-gradient(135deg,#dec4a4,#13283d)"></span></div><div class="text-left"><p class="mb-[5px] text-[12px] text-[#6b7587]">Loved by 24,000+ designers &amp; developers</p><div class="text-[#ffb11b] tracking-[4px] text-[13px]">★★★★★<!-- --> <b class="tracking-normal ml-[10px] font-semibold text-[#111827]">4.9/5</b></div></div></div></div></div></section><section class="border-y border-[#e9eef6]" style="opacity:0;transform:translateY(16px)"><div class="mx-auto w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><p class="text-center text-xl tracking-[.24em] font-extrabold text-neutral-900 pt-[22px] pb-[36px]">TRUSTED BY LEADING TEAMS</p><div class="overflow-hidden pb-[22px]" style="mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%)"><div class="flex items-center gap-[64px] w-max"><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▲</span>Vercel</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">◒</span>Linear</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▰</span>Framer</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none">stripe</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▣</span>Notion</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▰</span>Adobe</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▰</span>Webflow</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▲</span>GitHub</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">◎</span>Figma</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▲</span>Vercel</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">◒</span>Linear</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▰</span>Framer</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none">stripe</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▣</span>Notion</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▰</span>Adobe</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▰</span>Webflow</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">▲</span>GitHub</span><span class="inline-flex items-center gap-[9px] text-[#9aa3b2] text-[20px] font-bold whitespace-nowrap select-none"><span class="text-[18px]">◎</span>Figma</span></div></div></div></section><div class="mx-auto mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="bg-white rounded-[16px] border border-[#e8edf5] shadow-[0_4px_24px_rgba(15,23,42,.06)] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5"><div class="px-6 py-6 lg:px-[36px] lg:py-[28px] border-[#edf1f7] border-b lg:border-b-0 lg:border-r"><p class="leading-none mb-[10px] text-[34px] lg:text-[42px] font-bold italic font-serif text-neutral-900">9k+</p><p class="text-[12px] text-[#667489] leading-[1.55] max-w-[180px]">Designers and engineers on the early-access list</p></div><div class="px-6 py-6 lg:px-[36px] lg:py-[28px] border-[#edf1f7] border-b lg:border-b-0 lg:border-r"><p class="leading-none mb-[10px] text-[34px] lg:text-[42px] font-bold text-neutral-900 tracking-[-0.03em]">214</p><p class="text-[12px] text-[#667489] leading-[1.55] max-w-[180px]">Curated design systems in the public gallery</p></div><div class="px-6 py-6 lg:px-[36px] lg:py-[28px] border-[#edf1f7] border-b lg:border-b-0 lg:border-r"><p class="leading-none mb-[10px] text-[34px] lg:text-[42px] font-bold italic font-serif text-neutral-900">1.3s</p><p class="text-[12px] text-[#667489] leading-[1.55] max-w-[180px]">Median extraction time, from URL to design.md</p></div><div class="px-6 py-6 lg:px-[36px] lg:py-[28px] border-[#edf1f7] border-b lg:border-b-0 lg:border-r"><p class="leading-none mb-[10px] text-[34px] lg:text-[42px] font-bold text-neutral-900 tracking-[-0.03em]">4.9/5</p><p class="text-[12px] text-[#667489] leading-[1.55] max-w-[180px]">Average user rating across all reviews</p></div><div class="px-6 py-6 lg:px-[36px] lg:py-[28px] border-[#edf1f7] "><p class="leading-none mb-[10px] text-[34px] lg:text-[42px] font-bold italic font-serif text-neutral-900">2k+</p><p class="text-[12px] text-[#667489] leading-[1.55] max-w-[180px]">Animations indexed and ready to clone</p></div></div></div><section class="mx-auto grid items-center gap-8 lg:gap-7 py-[32px] lg:py-[42px] pb-7 min-h-0 lg:min-h-[390px] grid-cols-1 lg:grid-cols-[34%_66%] mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div><span class="text-xs tracking-[.24em] font-extrabold text-[#1463ff]">EXTRACT ANY WEBSITE</span><h2 class="mt-2 mb-[13px] text-[24px] lg:text-[28px] leading-[1.03] tracking-[-0.045em] font-bold">Turn any website into<br/>your design system.</h2><p class="max-w-[380px] mb-6 text-[#667489] text-sm">Our AI scans every pixel and extracts the complete design system in seconds. Colors, typography, icons, spacing, gradients, animations everything.</p><div class="grid gap-3 lg:gap-4 grid-cols-4 w-full max-w-[400px] lg:w-auto lg:max-w-none lg:grid-cols-[repeat(4,92px)]"><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="cur
1rentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg></span><span class="text-xs">Colors</span></button><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type" aria-hidden="true"><path d="M12 4v16"></path><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"></path><path d="M9 20h6"></path></svg></span><span class="text-xs">Typography</span></button><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg></span><span class="text-xs">Icons</span></button><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code-corner" aria-hidden="true"><path d="M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="m5 16-3 3 3 3"></path><path d="m9 22 3-3-3-3"></path></svg></span><span class="text-xs">SVGs</span></button><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-blend" aria-hidden="true"><circle cx="9" cy="9" r="7"></circle><circle cx="15" cy="15" r="7"></circle></svg></span><span class="text-xs">Gradients</span></button><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move" aria-hidden="true"><path d="M12 2v20"></path><path d="m15 19-3 3-3-3"></path><path d="m19 9 3 3-3 3"></path><path d="M2 12h20"></path><path d="m5 9-3 3 3 3"></path><path d="m9 5 3-3 3 3"></path></svg></span><span class="text-xs">Spacing</span></button><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></span><span class="text-xs">Images</span></button><button class="h-[72px] border border-[#e2e9f3] rounded-lg bg-white flex flex-col items-center justify-center gap-2 text-[#172033] text-[11px] shadow-[0_10px_22px_rgba(35,57,95,.05)]"><span class="font-extrabold text-[17px] flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wand-sparkles" aria-hidden="true"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg></span><span class="text-xs">Animations</span></button></div></div><div class="relative h-auto lg:h-[360px] w-full min-w-0 flex flex-col lg:flex-row items-stretch lg:items-center justify-center gap-0 lg:gap-4"><div class="overflow-hidden relative w-full lg:flex-1 aspect-video lg:aspect-auto h-auto lg:h-[357px] bg-white/80 border border-[#dce5f2] rounded-[14px] shadow-[0_22px_55px_rgba(46,73,116,.13),inset_0_1px_0_rgba(255,255,255,.8)] backdrop-blur-[18px]"><div class="h-[42px] flex items-center gap-3 px-[18px] border-b border-[rgba(215,224,238,.7)]"><span class="w-2 h-2 rounded-full bg-[#ff5f57] inline-block"></span><span class="w-2 h-2 rounded-full bg-[#ffbd2e] inline-block"></span><span class="w-2 h-2 rounded-full bg-[#28c840] inline-block"></span><span class="text-[#a0aaba] text-[19px]">‹</span><span class="text-[#a0aaba] text-[19px]">›</span><div class="ml-auto w-[min(180px,42%)] h-[23px] bg-white/80 border border-[#e8edf5] rounded-[6px] flex items-center justify-center overflow-hidden"><span class="text-[#4d586b] text-[11px] font-bold" style="opacity:0;transform:translateY(6px)">linear.app</span></div><span class="text-[#a0aaba] text-[19px]">↻</span></div><div class="relative h-[calc(100%-42px)]"><div class="absolute inset-0" style="opacity:0"><img alt="Linear" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-top" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=3840&amp;q=75"/></div></div></div><div class="absolute z-10 right-3 bottom-3 w-[178px] h-[184px] overflow-hidden sm:w-[216px] sm:h-[223px] lg:relative lg:right-auto lg:bottom-auto lg:w-[318px] lg:h-[328px] lg:overflow-visible shrink-0"><div class="relative w-[318px] h-[328px] origin-top-left scale-[0.56] sm:scale-[0.68] lg:scale-100"><div class="absolute inset-0 p-4 overflow-hidden bg-white/80 border border-[#dce5f2] rounded-[14px] shadow-[0_22px_55px_rgba(46,73,116,.13),inset_0_1px_0_rgba(255,255,255,.8)] backdrop-blur-[18px] flex flex-col"><div class="flex items-center gap-[7px] text-[12px] shrink-0"><img alt="webmimic" loading="lazy" width="18" height="18" decoding="async" data-nimg="1" class="rounded-[4px] shrink-0" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=32&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=48&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=48&amp;q=75"/><b class="flex-1 font-extrabold">webmimic</b><i class="not-italic text-[#7e8898]">‹</i><i class="not-italic text-[#7e8898]">×</i></div><div class="flex-1 min-h-0 mt-[10px]"><div class="flex flex-col h-full" style="opacity:0"><div class="flex-1 min-h-0 rounded-[10px] bg-[#f3f5f8] flex items-center justify-center mb-[10px]"><div class="w-[54px] h-[54px] rounded-full flex items-center justify-center text-white text-[22px] font-extrabold shadow-[0_8px_24px_rgba(0,0,0,.18)]" style="background:#5e6ad2">L</div></div><div class="flex items-center gap-[9px] mb-[11px] px-[10px] py-[9px] rounded-[10px] border border-[#eef2f7] bg-white"><div class="w-[20px] h-[20px] rounded-full shrink-0" style="background:#5e6ad2"></div><div class="min-w-0"><p class="text-[11px] font-bold text-[#111827] leading-tight truncate">Linear – The system for product development</p><p class="text-[9px] text-[#667489] mt-[2px]">https://<!-- -->linear.app<!-- -->/</p></div></div><button class="w-full h-[46px] rounded-full text-white text-[12px] font-black tracking-[0.14em] flex items-center justify-center gap-[7px] shadow-[0_4px_16px_rgba(180,100,40,.28)] shrink-0" style="background:linear-gradient(135deg,#c4793a 0%,#d4924e 50%,#c4793a 100%)"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"></circle><path d="M21 21l-4.35-4.35"></path></svg>SCAN PAGE</button></div></div></div><div class="absolute pointer-events-none z-20" style="left:0;top:0"><svg width="20" height="24" viewBox="0 0 20 24" fill="none"><path d="M3 2L17 10.5L10 12.5L7 21L3 2Z" fill="white" stroke="#111827" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"></path></svg></div></div></div></div></section><section class="mx-auto grid gap-8 lg:gap-6 items-start py-[23px] pb-[31px] grid-cols-1 lg:grid-cols-[30%_70%] mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div><span class="text-xs tracking-[.24em] font-extrabold text-[#1463ff]">ANIMATED COMPONENTS</span><h2 class="mt-2 mb-[13px] text-[24px] lg:text-[28px] leading-[1.03] tracking-[-0.045em] font-bold">Clone any animation.<br/>Perfectly.</h2><p class="max-w-[380px] mb-6 text-[#667489] text-sm leading-[1.6]">Recreate GSAP, Framer Motion and Lottie interactions with our AI. One click to copy, one line to install.</p><a class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[21px] rounded-lg border border-[#dce3ee] bg-white/80 text-[#171b24] text-[13px] font-bold shadow-[0_8px_18px_rgba(15,23,42,.05)] whitespace-nowrap" href="/motion">Explore Motion Library <span>→</span></a></div><div class="flex flex-col gap-[18px] overflow-hidden min-w-0"><div class="overflow-hidden"><div class="flex gap-[18px] w-max"><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878511/videos/animation_78.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInl
1ine=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878588/videos/animation_96.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878568/videos/animation_89.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878543/videos/animation_82.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878539/videos/animation_81.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878511/videos/animation_78.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878475/videos/animation_75.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878456/videos/animation_71.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878453/videos/animation_70.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878431/videos/animation_63.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878511/videos/animation_78.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878588/videos/animation_96.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInl
1ine=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878568/videos/animation_89.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878543/videos/animation_82.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878539/videos/animation_81.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878511/videos/animation_78.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878475/videos/animation_75.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878456/videos/animation_71.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878453/videos/animation_70.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878431/videos/animation_63.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div></div></div><div class="overflow-hidden"><div class="flex gap-[18px] w-max"><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878417/videos/animation_62.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878148/videos/animation_1.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInl
1ine=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878390/videos/animation_54.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878379/videos/animation_53.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878155/videos/animation_4.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878366/videos/animation_51.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878339/videos/animation_46.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878330/videos/animation_44.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878204/videos/animation_20.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878150/videos/animation_2.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878417/videos/animation_62.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878148/videos/animation_1.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878390/videos/animation_54.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInl
1ine=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878379/videos/animation_53.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878155/videos/animation_4.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878366/videos/animation_51.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878339/videos/animation_46.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878330/videos/animation_44.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878204/videos/animation_20.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div><div><article class="h-[146px] w-[210px] shrink-0 border border-[#dfe7f1] rounded-lg bg-white overflow-hidden shadow-[0_10px_24px_rgba(30,50,86,.06)]"><div class="h-full bg-[#080d14] p-3"><video src="https://res.cloudinary.com/dqryhg3rs/video/upload/v1779878150/videos/animation_2.mp4" class="h-full w-full rounded object-contain" autoPlay="" loop="" muted="" playsInline=""></video></div></article></div></div></div></div></section><section class="mx-auto grid items-center gap-8 lg:gap-0 py-[34px] pb-[42px] min-h-0 lg:min-h-[340px] grid-cols-1 lg:grid-cols-[30%_70%] mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div><span class="text-xs tracking-[.24em] font-extrabold text-[#1463ff]">DESIGN.MD ECOSYSTEM</span><h2 class="mt-2 mb-[13px] text-[24px] lg:text-[28px] leading-[1.03] tracking-[-0.045em] font-bold">One design system.<br/>Infinite possibilities.</h2><p class="max-w-[480px] mb-3 text-[#667489] text-sm">Generate design.md files for your favorite tools and AI platforms. Work everywhere, stay consistent.</p><ul class="list-none p-0 text-[#263143] text-[14px] leading-[2]"><li class="flex items-center gap-[9px]"><span class="text-[#333] text-sm font-medium">◎</span>Claude Design</li><li class="flex items-center gap-[9px]"><span class="text-[#333] text-sm font-medium">◎</span>Google Stitch</li><li class="flex items-center gap-[9px]"><span class="text-[#333] text-sm font-medium">◎</span>Figma</li><li class="flex items-center gap-[9px]"><span class="text-[#333] text-sm font-medium">◎</span>And more coming soon...</li></ul></div><div class="flex flex-col lg:flex-row items-center gap-5 lg:gap-[38px] min-w-0 
1w-full"><div class="rounded-[12px] overflow-hidden border border-[#dfe7f1] shadow-[0_14px_30px_rgba(36,58,97,.08)] shrink-0 w-full max-w-[380px] lg:w-auto lg:max-w-none"><img alt="Design system extracted from a website and exported to Figma, Claude, and Google Stitch" loading="lazy" width="1536" height="1024" decoding="async" data-nimg="1" class="w-full lg:w-[380px] h-auto" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-system.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-system.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-system.png&amp;w=3840&amp;q=75"/></div><div class="text-[32px] lg:text-[42px] text-[#b7c3d4] shrink-0 rotate-90 lg:rotate-0">→</div><pre class="rounded-[12px] text-[#eaf3ff] text-[12px] leading-[1.55] shrink-0 w-full max-w-[320px] lg:max-w-none lg:w-[230px] min-h-[266px] m-0 p-[23px] bg-[#121922] shadow-[0_24px_44px_rgba(16,24,38,.24)] font-[ui-monospace,SFMono-Regular,Menlo,monospace]">design.md
2
3colors:
4  name: primary
5  value: &quot;#0643F7&quot;
6  role: background
7
8typography:
9  name: Inter
10  font: &quot;Inter&quot;
11  weight: [400, 500, 600]
12
13spacing:
14  4, 8, 12, 16, 24, 32, 48</pre><div class="grid gap-3 lg:gap-5 relative shrink-0 w-full max-w-[320px] lg:w-auto lg:max-w-none"><div class="absolute w-0 h-[180px] border-l-2 border-dashed border-[#b5c3d8] -left-[48px] top-[35px] hidden lg:block"></div><div class="absolute h-0 w-[48px] border-t-2 border-dashed border-[#b5c3d8] -left-[48px] top-[35px] hidden lg:block"></div><div class="absolute h-0 w-[48px] border-t-2 border-dashed border-[#b5c3d8] -left-[48px] top-[125px] hidden lg:block"></div><div class="absolute h-0 w-[48px] border-t-2 border-dashed border-[#b5c3d8] -left-[48px] top-[215px] hidden lg:block"></div><div class="relative bg-white border border-[#dfe7f1] rounded-[12px] w-full lg:w-[190px] h-[70px] pt-[14px] pr-4 pb-[14px] pl-[54px]"><b class="absolute left-4 top-[19px] w-6 h-6 inline-block rounded-full bg-[conic-gradient(#f97316,#fff0_10%,#f97316_20%,#fff0_30%,#f97316_40%,#fff0_50%,#f97316_60%,#fff0_70%,#f97316_80%,#fff0_90%)]"></b><span class="block font-extrabold text-[13px]">Claude Design</span><small class="text-[#6d788a] text-[10px]">design.md</small></div><div class="relative bg-white border border-[#dfe7f1] rounded-[12px] w-full lg:w-[190px] h-[70px] pt-[14px] pr-4 pb-[14px] pl-[54px]"><b class="absolute left-4 top-[19px] w-6 h-6 inline-block rounded-[5px] bg-[conic-gradient(#4285f4_0_25%,#34a853_0_50%,#fbbc05_0_75%,#ea4335_0)]"></b><span class="block font-extrabold text-[13px]">Google Stitch</span><small class="text-[#6d788a] text-[10px]">design.md</small></div><div class="relative bg-white border border-[#dfe7f1] rounded-[12px] w-full lg:w-[190px] h-[70px] pt-[14px] pr-4 pb-[14px] pl-[54px]"><b class="absolute left-4 top-[19px] w-6 h-6 inline-block rounded-[8px] bg-[linear-gradient(90deg,#f24e1e_0_33%,#a259ff_0_66%,#1abcfe_0)]"></b><span class="block font-extrabold text-[13px]">Figma</span><small class="text-[#6d788a] text-[10px]">design.md</small></div></div></div></section><section class="mx-auto grid gap-8 lg:gap-[38px] py-[32px] lg:py-[43px] pb-[40px] lg:pb-[46p
14x] grid-cols-1 lg:grid-cols-[27%_73%] border-t border-[#edf1f7] mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div><span class="text-xs tracking-[.24em] font-extrabold text-[#1463ff]">INSPIRATION GALLERY</span><h2 class="mt-2 mb-[13px] text-[24px] lg:text-[28px] leading-[1.03] tracking-[-0.045em] font-bold">200+ curated design<br/>systems &amp; websites.</h2><p class="max-w-[380px] mb-3 text-[#667489] text-sm">Explore the best websites, design systems, and UI inspirations hand-picked for you.</p><a class="min-h-[44px] inline-flex items-center justify-center gap-[10px] px-[21px] rounded-lg border border-[#dce3ee] bg-white/80 text-[#171b24] text-[13px] font-bold shadow-[0_8px_18px_rgba(15,23,42,.05)] whitespace-nowrap" href="/design-systems">Explore Gallery <span>→</span></a></div><div class="flex flex-col gap-[24px] overflow-hidden min-w-0"><div class="overflow-hidden"><div class="flex gap-[22px] w-max"><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="BetterStack" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FBetterStack.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FBetterStack.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FBetterStack.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="CalCom" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FCalCom.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FCalCom.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FCalCom.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Clerk" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClerk.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClerk.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClerk.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="ClickHouse" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClickHouse.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClickHouse.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClickHouse.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Framer" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FFramer.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FFramer.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FFramer.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="GitHub" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FGitHub.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FGitHub.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FGitHub.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Linear" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Lovable" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLovable.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLovable.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLovable.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="BetterStack" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FBetterStack.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FBetterStack.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FBetterStack.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="CalCom" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FCalCom.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FCalCom.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FCalCom.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Clerk" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClerk.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClerk.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClerk.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="ClickHouse" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClickHouse.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClickHouse.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FClickHouse.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Framer" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FFramer.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FFramer.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FFramer.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="GitHub" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FGitHub.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FGitHub.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FGitHub.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Linear" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLinear.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Lovable" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLovable.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLovable.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FLovable.png&amp;w=3840&amp;q=75"/></div></div></div><div class="overflow-hidden"><div class="flex gap-[22px] w-max"><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Mintlify" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FMintlify.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FMintlify.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FMintlify.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Notion" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FNotion.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FNotion.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FNotion.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Pinterest" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPinterest.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPinterest.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPinterest.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Pitch" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPitch.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPitch.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPitch.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Railway" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FRailway.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FRailway.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FRailway.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Stripe" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FStripe.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FStripe.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FStripe.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="mistral" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2Fmistral.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2Fmistral.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2Fmistral.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="xAI" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FxAI.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FxAI.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FxAI.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Mintlify" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FMintlify.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FMintlify.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FMintlify.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Notion" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FNotion.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FNotion.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FNotion.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Pinterest" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPinterest.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPinterest.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPinterest.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border bor
14der-[#dfe7f1] shrink-0"><img alt="Pitch" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPitch.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPitch.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FPitch.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Railway" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FRailway.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FRailway.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FRailway.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="Stripe" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FStripe.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FStripe.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FStripe.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="mistral" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2Fmistral.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2Fmistral.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2Fmistral.png&amp;w=3840&amp;q=75"/></div><div class="w-[160px] h-[100px] lg:w-[210px] lg:h-[132px] rounded-[7px] overflow-hidden border border-[#dfe7f1] shrink-0"><img alt="xAI" loading="lazy" width="1440" height="900" decoding="async" data-nimg="1" class="w-full h-full object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FxAI.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Fdesign-gallery%2FxAI.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Fdesign-gallery%2FxAI.png&amp;w=3840&amp;q=75"/></div></div></div></div></section><section class="mx-auto grid items-center gap-8 lg:gap-[58px] py-[12px] pb-[40px] lg:pb-[52px] grid-cols-1 lg:grid-cols-[42%_58%] border-t border-[#edf1f7] mt-8 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div><span class="text-xs tracking-[.24em] font-extrabold text-[#1463ff]">WHY TEAMS SWITCH</span><h2 class="mt-2 mb-[13px] text-[24px] lg:text-[28px] leading-[1.03] tracking-[-0.045em] font-bold">From a screenshot to<br/>a library in 90 seconds.</h2><p class="max-w-[600px] mb-8 text-[#667489] text-sm leading-[1.6]">Stop hand-rebuilding systems from inspiration boards. webmimic turns any reference into a real design file with named tokens, semantic aliases and auto-generated documentation pages.</p><ol class="list-none p-0 m-0 flex flex-col gap-5"><li class="flex items-start gap-[14px]"><span class="flex-shrink-0 w-[22px] h-[22px] rounded-full bg-[#f0f4ff] border border-[#dce8ff] flex items-center justify-center text-[10px] font-extrabold text-[#1463ff] mt-[1px]">1</span><div><b class="block text-[13px] font-bold text-[#283346] mb-[2px]">Published variables, not local styles.</b><span class="text-[12px] text-[#667489] leading-[1.55]">Tokens land in your team library, mode-aware, ready for handoff.</span></div></li><li class="flex items-start gap-[14px]"><span class="flex-shrink-0 w-[22px] h-[22px] rounded-full bg-[#f0f4ff] border border-[#dce8ff] flex items-center justify-center text-[10px] font-extrabold text-[#1463ff] mt-[1px]">2</span><div><b class="block text-[13px] font-bold text-[#283346] mb-[2px]">Semantic aliases out of the box.</b><span class="text-[12px] text-[#667489] leading-[1.55]">surface/lowest, text/muted, accent/primary — sane names, every time.</span></div></li><li class="flex items-start gap-[14px]"><span class="flex-shrink-0 w-[22px] h-[22px] rounded-full bg-[#f0f4ff] border border-[#dce8ff] flex items-center justify-center text-[10px] font-extrabold text-[#1463ff] mt-[1px]">3</span><div><b class="block text-[13px] font-bold text-[#283346] mb-[2px]">Round-trip with your codebase.</b><span class="text-[12px] text-[#667489] leading-[1.55]">Sync token changes back to CSS, Tailwind or Style Dictionary.</span></div></li></ol></div><div class="overflow-hidden mt-6 lg:mt-12 bg-white/90 border border-[#dce5f2] rounded-[14px] shadow-[0_22px_55px_rgba(46,73,116,.13),inset_0_1px_0_rgba(255,255,255,.8)] backdrop-blur-[18px]"><div class="overflow-x-auto lg:overflow-hidden"><div class="min-w-[680px] lg:min-w-0 h-[400px]"><div class="h-[38px] flex items-center gap-4 px-4 border-b border-[#e2e9f3]"><div class="flex gap-[6px]"><span class="w-[9px] h-[9px] rounded-full bg-[#ff5f57] inline-block"></span><span class="w-[9px] h-[9px] rounded-full bg-[#ffbd2e] inline-block"></span><span class="w-[9px] h-[9px] rounded-full bg-[#28c840] inline-block"></span></div><div class="flex gap-[22px] text-[11px] font-semibold text-[#9aa3b2] ml-1"><span class="hover:text-[#536174] cursor-pointer">Design</span><span class="text-[#090b12] pb-[11px] border-b-2 border-[#1463ff]">System</span><span class="hover:text-[#536174] cursor-pointer">Components</span><span class="hover:text-[#536174] cursor-pointer">Export</span></div></div><div class="grid h-[calc(100%-38px)] grid-cols-[130px_1fr_178px]"><aside class="p-[14px] border-r border-[#e8edf5] text-[11px] text-[#667489] flex flex-col gap-[4px]"><b class="text-[#9aa3b2] text-[9px] uppercase tracking-[.14em] mb-[6px]">Tokens</b><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] cursor-pointer bg-[#eaf3ff] text-[#1463ff] font-semibold">Color</span><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] cursor-pointer hover:text-[#283346]">Typography</span><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] cursor-pointer hover:text-[#283346]">Spacing</span><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] cursor-pointer hover:text-[#283346]">Radii</span><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] cursor-pointer hover:text-[#283346]">Motion</span><b class="text-[#9aa3b2] text-[9px] uppercase tracking-[.14em] mt-[12px] mb-[6px]">Components</b><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] hover:text-[#283346] curs
14or-pointer">Button</span><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] hover:text-[#283346] cursor-pointer">Card</span><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] hover:text-[#283346] cursor-pointer">Input</span><span class="rounded-[5px] px-[7px] py-[5px] -mx-[7px] hover:text-[#283346] cursor-pointer">Badge</span></aside><div class="flex h-full"><div class="p-5 flex-1"><div class="flex items-center justify-between mb-[14px]"><h4 class="text-[12px] font-bold text-[#283346]">COLOR</h4><span class="text-[9px] font-extrabold text-[#1463ff] tracking-[.14em]">BLUE</span></div><p class="text-[9px] text-[#9aa3b2] font-semibold mb-[7px]">Primary</p><div class="flex gap-[5px] mb-[14px]"><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#dbeafe]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#93c5fd]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#3b82f6]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#1463ff]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#0b40cc]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#083197]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#06236e]"></i></div><p class="text-[9px] text-[#9aa3b2] font-semibold mb-[7px]">Neutrals</p><div class="flex gap-[5px] mb-[14px]"><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-white border border-[#e4e9f2]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#f7f9fc]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#e7ecf3]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#c5ccd7]"></i><i class="w-[26px] h-[20px] rounded-[4px] not-italic inline-block bg-[#111827]"></i></div><p class="text-[9px] text-[#9aa3b2] font-semibold mb-[7px]">Semantic</p><div class="flex gap-[5px] mb-[18px]"><i class="w-[46px] h-[20px] rounded-[4px] not-italic inline-block bg-[#24c178]"></i><i class="w-[46px] h-[20px] rounded-[4px] not-italic inline-block bg-[#ffad22]"></i><i class="w-[46px] h-[20px] rounded-[4px] not-italic inline-block bg-[#f04438]"></i></div><div class="flex items-center gap-8"><div><p class="text-[9px] text-[#9aa3b2] font-semibold mb-[7px]">Spacing</p><div class="flex items-end gap-[4px] h-[20px] mb-[14px]"><div class="w-[10px] rounded-t-[2px] bg-[linear-gradient(to_top,rgba(20,99,255,.35),rgba(20,99,255,.9))]" style="height:30%"></div><div class="w-[10px] rounded-t-[2px] bg-[linear-gradient(to_top,rgba(20,99,255,.35),rgba(20,99,255,.9))]" style="height:52%"></div><div class="w-[10px] rounded-t-[2px] bg-[linear-gradient(to_top,rgba(20,99,255,.35),rgba(20,99,255,.9))]" style="height:42%"></div><div class="w-[10px] rounded-t-[2px] bg-[linear-gradient(to_top,rgba(20,99,255,.35),rgba(20,99,255,.9))]" style="height:72%"></div><div class="w-[10px] rounded-t-[2px] bg-[linear-gradient(to_top,rgba(20,99,255,.35),rgba(20,99,255,.9))]" style="height:58%"></div><div class="w-[10px] rounded-t-[2px] bg-[linear-gradient(to_top,rgba(20,99,255,.35),rgba(20,99,255,.9))]" style="height:88%"></div><div class="w-[10px] rounded-t-[2px] bg-[linear-gradient(to_top,rgba(20,99,255,.35),rgba(20,99,255,.9))]" style="height:68%"></div></div></div><div><p class="text-[9px] text-[#9aa3b2] font-semibold mb-[7px]">Shadows</p><div class="flex items-center gap-[8px]"><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] rounded-[5px] bg-white border border-[#e4e9f2] inline-block shadow-[0_1px_3px_rgba(15,23,42,.12)]"></span><span class="text-[8px] text-[#9aa3b2]">sm</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] rounded-[5px] bg-white border border-[#e4e9f2] inline-block shadow-[0_4px_10px_rgba(15,23,42,.14)]"></span><span class="text-[8px] text-[#9aa3b2]">md</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] rounded-[5px] bg-white border border-[#e4e9f2] inline-block shadow-[0_8px_20px_rgba(15,23,42,.16)]"></span><span class="text-[8px] text-[#9aa3b2]">lg</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] rounded-[5px] bg-white border border-[#e4e9f2] inline-block shadow-[0_16px_36px_rgba(15,23,42,.20)]"></span><span class="text-[8px] text-[#9aa3b2]">xl</span></div></div></div></div><p class="text-[9px] text-[#9aa3b2] font-semibold mb-[7px]">Radii</p><div class="flex items-center gap-[6px] mb-[14px]"><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-[2px]"></span><span class="text-[8px] text-[#9aa3b2]">2</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-[4px]"></span><span class="text-[8px] text-[#9aa3b2]">4</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-[8px]"></span><span class="text-[8px] text-[#9aa3b2]">8</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-[12px]"></span><span class="text-[8px] text-[#9aa3b2]">12</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-[36px]"></span><span class="text-[8px] text-[#9aa3b2]">36</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-[50px]"></span><span class="text-[8px] text-[#9aa3b2]">50</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-[74px]"></span><span class="text-[8px] text-[#9aa3b2]">74</span></div><div class="flex flex-col items-center gap-[3px]"><span class="w-[18px] h-[18px] bg-[#e7ecf3] border border-[#c5ccd7] inline-block rounded-full"></span><span class="text-[8px] text-[#9aa3b2]">∞</span></div></div></div><div class="p-5 border-l border-[#e8edf5] w-[130px] shrink-0"><h4 class="text-[12px] font-bold text-[#283346] mb-[14px]">ICONS</h4><div class="grid grid-cols-4 gap-[8px]"><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">○</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⊕</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">■</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">◎</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⌘</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⊞</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">
14◈</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⊟</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">△</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">◷</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⊗</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">✦</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⟳</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⌁</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">⊘</span><span class="w-[22px] h-[22px] rounded-[5px] bg-[#f6f8fc] border border-[#eaeff7] flex items-center justify-center text-[11px] text-[#374151] select-none">◉</span></div></div></div><div class="p-5 border-l border-[#e8edf5]"><h4 class="text-[11px] font-bold text-[#283346] mb-[10px]">TYPOGRAPHY</h4><div class="flex items-center justify-between mb-[8px]"><span class="text-[9px] text-[#9aa3b2]">display / 48</span><span class="text-[#283346] text-[26px] font-bold leading-none">Aa</span></div><div class="flex items-center justify-between mb-[8px]"><span class="text-[9px] text-[#9aa3b2]">heading / 24</span><span class="text-[#283346] text-[17px] font-semibold leading-none">Aa</span></div><div class="flex items-center justify-between mb-[8px]"><span class="text-[9px] text-[#9aa3b2]">body / 14</span><span class="text-[#283346] text-[13px] font-normal leading-none">Aa</span></div><div class="flex items-center justify-between mb-[8px]"><span class="text-[9px] text-[#9aa3b2]">caption / 12</span><span class="text-[#283346] text-[10px] font-medium leading-none">Aa</span></div><h4 class="text-[11px] font-bold text-[#283346] mt-[14px] mb-[8px]">SPACING</h4><div class="flex items-end gap-[5px] h-[44px]"><div class="w-[14px] rounded-t-[3px] bg-[linear-gradient(to_top,rgba(20,99,255,.4),rgba(20,99,255,1))]" style="height:30%"></div><div class="w-[14px] rounded-t-[3px] bg-[linear-gradient(to_top,rgba(20,99,255,.4),rgba(20,99,255,1))]" style="height:52%"></div><div class="w-[14px] rounded-t-[3px] bg-[linear-gradient(to_top,rgba(20,99,255,.4),rgba(20,99,255,1))]" style="height:42%"></div><div class="w-[14px] rounded-t-[3px] bg-[linear-gradient(to_top,rgba(20,99,255,.4),rgba(20,99,255,1))]" style="height:72%"></div><div class="w-[14px] rounded-t-[3px] bg-[linear-gradient(to_top,rgba(20,99,255,.4),rgba(20,99,255,1))]" style="height:58%"></div><div class="w-[14px] rounded-t-[3px] bg-[linear-gradient(to_top,rgba(20,99,255,.4),rgba(20,99,255,1))]" style="height:88%"></div><div class="w-[14px] rounded-t-[3px] bg-[linear-gradient(to_top,rgba(20,99,255,.4),rgba(20,99,255,1))]" style="height:68%"></div></div></div></div></div></div></div></section><section class="mx-auto py-[43px] pb-[56px] border-t border-[#edf1f7] mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="grid lg:grid-cols-2 gap-6 lg:gap-12 items-center"><div class="flex flex-col gap-[6px]"><div class="mb-[18px]"><span class="text-xs tracking-[.24em] font-extrabold text-[#1463ff]">WHAT YOU CAN DO</span><h2 class="mt-2 mb-[13px] text-[24px] lg:text-[28px] leading-[1.03] tracking-[-0.045em] font-bold text-[#090b12]">Every tool a designer needs.</h2><p class="max-w-[680px] mb-3 text-[#667489] text-sm leading-[1.6]">From extracting assets to cloning animations, everything you need to go from inspiration to production in one click.</p></div><div class="relative flex items-start gap-4 px-5 py-[14px] rounded-[12px] curs
14or-pointer transition-all duration-300 border-2 bg-[#f4f5f7] border-[#d1d5db] shadow-[0_8px_24px_rgba(15,23,42,.07)]" style="opacity:0;transform:translateX(-20px)"><div class="flex-shrink-0 w-10 h-10 rounded-[10px] flex items-center justify-center transition-colors duration-300 bg-[#374151]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette w-5 h-5 transition-colors duration-300 text-white" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg></div><div class="flex-1"><h3 class="font-bold mb-[3px] text-[13px] transition-colors duration-300 text-[#111827]">Assets, Colors &amp; Typography</h3><p class="text-[12px] leading-[1.55] transition-colors duration-300 text-[#4b5563]">Extract images, SVGs, videos, color palettes, and full typography from any website in one click.</p></div><div class="absolute right-5 top-1/2 -translate-y-1/2" style="transform:scale(0)"><div class="w-[9px] h-[9px] rounded-full bg-[#374151]"></div></div></div><div class="relative flex items-start gap-4 px-5 py-[14px] rounded-[12px] cursor-pointer transition-all duration-300 border-2 bg-[#f9fafb] border-transparent hover:border-[#e5e7eb] hover:shadow-[0_4px_12px_rgba(15,23,42,.06)]" style="opacity:0;transform:translateX(-20px)"><div class="flex-shrink-0 w-10 h-10 rounded-[10px] flex items-center justify-center transition-colors duration-300 bg-[#edf1f7]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml w-5 h-5 transition-colors duration-300 text-[#667489]" aria-hidden="true"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></div><div class="flex-1"><h3 class="font-bold mb-[3px] text-[13px] transition-colors duration-300 text-[#283346]">Element Code Extraction</h3><p class="text-[12px] leading-[1.55] transition-colors duration-300 text-[#667489]">Hover any element to instantly grab its CSS properties and clean HTML markup.</p></div></div><div class="relative flex items-start gap-4 px-5 py-[14px] rounded-[12px] cursor-pointer transition-all duration-300 border-2 bg-[#f9fafb] border-transparent hover:border-[#e5e7eb] hover:shadow-[0_4px_12px_rgba(15,23,42,.06)]" style="opacity:0;transform:translateX(-20px)"><div class="flex-shrink-0 w-10 h-10 rounded-[10px] flex items-center justify-center transition-colors duration-300 bg-[#edf1f7]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wand-sparkles w-5 h-5 transition-colors duration-300 text-[#667489]" aria-hidden="true"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg></div><div class="flex-1"><h3 class="font-bold mb-[3px] text-[13px] transition-colors duration-300 text-[#283346]">AI Component Cloner</h3><p class="text-[12px] leading-[1.55] transition-colors duration-300 text-[#667489]">Pick any section and let AI recreate it as production-ready code you can drop straight into your project.</p></div></div><div class="relative flex items-start gap-4 px-5 py-[14px] rounded-[12px] cursor-pointer transition-all duration-300 border-2 bg-[#f9fafb] border-transparent hover:border-[#e5e7eb] hover:shadow-[0_4px_12px_rgba(15,23,42,.06)]" style="opacity:0;transform:translateX(-20px)"><div class="flex-shrink-0 w-10 h-10 rounded-[10px] flex items-center justify-center transition-colors duration-300 bg-[#edf1f7]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check w-5 h-5 transition-colors duration-300 text-[#667489]" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg></div><div class="flex-1"><h3 class="font-bold mb-[3px] text-[13px] transition-colors duration-300 text-[#283346]">WCAG 2.1 Accessibility Scan</h3><p class="text-[12px] leading-[1.55] transition-colors duration-300 text-[#667489]">Scan the full page for alt text, contrast, labels, headings, landmarks, ARIA roles, keyboard access, skip links, and more.</p></div></div><div class="relative flex items-start gap-4 px-5 py-[14px] rounded-[12px] curs
14or-pointer transition-all duration-300 border-2 bg-[#f9fafb] border-transparent hover:border-[#e5e7eb] hover:shadow-[0_4px_12px_rgba(15,23,42,.06)]" style="opacity:0;transform:translateX(-20px)"><div class="flex-shrink-0 w-10 h-10 rounded-[10px] flex items-center justify-center transition-colors duration-300 bg-[#edf1f7]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clapperboard w-5 h-5 transition-colors duration-300 text-[#667489]" aria-hidden="true"><path d="m12.296 3.464 3.02 3.956"></path><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z"></path><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><path d="m6.18 5.276 3.1 3.899"></path></svg></div><div class="flex-1"><h3 class="font-bold mb-[3px] text-[13px] transition-colors duration-300 text-[#283346]">Animation Extractor &amp; AI Cloner</h3><p class="text-[12px] leading-[1.55] transition-colors duration-300 text-[#667489]">Detect Lottie animations on any page, preview them, and let AI recreate the component with its full animation.</p></div></div><div class="relative flex items-start gap-4 px-5 py-[14px] rounded-[12px] cursor-pointer transition-all duration-300 border-2 bg-[#f9fafb] border-transparent hover:border-[#e5e7eb] hover:shadow-[0_4px_12px_rgba(15,23,42,.06)]" style="opacity:0;transform:translateX(-20px)"><div class="flex-shrink-0 w-10 h-10 rounded-[10px] flex items-center justify-center transition-colors duration-300 bg-[#edf1f7]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers w-5 h-5 transition-colors duration-300 text-[#667489]" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg></div><div class="flex-1"><h3 class="font-bold mb-[3px] text-[13px] transition-colors duration-300 text-[#283346]">Design System Export</h3><p class="text-[12px] leading-[1.55] transition-colors duration-300 text-[#667489]">Extract the complete design style as a Tailwind config, Claude skills file, or Figma design system in one shot.</p></div></div><div class="flex gap-[6px] mt-[14px]"><div class="flex-1 h-[3px] bg-[#e5e7eb] rounded-full overflow-hidden"><div class="h-full bg-[#374151] rounded-full" style="width:0%"></div></div><div class="flex-1 h-[3px] bg-[#e5e7eb] rounded-full overflow-hidden"><div class="h-full bg-[#374151] rounded-full" style="width:0%"></div></div><div class="flex-1 h-[3px] bg-[#e5e7eb] rounded-full overflow-hidden"><div class="h-full bg-[#374151] rounded-full" style="width:0%"></div></div><div class="flex-1 h-[3px] bg-[#e5e7eb] rounded-full overflow-hidden"><div class="h-full bg-[#374151] rounded-full" style="width:0%"></div></div><div class="flex-1 h-[3px] bg-[#e5e7eb] rounded-full overflow-hidden"><div class="h-full bg-[#374151] rounded-full" style="width:0%"></div></div><div class="flex-1 h-[3px] bg-[#e5e7eb] rounded-full overflow-hidden"><div class="h-full bg-[#374151] rounded-full" style="width:0%"></div></div></div></div><div class="relative h-[240px] sm:h-[360px] lg:h-[520px] rounded-[14px] border border-[#dfe7f1] mt-4 lg:mt-44 p-3 shadow-[0_24px_55px_rgba(15,23,42,.13)]"><div class="relative h-full w-full overflow-hidden rounded-[10px]"><img src="/landing-page/1.jpg" alt="Assets, Colors &amp; Typography" class="w-full h-full object-cover" style="opacity:0;transform:scale(1.06)"/><div class="absolute bottom-0 left-0 right-0 bg-[linear-gradient(to_top,rgba(9,11,18,.72),transparent)] p-7"><div style="opacity:0;transform:translateY(16px)"><h2 class="text-[22px] font-bold text-white leading-[1.2] tracking-[-0.03em] mb-[6px]">Assets, Colors &amp; Typography</h2><p class="text-[#b8c8e0] text-[13px] leading-[1.55]">
14Extract images, SVGs, videos, color palettes, and full typography from any website in one click.</p></div></div></div></div></div></section><section class="mx-auto py-[34px] pb-[52px] border-t border-[#edf1f7] mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="flex flex-col gap-3 lg:gap-[17px] overflow-hidden" style="mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)"><div class="overflow-hidden"><div class="flex gap-3 lg:gap-[17px] w-max"><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#667eea,#764ba2)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Sarah Chen</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Product Designer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">webmimic completely changed how I work. I can extract a whole design system in seconds. Game changer!</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#f093fb,#f5576c)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Alex Morgan</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Frontend Developer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">The animation cloning is insane. It just works. Saved me dozens of hours already.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">James Carter</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Design Engineer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Finally, a tool that brings designers and developers on the same page. Love the design.md workflow.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Maya Patel</p><p class="text-[10px] lg:text-[11px] text-[#667489]">UX Lead</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">The design.md export transformed our Figma handoffs overnight. Our whole team adopted it in a day.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#667eea,#764ba2)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Sarah Chen</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Product Designer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">webmimic completely changed how I work. I can extract a whole design system in seconds. Game changer!</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#f093fb,#f5576c)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Alex Morgan</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Frontend Developer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">The animation cloning is insane. It just works. Saved me dozens of hours already.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">James Carter</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Design Engineer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Finally, a tool that brings designers and developers on the same page. Love the design.md workflow.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Maya Patel</p><p class="text-[10px] lg:text-[11px] text-[#667489]">UX Lead</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">The design.md export transformed our Figma handoffs overnight. Our whole team adopted it in a day.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div></div></div><div class="overflow-hidden"><div class="flex gap-3 lg:gap-[17px] w-max"><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#fa709a,#fee140)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Lena Schmidt</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Creative Director</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">I used to spend two days building a moodboard into Figma. Now it takes five minutes. Absolutely unreal.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#a18cd1,#fbc2eb)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Dan Okafor</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Full-Stack Engineer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Dropped webmimic into our workflow last sprint. Design tokens in CSS in minutes — the team was floored.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#fccb90,#d57eeb)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Priya Nair</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Product Manager</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Bridging design and dev has always been painful. webmimic is the first tool that actually fixes that gap.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#84fab0,#8fd3f4)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Tom Erikson</p><p class="text-[10px] lg:text-[11px] text-[#667489]">UI Engineer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Cloned a complex hero section in under 2 minutes. The AI understood the spacing and typescale perfectly.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#fa709a,#fee140)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Lena Schmidt</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Creative Director</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">I used to spend two days building a moodboard into Figma. Now it takes five minutes. Absolutely unreal.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#a18cd1,#fbc2eb)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Dan Okafor</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Full-Stack Engineer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Dropped webmimic into our workflow last sprint. Design tokens in CSS in minutes — the team was floored.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#fccb90,#d57eeb)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Priya Nair</p><p class="text-[10px] lg:text-[11px] text-[#667489]">Product Manager</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Bridging design and dev has always been painful. webmimic is the first tool that actually fixes that gap.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div><div class="w-[200px] lg:w-[280px] shrink-0 border border-[#dfe7f1] rounded-[10px] lg:rounded-[12px] bg-white p-[14px] lg:p-[22px] shadow-[0_8px_24px_rgba(15,23,42,.06)] flex flex-col justify-between"><div><div class="flex items-center gap-2 lg:gap-[10px] mb-2.5 lg:mb-[14px]"><span class="w-7 h-7 lg:w-9 lg:h-9 rounded-full shrink-0 inline-block" style="background:linear-gradient(135deg,#84fab0,#8fd3f4)"></span><div><p class="text-[12px] lg:text-[13px] font-bold text-[#283346] leading-tight">Tom Erikson</p><p class="text-[10px] lg:text-[11px] text-[#667489]">UI Engineer</p></div></div><p class="text-[11px] lg:text-[12px] text-[#536174] leading-[1.55] lg:leading-[1.65]">Cloned a complex hero section in under 2 minutes. The AI understood the spacing and typescale perfectly.</p></div><div class="text-[#ffb11b] tracking-[2px] lg:tracking-[3px] text-[11px] lg:text-[13px] mt-2.5 lg:mt-[14px]">★★★★★</div></div></div></div></div></section><section class="mx-auto py-[43px] pb-[56px] border-t border-[#edf1f7] mt-16 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="text-center mb-[40px]"><span class="text-sm tracking-[.24em] font-extrabold text-[#1463ff]">PRICING</span><h2 class="mt-[19px] mb-[13px] text-[28px] lg:text-[34px] leading-[1.03] tracking-[-0.045em] font-bold text-[#090b12]">Simple, transparent pricing.</h2><p class="text-[#667489] text-md mt-1 mb-[28px]">Start free. Upgrade when you need more.</p><div class="inline-flex items-center gap-[4px] p-[4px] rounded-full bg-[#f3f5f8] border border-[#e5eaf3]"><button class="relative px-3 sm:px-[20px] h-[36px] rounded-full text-[13px] font-semibold transition-colors duration-200 flex items-center gap-[7px]" style="color:#090b12"><span class="absolute inset-0 rounded-full bg-white shadow-[0_2px_8px_rgba(15,23,42,.1)] border
14 border-[#e5eaf3]"></span><span class="relative z-10 capitalize">monthly</span></button><button class="relative px-3 sm:px-[20px] h-[36px] rounded-full text-[13px] font-semibold transition-colors duration-200 flex items-center gap-[7px]" style="color:#667489"><span class="relative z-10 capitalize">yearly</span><span class="relative z-10 text-[10px] font-extrabold text-[#16a34a] bg-[#dcfce7] px-[6px] py-[2px] rounded-full">Save 17%</span></button></div></div><div class="grid grid-cols-1 lg:grid-cols-3 gap-[17px] items-stretch"><div class="relative rounded-[20px] p-6 lg:p-[28px] flex flex-col  bg-white border border-[#dfe7f1] shadow-[0_8px_24px_rgba(15,23,42,.06)]" style="opacity:0;transform:translateY(16px)"><p class="text-[11px] font-extrabold tracking-[.18em] mb-[16px] text-[#9aa3b2]">FREE</p><div class="flex items-end gap-[6px] mb-[4px]"><span class="text-[46px] font-bold leading-none tracking-[-0.04em] text-[#090b12]" style="opacity:0;transform:translateY(10px)">Free</span></div><div class="h-[22px] mb-[12px]"></div><p class="text-[12.5px] leading-[1.6] mb-[22px] text-[#667489]">Everything you need to start inspecting and extracting from any website.</p><a href="/credits" class="min-h-[44px] w-full inline-flex items-center justify-center rounded-[10px] text-[13px] font-bold mb-[24px] transition-colors border border-[#dce3ee] bg-white text-[#171b24] hover:bg-[#f9fafb]">Get started free</a><div class="w-full h-px mb-[20px] bg-[#edf1f7]"></div><ul class="flex flex-col gap-[11px]"><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Inspect any element (CSS, fonts, colors)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Unlimited asset downloads (images, SVGs, videos)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Unlimited Lottie animation exports</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Unlimited component code exports (HTML, CSS)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Save unlimited items to your library</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">10 design token extractions</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">10 accessibility audit reports (WCAG 2.1)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Generate up to 10 AI-ready design resources</span></div><ul class="ml-[24px] flex flex-col gap-[4px]"><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#c8d5e8]"></span><span class="text-[11.5px] text-[#7e8fa4]">Figma design guides</span></li><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#c8d5e8]"></span><span class="text-[11.5px] text-[#7e8fa4]">Claude skills</span></li><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#c8d5e8]"></span><span class="text-[11.5px] text-[#7e8fa4]">Google Stitch style guides</span></li></ul></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">200+ real-world website style guides</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">200+ real-world Framer Motion / GSAP animations</span></div></li></ul></div><div class="relative rounded-[20px] p-6 lg:p-[28px] flex flex-col  bg-white border border-[#dfe7f1] shadow-[0_8px_24px_rgba(15,23,42,.06)]" style="opacity:0;transform:translateY(16px)"><p class="text-[11px] font-extrabold tracking-[.18em] mb-[16px] text-[#9aa3b2]">BASIC</p><div class="flex items-end gap-[6px] mb-[4px]"><span class="text-[46px] font-bold leading-none tracking-[-0.04em] text-[#090b12]" style="opacity:0;transform:translateY(10px)">$5</span><span class="text-[13px] mb-[7px] text-[#9aa3b2]" style="opacity:0">/mo</span></div><div class="h-[22px] mb-[12px]"></div><p class="text-[12.5px] leading-[1.6] mb-[22px] text-[#667489]">For designers and developers who extract and recreate components regularly.</p><a href="/credits" class="min-h-[44px] w-full inline-flex items-center justify-center rounded-[10px] text-[13px] font-bold mb-[24px] transition-colors bg-[#090b12] text-white hover:bg-[#1a1f2e]">Start with Basic</a><div class="w-full h-px mb-[20px] bg-[#edf1f7]"></div><ul class="flex flex-col gap-[11px]"><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Inspect any element (CSS, fonts, colors)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Unlimited asset downloads (images, SVGs, videos)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Unlimited Lottie animation exports</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Unlimited component code exports (HTML, CSS)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Save unlimited items to your library</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">100 design token extractions</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">50 accessibility audit reports (WCAG 2.1)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">50 near pixel-perfect component recreations</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">50 Framer Motion / GSAP animation extractions</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">Generate up to 100 AI-ready design resources</span></div><ul class="ml-[24px] flex flex-col gap-[4px]"><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#c8d5e8]"></span><span class="text-[11.5px] text-[#7e8fa4]">Figma design guides</span></li><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#c8d5e8]"></span><span class="text-[11.5px] text-[#7e8fa4]">Claude skills</span></li><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#c8d5e8]"></span><span class="text-[11.5px] text-[#7e8fa4]">Google Stitch style guides</span></li></ul></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">200+ real-world website style guides</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#dcfce7]"><svg xmlns="http://www.w3.org/2000/svg" width="8"
14 height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#16a34a]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#536174]">200+ real-world Framer Motion / GSAP animations</span></div></li></ul></div><div class="relative rounded-[20px] p-6 lg:p-[28px] flex flex-col mt-4 lg:mt-0 bg-[#080d14] border border-[rgba(255,255,255,.08)] shadow-[0_28px_56px_rgba(0,0,0,.32)]" style="opacity:0;transform:translateY(16px)"><div class="absolute -top-[14px] left-1/2 -translate-x-1/2"><span class="inline-flex items-center px-[14px] py-[5px] rounded-full bg-[#1463ff] text-white text-[11px] font-bold tracking-[.06em] whitespace-nowrap shadow-[0_4px_14px_rgba(20,99,255,.35)]">MOST POPULAR</span></div><p class="text-[11px] font-extrabold tracking-[.18em] mb-[16px] text-[#7e8fa8]">PRO</p><div class="flex items-end gap-[6px] mb-[4px]"><span class="text-[46px] font-bold leading-none tracking-[-0.04em] text-white" style="opacity:0;transform:translateY(10px)">$20</span><span class="text-[13px] mb-[7px] text-[#536174]" style="opacity:0">/mo</span></div><div class="h-[22px] mb-[12px]"></div><p class="text-[12.5px] leading-[1.6] mb-[22px] text-[#8b9ab0]">Unlimited power for professionals shipping production-ready work.</p><a href="/credits" class="min-h-[44px] w-full inline-flex items-center justify-center rounded-[10px] text-[13px] font-bold mb-[24px] transition-colors bg-white text-[#080d14]">Start with Pro</a><div class="w-full h-px mb-[20px] bg-white/[.08]"></div><ul class="flex flex-col gap-[11px]"><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Inspect any element (CSS, fonts, colors)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Unlimited asset downloads (images, SVGs, videos)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Unlimited Lottie animation exports</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Unlimited component code exports (HTML, CSS)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Save unlimited items to your library</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Unlimited design token extractions</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Unlimited accessibility audit reports (WCAG 2.1)</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Recreate any component with near pixel-perfect accuracy</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Extract Framer Motion / GSAP animations from any component</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">Generate unlimited AI-ready design resources</span></div><ul class="ml-[24px] flex flex-col gap-[4px]"><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#334155]"></span><span class="text-[11.5px] text-[#64748b]">Figma design guides</span></li><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#334155]"></span><span class="text-[11.5px] text-[#64748b]">Claude skills</span></li><li class="flex items-center gap-[7px]"><span class="w-[4px] h-[4px] rounded-full shrink-0 bg-[#334155]"></span><span class="text-[11.5px] text-[#64748b]">Google Stitch style guides</span></li></ul></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">200+ real-world website style guides</span></div></li><li class="flex flex-col gap-[5px]"><div class="flex items-start gap-[9px]"><span class="mt-[2px] w-[15px] h-[15px] rounded-full flex items-center justify-center shrink-0 bg-[#1a2a1e]"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check text-[#4ade80]" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="text-[12.5px] leading-[1.55] text-[#9aa3b2]">200+ real-world Framer Motion / GSAP animations</span></div></li></ul></div></div></section><section class="mx-auto mt-16 mb-8 w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="rounded-[24px] bg-[#080d14] px-6 py-10 sm:px-10 sm:py-14 lg:px-[72px] lg:py-[68px] grid grid-cols-1 lg:grid-cols-[55%_45%] items-center gap-12 overflow-hidden"><div><span class="text-xs sm:text-sm tracking-[.22em] font-extrabold text-[#667489] block mb-4 sm:mb-5">AVAILABLE NOW</span><h2 class="text-[clamp(34px,6vw,40px)] leading-[1] tracking-[-0.048em] font-bold text-white mb-5">Your browser just got a <br class="hidden sm:block"/>design superpower.</h2><p class="text-[#8b9ab0] text-[14px] sm:text-[15px] leading-[1.7] mb-8 max-w-[520px]">Install webmimic for Chrome and start extracting assets, animations, and design tokens from any site in seconds.</p><div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 mb-5"><a href="https://chromewebstore.google.com/detail/webmimic/bbpgmiacfpaedefjadkebhjnoeakkono" class="min-h-[48px] inline-flex items-center justify-center gap-[10px] px-[22px] rounded-lg bg-white text-[#080d14] text-[13px] font-bold shadow-[0_10px_24px_rgba(0,0,0,.32)] whitespace-nowrap">Get Started Free →</a><a href="/tutorials" class="min-h-[48px] inline-flex items-center justify-center gap-[10px] px-[22px] rounded-lg border border-[rgba(255,255,255,.18)] bg-white/8 text-white/80 text-[13px] font-bold whitespace-nowrap">See How It Works</a></div><p class="text-[12px] leading-relaxed text-[#3d4f66]">Works on Chrome, Brave, Edge, Arc, and all Chromium-based browsers.</p></div><div class="w-full flex justify-center lg:justify-end"><div class="w-full max-w-[320px] rounded-[16px] bg-[#111827] border border-[rgba(255,255,255,.07)] p-5 shadow-[0_28px_56px_rgba(0,0,0,.45)]"><div class="flex gap-[6px] mb-5"><span class="w-[10px] h-[10px] rounded-full bg-[#ff5f57] inline-block"></span><span class="w-[10px] h-[10px] rounded-full bg-[#ffbd2e] inline-block"></span><span class="w-[10px] h-[10px] rounded-full bg-[#28c840] inline-block"></span></div><div class="flex flex-col gap-[9px]"><div class="flex items-center justify-between bg-[#1a2234] rounded-[9px] px-4 py-[11px]"><span class="text-[12px] text-[#8b9ab0]">Colors extracted</span><span class="w-[26px] h-[26px] rounded-full bg-white/15 border border-white/20 flex items-center justify-center text-[11px] font-bold text-white shrink-0">14</span></div><div class="flex items-center justify-between bg-[#1a2234] rounded-[9px] px-4 py-[11px]"><span class="text-[12px] text-[#8b9ab0]">Fonts detected</span><span class="w-[26px] h-[26px] rounded-full bg-white/15 border border-white/20 flex items-center justify-center text-[11px] font-bold text-white shrink-0">3</span></div><div class="flex items-center justify-between bg-[#1a2234] rounded-[9px] px-4 py-[11px]"><span class="text-[12px] text-[#8b9ab0]">Components found</span><span class="w-[26px] h-[26px] rounded-full bg-white/15 border border-white/20 flex items-center justify-center text-[11px] font-bold text-white shrink-0">27</span></div><div class="flex items-center justify-between bg-[#1a2234] rounded-[9px] px-4 py-[11px]"><span class="text-[12px] text-[#8b9ab0]">SVGs ready</span><span class="w-[26px] h-[26px] rounded-full bg-white/15 border border-white/20 flex items-center justify-center text-[11px] font-bold text-white shrink-0">8</span></div></div></div></div></div></section>
14<footer class="border-t mt-16 border-[#edf1f7] bg-white"><div class="mx-auto py-10 lg:py-[56px] w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16"><div class="grid grid-cols-1 lg:grid-cols-[38%_62%] gap-10 lg:gap-[48px]"><div><div class="flex items-center gap-[8px] mb-[12px]"><img alt="webmimic — design system extraction Chrome extension" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="rounded-[6px]" style="color:transparent" srcSet="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=32&amp;q=75 1x, /_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75 2x" src="/_next/image?url=%2Flanding-page%2Flogo.jpg&amp;w=64&amp;q=75"/><span class="font-extrabold text-[18px] tracking-tight text-[#090b12]">webmimic</span></div><p class="text-[13px] leading-[1.65] max-w-[280px] mb-[24px] text-[#667489]">The fastest way to capture, inspect, and reuse design assets from any website.</p><div class="flex flex-col items-start gap-3"><div class="flex gap-[8px]"><a href="#" aria-label="X" class="w-[34px] h-[34px] rounded-[8px] border flex items-center justify-center transition-colors border-[#e5e7eb] bg-white text-[#536174] hover:text-[#090b12] hover:border-[#c5ccd7]"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"></path></svg></a><a href="#" aria-label="GitHub" class="w-[34px] h-[34px] rounded-[8px] border flex items-center justify-center transition-colors border-[#e5e7eb] bg-white text-[#536174] hover:text-[#090b12] hover:border-[#c5ccd7]"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"></path></svg></a><a href="#" aria-label="LinkedIn" class="w-[34px] h-[34px] rounded-[8px] border flex items-center justify-center transition-colors border-[#e5e7eb] bg-white text-[#536174] hover:text-[#090b12] hover:border-[#c5ccd7]"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a></div><a href="https://creatorstoolbox.com" target="_blank" rel="sponsored noopener" title="Featured on Creators Toolbox" class="inline-block opacity-90 transition-opacity hover:opacity-100"><img src="https://creatorstoolbox.com/badges/featured-on-creators-toolbox.svg?v=brand-supplied-20260927-4" alt="Featured on Creators Toolbox" width="140" height="38" class="h-auto w-[140px] max-w-full"/></a></div></div><div class="grid grid-cols-2 sm:grid-cols-3 gap-8 lg:gap-[32px]"><div><p class="text-[10px] font-extrabold tracking-[.16em] mb-[18px] text-[#9aa3b2]">PRODUCT</p><ul class="flex flex-col gap-[13px]"><li><a href="/features" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Features</a></li><li><a href="/credits" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Pricing</a></li><li><a href="/changelog" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Changelog</a></li><li><a href="/roadmap" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Roadmap</a></li><li><a href="/chrome-extension" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Chrome Web Store</a></li></ul></div><div>
14<p class="text-[10px] font-extrabold tracking-[.16em] mb-[18px] text-[#9aa3b2]">RESOURCES</p><ul class="flex flex-col gap-[13px]"><li><a href="/feedback" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Feedback</a></li><li><a href="/blog" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Blog</a></li><li><a href="/design-tokens-guide" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Design Tokens Guide</a></li><li><a href="/community" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Community</a></li><li><a href="/support" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Support</a></li></ul></div><div><p class="text-[10px] font-extrabold tracking-[.16em] mb-[18px] text-[#9aa3b2]">COMPANY</p><ul class="flex flex-col gap-[13px]"><li><a href="/about" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">About</a></li><li><a href="/privacy" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Privacy Policy</a></li><li><a href="/terms" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Terms of Service</a></li><li><a href="/contact" class="text-[13px] transition-colors text-[#536174] hover:text-[#090b12]">Contact</a></li></ul></div></div></div></div><div class="mx-auto border-t w-full max-w-[1400px] px-6 sm:px-8 lg:px-12 xl:px-16 border-[#edf1f7]"><div class="py-[20px] flex items-center justify-center"><p class="text-[12px] text-center text-[#9aa3b2]">© 2026 webmimic. All rights reserved.</p></div></div></footer></div><!--$--><!--/$-->
14<script src="/_next/static/chunks/14a0ee43b0f847a3.js" id="_R_" async=""></script>
14<script>(self.__next_f=self.__next_f||[]).push([0])</script>
14<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[377505,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"Navbar\"]\n4:I[976061,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"HeroPage\"]\n5:I[969774,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"TrustedMarquee\"]\n6:I[565242,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\n7:I[906227,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\n8:I[861358,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\n9:I[244069,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/"])</script>
14<script>self.__next_f.push([1,"chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\na:I[395290,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\nb:I[83203,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\nc:I[118321,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\nd:I[307467,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\ne:I[991966,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\nf:I[143280,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c1"])</script>
14<script>self.__next_f.push([1,"5bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\n10:I[807047,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\",\"/_next/static/chunks/ae369873e10e4662.js\",\"/_next/static/chunks/d1752f1c422f9f39.js\",\"/_next/static/chunks/3ac255bcedcde2fd.js\"],\"default\"]\n11:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"OutletBoundary\"]\n13:I[711533,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"AsyncMetadataOutlet\"]\n15:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"ViewportBoundary\"]\n17:I[897367,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"MetadataBoundary\"]\n18:\"$Sreact.suspense\"\n1a:I[168027,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"default\"]\n:HL[\"/_next/static/chunks/34d933785a17edf3.css\",\"style\"]\n:HL[\"/_next/static/chunks/f163d9b1826fa528.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
14<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"TiwmrlRsVmE---9L6_lwV\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/34d933785a17edf3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/f163d9b1826fa528.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/761a087da77e91bc.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/d495d0406869b1e8.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/ce4099ecc5288731.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/3f62c15bfd071855.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"overflow-x-hidden\",\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{}],[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{}],[\"$\",\"$Ld\",null,{}],[\"$\",\"$Le\",null,{}],[\"$\",\"$Lf\",null,{}],[\"$\",\"$L10\",null,{}]]}],[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/ae369873e10e4662.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/d1752f1c422f9f39.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/3ac255bcedcde2fd.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L11\",null,{\"children\":[\"$L12\",[\"$\",\"$L13\",null,{\"promise\":\"$@14\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L15\",null,{\"children\":\"$L16\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$18\",null,{\"fallback\":null,\"children\":\"$L19\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$1a\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/34d933785a17edf3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/f163d9b1826fa528.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"s\":false,\"S\":true}\n"])</script>
14<script>self.__next_f.push([1,"1b:I[441895,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"ClientClerkProvider\"]\n1c:I[267823,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"ExtensionWebSignOutSync\"]\n1d:I[748026,[\"/_next/static/chunks/761a087da77e91bc.js\",\"/_next/static/chunks/d495d0406869b1e8.js\",\"/_next/static/chunks/ce4099ecc5288731.js\",\"/_next/static/chunks/3f62c15bfd071855.js\"],\"AppShell\"]\n1e:I[339756,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"default\"]\n1f:I[837457,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"default\"]\n"])</script>
14<script>self.__next_f.push([1,"2:[\"$\",\"$L1b\",null,{\"initialState\":\"$undefined\",\"publishableKey\":\"pk_live_Y2xlcmsud2VibWltaWMuY29tJA\",\"__internal_clerkJSUrl\":\"$undefined\",\"__internal_clerkJSVersion\":\"$undefined\",\"__internal_clerkUIUrl\":\"$undefined\",\"__internal_clerkUIVersion\":\"$undefined\",\"prefetchUI\":\"$undefined\",\"proxyUrl\":\"\",\"domain\":\"\",\"isSatellite\":false,\"signInUrl\":\"\",\"signUpUrl\":\"\",\"signInForceRedirectUrl\":\"\",\"signUpForceRedirectUrl\":\"\",\"signInFallbackRedirectUrl\":\"\",\"signUpFallbackRedirectUrl\":\"\",\"newSubscriptionRedirectUrl\":\"\",\"telemetry\":{\"disabled\":false,\"debug\":false},\"sdkMetadata\":{\"name\":\"@clerk/nextjs\",\"version\":\"7.0.7\",\"environment\":\"production\"},\"unsafe_disableDevelopmentModeConsoleWarning\":false,\"__internal_scriptsSlot\":\"$undefined\",\"children\":[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased\",\"children\":[[\"$\",\"$L1c\",null,{}],[\"$\",\"$L1d\",null,{\"children\":[\"$\",\"$L1e\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L1f\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]}]}]\n"])</script>
14<script>self.__next_f.push([1,"16:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n12:null\n"])</script>
14<script>self.__next_f.push([1,"20:I[27201,[\"/_next/static/chunks/d96012bcfc98706a.js\",\"/_next/static/chunks/2532f69a4166d704.js\"],\"IconMark\"]\n"])</script>
14<script>self.__next_f.push([1,"14:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Extract Design Systems from Any Website — Clone GSAP, Framer Motion \u0026 Lottie\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"webmimic is the Chrome extension to extract design tokens, generate design.md for Claude \u0026 Figma, clone GSAP/Framer Motion animations, and run WCAG 2.1 accessibility audits. 214 curated systems, 2k+ animations, 1.3s median extraction. Free to start.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"webmimic\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"extract design system from website,design tokens chrome extension,design.md generator,WCAG 2.1 accessibility audit,clone GSAP animations,Framer Motion extractor,Lottie animation extractor,Tailwind config export,Figma design system export,AI component cloner,reverse engineer website design,Google Stitch design system,Claude design skills\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"webmimic\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://webmimic.com\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"webmimic — Extract Design Systems, Clone GSAP \u0026 Framer Motion\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma \u0026 Google Stitch. Clone GSAP, Framer Motion \u0026 Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://webmimic.com\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"webmimic\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://webmimic.com/og-card.png?v=3\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:alt\",\"content\":\"webmimic — extract design systems, design tokens, and animations from any website\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"webmimic — Extract Design Systems, Clone GSAP \u0026 Framer Motion\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Extract design systems and design tokens from any website in 1.3s. Generate design.md for Claude, Figma \u0026 Google Stitch. Clone GSAP, Framer Motion \u0026 Lottie animations. WCAG 2.1 accessibility audits. 200+ curated design systems, 2k+ animations. Loved by 24,000+ designers — 4.9/5 rating.\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://webmimic.com/og-card.png?v=3\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.33ba039d.ico\",\"sizes\":\"32x32\",\"type\":\"image/x-icon\"}],[\"$\",\"$L20\",\"22\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
14<script>self.__next_f.push([1,"19:\"$14:metadata\"\n"])</script>
14</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.