Extract colors, typography, spacing, shadows, and component styles as structured data. Build experiences that feel at home with your customer’s brand.
linear.app
Extract style guide
Aa
Typography
family · size · weight
Spacing: 8 · 16 · 24
Shadows · components · font links
Teams build with Context.dev
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);Combine the visual identity with the interface details that make a product feel familiar.
Cut signup friction and drop-off. Pre-fill company fields from a work email domain so users finish onboarding faster and more of them activate.
linear.app
Auto-fill
Signup form
5 fields filled
Turn the references in your prompts into structured data. One call hydrates a company reference with logos, colors, industry, socials, and firmographics.
Y Combinator
ycombinator.com
Startup accelerator helping founders build companies.
More details in the API documentation.
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.
Yes. Provide a domain to analyze its homepage, or a direct URL to extract styles from a particular page.
The API returns structured style data. Map those values into the theme format, design tokens, or components your application uses.
Yes. Use Retrieve Brand for company details, logos, and colors, then Extract Style Guide for the typography and interface styles of the website.
One API key for scraping, research, brand data, batches, and monitoring.