My student could design the mark. She asked which files I wanted, and that question showed the real gap. This is the logo system I gave her, written so a beginner can follow it and a person who already uses Illustrator or Figma can deliver it.
She was designing a logo for me. The mark was fine. Then she asked which assets and file formats I wanted, and I realised the gap was not her drawing. It was the system around the drawing. So I wrote this so she can learn the standard once and use it on every job.
A logo is not done when the PNG looks good.
You can design a clean mark in Adobe Illustrator or Figma and still hand the client a job they cannot use. I found that out from a student. She was designing a logo for me. The mark was fine. Then she asked me to tell her the assets and document formats I wanted.
That question told me the truth. She could draw. She did not yet know the standard logo system. If I only sent her a list, she would finish my job and freeze on the next one. I wanted her to learn how to fish.
This is the system. If you are new to logos, read it as a map. If you already know Illustrator or Figma, read it as the delivery standard.
What the client actually buys
A client does not buy a pretty picture. They buy a mark they can put on a website, a receipt, a dark banner, a T-shirt, a stamp, and a phone icon without calling you back.
One full-color PNG fails that test. A printer cannot scale it. A developer cannot recolor it. A dark header swallows it. A browser tab turns the wordmark into mud.
Charge for the system, not the picture. The system is one master file, named boards, the versions below, and a tidy folder.
Here is the difference in plain terms.
A weak handoff is one PNG, one PDF, and a few color codes in a chat message. The client says thank you. Two weeks later they ask for a white version, then a stamp version, then a tiny icon. You do that work for free, or you look difficult.
A system handoff answers those requests before they arrive. You do the work once, while you are still in the file. You price it once. You stop reopening the job.
Say this when you send the quote: “The logo fee covers the mark. The system fee covers the versions, the color codes, and the files your printer and your developer can use without calling me.” Separate the two numbers. People pay for the second one when they can see what breaks without it.
Build it once, then copy it
Draw the approved logo once. Copy it onto every other board. Do not redraw it. Redrawing is how spacing drifts and how one version stops matching the others.
In Illustrator, use artboards. In Figma, use frames. One version per board. Name the board. The name becomes the export filename.
Place the logo with the align tools, not by eye. Center it to the board. Hold Shift, or keep the scale link on. Never stretch.
A round mark often needs to sit a hair above the mathematical center. A name with a g, y, or p needs the visual weight centered, not the bounding box. Trust your eye for that last nudge. Trust the align panel for everything else.
Use two kinds of board.
The presentation board is for the client sheet. Same size. Same padding. The logos sit in proportion, so the client can compare them.
The export board is for the files people will actually use. Fit the board to the artwork. In Illustrator that is Object > Artboards > Fit to Artwork Bounds. In Figma, set the frame to the logo bounds before export. A PNG with a huge empty margin looks off-center when someone drops it into a header.
Clear space is a measurement, not a vibe. Pick one unit. The icon height works. Call it x. Leave x empty on every side. Draw that box on a guidelines board so the client can see the rule.
Name the boards like this:
- 01_Primary_Horizontal_Color
- 02_Primary_Stacked_Color
- 03_Icon_Color
- 04_Horizontal_Black
- 05_Horizontal_White
- 06_Horizontal_Grayscale
- 07_Icon_Black
- 08_Icon_White
- 09_Favicon
- 10_Clearspace
- 11_Color_Palette
If you already know the tools, the failure is usually here, not in the drawing. You design on one artboard, export a selection, and the padding changes every time. Named boards remove that. Export the boards, not a random selection.
Give the logo more than one shape
One layout cannot fit every space. Build three.
Horizontal. Icon and name side by side. Use this on a website, an invoice, and an email signature.
Stacked. Icon above the name. Use this on a poster, a package, or a cover.
Icon only. Or initials, if the logo is only a wordmark. Use this for an avatar, a stamp, embroidery, and the favicon.
Then make color treatments from the same artwork. Do not invent new colors.
Full color is the approved logo.
Black is every shape in solid black. Stamps, newspapers, and one-color print need this.
White is every shape in white, shown on a dark board. Photos, dark headers, and black T-shirts need this.
Grayscale is a real conversion. In Illustrator use Edit > Edit Colors > Convert to Grayscale, then adjust until the light parts still show. In Figma, rebuild the mark in gray values. A faded color logo is not grayscale.
One brand color is optional. Use it when a printer has one ink.
Stop there. Clients pay for versions they will use, not for five extra colorways.
Test each version on a real surface before you export. Drop the horizontal logo on a fake invoice header. Drop the white logo on a dark photo. Drop the black logo on a rough paper texture in your head, or on a gray board. If a thin line disappears, thicken it in the master, then copy again. Fixing it only on one board creates a second logo.
A favicon is a new design
Do not shrink the full logo and call it a favicon. At 16 pixels the name becomes a smudge. Design a simple mark. One shape. Two or three colors. Thick strokes. View it at 16 px. If you cannot tell what it is, simplify it again.
Export square PNGs from the icon:
- 16×16 and 32×32 for the browser tab
- 48×48 as the favicon source
- 180×180 for Apple, on a solid background, not transparent
- 192×192 and 512×512 for Android and web apps
- 400×400 or 800×800 for a social avatar, with the clear space left on
Set a minimum size and obey it. Keep the horizontal logo at least 80 px wide on screen, or 25 mm wide in print. Keep the icon at least 16 px. If it breaks, simplify the icon. Do not just shrink the full logo.
Do the small-size test in the tool, not after export. In Illustrator, zoom to 100% and set the icon frame to 32 px. In Figma, select the frame and type 32 in the width. If you need to squint, the favicon is not done. Simplify the favicon only. Leave the primary logo alone.
Write the colors down
On the color board, show swatches only. No logo. Under each color write HEX, RGB, and CMYK. A screen uses HEX and RGB. A printer uses CMYK. If you only send HEX, the print job guesses.
Include the primary, the secondary, a dark neutral, a light neutral, black, white, and a mid gray. Add two real tints of the primary, about 20% and 50%, for backgrounds. Record the HEX of each tint.
Do not tell the client to use 20% opacity. Opacity changes on every background. A tint does not.
Save the swatches in the file. Type the codes under each swatch. That page is what the printer or the developer will use.
Add one line the client can act on: where each color goes. Primary on the logo. Dark neutral on text. Light neutral on page backgrounds. Tint on cards and charts. That stops a client from painting the whole website in the logo gold.
Check the icon against its background before you call the palette done. If you cannot tell the mark from the board at arm’s length, the pair is too close. Change the background or the icon color. Do not hope the screen will sort it out.
Pack the folder
Name it ClientName_Logo_Pack. Put this inside:
- 01_Master. The editable file, with type outlined, plus a copy that still has live text. Outline the type so a missing font cannot break the logo.
- 02_Print. PDF and EPS in CMYK, for horizontal, stacked, black, and white.
- 03_Web. SVG of each version, fonts outlined. SVG scales on a website. PNG does not.
- 04_PNG. Transparent PNG, plus one at 300 ppi for documents.
- 05_Favicon. The sizes above.
- 06_Guidelines. One page with the versions, the color codes, the clear-space diagram, the minimum size, and three rules: do not stretch, do not recolor, do not add a shadow.
Export with the board names turned on, so the filenames match the boards.
In Illustrator, outline the type on the delivery file and keep a second file with live text. Name that one _Editable. In Figma, export SVG with outlined strokes if the file will leave your account. A client who does not have your font will open a broken wordmark and blame the logo.
Send a short note with the folder. Four lines are enough.
“Horizontal is the default. Use stacked when the space is tall. Use the icon when the space is square or tiny. Use white on dark backgrounds, black on one-color print. Do not stretch, recolor, or add a shadow. The color codes are on the palette page.”
That note saves you the follow-up call.
What to leave out
A system is not a brand book. Do not add mockups of cars, mugs, and billboards unless the client paid for them. Do not design five unused colorways. Do not send a JPG with a white box and call it transparent.
Leave those out and you protect your fee. Every extra pretty page is unpaid work unless you priced it.
The pass test
The job is done when all of these are true.
Every version sits on its own named board, centered with the align tool. Horizontal, stacked, and icon exist, and the icon still reads at 32 px. Black, white, and grayscale are real versions, not a transparency trick. Clear space is a measured x. The color sheet has HEX, RGB, CMYK, and two real tints. SVG and PDF open with no missing fonts. PNGs are transparent, and the padding is even.
Open the SVG and the PDF on a computer that does not have the font installed. If the letters change, you did not outline the type. Zoom the icon to 32 px. If you cannot name the business from the mark, simplify the icon. Turn a PNG background off and on. If a white box appears, the background is not transparent.
I am using this standard on two real marks with my student, the Ustawi Framework logo and the JuryHQ logo. Same bar for both. A strong pack and a weak pack is not a pass.
She asked me which files I wanted. The useful answer was not a shopping list. It was a system she can run without me. That is the work a client can pay more for.