A website’s design system. Ready for your product.
Extract colors, typography, spacing, shadows, and component styles as structured data. Build experiences that feel at home with your customer’s brand.
Powering agents and products with the world's data.
Every style on the page. As structured data.
Read the design system a website actually renders, from color roles and type scales to spacing, shadows, and components.
Colors and typography
Read color roles and the fonts, sizes, weights, and line heights used in the rendered site.
Spacing and depth
Retrieve spacing values and shadow styles for a more complete picture of the interface.
Component details
Inspect available button and card styles, theme mode, and resolved font links.
Extract the styles. Apply them in your app.
Receive a structured style guide, then map the returned values to your own theme or component system.
npm install context.devimport ContextDev from 'context.dev';
const client = new ContextDev({ apiKey: 'YOUR_API_KEY' });
const { styleguide } = await client.web.extractStyleguide({
domain: 'linear.app',
});
console.log(styleguide?.colors);
console.log(styleguide?.typography);
console.log(styleguide?.components);
console.log(styleguide?.elementSpacing);
console.log(styleguide?.shadows);
console.log(styleguide?.fontLinks);Build experiences that match the brand.
Combine the visual identity with the interface details that make a product feel familiar.
Brand onboarding from the first screen
Pre-fill company fields from a work email domain, then theme the rest of signup in the customer’s colors and fonts.
Style what your agent creates
Connect a company reference to its brand and style guide, so generated pages, decks, and emails look like theirs.
A few things to know.
More details in the API documentation.
Which design-system details are returned?
The response can include colors, typography, element spacing, shadows, component styles, theme mode, and font links. Handle optional or missing fields when applying the results.
Can I pass a domain or a direct URL?
Yes. Provide a domain to analyze its homepage, or a direct URL to extract styles from a particular page.
Does the API return a finished theme file?
The API returns structured style data. Map those values into the theme format, design tokens, or components your application uses.
Can I use this with Brand Retrieve?
Yes. Use Retrieve Brand for company details, logos, and colors, then Extract Style Guide for the typography and interface styles of the website.
Make your product feel like theirs.
Extract any website’s design system as structured data. The same API key works for brand data, scraping, and research.