Any URL to agent-ready design tokens.
Paste any public URL and get back typed color palettes, typography scales, spacing, motion and component structure - exported as Tailwind config, CSS variables, W3C tokens JSON or agent-ready Markdown.
Live extraction, no signup. Rate limited to keep it free. Results are held for 2 hours at a private link. By running it you agree to the Tools & Extractor Terms.
Or explore 67 pre-extracted references in the gallery, each with the same token extraction plus a curated agent brief and design notes.
What we extract
16 token categories - the full design surface, not just the obvious ones.
A structured, typed, reproducible token package built for coding agents and design system work. Not a screenshot, not OCR.
Color palette
Top colors with role inference (background/text/border/accent), usage share, HSL + OKLCH and W3C token names.
Gradients
Linear, radial and conic gradients with angle, stops and raw CSS, captured verbatim.
Typography
Font families with role detection (body/display/mono), weights, variable axes and a full size scale.
Font loading
@font-face declarations with sources, weight ranges, display strategy and Google Fonts detection.
Spacing scale
Base unit inferred via GCD, the full scale progression and the rhythm your layout actually uses.
Containers & gutters
Max-width breakpoints, layout gutters and the content-width decisions the brand made.
Shadows & elevation
Named shadow tokens with full box-shadow values and the surface-elevation grammar.
Borders & radii
Corner-radius scale and border treatments across surfaces and controls.
CSS variables
The site's own custom properties, exposed as a paste-ready :root block.
Motion & easing
Durations, easing curves, transitions and detected motion libraries.
Z-index scale
The layering ladder with per-layer context (overlay/sticky/modal).
Breakpoints
The sm/md/lg/xl/2xl responsive scale as typed dimension tokens.
Component tree
A structural outline of the page's building blocks and their roles.
Images & OG
Image profile, format distribution, lazy-loading share and the social card.
Accessibility
A WCAG 2.1 + APCA contrast matrix for every foreground/background pair.
Export formats
Tailwind config, CSS variables, W3C design tokens JSON and agent-ready Markdown.
What you get
Four export formats, one paste away.
Below is real output for our Linear reference - the exact bundle the extractor produces, in the format your stack or agent expects.
// Linear
// Generated by ai2.design Inspiration Gallery
// Source: https://linear.app/?ref=ai2.design
// Observable: 9 gradients · 2 font families
//
//
export default {
theme: {
extend: {
colors: {
"background-1": "#F7F8F8",
"foreground-2": "#62666D",
"foreground-3": "#D0D6E0",
"foreground-4": "#8A8F98",
"accent-5": "#F79CE0",
"accent-6": "#55CDFF",
"accent-7": "#FFC47C",
"accent-8": "#00FF05",
"accent-9": "#8FA4FF",
"accent-10": "#89D196",
"foreground-11": "#0F1011",
"foreground-12": "#23252A",
"accent-13": "#FF0000",
"foreground-14": "#000000",
"accent-15": "#6366F1",
"accent-16": "#02B8CC",
"accent-17": "#5E6AD2",
"neutral-18": "#383B3F",
"accent-19": "#EB5757",
"accent-20": "#8B5CF6",
},
fontFamily: {
display: ["Inter Variable", "serif"],
mono: ["Berkeley Mono", "ui-monospace", "monospace"],
},
backgroundImage: {
"gradient-hero": "linear-gradient(90deg, color(srgb 0 0 0 / 0) 0px, color(srgb 0.129412 0.701961 1 / 0.2) 100%)",
"gradient-spot-2": "radial-gradient(circle, rgba(255, 255, 255, 0.03) 0px, rgba(0, 0, 0, 0) 50%)",
"gradient-spot-3": "radial-gradient(circle, rgba(255, 255, 255, 0.04) 0px, rgba(0, 0, 0, 0) 50%)",
"gradient-spot-4": "radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0px, rgba(8, 9, 10, 0.5) 100%)",
"gradient-5": "linear-gradient(rgb(8, 9, 10) 10%, rgb(208, 214, 224) 100%)",
"gradient-spot-6": "radial-gradient(50% 50%, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0) 90%)",
"gradient-spot-7": "radial-gradient(50% 50%, rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0) 100%)",
"gradient-spot-8": "radial-gradient(50% 50%, rgb(255, 255, 255) 0px, rgba(255, 255, 255, 0) 90%)",
"gradient-9": "linear-gradient(90deg, color(srgb 0 0 0 / 0) 0px, color(srgb 0.6 0.231373 0.231373 / 0.2) 100%)",
},
borderRadius: {
"r-1": "2px",
"r-2": "4px",
"r-3": "6px",
"r-4": "7px",
"r-5": "8px",
"r-6": "12px",
"r-7": "16px",
"r-8": "20px",
},
boxShadow: {
"shadow-xs": "rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px",
"shadow-sm": "rgba(0, 0, 0, 0.4) 0px 2px 4px 0px",
"shadow-md": "rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset",
"shadow-lg": "rgb(35, 37, 42) 0px 0px 0px 1px inset",
"shadow-xl": "rgba(0, 0, 0, 0.2) 0px 0px 0px 1px",
"shadow-2xl": "rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px",
"shadow-inner": "rgba(94, 106, 210, 0.075) 0px 0px 0px 2.70929px",
"shadow-outline": "rgba(0, 0, 0, 0.1) 0px 0px 0px 2px",
},
spacing: {
"2": "2px",
"4": "4px",
"6": "6px",
"8": "8px",
"10": "10px",
"12": "12px",
"14": "14px",
"16": "16px",
"19": "19px",
"22": "22px",
"24": "24px",
"26": "26px",
},
screens: {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px",
},
zIndex: {
"inline-overlap": "1",
"inline-overlap": "3",
},
transitionDuration: {
"d-1": "3.2s",
"d-2": "0.16s, 0.16s",
"d-3": "2.8s",
"d-4": "1.6s",
"d-5": "0.4s",
"d-6": "0.16s",
},
transitionTimingFunction: {
"ease-1": "steps(1)",
"ease-2": "cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94)",
"ease-3": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
"ease-4": "ease-out",
"ease-5": "ease",
"ease-6": "cubic-bezier(0.66, 0, 0, 1)",
},
},
},
};Example: the token bundle for the Linear reference in our gallery. Every catalogued site exports the same four formats.
Run your own URL, or start from a curated reference.
Paste a URL above to extract it live, or browse 67hand-curated references, each already exported as a paste-ready token bundle in the same four formats.