[{"data":1,"prerenderedAt":2191},["ShallowReactive",2],{"api-blog-best-design-token-extraction-tools-2026":3,"api-blog-related-best-design-token-extraction-tools-2026":501},{"id":4,"title":5,"author":6,"body":7,"category":468,"date":469,"dateModified":470,"description":471,"extension":472,"faqs":473,"image":470,"meta":485,"navigation":486,"path":487,"readingTime":488,"relatedSlugs":489,"seo":493,"stem":494,"tags":495,"__hash__":500},"apiBlog/api-blog/best-design-token-extraction-tools-2026.md","Best Design Token Extraction Tools in 2026","Soraia",{"type":8,"value":9,"toc":451},"minimark",[10,14,19,29,52,56,64,81,85,93,110,114,127,144,148,156,173,177,180,230,251,255,377,381,394,398,403,406,410,425,429,436,440,447],[11,12,13],"p",{},"There are six honest ways to get design tokens out of a live website in 2026, and the right one depends on whether you are doing this once, weekly, or inside a product. Here is the list, with the tradeoffs stated plainly. Yes, our own API is on it - ranked where I would rank it if it were not ours.",[15,16,18],"h2",{"id":17},"_1-css-stats-fastest-free-look","1. CSS Stats - fastest free look",[11,20,21,28],{},[22,23,27],"a",{"href":24,"rel":25},"https://cssstats.com",[26],"nofollow","cssstats.com"," has been the \"paste a URL, see the CSS\" tool for a decade. It reports every color, font size, and font family the stylesheet declares, plus specificity graphs nobody asks for but everyone screenshots.",[30,31,32,40,46],"ul",{},[33,34,35,39],"li",{},[36,37,38],"strong",{},"Good:"," free, no signup, instant.",[33,41,42,45],{},[36,43,44],{},"Bad:"," it reads declared CSS, not used CSS. A site shipping a big framework stylesheet reports hundreds of colors that never render. There is no export worth automating against.",[33,47,48,51],{},[36,49,50],{},"Use it when:"," you want a two-minute overview of a site's CSS health, not a token set.",[15,53,55],{"id":54},"_2-project-wallace-the-analyzer-that-kept-evolving","2. Project Wallace - the analyzer that kept evolving",[11,57,58,63],{},[22,59,62],{"href":60,"rel":61},"https://www.projectwallace.com",[26],"Project Wallace"," does what CSS Stats does but deeper: color counts, typography breakdowns, and change tracking over time if you create an account.",[30,65,66,71,76],{},[33,67,68,70],{},[36,69,38],{}," the most thorough free CSS analysis on the web, actively maintained.",[33,72,73,75],{},[36,74,44],{}," same fundamental limit - declared, not rendered. Still a report you read, not a token file you use.",[33,77,78,80],{},[36,79,50],{}," auditing your own CSS over time, or studying how a site's stylesheet is put together.",[15,82,84],{"id":83},"_3-superposition-tokens-on-your-desktop","3. Superposition - tokens on your desktop",[11,86,87,92],{},[22,88,91],{"href":89,"rel":90},"https://superposition.design",[26],"Superposition"," is a desktop app that crawls a page and exports design tokens to CSS variables, Sass, JS, and even Adobe XD. It was ahead of its time.",[30,94,95,100,105],{},[33,96,97,99],{},[36,98,38],{}," genuine token export formats, one-click, offline app.",[33,101,102,104],{},[36,103,44],{}," desktop-only, so there is nothing to call from code or CI. Development has been quiet for a while - check that the export you need still works.",[33,106,107,109],{},[36,108,50],{}," you are a designer who wants tokens from a reference site without touching a terminal.",[15,111,113],{"id":112},"_4-a-diy-playwright-script-full-control","4. A DIY Playwright script - full control",[11,115,116,117,121,122,126],{},"Load the page in a headless browser, read ",[118,119,120],"code",{},"getComputedStyle"," off every element, count what repeats. We wrote the complete walkthrough in ",[22,123,125],{"href":124},"/api/blog/how-to-extract-design-tokens-from-any-website-in-python","How to Extract Design Tokens from Any Website in Python",".",[30,128,129,134,139],{},[33,130,131,133],{},[36,132,38],{}," free, sees exactly what renders (including runtime CSS-in-JS), infinitely customizable.",[33,135,136,138],{},[36,137,44],{}," you now run browser infrastructure. Cookie banners, lazy fonts, and viewport-dependent styles are your problem, and the script that worked in April breaks in July.",[33,140,141,143],{},[36,142,50],{}," one-off extractions, research, or when you need something no tool exposes.",[15,145,147],{"id":146},"_5-miromiro-browser-extension-point-and-click","5. MiroMiro browser extension - point and click",[11,149,150,151,155],{},"Our ",[22,152,154],{"href":153},"/features/design-tokens","extension"," shows a site's tokens live as you browse: colors, typography, spacing, assets. Click an element, see its resolved styles, export what you want.",[30,157,158,163,168],{},[33,159,160,162],{},[36,161,38],{}," zero setup, visual, great for picking tokens from a specific component rather than the whole page.",[33,164,165,167],{},[36,166,44],{}," it is a human tool. Nothing to automate, no JSON endpoint, and it extracts what you look at, not a thousand URLs.",[33,169,170,172],{},[36,171,50],{}," hand-picking design decisions from reference sites during design or build.",[15,174,176],{"id":175},"_6-miromiro-extract-api-tokens-as-an-endpoint","6. MiroMiro extract API - tokens as an endpoint",[11,178,179],{},"One GET request returns the ranked token set as JSON, CSS variables, or a Tailwind theme block:",[181,182,187],"pre",{"className":183,"code":184,"language":185,"meta":186,"style":186},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","curl \"https://miromiro.app/api/v1/extract?url=stripe.com&format=tailwind\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n","bash","",[118,188,189,213],{"__ignoreMap":186},[190,191,194,198,202,206,209],"span",{"class":192,"line":193},"line",1,[190,195,197],{"class":196},"sBMFI","curl",[190,199,201],{"class":200},"sMK4o"," \"",[190,203,205],{"class":204},"sfazB","https://miromiro.app/api/v1/extract?url=stripe.com&format=tailwind",[190,207,208],{"class":200},"\"",[190,210,212],{"class":211},"sTEyZ"," \\\n",[190,214,216,219,221,224,227],{"class":192,"line":215},2,[190,217,218],{"class":204},"  -H",[190,220,201],{"class":200},[190,222,223],{"class":204},"Authorization: Bearer ",[190,225,226],{"class":211},"$MIROMIRO_API_KEY",[190,228,229],{"class":200},"\"\n",[30,231,232,241,246],{},[33,233,234,236,237,240],{},[36,235,38],{}," deduped and ranked (not raw declared values), covers colors, type scale, spacing, radii, shadows, gradients, and motion, resolves ",[118,238,239],{},"var()"," chains and every declared breakpoint. It is the only option on this list you can put inside a product.",[33,242,243,245],{},[36,244,44],{}," it parses static HTML + CSS and does not execute JavaScript, so a fully client-rendered app can come back thin. Costs credits past the free 100 a month.",[33,247,248,250],{},[36,249,50],{}," tokens need to arrive programmatically - agent pipelines, onboarding flows, bulk analysis.",[15,252,254],{"id":253},"the-comparison-in-one-table","The comparison in one table",[256,257,258,280],"table",{},[259,260,261],"thead",{},[262,263,264,268,271,274,277],"tr",{},[265,266,267],"th",{},"Tool",[265,269,270],{},"Output",[265,272,273],{},"Rendered or declared?",[265,275,276],{},"Automatable",[265,278,279],{},"Price",[281,282,283,301,316,330,346,360],"tbody",{},[262,284,285,289,292,295,298],{},[286,287,288],"td",{},"CSS Stats",[286,290,291],{},"Web report",[286,293,294],{},"Declared",[286,296,297],{},"No",[286,299,300],{},"Free",[262,302,303,305,308,310,313],{},[286,304,62],{},[286,306,307],{},"Web report + tracking",[286,309,294],{},[286,311,312],{},"Partially",[286,314,315],{},"Free tier",[262,317,318,320,323,326,328],{},[286,319,91],{},[286,321,322],{},"Token files (CSS/Sass/JS)",[286,324,325],{},"Rendered",[286,327,297],{},[286,329,300],{},[262,331,332,335,338,340,343],{},[286,333,334],{},"DIY Playwright",[286,336,337],{},"Whatever you build",[286,339,325],{},[286,341,342],{},"Yes, you maintain it",[286,344,345],{},"Your time",[262,347,348,351,354,356,358],{},[286,349,350],{},"MiroMiro extension",[286,352,353],{},"Visual + export",[286,355,325],{},[286,357,297],{},[286,359,315],{},[262,361,362,365,368,371,374],{},[286,363,364],{},"MiroMiro API",[286,366,367],{},"JSON / CSS vars / Tailwind",[286,369,370],{},"Parsed + resolved",[286,372,373],{},"Yes",[286,375,376],{},"100 credits/mo free, then from €19/mo",[15,378,380],{"id":379},"the-verdict","The verdict",[11,382,383,384,388,389,393],{},"For a quick look, Project Wallace. For hand-picking from a reference site, the extension. For anything that runs on a schedule or inside a product, the API - and I would say that even if it were someone else's, because it is the only entry here that returns a token file over HTTP. You can ",[22,385,387],{"href":386},"/api/dashboard/keys","get a free API key"," (100 credits a month, no card) or poke it in the ",[22,390,392],{"href":391},"/api/demo","playground"," first.",[15,395,397],{"id":396},"frequently-asked-questions","Frequently asked questions",[399,400,402],"h3",{"id":401},"what-is-the-fastest-free-way-to-extract-design-tokens-from-a-website","What is the fastest free way to extract design tokens from a website?",[11,404,405],{},"Paste the URL into CSS Stats or Project Wallace. Seconds, no signup. Expect raw declared values, not a cleaned token set.",[399,407,409],{"id":408},"can-i-get-tokens-as-css-variables-or-a-tailwind-config-directly","Can I get tokens as CSS variables or a Tailwind config directly?",[11,411,412,413,416,417,420,421,126],{},"Yes - ",[118,414,415],{},"format=css"," returns custom properties, ",[118,418,419],{},"format=tailwind"," returns a theme block. Details in the ",[22,422,424],{"href":423},"/api/docs/design-tokens","design tokens docs",[399,426,428],{"id":427},"do-these-tools-work-on-tailwind-sites","Do these tools work on Tailwind sites?",[11,430,431,432,435],{},"The ones reading real CSS or computed styles do; ",[118,433,434],{},"bg-indigo-600"," is just CSS once shipped. Tools that only look for CSS custom properties miss most of a Tailwind site's system.",[399,437,439],{"id":438},"what-is-the-difference-between-a-token-set-and-a-color-palette","What is the difference between a token set and a color palette?",[11,441,442,443,126],{},"A palette is one token group. A full token set adds the type scale, spacing, radii, shadows, motion, and z-index layers - see the ",[22,444,446],{"href":445},"/api/blog/design-token-types-reference","design token types reference",[448,449,450],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":186,"searchDepth":215,"depth":215,"links":452},[453,454,455,456,457,458,459,460,461],{"id":17,"depth":215,"text":18},{"id":54,"depth":215,"text":55},{"id":83,"depth":215,"text":84},{"id":112,"depth":215,"text":113},{"id":146,"depth":215,"text":147},{"id":175,"depth":215,"text":176},{"id":253,"depth":215,"text":254},{"id":379,"depth":215,"text":380},{"id":396,"depth":215,"text":397,"children":462},[463,465,466,467],{"id":401,"depth":464,"text":402},3,{"id":408,"depth":464,"text":409},{"id":427,"depth":464,"text":428},{"id":438,"depth":464,"text":439},"Comparisons","2026-07-18",null,"Six real ways to pull design tokens from a live website in 2026 - free analyzers, a DIY script, a browser extension, and an API - honestly ranked.","md",[474,476,479,482],{"question":402,"answer":475},"Paste the URL into a CSS analyzer like CSS Stats or Project Wallace. You get colors, font sizes, and specificity data in seconds with no signup. The output is raw declared values rather than a cleaned token set, so expect to filter it by hand.",{"question":477,"answer":478},"Can I get design tokens as CSS variables or a Tailwind config directly?","Yes. The MiroMiro extract endpoint takes format=css to return CSS custom properties or format=tailwind to return a theme config block, so the tokens drop straight into a codebase without a conversion step.",{"question":480,"answer":481},"Do design token extractors work on Tailwind sites?","Tools that read the site's actual CSS or computed styles do, because bg-indigo-600 is just CSS once shipped. Tools that look for CSS variables only will miss most of a Tailwind site's system, since utility-first sites often define few custom properties.",{"question":483,"answer":484},"What is the difference between extracting design tokens and extracting a color palette?","A palette is one token group. A design token set also covers the type scale, spacing, radii, shadows, motion, and z-index layers - the full set of decisions you need to rebuild UI in the site's style.",{},true,"/api-blog/best-design-token-extraction-tools-2026",7,[490,491,492],"how-to-extract-design-tokens-from-any-website-in-python","design-token-types-reference","best-design-to-code-apis-2026",{"title":5,"description":471},"api-blog/best-design-token-extraction-tools-2026",[496,497,498,499],"design tokens","tools","comparison","css analysis","GhGcQEA8Q7VmKm_mMFRSpL45k0PaBwatHPzBRiFUK9g",[502,1224,1822],{"id":503,"title":125,"author":6,"body":504,"category":1201,"date":469,"dateModified":470,"description":1202,"extension":472,"faqs":1203,"image":470,"meta":1213,"navigation":486,"path":1214,"readingTime":599,"relatedSlugs":1215,"seo":1218,"stem":1219,"tags":1220,"__hash__":1223},"apiBlog/api-blog/how-to-extract-design-tokens-from-any-website-in-python.md",{"type":8,"value":505,"toc":1185},[506,513,516,520,523,549,552,750,753,761,775,779,782,821,824,828,831,870,874,877,939,943,1022,1028,1032,1035,1065,1095,1103,1107,1117,1119,1123,1126,1130,1142,1146,1149,1153,1156,1160,1182],[11,507,508,509,512],{},"The fastest way to extract design tokens from a website in Python is Playwright plus ",[118,510,511],{},"getComputedStyle()",": load the page in a real browser, collect the computed styles of every element, and count what repeats. The counting is the important part. A site's design system is whatever it uses everywhere, not every value that appears once in a forgotten footer.",[11,514,515],{},"Parsing CSS files without a browser is the approach most tutorials suggest, and it is the one that works worst on modern sites. More on that below.",[15,517,519],{"id":518},"extract-colors-with-playwright","Extract colors with Playwright",[11,521,522],{},"First, install Playwright and a browser:",[181,524,526],{"className":183,"code":525,"language":185,"meta":186,"style":186},"pip install playwright\nplaywright install chromium\n",[118,527,528,539],{"__ignoreMap":186},[190,529,530,533,536],{"class":192,"line":193},[190,531,532],{"class":196},"pip",[190,534,535],{"class":204}," install",[190,537,538],{"class":204}," playwright\n",[190,540,541,544,546],{"class":192,"line":215},[190,542,543],{"class":196},"playwright",[190,545,535],{"class":204},[190,547,548],{"class":204}," chromium\n",[11,550,551],{},"Then collect styles from every element and count them:",[181,553,557],{"className":554,"code":555,"language":556,"meta":186,"style":186},"language-python shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","from collections import Counter\nfrom playwright.sync_api import sync_playwright\n\nCOLLECT = \"\"\"\n() => {\n  const els = [...document.querySelectorAll('body *')].slice(0, 5000);\n  const out = { colors: [], fonts: [], sizes: [], radii: [], shadows: [] };\n  for (const el of els) {\n    const s = getComputedStyle(el);\n    out.colors.push(s.color, s.backgroundColor, s.borderTopColor);\n    out.fonts.push(s.fontFamily);\n    out.sizes.push(s.fontSize);\n    out.radii.push(s.borderTopLeftRadius);\n    out.shadows.push(s.boxShadow);\n  }\n  return out;\n}\n\"\"\"\n\ndef top(values, n=8, skip=(\"\", \"none\", \"normal\", \"auto\", \"0px\", \"rgba(0, 0, 0, 0)\")):\n    return Counter(v for v in values if v not in skip).most_common(n)\n\nwith sync_playwright() as p:\n    browser = p.chromium.launch()\n    page = browser.new_page(viewport={\"width\": 1440, \"height\": 900})\n    page.goto(\"https://stripe.com\", wait_until=\"networkidle\")\n    raw = page.evaluate(COLLECT)\n    browser.close()\n\nfor name in (\"colors\", \"fonts\", \"sizes\", \"radii\", \"shadows\"):\n    print(f\"\\n== {name} ==\")\n    for value, count in top(raw[name]):\n        print(f\"{count:>5}  {value}\")\n","python",[118,558,559,564,569,574,580,586,592,597,603,609,615,621,627,633,639,645,651,657,663,668,674,680,685,691,697,703,709,715,721,726,732,738,744],{"__ignoreMap":186},[190,560,561],{"class":192,"line":193},[190,562,563],{},"from collections import Counter\n",[190,565,566],{"class":192,"line":215},[190,567,568],{},"from playwright.sync_api import sync_playwright\n",[190,570,571],{"class":192,"line":464},[190,572,573],{"emptyLinePlaceholder":486},"\n",[190,575,577],{"class":192,"line":576},4,[190,578,579],{},"COLLECT = \"\"\"\n",[190,581,583],{"class":192,"line":582},5,[190,584,585],{},"() => {\n",[190,587,589],{"class":192,"line":588},6,[190,590,591],{},"  const els = [...document.querySelectorAll('body *')].slice(0, 5000);\n",[190,593,594],{"class":192,"line":488},[190,595,596],{},"  const out = { colors: [], fonts: [], sizes: [], radii: [], shadows: [] };\n",[190,598,600],{"class":192,"line":599},8,[190,601,602],{},"  for (const el of els) {\n",[190,604,606],{"class":192,"line":605},9,[190,607,608],{},"    const s = getComputedStyle(el);\n",[190,610,612],{"class":192,"line":611},10,[190,613,614],{},"    out.colors.push(s.color, s.backgroundColor, s.borderTopColor);\n",[190,616,618],{"class":192,"line":617},11,[190,619,620],{},"    out.fonts.push(s.fontFamily);\n",[190,622,624],{"class":192,"line":623},12,[190,625,626],{},"    out.sizes.push(s.fontSize);\n",[190,628,630],{"class":192,"line":629},13,[190,631,632],{},"    out.radii.push(s.borderTopLeftRadius);\n",[190,634,636],{"class":192,"line":635},14,[190,637,638],{},"    out.shadows.push(s.boxShadow);\n",[190,640,642],{"class":192,"line":641},15,[190,643,644],{},"  }\n",[190,646,648],{"class":192,"line":647},16,[190,649,650],{},"  return out;\n",[190,652,654],{"class":192,"line":653},17,[190,655,656],{},"}\n",[190,658,660],{"class":192,"line":659},18,[190,661,662],{},"\"\"\"\n",[190,664,666],{"class":192,"line":665},19,[190,667,573],{"emptyLinePlaceholder":486},[190,669,671],{"class":192,"line":670},20,[190,672,673],{},"def top(values, n=8, skip=(\"\", \"none\", \"normal\", \"auto\", \"0px\", \"rgba(0, 0, 0, 0)\")):\n",[190,675,677],{"class":192,"line":676},21,[190,678,679],{},"    return Counter(v for v in values if v not in skip).most_common(n)\n",[190,681,683],{"class":192,"line":682},22,[190,684,573],{"emptyLinePlaceholder":486},[190,686,688],{"class":192,"line":687},23,[190,689,690],{},"with sync_playwright() as p:\n",[190,692,694],{"class":192,"line":693},24,[190,695,696],{},"    browser = p.chromium.launch()\n",[190,698,700],{"class":192,"line":699},25,[190,701,702],{},"    page = browser.new_page(viewport={\"width\": 1440, \"height\": 900})\n",[190,704,706],{"class":192,"line":705},26,[190,707,708],{},"    page.goto(\"https://stripe.com\", wait_until=\"networkidle\")\n",[190,710,712],{"class":192,"line":711},27,[190,713,714],{},"    raw = page.evaluate(COLLECT)\n",[190,716,718],{"class":192,"line":717},28,[190,719,720],{},"    browser.close()\n",[190,722,724],{"class":192,"line":723},29,[190,725,573],{"emptyLinePlaceholder":486},[190,727,729],{"class":192,"line":728},30,[190,730,731],{},"for name in (\"colors\", \"fonts\", \"sizes\", \"radii\", \"shadows\"):\n",[190,733,735],{"class":192,"line":734},31,[190,736,737],{},"    print(f\"\\n== {name} ==\")\n",[190,739,741],{"class":192,"line":740},32,[190,742,743],{},"    for value, count in top(raw[name]):\n",[190,745,747],{"class":192,"line":746},33,[190,748,749],{},"        print(f\"{count:>5}  {value}\")\n",[11,751,752],{},"Run it and you get something like:",[181,754,759],{"className":755,"code":757,"language":758},[756],"language-text","== colors ==\n 3021  rgb(255, 255, 255)\n 1204  rgb(26, 27, 37)\n  412  rgb(99, 91, 255)\n  118  rgb(66, 84, 102)\n","text",[118,760,757],{"__ignoreMap":186},[11,762,763,764,766,767,770,771,774],{},"That third line is the brand color, found by nothing smarter than counting. ",[118,765,120],{}," has already done the hard work for you: it resolved every CSS variable chain, every ",[118,768,769],{},"var(--a, var(--b))"," fallback, every cascade conflict, and turned Tailwind utility soup into plain ",[118,772,773],{},"rgb()"," values.",[15,776,778],{"id":777},"fonts-and-the-type-scale","Fonts and the type scale",[11,780,781],{},"The same collection already has them. Font families come back as full stacks, so take the first entry:",[181,783,785],{"className":554,"code":784,"language":556,"meta":186,"style":186},"families = Counter(f.split(\",\")[0].strip('\"\\' ') for f in raw[\"fonts\"])\nprint(families.most_common(5))\n\nsizes = sorted(\n    {float(s.replace(\"px\", \"\")) for s, c in top(raw[\"sizes\"], n=20)},\n)\nprint(sizes)  # e.g. [12.0, 14.0, 16.0, 18.0, 20.0, 24.0, 36.0, 56.0]\n",[118,786,787,792,797,801,806,811,816],{"__ignoreMap":186},[190,788,789],{"class":192,"line":193},[190,790,791],{},"families = Counter(f.split(\",\")[0].strip('\"\\' ') for f in raw[\"fonts\"])\n",[190,793,794],{"class":192,"line":215},[190,795,796],{},"print(families.most_common(5))\n",[190,798,799],{"class":192,"line":464},[190,800,573],{"emptyLinePlaceholder":486},[190,802,803],{"class":192,"line":576},[190,804,805],{},"sizes = sorted(\n",[190,807,808],{"class":192,"line":582},[190,809,810],{},"    {float(s.replace(\"px\", \"\")) for s, c in top(raw[\"sizes\"], n=20)},\n",[190,812,813],{"class":192,"line":588},[190,814,815],{},")\n",[190,817,818],{"class":192,"line":488},[190,819,820],{},"print(sizes)  # e.g. [12.0, 14.0, 16.0, 18.0, 20.0, 24.0, 36.0, 56.0]\n",[11,822,823],{},"That sorted list is the site's type scale. If it has fifteen entries instead of seven, you are looking at a site without a design system, which is also useful to know.",[15,825,827],{"id":826},"from-raw-values-to-actual-tokens","From raw values to actual tokens",[11,829,830],{},"Raw counts are not tokens yet. Three cleanup steps matter:",[832,833,834,844,857],"ol",{},[33,835,836,839,840,843],{},[36,837,838],{},"Drop the defaults."," ",[118,841,842],{},"rgb(0, 0, 0)"," near the top does not mean the brand is black. Browser resets and inherited defaults pollute every element, so check whether a value actually appears on visible, styled elements before promoting it.",[33,845,846,839,849,852,853,856],{},[36,847,848],{},"Merge near-duplicates.",[118,850,851],{},"rgb(99, 91, 255)"," and ",[118,854,855],{},"rgb(99, 92, 255)"," are the same token with a rounding disagreement. Snap channels to a small tolerance before counting, or you will split one token's count across five entries.",[33,858,859,862,863,866,867,869],{},[36,860,861],{},"Name by role, not by value."," The most frequent saturated color on buttons and links is ",[118,864,865],{},"primary",". The dominant text color is ",[118,868,758],{},". Frequency plus element context gets you there; k-means clustering is overkill for this and I would skip it.",[15,871,873],{"id":872},"common-problems","Common problems",[11,875,876],{},"Real gotchas, in the order they will bite you:",[30,878,879,889,895,912,925],{},[33,880,881,884,885,888],{},[36,882,883],{},"Your viewport is a filter."," Computed styles reflect the current viewport only. A ",[118,886,887],{},"@media (max-width: 640px)"," override is invisible at 1440px. Extract at two viewports (mobile and desktop) if you care about responsive tokens.",[33,890,891,894],{},[36,892,893],{},"Cookie banners poison the palette."," Consent overlays and chat widgets bring their own colors and fonts, and they are often thousands of DOM nodes. Dismiss them or exclude their containers before collecting.",[33,896,897,839,900,903,904,907,908,911],{},[36,898,899],{},"Fonts can lie.",[118,901,902],{},"font-family"," lists what CSS asked for, not what loaded. With ",[118,905,906],{},"font-display: swap"," the brand font may never arrive in a headless run. Await ",[118,909,910],{},"document.fonts.ready"," before collecting if exact loaded fonts matter.",[33,913,914,920,921,924],{},[36,915,916,917,126],{},"Gradients are not in ",[118,918,919],{},"backgroundColor"," They live in ",[118,922,923],{},"backgroundImage",". If a brand is gradient-heavy, collect that property too or you will report their hero as plain white.",[33,926,927,930,931,934,935,938],{},[36,928,929],{},"Shadow DOM and iframes are invisible"," to ",[118,932,933],{},"querySelectorAll",". Web-component-heavy sites need you to walk ",[118,936,937],{},"shadowRoot","s explicitly.",[15,940,942],{"id":941},"diy-vs-parsing-css-vs-an-api","DIY vs parsing CSS vs an API",[256,944,945,967],{},[259,946,947],{},[262,948,949,952,955,958,961,964],{},[265,950,951],{},"Approach",[265,953,954],{},"Tailwind / utility CSS",[265,956,957],{},"Runtime CSS-in-JS",[265,959,960],{},"Resolves var() and cascade",[265,962,963],{},"Media queries",[265,965,966],{},"Maintenance",[281,968,969,986,1004],{},[262,970,971,974,976,978,980,983],{},[286,972,973],{},"Playwright + computed styles (this guide)",[286,975,373],{},[286,977,373],{},[286,979,373],{},[286,981,982],{},"Current viewport only",[286,984,985],{},"Browser infra is yours to run",[262,987,988,991,994,996,998,1001],{},[286,989,990],{},"Parse CSS files yourself (tinycss2, no browser)",[286,992,993],{},"Painful",[286,995,297],{},[286,997,297],{},[286,999,1000],{},"Declared, but unused values included",[286,1002,1003],{},"Low, but wrong on modern sites",[262,1005,1006,1009,1011,1014,1016,1019],{},[286,1007,1008],{},"MiroMiro extract API",[286,1010,373],{},[286,1012,1013],{},"No (static HTML + CSS, no JS execution)",[286,1015,373],{},[286,1017,1018],{},"Yes, all declared breakpoints",[286,1020,1021],{},"None",[11,1023,1024,1025,1027],{},"Use the Playwright approach if you are extracting from a handful of sites, need runtime-injected styles, and want full control. Skip the hand-rolled CSS-parsing route: resolving the cascade, specificity, and nested ",[118,1026,239],{}," fallbacks yourself is a project, not a script.",[15,1029,1031],{"id":1030},"or-use-one-api-call","Or use one API call",[11,1033,1034],{},"The dedupe, the ranking, the var() chains, the resets, and every declared breakpoint - that is what our extract endpoint does for a living:",[181,1036,1038],{"className":183,"code":1037,"language":185,"meta":186,"style":186},"curl \"https://miromiro.app/api/v1/extract?url=stripe.com\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[118,1039,1040,1053],{"__ignoreMap":186},[190,1041,1042,1044,1046,1049,1051],{"class":192,"line":193},[190,1043,197],{"class":196},[190,1045,201],{"class":200},[190,1047,1048],{"class":204},"https://miromiro.app/api/v1/extract?url=stripe.com",[190,1050,208],{"class":200},[190,1052,212],{"class":211},[190,1054,1055,1057,1059,1061,1063],{"class":192,"line":215},[190,1056,218],{"class":204},[190,1058,201],{"class":200},[190,1060,223],{"class":204},[190,1062,226],{"class":211},[190,1064,229],{"class":200},[11,1066,1067,1068,1071,1072,1071,1075,1071,1078,1071,1081,1071,1084,1071,1087,1090,1091,1094],{},"The JSON response has ",[118,1069,1070],{},"colors",", ",[118,1073,1074],{},"fontFamilies",[118,1076,1077],{},"fontSizes",[118,1079,1080],{},"fontWeights",[118,1082,1083],{},"spacing",[118,1085,1086],{},"borderRadiuses",[118,1088,1089],{},"boxShadows",", and more, already deduped and ranked. Trim it with ",[118,1092,1093],{},"?fields=colors,spacing"," if you only need part of it.",[11,1096,1097,1098,1100,1101,126],{},"If your script from this guide breaks on some site's cookie banner at 2am, that is roughly the moment an API earns its keep. You can ",[22,1099,387],{"href":386}," with 100 credits a month, no card, or try it without signing up in the ",[22,1102,392],{"href":391},[15,1104,1106],{"id":1105},"summary","Summary",[11,1108,1109,1110,1112,1113,1116],{},"Playwright plus ",[118,1111,120],{}," plus a ",[118,1114,1115],{},"Counter"," is the honest way to extract design tokens in Python, and the frequency counting matters more than any clever clustering. Parse-the-CSS approaches are not worth your time on modern sites. I hope this saved you a debugging evening.",[15,1118,397],{"id":396},[399,1120,1122],{"id":1121},"can-i-extract-design-tokens-without-a-headless-browser","Can I extract design tokens without a headless browser?",[11,1124,1125],{},"You can parse the site's CSS with a library like tinycss2, but on modern sites this works badly: CSS-in-JS generates styles at runtime, Tailwind buries the palette in utility classes, and you cannot tell which declared values are actually used. Computed styles from a real browser are the ground truth.",[399,1127,1129],{"id":1128},"how-do-i-extract-tokens-from-a-tailwind-site-where-everything-is-utility-classes","How do I extract tokens from a Tailwind site where everything is utility classes?",[11,1131,1132,1133,1135,1136,930,1138,1141],{},"Ignore the class names entirely and read computed styles. ",[118,1134,120],{}," resolves ",[118,1137,434],{},[118,1139,1140],{},"rgb(79, 70, 229)"," like any other CSS, so nothing in this guide changes.",[399,1143,1145],{"id":1144},"why-do-my-extracted-colors-include-values-the-site-never-visibly-uses","Why do my extracted colors include values the site never visibly uses?",[11,1147,1148],{},"Three usual suspects: browser defaults on elements you collected, cookie banners and chat widgets injecting their own palette, and transparent or inherited values you forgot to filter.",[399,1150,1152],{"id":1151},"how-many-pages-should-i-sample","How many pages should I sample?",[11,1154,1155],{},"One landing page is usually enough for brand color and typography. Add one product or app page for functional colors (success, error, info). More than three pages rarely changes the top tokens.",[15,1157,1159],{"id":1158},"related-reading","Related reading",[30,1161,1162,1169,1175],{},[33,1163,1164,1168],{},[22,1165,1167],{"href":1166},"/api/design-tokens-api","Design tokens API"," - the endpoint this post's shortcut uses",[33,1170,1171,1174],{},[22,1172,1173],{"href":423},"Design tokens docs"," - full response shape and field list",[33,1176,1177,1181],{},[22,1178,1180],{"href":1179},"/api/use-cases/ai-agent-ground-truth","Ground truth for AI agents"," - why agents need real tokens instead of guessing from screenshots",[448,1183,1184],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":186,"searchDepth":215,"depth":215,"links":1186},[1187,1188,1189,1190,1191,1192,1193,1194,1200],{"id":518,"depth":215,"text":519},{"id":777,"depth":215,"text":778},{"id":826,"depth":215,"text":827},{"id":872,"depth":215,"text":873},{"id":941,"depth":215,"text":942},{"id":1030,"depth":215,"text":1031},{"id":1105,"depth":215,"text":1106},{"id":396,"depth":215,"text":397,"children":1195},[1196,1197,1198,1199],{"id":1121,"depth":464,"text":1122},{"id":1128,"depth":464,"text":1129},{"id":1144,"depth":464,"text":1145},{"id":1151,"depth":464,"text":1152},{"id":1158,"depth":215,"text":1159},"Tutorials","Extract colors, fonts, spacing, and shadows from any website with Playwright in Python - working code, the gotchas that bite, and the one-API-call shortcut.",[1204,1206,1208,1210],{"question":1122,"answer":1205},"You can parse the site's CSS files with a library like tinycss2, but on modern sites this works badly. CSS-in-JS generates styles at runtime, utility-class sites like Tailwind bury the palette in thousands of class rules, and you cannot tell which declared values are actually used. Computed styles from a real browser are the ground truth.",{"question":1129,"answer":1207},"Ignore the class names entirely and read computed styles. getComputedStyle resolves bg-indigo-600 to rgb(79, 70, 229) the same way it resolves any other CSS, so the frequency-counting approach in this guide works unchanged.",{"question":1145,"answer":1209},"Three usual suspects: browser default styles on elements you collected, cookie banners and chat widgets injecting their own palette, and transparent or inherited values you forgot to filter. Count frequency, filter defaults, and dismiss overlays before collecting.",{"question":1211,"answer":1212},"How many pages should I sample to get a reliable palette?","One page is usually enough for brand color and typography if it is the homepage or a landing page. Add one product or app page for the functional palette (success, error, info states). More than three pages rarely changes the top tokens.",{},"/api-blog/how-to-extract-design-tokens-from-any-website-in-python",[1216,491,1217],"best-design-token-extraction-tools-2026","how-to-extract-website-color-palette-programmatically",{"title":125,"description":1202},"api-blog/how-to-extract-design-tokens-from-any-website-in-python",[496,556,543,1221,1222],"css","web extraction","L5qnHk0I6Xw2LZ4KpLx52C6CU18QlatcV45aNNbr8F0",{"id":1225,"title":1226,"author":6,"body":1227,"category":1799,"date":469,"dateModified":470,"description":1800,"extension":472,"faqs":1801,"image":470,"meta":1812,"navigation":486,"path":1813,"readingTime":588,"relatedSlugs":1814,"seo":1816,"stem":1817,"tags":1818,"__hash__":1821},"apiBlog/api-blog/design-token-types-reference.md","Design Token Types: Every Token a Website Exposes (Reference)",{"type":8,"value":1228,"toc":1788},[1229,1232,1239,1243,1605,1609,1615,1627,1633,1642,1646,1653,1683,1741,1743,1747,1750,1754,1757,1761,1764,1768,1786],[11,1230,1231],{},"This is the reference we wish had existed when we built our extraction engine: every token type a live website exposes, the CSS properties each one comes from, and the gotcha that silently corrupts it. Seventeen groups, one table each way.",[11,1233,1234,1235,1238],{},"If you want the extraction code itself, that is in the ",[22,1236,1237],{"href":124},"Python tokens guide",". This page is the map.",[15,1240,1242],{"id":1241},"the-complete-token-table","The complete token table",[256,1244,1245,1261],{},[259,1246,1247],{},[262,1248,1249,1252,1255,1258],{},[265,1250,1251],{},"Token group",[265,1253,1254],{},"CSS sources",[265,1256,1257],{},"What good output looks like",[265,1259,1260],{},"The gotcha",[281,1262,1263,1291,1317,1332,1352,1376,1392,1414,1436,1458,1474,1490,1506,1522,1544,1569,1588],{},[262,1264,1265,1268,1285,1288],{},[286,1266,1267],{},"Colors",[286,1269,1270,1071,1273,1071,1276,1071,1279,1071,1282],{},[118,1271,1272],{},"color",[118,1274,1275],{},"background-color",[118,1277,1278],{},"border-*-color",[118,1280,1281],{},"fill",[118,1283,1284],{},"stroke",[286,1286,1287],{},"5-12 ranked values, not 200",[286,1289,1290],{},"Browser defaults and cookie banners pollute counts",[262,1292,1293,1296,1304,1311],{},[286,1294,1295],{},"Gradients",[286,1297,1298,1071,1301],{},[118,1299,1300],{},"background-image",[118,1302,1303],{},"mask-image",[286,1305,1306,1307,1310],{},"Full ",[118,1308,1309],{},"linear-gradient(...)"," strings",[286,1312,1313,1314,1316],{},"Not in ",[118,1315,1275],{}," - miss this and gradient brands report as white",[262,1318,1319,1322,1326,1329],{},[286,1320,1321],{},"Font families",[286,1323,1324],{},[118,1325,902],{},[286,1327,1328],{},"1-3 families with roles (heading/body/mono)",[286,1330,1331],{},"The stack lists what CSS asked for, not what loaded",[262,1333,1334,1337,1342,1345],{},[286,1335,1336],{},"Font sizes",[286,1338,1339],{},[118,1340,1341],{},"font-size",[286,1343,1344],{},"A scale: 12, 14, 16, 20, 24, 36, 56",[286,1346,1347,1348,1351],{},"Fluid ",[118,1349,1350],{},"clamp()"," values resolve differently per viewport",[262,1353,1354,1357,1362,1365],{},[286,1355,1356],{},"Font weights",[286,1358,1359],{},[118,1360,1361],{},"font-weight",[286,1363,1364],{},"3-5 weights actually used",[286,1366,1367,1368,1371,1372,1375],{},"Keyword values (",[118,1369,1370],{},"bold",") and numbers (",[118,1373,1374],{},"700",") need normalizing",[262,1377,1378,1381,1386,1389],{},[286,1379,1380],{},"Line heights",[286,1382,1383],{},[118,1384,1385],{},"line-height",[286,1387,1388],{},"Unitless ratios per size tier",[286,1390,1391],{},"Computed styles return px; divide by font-size to recover the ratio",[262,1393,1394,1397,1402,1409],{},[286,1395,1396],{},"Letter spacing",[286,1398,1399],{},[118,1400,1401],{},"letter-spacing",[286,1403,1404,1405,1408],{},"Tight values on headings, ",[118,1406,1407],{},"normal"," elsewhere",[286,1410,1411,1413],{},[118,1412,1407],{}," is a value, not an absence",[262,1415,1416,1419,1430,1433],{},[286,1417,1418],{},"Spacing",[286,1420,1421,1071,1424,1071,1427],{},[118,1422,1423],{},"margin",[118,1425,1426],{},"padding",[118,1428,1429],{},"gap",[286,1431,1432],{},"A grid: 4, 8, 12, 16, 24, 32, 48, 64",[286,1434,1435],{},"Snap to the base unit or you get 40 near-duplicates",[262,1437,1438,1441,1446,1449],{},[286,1439,1440],{},"Border radii",[286,1442,1443],{},[118,1444,1445],{},"border-radius",[286,1447,1448],{},"2-4 values (subtle, card, pill)",[286,1450,1451,852,1454,1457],{},[118,1452,1453],{},"9999px",[118,1455,1456],{},"50%"," are the same intent, different strings",[262,1459,1460,1463,1468,1471],{},[286,1461,1462],{},"Border widths",[286,1464,1465],{},[118,1466,1467],{},"border-width",[286,1469,1470],{},"1-2 values",[286,1472,1473],{},"Mostly 1px everywhere; the outliers are the signal",[262,1475,1476,1479,1484,1487],{},[286,1477,1478],{},"Box shadows",[286,1480,1481],{},[118,1482,1483],{},"box-shadow",[286,1485,1486],{},"2-4 elevation levels",[286,1488,1489],{},"Multi-layer shadows are one token, not four",[262,1491,1492,1495,1500,1503],{},[286,1493,1494],{},"Text shadows",[286,1496,1497],{},[118,1498,1499],{},"text-shadow",[286,1501,1502],{},"Usually empty; notable when not",[286,1504,1505],{},"Rare enough that any hit is worth keeping",[262,1507,1508,1511,1516,1519],{},[286,1509,1510],{},"Opacities",[286,1512,1513],{},[118,1514,1515],{},"opacity",[286,1517,1518],{},"Disabled/overlay/hover steps",[286,1520,1521],{},"Transition intermediate values sneak in if you sample mid-animation",[262,1523,1524,1527,1535,1538],{},[286,1525,1526],{},"Durations",[286,1528,1529,1071,1532],{},[118,1530,1531],{},"transition-duration",[118,1533,1534],{},"animation-duration",[286,1536,1537],{},"150ms/300ms/500ms tiers",[286,1539,1540,1543],{},[118,1541,1542],{},"0s"," is a default, not a token",[262,1545,1546,1549,1557,1563],{},[286,1547,1548],{},"Easings",[286,1550,1551,1071,1554],{},[118,1552,1553],{},"transition-timing-function",[118,1555,1556],{},"animation-timing-function",[286,1558,1559,1560],{},"The brand's ",[118,1561,1562],{},"cubic-bezier(...)",[286,1564,1565,1568],{},[118,1566,1567],{},"ease"," defaults drown the custom curves - filter them",[262,1570,1571,1574,1579,1582],{},[286,1572,1573],{},"Z-index layers",[286,1575,1576],{},[118,1577,1578],{},"z-index",[286,1580,1581],{},"The layering scale: 10, 50, 100, 9999",[286,1583,1584,1587],{},[118,1585,1586],{},"auto"," everywhere except the 5 values that matter",[262,1589,1590,1593,1599,1602],{},[286,1591,1592],{},"Breakpoints",[286,1594,1595,1598],{},[118,1596,1597],{},"@media"," conditions",[286,1600,1601],{},"3-5 widths: 640, 768, 1024, 1280",[286,1603,1604],{},"Only visible in stylesheets - computed styles never expose them",[15,1606,1608],{"id":1607},"the-same-table-by-extraction-difficulty","The same table, by extraction difficulty",[11,1610,1611,1614],{},[36,1612,1613],{},"Free (one property read):"," colors, font families, font sizes, font weights, opacities, z-index.",[11,1616,1617,1620,1621,1623,1624,1626],{},[36,1618,1619],{},"Needs normalizing:"," line heights (px to ratio), spacing (grid snapping), radii (",[118,1622,1453],{}," = ",[118,1625,1456],{}," = pill), weights (keywords to numbers), shadows (multi-layer grouping).",[11,1628,1629,1632],{},[36,1630,1631],{},"Needs the stylesheet, not computed styles:"," breakpoints, and any media-query variant of everything else. This is the structural reason a computed-styles-only extractor reports one viewport and calls it the design system.",[11,1634,1635,1638,1639,1641],{},[36,1636,1637],{},"Needs judgment:"," which color is ",[118,1640,865],{}," (frequency plus element context - what is on the buttons), which durations are intentional vs defaults, which fonts actually loaded.",[15,1643,1645],{"id":1644},"how-this-maps-to-the-api","How this maps to the API",[11,1647,1648,1649,1652],{},"Every group in the table is a field on our extract endpoint, selectable with ",[118,1650,1651],{},"?fields=",":",[181,1654,1656],{"className":183,"code":1655,"language":185,"meta":186,"style":186},"curl \"https://miromiro.app/api/v1/extract?url=stripe.com&fields=colors,spacing,easings\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[118,1657,1658,1671],{"__ignoreMap":186},[190,1659,1660,1662,1664,1667,1669],{"class":192,"line":193},[190,1661,197],{"class":196},[190,1663,201],{"class":200},[190,1665,1666],{"class":204},"https://miromiro.app/api/v1/extract?url=stripe.com&fields=colors,spacing,easings",[190,1668,208],{"class":200},[190,1670,212],{"class":211},[190,1672,1673,1675,1677,1679,1681],{"class":192,"line":215},[190,1674,218],{"class":204},[190,1676,201],{"class":200},[190,1678,223],{"class":204},[190,1680,226],{"class":211},[190,1682,229],{"class":200},[11,1684,1685,1686,1071,1688,1071,1691,1071,1693,1071,1695,1071,1697,1071,1700,1071,1703,1071,1705,1071,1707,1071,1710,1071,1712,1071,1715,1071,1718,1071,1721,1071,1724,1071,1727,1730,1731,1733,1734,1736,1737,1740],{},"The full field list: ",[118,1687,1070],{},[118,1689,1690],{},"gradients",[118,1692,1074],{},[118,1694,1077],{},[118,1696,1080],{},[118,1698,1699],{},"lineHeights",[118,1701,1702],{},"letterSpacings",[118,1704,1083],{},[118,1706,1086],{},[118,1708,1709],{},"borderWidths",[118,1711,1089],{},[118,1713,1714],{},"textShadows",[118,1716,1717],{},"opacities",[118,1719,1720],{},"durations",[118,1722,1723],{},"easings",[118,1725,1726],{},"zIndexes",[118,1728,1729],{},"breakpoints",". Add ",[118,1732,415],{}," or ",[118,1735,419],{}," to get the same data as custom properties or a theme block instead of JSON. One call is 10 credits; ",[22,1738,1739],{"href":386},"100 credits a month are free",", no card.",[15,1742,397],{"id":396},[399,1744,1746],{"id":1745},"what-are-the-main-types-of-design-tokens","What are the main types of design tokens?",[11,1748,1749],{},"Color, typography (families/sizes/weights/line heights/letter spacing), spacing, borders (radii/widths), effects (shadows/gradients/opacities), motion (durations/easings), and structure (z-index, breakpoints). Seventeen groups in total from a live site.",[399,1751,1753],{"id":1752},"are-css-custom-properties-the-same-as-design-tokens","Are CSS custom properties the same as design tokens?",[11,1755,1756],{},"No. Custom properties are one storage format. Tailwind and CSS-in-JS sites often ship almost none while having rigorous token systems. Extract resolved values, not variable names.",[399,1758,1760],{"id":1759},"which-tokens-matter-most","Which tokens matter most?",[11,1762,1763],{},"Colors, type scale, spacing - in that order. They carry the identity. Radii, shadows, and motion are what make a rebuild feel like the original instead of a wireframe of it.",[399,1765,1767],{"id":1766},"can-i-extract-motion-tokens-from-a-website","Can I extract motion tokens from a website?",[11,1769,1770,1771,1071,1773,1775,1776,1778,1779,1781,1782,852,1784,126],{},"Yes: ",[118,1772,1531],{},[118,1774,1534],{},", and their timing functions. Filter out ",[118,1777,1542],{}," and default ",[118,1780,1567],{}," or the real values drown. Our extract endpoint returns them as ",[118,1783,1720],{},[118,1785,1723],{},[448,1787,450],{},{"title":186,"searchDepth":215,"depth":215,"links":1789},[1790,1791,1792,1793],{"id":1241,"depth":215,"text":1242},{"id":1607,"depth":215,"text":1608},{"id":1644,"depth":215,"text":1645},{"id":396,"depth":215,"text":397,"children":1794},[1795,1796,1797,1798],{"id":1745,"depth":464,"text":1746},{"id":1752,"depth":464,"text":1753},{"id":1759,"depth":464,"text":1760},{"id":1766,"depth":464,"text":1767},"Reference","All 17 design token types a website exposes - the CSS properties each comes from, what good output looks like, and the gotcha that silently corrupts it.",[1802,1804,1807,1809],{"question":1746,"answer":1803},"Color tokens, typography tokens (families, sizes, weights, line heights, letter spacing), spacing tokens, border tokens (radii, widths), effect tokens (shadows, gradients, opacities), motion tokens (durations, easings), and structural tokens (z-index layers, breakpoints). A complete extraction from a live site covers around 17 distinct groups.",{"question":1805,"answer":1806},"Which CSS properties do design tokens come from?","Each token group maps to specific CSS properties: colors from color, background-color and border-color; the type scale from font-size; spacing from margin, padding and gap; radii from border-radius; shadows from box-shadow; motion from transition-duration, animation-duration and their timing functions; breakpoints from media query conditions.",{"question":1753,"answer":1808},"No. Custom properties are one way a site stores tokens. Many production sites - especially Tailwind and CSS-in-JS codebases - ship few or no custom properties while still having a rigorous token system. Extract from resolved values, not variable names, or you will miss most real-world systems.",{"question":1810,"answer":1811},"What order should I extract tokens in?","Colors, type scale, and spacing first - they carry most of a site's identity and are enough to theme a rough UI. Radii, shadows, and motion are the polish layer that makes a rebuild feel like the original.",{},"/api-blog/design-token-types-reference",[490,1216,1815],"how-to-detect-fonts-a-website-uses",{"title":1226,"description":1800},"api-blog/design-token-types-reference",[496,1819,1221,1820],"reference","cheatsheet","Q2H5fOPEU9oXwkGDkaF1v9diKxKTdrdCh3xo9PqdAaM",{"id":1823,"title":1824,"author":6,"body":1825,"category":468,"date":469,"dateModified":470,"description":2168,"extension":472,"faqs":2169,"image":470,"meta":2180,"navigation":486,"path":2181,"readingTime":488,"relatedSlugs":2182,"seo":2184,"stem":2185,"tags":2186,"__hash__":2190},"apiBlog/api-blog/best-design-to-code-apis-2026.md","Best Design-to-Code APIs and Tools in 2026",{"type":8,"value":1826,"toc":2154},[1827,1830,1833,1837,1862,1880,1884,1894,1911,1915,1925,1942,1946,1954,1984,1990,2007,2011,2111,2113,2122,2124,2128,2131,2135,2138,2142,2145,2149,2152],[11,1828,1829],{},"\"Design to code\" means four different products depending on what goes in: a Figma file, a screenshot, a prompt, or a live URL. Most listicles mix them together and compare a Figma plugin against an AI app builder, which helps nobody. Here is the landscape sorted by input, with an honest read on each.",[11,1831,1832],{},"Disclosure up front: we build the URL-to-code entry. The others are genuinely good at their own input type, and I will say so.",[15,1834,1836],{"id":1835},"input-a-figma-file","Input: a Figma file",[11,1838,1839,852,1846,1853,1854,1861],{},[36,1840,1841],{},[22,1842,1845],{"href":1843,"rel":1844},"https://www.animaapp.com",[26],"Anima",[36,1847,1848],{},[22,1849,1852],{"href":1850,"rel":1851},"https://www.locofy.ai",[26],"Locofy"," are the established Figma-to-code plugins - React/HTML output, component mapping, years of production use. ",[36,1855,1856],{},[22,1857,1860],{"href":1858,"rel":1859},"https://www.builder.io",[26],"Builder.io's Visual Copilot"," is the newer AI take on the same job.",[30,1863,1864,1869,1874],{},[33,1865,1866,1868],{},[36,1867,38],{}," if your designs live in Figma with proper auto-layout, these produce real component code and preserve design intent.",[33,1870,1871,1873],{},[36,1872,44],{}," they need a Figma file. Messy layers produce messy code, and there is no path from \"site I saw\" to code - someone has to design it first.",[33,1875,1876,1879],{},[36,1877,1878],{},"Use when:"," your team designs in Figma and wants the handoff automated.",[15,1881,1883],{"id":1882},"input-a-screenshot","Input: a screenshot",[11,1885,1886,1893],{},[36,1887,1888],{},[22,1889,1892],{"href":1890,"rel":1891},"https://github.com/abi/screenshot-to-code",[26],"screenshot-to-code"," (open source, very popular) and the screenshot modes of various AI tools take a picture and ask a vision model to write matching HTML/Tailwind.",[30,1895,1896,1901,1906],{},[33,1897,1898,1900],{},[36,1899,38],{}," works on anything you can see. Zero setup for the OSS version. Genuinely impressive first drafts.",[33,1902,1903,1905],{},[36,1904,44],{}," every value is a guess. The model approximates colors from pixels, eyeballs spacing, and invents font stacks. Two runs give two different answers. Fine for a prototype, dangerous as a source of truth.",[33,1907,1908,1910],{},[36,1909,1878],{}," speed matters more than fidelity.",[15,1912,1914],{"id":1913},"input-a-prompt","Input: a prompt",[11,1916,1917,1924],{},[36,1918,1919],{},[22,1920,1923],{"href":1921,"rel":1922},"https://v0.dev",[26],"v0"," (Vercel) and its peers generate UI from a text description. Strictly speaking that is prompt-to-code, not design-to-code, but it is where much of the category's attention went.",[30,1926,1927,1932,1937],{},[33,1928,1929,1931],{},[36,1930,38],{}," the fastest way to get a decent generic component that never existed before.",[33,1933,1934,1936],{},[36,1935,44],{}," the output looks like v0 output. If the goal is \"match this existing brand\", a prompt cannot carry a design system's worth of values.",[33,1938,1939,1941],{},[36,1940,1878],{}," greenfield UI with no reference to match.",[15,1943,1945],{"id":1944},"input-a-live-url","Input: a live URL",[11,1947,1948,1949,1953],{},"This is the gap. When the reference already exists as a website - a client's current site, a competitor's pricing page, a section your PM screenshotted - none of the above reads the real CSS. Our ",[22,1950,1952],{"href":1951},"/api/docs/code","/v1/code"," endpoint does:",[181,1955,1957],{"className":183,"code":1956,"language":185,"meta":186,"style":186},"curl \"https://miromiro.app/api/v1/code?url=stripe.com&format=tailwind\" \\\n  -H \"Authorization: Bearer $MIROMIRO_API_KEY\"\n",[118,1958,1959,1972],{"__ignoreMap":186},[190,1960,1961,1963,1965,1968,1970],{"class":192,"line":193},[190,1962,197],{"class":196},[190,1964,201],{"class":200},[190,1966,1967],{"class":204},"https://miromiro.app/api/v1/code?url=stripe.com&format=tailwind",[190,1969,208],{"class":200},[190,1971,212],{"class":211},[190,1973,1974,1976,1978,1980,1982],{"class":192,"line":215},[190,1975,218],{"class":204},[190,1977,201],{"class":200},[190,1979,223],{"class":204},[190,1981,226],{"class":211},[190,1983,229],{"class":200},[11,1985,1986,1987,1989],{},"It parses the live page's actual cascade - specificity, media queries, nested ",[118,1988,239],{}," chains - and returns the section as Tailwind, JSX, Vue, or plain HTML, with the extracted token set alongside. Auto-detects the hero if you do not pass a selector; 25 credits a call.",[30,1991,1992,1997,2002],{},[33,1993,1994,1996],{},[36,1995,38],{}," the values are real, not guessed - the exact colors, spacing, and fonts the site ships. It is an API, so it runs inside agents and products, which almost nothing else in this category does.",[33,1998,1999,2001],{},[36,2000,44],{}," section-level, not whole-app cloning - it will not produce a working multi-page app from a URL. Static HTML + CSS; fully client-rendered apps can come back thin.",[33,2003,2004,2006],{},[36,2005,1878],{}," an agent or product needs faithful code from a page that already exists.",[15,2008,2010],{"id":2009},"the-whole-landscape-in-one-table","The whole landscape in one table",[256,2012,2013,2030],{},[259,2014,2015],{},[262,2016,2017,2019,2022,2024,2027],{},[265,2018,267],{},[265,2020,2021],{},"Input",[265,2023,270],{},[265,2025,2026],{},"API available",[265,2028,2029],{},"Values real or guessed?",[281,2031,2032,2049,2064,2080,2095],{},[262,2033,2034,2037,2040,2043,2046],{},[286,2035,2036],{},"Anima / Locofy",[286,2038,2039],{},"Figma file",[286,2041,2042],{},"React/HTML components",[286,2044,2045],{},"Limited",[286,2047,2048],{},"Real (from Figma)",[262,2050,2051,2054,2056,2059,2062],{},[286,2052,2053],{},"Builder.io Visual Copilot",[286,2055,2039],{},[286,2057,2058],{},"Components",[286,2060,2061],{},"Yes (Builder ecosystem)",[286,2063,2048],{},[262,2065,2066,2068,2071,2074,2077],{},[286,2067,1892],{},[286,2069,2070],{},"Image",[286,2072,2073],{},"HTML/Tailwind draft",[286,2075,2076],{},"Self-host",[286,2078,2079],{},"Guessed",[262,2081,2082,2084,2087,2090,2092],{},[286,2083,1923],{},[286,2085,2086],{},"Prompt",[286,2088,2089],{},"React/Tailwind",[286,2091,373],{},[286,2093,2094],{},"Invented",[262,2096,2097,2100,2103,2106,2108],{},[286,2098,2099],{},"MiroMiro /v1/code",[286,2101,2102],{},"Live URL",[286,2104,2105],{},"Tailwind/JSX/Vue + tokens",[286,2107,373],{},[286,2109,2110],{},"Real (from the site's CSS)",[15,2112,380],{"id":379},[11,2114,2115,2116,2119,2120,126],{},"Match the tool to the input you actually have. Figma file: Anima or Locofy. Nothing yet: v0. A picture and low stakes: screenshot-to-code. A live site that must be matched faithfully, inside a pipeline: that is URL-to-code, and it is the lane we picked precisely because the others do not drive in it. ",[22,2117,2118],{"href":386},"Free key"," (100 credits a month, no card) or try a URL in the ",[22,2121,392],{"href":391},[15,2123,397],{"id":396},[399,2125,2127],{"id":2126},"what-is-the-best-way-to-turn-an-existing-website-into-code","What is the best way to turn an existing website into code?",[11,2129,2130],{},"If fidelity matters, read the live CSS (URL-to-code). If speed matters more, screenshot-to-code gives a fast approximation.",[399,2132,2134],{"id":2133},"can-ai-convert-a-screenshot-to-code-accurately","Can AI convert a screenshot to code accurately?",[11,2136,2137],{},"Plausibly, not accurately. Every color, spacing, and font value is a model's guess from pixels.",[399,2139,2141],{"id":2140},"figma-to-code-vs-url-to-code","Figma-to-code vs URL-to-code?",[11,2143,2144],{},"Input: a design file you own vs any live website. The first automates handoff; the second works when no design file exists.",[399,2146,2148],{"id":2147},"which-of-these-have-real-apis","Which of these have real APIs?",[11,2150,2151],{},"v0 and Builder.io within their platforms, and MiroMiro as a plain REST endpoint. The Figma plugins are primarily apps - a hard filter if you are building a pipeline.",[448,2153,450],{},{"title":186,"searchDepth":215,"depth":215,"links":2155},[2156,2157,2158,2159,2160,2161,2162],{"id":1835,"depth":215,"text":1836},{"id":1882,"depth":215,"text":1883},{"id":1913,"depth":215,"text":1914},{"id":1944,"depth":215,"text":1945},{"id":2009,"depth":215,"text":2010},{"id":379,"depth":215,"text":380},{"id":396,"depth":215,"text":397,"children":2163},[2164,2165,2166,2167],{"id":2126,"depth":464,"text":2127},{"id":2133,"depth":464,"text":2134},{"id":2140,"depth":464,"text":2141},{"id":2147,"depth":464,"text":2148},"The design-to-code landscape in 2026 sorted by input - Figma files, screenshots, prompts, or live URLs - and which tool honestly wins for each job.",[2170,2172,2174,2177],{"question":2127,"answer":2171},"Depends on fidelity needs. For a quick approximation, screenshot-to-code tools work from a picture. For code that uses the site's real CSS values - exact colors, spacing, fonts - you need something that reads the live page's stylesheets, which is what a URL-to-code API does.",{"question":2134,"answer":2173},"It produces plausible code fast, but the model guesses every value: colors approximated from pixels, spacing eyeballed, fonts inferred. Great for prototypes; risky when the output must match a real design system.",{"question":2175,"answer":2176},"What is the difference between Figma-to-code and URL-to-code?","Input. Figma-to-code tools (Anima, Locofy, Builder.io) need a Figma file and turn design layers into components. URL-to-code starts from any live website - no design file required - and derives the code from the real rendered CSS.",{"question":2178,"answer":2179},"Which design-to-code tools have an actual API?","Fewer than the category suggests. Most are plugins or apps. If you need code generation inside your own product or agent pipeline, check for a documented REST endpoint first - that requirement alone eliminates most of the list.",{},"/api-blog/best-design-to-code-apis-2026",[1216,2183,490],"best-firecrawl-alternatives-2026",{"title":1824,"description":2168},"api-blog/best-design-to-code-apis-2026",[2187,2188,2189,498],"design to code","tailwind","code generation","Ds8Hb1IY5fXrd4oGyzAN3SLgbiC7wqiv79mad9KMYu8",1784751617392]