Extract design tokens
extract_design_tokensRead-onlyIdempotent
Use when the user wants a site's complete token system - every color, font family, size, weight, spacing value, radius, shadow, line height, gradient and breakpoint with usage counts - or a paste-ready :root block (format='css'), tailwind.config (format='tailwind') or W3C Design Tokens file (format='dtcg'). Returns values and counts only, not layout or which element uses what: if the user asked to rebuild or clone a section, use extract_code, which returns the markup with the values in place. A site shipping light and dark themes returns the union of both (see colorSchemes) - pick colors by role, not by frequency. Not for: a short brand summary (use extract_brand). Lists trim to 60 per group; pass limit (up to 200) for more.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The website URL | |
| fresh | No | Skip the 24-hour cache and re-extract the live page - use when the site just changed and a cached result would be stale. Charged normally; the fresh result replaces the cached copy. | |
| limit | No | Max entries per token list (default 60, up to 200). | |
| format | No | Output shape (default json). 'css'|'tailwind' return a paste-ready code block; 'dtcg' returns a standalone W3C Design Tokens file for Style Dictionary / Figma variables pipelines. | |
| render | No | Force a real browser so the page's JavaScript runs before it is read. Slower, and adds 5 credits. Usually not needed: when the plain read comes back as a JavaScript app shell or the site refuses it (401/403/406) or timed out, the server already re-runs the page in a browser by itself at no extra cost, and usage.autoRender says so. Pass it for images, videos or Lottie that only load on scroll, with screenshot=true, or when a result is still thin after that automatic pass. If a 403 says the browser was refused too, the site cannot be extracted - do not retry. extract_code always runs in a real browser at no extra cost, so render=true is not needed there (only together with screenshot=true). On extract_design_tokens, render=true only permits the browser: the plain read still runs first, and the 5 credits are charged only if the browser was actually needed. | |
| screenshot | No | Requires render=true. Adds a screenshot field to the result: a public URL of a capture of the page (live 7 days), taken by the same browser that rendered it. Pass true for the 1440x900 viewport or 'full' for the entire page height. No extra credits beyond the render surcharge. Useful for showing the user what the extracted site looks like. | |
| full_output | No | Skip long-string trimming. Responses still cap at ~100KB total. | |
| response_format | No | How much to return. 'concise' keeps lists to 10 entries and strings short - right for a summary or a chat answer. 'detailed' returns everything the tool has (same as limit=200 + full_output=true). Omit for the default, which fits a typical chat context. The generated code is never trimmed in any mode. |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | ||
| next | No | The most likely follow-up call for this result, with the tool and arguments to use. Offer it to the user when it fits what they are doing. | |
| usage | No | Credit usage for the authed key (spent, remaining, monthly limit). | |
| colors | No | Every color with usage count | |
| output | No | The paste-ready :root{} or tailwind.config block when format='css'|'tailwind' | |
| spacing | No | The spacing scale from margin/padding/gap | |
| summary | No | Count per token group | |
| fontSizes | No | Font sizes with usage counts | |
| gradients | No | Gradients with type (linear/radial/conic) and count | |
| boxShadows | No | Box shadows | |
| breakpoints | No | Responsive breakpoints from media queries | |
| fontWeights | No | Font weights | |
| lineHeights | No | Line heights | |
| colorSchemes | No | The colour schemes this page declares: ["light"] or ["light","dark"]. When both, the counts above are the union of the two themes and neither is labelled - pick colours by role, not by frequency, and use extract_code with theme=dark when you need one theme on its own | |
| fontFamilies | No | Font families with usage counts | |
| borderRadiuses | No | Border radii | |
| truncation_note | No | Present when the result was trimmed to fit chat context - says what was dropped and how to get more (limit / full_output arguments, or the REST API). |