How to Hand Off a Brand Kit to a Designer or Developer

If you have ever sent someone a logo as a JPG screenshot with the message "use this color, hex code attached," you have already burned 30 minutes of the recipient's day. Brand kit handoffs are not glamorous, but the difference between a clean one and a sloppy one is whether the receiving person rebuilds files from scratch or just gets to work.

What to actually send

A handoff is a ZIP file. One file. Not seven email attachments and a Dropbox link. The folder structure that works:

brand-kit/
  logo/
    logo-horizontal.svg
    logo-horizontal.png
    logo-stacked.svg
    logo-stacked.png
    logo-mono.svg
    logo-knockout.svg
  favicon/
    favicon-16.png
    favicon-32.png
    favicon-180.png      # apple-touch-icon
    favicon-192.png      # android
    favicon-512.png      # PWA
    favicon.ico
    site.webmanifest
  colors.md
  fonts.md
  brand-board.pdf
  README.md

The five logo files per format cover icon-only, horizontal, stacked, monochrome, and knockout uses. The favicon pack covers browser tabs, iOS home screens, Android, and PWA installs. The two markdown files are colors with hex codes and role labels, and the font pairing with download links and license info. The brand-board PDF is a one-page visual summary (more on that in a second). The README is a 5-line note saying who made the kit, when, and where to reach you with questions.

If you do not have all of it, send what you have and flag what is missing. Do not send a JPG. Do not send a Canva share link as the only deliverable.

The brand board is the part most people skip

A brand board is a one-page PDF that shows the logo in context: primary lockup, alternate lockups, color palette with hex codes, font samples at heading and body sizes, and a few do/don't examples of correct logo use. It is the file your contractor screenshots into the top of their Figma working file, or that you paste into the Notion onboarding page for new hires.

If you have a brand-guidelines PDF, that is also fine, but most small businesses overcommit on guidelines and undercommit on the one-page summary. The summary is what gets referenced day-to-day. Build the brand board before you bother with a full guidelines doc.

What developers want that designers do not

If the receiving person is building a website or app, they need a few things that designers do not care about.

CSS-friendly color tokens. Send hex codes, but also send them in a format that is already named. A colors.md that looks like this drops straight into a stylesheet:

:root {
  --brand-primary: #0F2A4A;
  --brand-secondary: #E8B14C;
  --brand-accent: #C3361B;
  --brand-surface: #FAF8F3;
  --brand-text: #14171A;
}

If you have a Tailwind palette or a Figma token export, include the raw JSON alongside.

A favicon manifest. Browsers and mobile OSes look for specific filenames at specific sizes. If you can include the <link> tags pre-filled, you save the developer 20 minutes of mucking around:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/favicon-180.png">
<link rel="manifest" href="/site.webmanifest">

For the size reference, see the favicon design post.

An OG image. The 1200x630 social preview image, included as a PNG. If the developer has to generate this themselves from your logo, they will either skip it or do it badly.

SVGs that have not been touched by Illustrator's auto-export. Open the SVG file in a text editor. If you see a thousand lines of metadata and a clip-path hack, run it through SVGO to clean it up before sending. Clean SVGs drop into code without breaking.

What designers want that developers do not

If the receiving person is doing print, social, or further design work, they need different things.

The editable source files. If your logo started in Figma, Illustrator, or Affinity, export the editable file too. SVG is enough for most cases but not all. A designer doing a billboard or packaging may need the original working file.

The lockup rules. Which version goes on dark backgrounds. The minimum size before the icon-only mark should be used instead of the full lockup. The clear-space rule: if the icon renders at 40px tall in the header, leave 40px of empty space on every side. No nav item, no tagline, nothing inside that box.

The off-brand examples. Show what the logo should not look like: the horizontal lockup stretched to fit a square Instagram crop, the white knockout placed on a pale yellow background that washes it out, the primary lockup floating over a busy product photo. Two or three real "don't" examples save more revision rounds than any amount of guidelines text.

The do-not-do list

Two of these come up over and over. Do not send PSD files unless the recipient has asked for them. If you send a 400MB Photoshop file to a developer who does not own Photoshop, you have just bought them an afternoon installing a trial. And do not send the kit through Slack or iMessage as image attachments. Both will compress your transparent PNG into a JPEG with a white-ish background. Use a real file-sharing link or a ZIP.

Send a ZIP. Or a single shared folder if the kit is large. The receiving person should be able to download once, unzip, and start working without messaging you back for missing pieces.

If you do not have a brand kit yet

A handoff is only as good as what is in the ZIP. If you do not have a logo yet, start one first; the palette, lockups, and favicons all derive from that file. If you are choosing a kit tool and want to compare deliverables, the Looka alternative breakdown lays out what each tier ships.

Most small businesses do not need a custom design system. They need a working ZIP they can hand to whoever is doing the work this month. Make that one well, and you stop being the bottleneck on every project that touches your brand.