Skip to main content
alt text

​
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

  1. A Brand.dev API key
  2. 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
Styleguide API - Comprehensive design system extraction: 
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 TypeUse Case
logo + lightNavigation bars, headers on light backgrounds
logo + darkDark mode interfaces, dark backgrounds
iconApp icons, favicons, avatars, small displays
transparentOverlays, 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.

​
5. Extracting Typography

Use the Styleguide API or brand fonts data to populate typography settings: 
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'
    }
  };
}
UI Recommendations:
  • 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.

​
Email Marketing Platforms

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.

​
Presentation Tools

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.

Brand API Reference

Retrieve logos, colors, and brand assets

Styleguide API

Extract typography, spacing, and design tokens

Core Concepts

Understanding logo types and color data

Onboarding Flows

Pre-fill user data during signup