Endpoints
- BrandDev
- GETRetrieve brand data by domain
- GETSearch brands by query
- GETIdentify brand from transaction data
- GETRetrieve NAICS code for any brand
- GETRetrieve brand data by stock ticker (e.g. AAPL, TSLA, etc.)
- POSTPrefetch brand data for a domain
- POSTQuery website data using AI
- GETExtract design system and styleguide from website
- GETTake screenshot of website
- GET
- Custom
BrandDev
Extract design system and styleguide from website
Beta feature: Automatically extract comprehensive design system information from a brand’s website including colors, typography, spacing, shadows, and UI components.
GET
/
brand
/
styleguide
Copy
import BrandDev from 'brand.dev';
const client = new BrandDev({
apiKey: process.env['BRAND_DEV_API_KEY'], // This is the default and can be omitted
});
const response = await client.brand.styleguide({ domain: 'domain' });
console.log(response.styleguide);
Copy
{
"status": "<string>",
"domain": "<string>",
"styleguide": {
"colors": {
"accent": "<string>",
"background": "<string>",
"text": "<string>"
},
"typography": {
"headings": {
"h1": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h2": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h3": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h4": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"p": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"elementSpacing": {
"xs": "<string>",
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>"
},
"shadows": {
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>",
"inner": "<string>"
},
"components": {
"button": {
"primary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>"
},
"secondary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>"
},
"link": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>"
}
},
"card": {
"backgroundColor": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"boxShadow": "<string>",
"textColor": "<string>"
}
}
},
"code": 123
}
Authorizations
Bearer authentication header of the form Bearer <token>
, where <token>
is your auth token.
Query Parameters
Domain name to extract styleguide from (e.g., 'example.com', 'google.com'). The domain will be automatically normalized and validated.
Optional timeout in milliseconds for the request. If the request takes longer than this value, it will be aborted with a 408 status code. Maximum allowed value is 300000ms (5 minutes).
Required range:
1 <= x <= 300000
Response
200
application/json
Successful response
The response is of type object
.
Was this page helpful?
Copy
import BrandDev from 'brand.dev';
const client = new BrandDev({
apiKey: process.env['BRAND_DEV_API_KEY'], // This is the default and can be omitted
});
const response = await client.brand.styleguide({ domain: 'domain' });
console.log(response.styleguide);
Copy
{
"status": "<string>",
"domain": "<string>",
"styleguide": {
"colors": {
"accent": "<string>",
"background": "<string>",
"text": "<string>"
},
"typography": {
"headings": {
"h1": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h2": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h3": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
},
"h4": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"p": {
"fontFamily": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"lineHeight": "<string>",
"letterSpacing": "<string>"
}
},
"elementSpacing": {
"xs": "<string>",
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>"
},
"shadows": {
"sm": "<string>",
"md": "<string>",
"lg": "<string>",
"xl": "<string>",
"inner": "<string>"
},
"components": {
"button": {
"primary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>"
},
"secondary": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>"
},
"link": {
"backgroundColor": "<string>",
"color": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"fontSize": "<string>",
"fontWeight": 123,
"textDecoration": "<string>",
"boxShadow": "<string>"
}
},
"card": {
"backgroundColor": "<string>",
"borderColor": "<string>",
"borderRadius": "<string>",
"borderWidth": "<string>",
"borderStyle": "<string>",
"padding": "<string>",
"boxShadow": "<string>",
"textColor": "<string>"
}
}
},
"code": 123
}
Assistant
Responses are generated using AI and may contain mistakes.