Docs/Design tokens

GET/v1/extract10 credits

Design tokens

The full design-token system: colors (with the CSS properties each is used on), font families, font sizes, font weights, letter spacing, line heights, the spacing scale, border radii and widths, box and text shadows, opacity steps, gradients, animation durations, easing curves, responsive breakpoints and z-indexes - each with a usage count, most-used first. Add &fields= to return only the groups you need, or &format=css / &format=tailwind for a ready-to-paste :root {} block or tailwind.config instead of JSON.

Generate a paste-ready tailwind.config or :root {} from a real site (add &format=).
Pull just the spacing + radius scale for a design-system audit (&fields=spacing,borderRadiuses).
Bootstrap a theme file - colors, type, spacing and motion - from a reference brand.

Parameters

urlrequiredThe page to extract from. With or without protocol (https:// is assumed).

formatoptionalOutput shape. css returns CSS custom properties (Content-Type: text/css); tailwind returns a theme config block (text/plain); dtcg returns a standalone W3C Design Tokens file (application/json) that drops straight into Style Dictionary, Terrazzo, or a Figma variables importer. For all three artifact formats, fields is ignored and the usage object is omitted (credits are still metered, see the X-Quota-* headers). json (default) · css · tailwind · dtcg

fieldsoptionalComma-separated list of token groups to return, JSON only (e.g. fields=colors,spacing). Omit for the full set. url and summary are always included. Trims the response only - the credit cost is unchanged. see the fields table below

renderoptionalLoad the page in a real browser and run its JavaScript before extracting. Use for client-rendered sites (React, Next, SPAs) where the default static fetch returns little - runtime-injected images, styles, media and Lotties become visible. Slower (a real page load), and adds 5 credits to the call. Cache hits stay free. You rarely have to guess: when a static extraction comes back thin because the page is client-rendered, the response includes a top-level hint field telling you to retry with render=true. true · false (default)

freshoptionalSkip the 24-hour cache and re-extract from the live page. Use it when you know the site just changed (a redeploy, a rebrand) and a cached copy would be stale. The call is charged normally - the extraction really runs - and the fresh result replaces the cached copy for the next caller. Off by default: identical repeat calls within 24 hours are served from cache at 0 credits. true · false (default)

screenshotoptionalRequires render=true. The same real browser that renders the page also captures a screenshot - true for the 1440x900 viewport, full for the entire page height. The response gains a screenshot field with a public image URL that stays live for 7 days. No extra credits beyond the render surcharge. Captured on fresh extractions - a cache hit returns the screenshot stored with the cached result (pass fresh=true to force a new one). true · full · false (default)

fields values

colorsEvery color used, each { color, count }, most-used first.

fontSizesFont sizes, each { size, count }.

fontFamiliesFont families, each { family, count }.

fontWeightsFont weights, each { value, count }.

letterSpacingsLetter-spacing values, each { value, count }.

lineHeightsLine-height values, each { value, count }.

spacingSpacing scale from margin / padding / gap / inset, each { value, count }.

borderRadiusesBorder radii, each { value, count }.

boxShadowsBox shadows, each { value, count }.

gradientsGradients, each { value, type, count }. type ∈ linear, radial, conic.

durationsAnimation / transition durations, each { value, count }.

easingsEasing curves (cubic-bezier / steps / keywords), each { value, count }.

textShadowsText shadows, each { value, count }.

borderWidthsBorder / outline widths, each { value, count }.

opacitiesOpacity values below 1, each { value, count }.

breakpointsResponsive breakpoints from @media min/max-width queries, ascending, each { value, count }.

zIndexesz-index values, each { value, count }.

colorSchemesThe colour schemes the page declares: ["light"] or ["light","dark"]. When both, the token counts above mix the two themes.

Build a request

GEThttps://miromiro.app/api/v1/v1/extract?url=stripe.com

urlrequired

format

fields

Nothing selected returns the full response.

render

fresh

screenshot

Options at their default are left out of the URL - the API assumes them. Auth isn't shown here: send your key as an Authorization: Bearer header (see the example below).

Response

{
  "url":          "https://stripe.com",
  "selector":     "section.hero-section-container",
  "autoDetected": true,
  "sections": [
    { "selector": "section.hero-section-container", "label": "Financial infrastructure…", "elements": 343 },
    { "selector": "section.business-sizes-section", "label": "Powering businesses of all sizes.", "elements": 604 },
    …
  ],
  "framework":    "tailwind",
  "code":         "<section class=\"relative w-full\">\n  <h1 class=\"text-[#000000] …\">…</h1>\n</section>",
  "css":          null,
  "tokens": {
    "colors":       ["#000000", "#533afd"],
    "fontFamilies": ["sohne-var"],
    "fontSizes":    ["48px", "16px"],
    "spacing":      ["16px", "24px"],
    "radii":        ["8px"],
    "shadows":      ["0 2px 4px rgba(0,0,0,.1)"]
  },
  "theme":   "light",
  "assets":  { "images": ["https://…/hero.png"], "fonts": [] },
  "summary": { "elements": 42, "declarations": 310, "mappedToTailwind": 180, "arbitrary": 44, "styledCoverage": 97, "repeatedGroups": 1, "truncated": false },
  "usage":   { "creditsSpent": 25, "creditsThisMonth": 25, "monthlyLimit": 100, "remaining": 75, "cached": false }
}

Response fields

urlstringThe resolved URL that was extracted.

colors[]arrayEvery color used, each { color, count, properties }, most-used first. properties lists the CSS properties the color appears on (color, background-color, border-color, …).

fontFamilies[]arrayFont families, each { family, count }.

fontSizes[]arrayFont sizes, each { size, count }.

fontWeights[]arrayFont weights, each { value, count }.

letterSpacings[]arrayLetter-spacing values, each { value, count }.

lineHeights[]arrayLine-height values, each { value, count }.

spacing[]arraySpacing scale from margin/padding/gap/inset, each { value, count }.

borderRadiuses[]arrayBorder radii, each { value, count }.

boxShadows[]arrayBox shadows, each { value, count }.

gradients[]arrayGradients, each { value, type, count }. type ∈ linear, radial, conic.

durations[]arrayAnimation/transition durations, each { value, count }.

easings[]arrayEasing curves (cubic-bezier/steps/keywords), each { value, count }.

textShadows[]arrayText shadows, each { value, count }.

borderWidths[]arrayBorder and outline widths, each { value, count }.

opacities[]arrayOpacity steps below 1, each { value, count }.

breakpoints[]arrayResponsive breakpoints recovered from @media min/max-width queries, ascending, each { value, count }.

zIndexes[]arrayz-index values, each { value, count }.

colorSchemesstring[]The colour schemes this page declares styles for: ["light"] or ["light","dark"]. Token counts are tallied over the whole stylesheet, so when a page ships both themes the values above are the union of the two - light and dark surfaces sit side by side and neither is labelled. Check this before treating the most-used colour as "the" background: on a two-theme site, pick per role rather than by frequency. Use /v1/code with theme=dark when you need one theme's values on their own.

summaryobjectAggregate counts (uniqueColors, uniqueSpacing, cssSize, …). Always returned.

usageobjectMetering for this call: credits spent this month, your monthly cap (null = unlimited), credits remaining, what this call cost (0 on cache hits), and whether it was served from the 24-hour cache.

Example request

curl "https://miromiro.app/api/v1/code?url=stripe.com&framework=jsx" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

# Client-rendered site (React, Next, SPA)? Add render=true to run its
# JavaScript in a real browser first (+5 credits):
curl "https://miromiro.app/api/v1/code?url=stripe.com&framework=jsx&render=true" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

← PreviousBrand Next →Images