Overview
Creating a brand kit manually is tedious and time-consuming. Designers and marketers must hunt down hex codes, locate the right logo files, identify font families, and document spacing guidelines - often across scattered sources. For design software, email builders, and marketing platforms, this friction delays the moment users experience your product’s core value.
Brand.dev automates this entire process. By fetching comprehensive brand data from any domain, your application can instantly generate brand kits containing:
- Logo variants - Icons, full logos, light/dark mode versions
- Color palettes - Primary, secondary, and accent colors with hex codes
- Typography - Font families, weights, and usage patterns
- Design tokens - Spacing, shadows, and component styles
- Brand assets - Backdrops, hero images, and visual elements
We’ll walk through how to implement automated brand kit generation to help your users get started faster and stay on-brand.
Prerequisites
- A Brand.dev API key
- A design tool, email builder, or application that uses brand assets
Concept
When a user enters their company domain or email, Brand.dev retrieves their complete brand identity. Your application can then pre-populate a brand kit that employees can use immediately with no manual asset hunting required.
Architecture
1. Collecting the User’s Domain
The brand kit generation starts when you know the user’s company. This typically happens during:
- Account signup - Extract domain from work email
- Workspace setup - User enters company domain
- Project creation - User specifies client domain
Use the prefetch endpoint to start fetching data early:
// Prefetch as soon as you have the domain (no credits charged)
await client.utility.prefetchByDomain({
domain: "acme.com"
});
The prefetch endpoint doesn’t charge credits and significantly improves response times for the actual brand data request.
2. Fetching Brand Assets
Brand.dev offers multiple endpoints to build a comprehensive brand kit:
Brand API - Core brand data including logos, colors, and company information:
const { brand } = await client.brand.retrieve({
domain: "acme.com"
});
// Access brand kit components
const logos = brand.logos; // Multiple logo variants
const colors = brand.colors; // Brand color palette
const fonts = brand.fonts; // Typography information
const backdrops = brand.backdrops; // Background images
const { styleguide } = await client.styleguide.retrieve({
url: "https://acme.com"
});
// Access design tokens
const typography = styleguide.typography;
const spacing = styleguide.spacing;
const shadows = styleguide.shadows;
const components = styleguide.components;
For a complete brand kit, combine both the Brand API (for logos and colors) and the Styleguide API (for typography and design tokens).
3. Organizing Logo Variants
Brand.dev returns multiple logo variants. Organize them for different use cases:
function organizeBrandLogos(logos) {
return {
// Primary logo for headers and navigation
primary: logos.find(l =>
l.type === 'logo' && l.mode === 'light'
),
// Icon for favicons, app icons, avatars
icon: logos.find(l =>
l.type === 'icon' && l.resolution?.aspect_ratio <= 1.2
),
// Dark mode variant
darkMode: logos.find(l =>
l.type === 'logo' && l.mode === 'dark'
),
// All variants for user selection
all: logos.map(l => ({
url: l.url,
type: l.type,
mode: l.mode,
width: l.resolution?.width,
height: l.resolution?.height
}))
};
}
| Logo Type | Use Case |
|---|
logo + light | Navigation bars, headers on light backgrounds |
logo + dark | Dark mode interfaces, dark backgrounds |
icon | App icons, favicons, avatars, small displays |
transparent | Overlays, watermarks, flexible placement |
4. Building the Color Palette
Transform Brand.dev colors into a usable design palette:
function buildColorPalette(colors) {
// Colors are typically ordered by importance
const [primary, secondary, ...accents] = colors;
return {
primary: {
hex: primary?.hex || '#000000',
name: primary?.name || 'Primary',
usage: 'Buttons, links, key UI elements'
},
secondary: {
hex: secondary?.hex || '#666666',
name: secondary?.name || 'Secondary',
usage: 'Secondary buttons, borders, icons'
},
accents: accents.map(color => ({
hex: color.hex,
name: color.name
})),
// Generate complementary colors
background: '#FFFFFF',
text: '#1A1A1A'
};
}
Brand colors from the API are extracted from trusted sources, but always allow users to adjust or add colors to complete their palette.
Brand.dev assigns these colors a human readable name, but this is not necessarily what the brand refers to them as internally.
function extractTypography(styleguide) {
const fonts = styleguide.typography?.fonts || [];
return {
headings: {
family: fonts[0]?.family || 'Inter',
weights: fonts[0]?.weights || ['600', '700'],
fallback: 'system-ui, sans-serif'
},
body: {
family: fonts[1]?.family || fonts[0]?.family || 'Inter',
weights: ['400', '500'],
fallback: 'system-ui, sans-serif'
},
// Include font loading URLs if available
fontUrls: fonts.map(f => f.url).filter(Boolean)
};
}
6. Presenting the Brand Kit
Once you’ve assembled the brand kit, present it for user confirmation:
function createBrandKit(domain, brandData, styleguideData) {
return {
company: {
name: brandData.title,
domain: domain,
description: brandData.description
},
logos: organizeBrandLogos(brandData.logos),
colors: buildColorPalette(brandData.colors),
typography: extractTypography(styleguideData),
assets: {
backdrops: brandData.backdrops || [],
socialLinks: brandData.socials || []
},
metadata: {
generatedAt: new Date().toISOString(),
source: 'Brand.dev API'
}
};
}
- Display the brand kit in an editable interface
- Show logo previews with selection options
- Present colors as swatches with hex codes visible
- Allow users to add, remove, or modify any element
- Provide a “Regenerate” option to re-fetch from source
Best Practices
1. Always Allow User Edits
Brand kits should be a starting point, not a locked configuration. Users may have updated branding, internal guidelines, or preferences that differ from their public website. Make every element editable and saveable.
2. Provide Sensible Defaults
When brand data is incomplete (missing secondary colors, no dark mode logo), generate sensible defaults rather than leaving gaps. Use color theory to suggest complementary colors, or provide placeholder assets.
3. Cache Brand Kits
Once a brand kit is generated and confirmed by the user, cache it in your application. This prevents unnecessary API calls and ensures consistency across the user’s projects.
// Save confirmed brand kit to your database
async function saveBrandKit(userId, brandKit) {
await db.brandKits.upsert({
userId,
domain: brandKit.company.domain,
kit: brandKit,
confirmedAt: new Date()
});
}
4. Offer Multiple Logo Options
Don’t auto-select a single logo. Present all available variants and let users choose which works best for their specific context. What works for a website header may not work for an email signature.
5. Handle Missing Data Gracefully
Not all companies have comprehensive brand data available. Provide a graceful fallback experience:
function createFallbackKit(domain, companyName) {
return {
company: { name: companyName, domain },
logos: { primary: null, message: 'Upload your logo' },
colors: {
primary: { hex: '#3B82F6', name: 'Default Blue' },
message: 'Add your brand colors'
},
typography: {
headings: { family: 'Inter' },
body: { family: 'Inter' }
}
};
}
Example Use Cases
Design Software
Automatically populate brand colors, fonts, and logos when a user starts a new project, ensuring all designs stay on-brand from the first click.
Pre-configure email templates with company colors, logo placement, and typography so marketers can send branded campaigns without design skills.
Website Builders
Generate starter themes based on the user’s existing brand, reducing setup time and ensuring visual consistency.
Auto-apply brand colors to slide templates and insert logos in appropriate positions for professional, consistent decks.
Marketing Asset Generators
Create social media graphics, ads, and banners that automatically use the correct brand assets and color schemes.
