What to Include in a Brand Kit (2026 Developer Edition)

A brand kit is the single source of truth for your visual identity. It's what keeps your landing page, app, emails, and social media looking like they belong to the same company.

But most brand kit guides are written for designers, not developers. They'll tell you about Pantone colors and CMYK values when what you need is a Tailwind config.

Here's what a modern, code-ready brand kit should include.

The essentials

1. Logo files

You need your logo in multiple formats and variations:

Formats:

• logo.svg — Vector, infinitely scalable, tiny file size. If you only have a PNG, you can convert it to SVG for free.
• logo.png — Raster with transparency, for contexts that don't support SVG
• logo-dark.svg — Version for dark backgrounds (if different)

Variations:

• Full logo (symbol + wordmark)
• Symbol only (for favicons, app icons)
• Wordmark only (for contexts where the symbol is shown elsewhere)

Sizes for PNG:

• Original high-res (at least 1000px wide)
• Social media (400x400 square for profiles)
• Favicon sizes (16, 32, 48, 180, 192, 512) — use a favicon generator to create all sizes at once

2. Color palette

Your colors in every format you'll need:

{
  "primary": {
    "hex": "#3b82f6",
    "rgb": "59, 130, 246",
    "hsl": "217, 91%, 60%"
  },
  "secondary": {
    "hex": "#8b5cf6",
    "rgb": "139, 92, 246",
    "hsl": "258, 90%, 66%"
  }
}

For web/app development:

• Hex codes (most common)
• HSL values (easier to manipulate programmatically)
• CSS custom properties file
• Tailwind config snippet
• Design tokens (JSON)

Include the full scale: Don't just provide your main color. Provide shades from 50 to 950 so developers can use lighter/darker variants without guessing.

3. Typography

Font files or CDN links:

• Primary font (headings)
• Secondary font (body) — often the same as primary
• Monospace font (code blocks)

Type scale:

--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */

Font weights used:

• Regular (400)
• Medium (500)
• Semibold (600)
• Bold (700)

4. Spacing and sizing

Consistent spacing makes UIs feel polished:

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

Border radius:

--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;

5. Shadows and effects

--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

Code-ready exports

This is where modern brand kits differ from traditional ones.

Tailwind config

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          // ... full scale
          500: '#3b82f6',
          // ... to 950
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        heading: ['Plus Jakarta Sans', 'sans-serif'],
      },
    },
  },
}

CSS variables

:root {
  --color-primary: #3b82f6;
  --color-background: #ffffff;
  --font-sans: 'Inter', system-ui, sans-serif;
  --radius-md: 0.5rem;
}
 
.dark {
  --color-primary: #60a5fa;
  --color-background: #0f172a;
}

Design tokens (JSON)

{
  "color": {
    "primary": { "value": "#3b82f6" },
    "background": { "value": "#ffffff" }
  },
  "font": {
    "sans": { "value": "'Inter', system-ui, sans-serif" }
  }
}

Bonus: AI context file

If you use AI coding assistants (Cursor, Claude, Copilot), include a context file:

# Brand Guidelines for AI Assistants
 
## Colors
- Primary: Use `primary` or `--color-primary` for buttons and links
- Background: Use `background` for page backgrounds
- Never use hardcoded hex values
 
## Typography
- Headings: font-heading, weights 600-700
- Body: font-sans, weight 400-500
- Always use the type scale (text-sm, text-base, etc.)
 
## Components
- Buttons: rounded-lg, primary background, white text
- Cards: rounded-xl, subtle shadow, surface background
- Inputs: rounded-md, border-gray-300, focus:ring-primary

This ensures AI-generated code follows your brand system automatically.

The complete file structure

brand-kit/
├── logos/
│   ├── logo.svg
│   ├── logo-dark.svg
│   ├── logo-symbol.svg
│   ├── logo.png
│   └── favicons/
│       ├── favicon.ico
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       ├── apple-touch-icon.png
│       └── android-chrome-512x512.png
├── colors/
│   ├── palette.json
│   └── palette.css
├── typography/
│   ├── fonts.css (or CDN links)
│   └── type-scale.css
├── code/
│   ├── tailwind.config.ts
│   ├── variables.css
│   └── tokens.json
├── CLAUDE.md (AI context)
└── README.md (usage guide)

Getting your brand kit

You can assemble this manually, but it takes hours of work across multiple tools.

OneMinuteBranding generates this entire structure—logos, colors, typography, code exports, and AI context file—in 60 seconds. Describe your project, pick from AI-generated variants, and download everything ready to use.

No more hunting for hex codes or manually creating Tailwind configs. Just paste and build.