Brand Identity Design: From Strategy to Visual System · Designing logos that last · lesson 6 of 18 · 7 min

Logo systems, usage rules and protection

One logo, many situations

A single logo file is not enough. Brands appear in square profile pictures, horizontal website headers, vertical signs, tiny favicons, embroidered uniforms and video end cards. A logo system provides the right version for each situation and rules that keep it consistent.

Core variations

| Variation | Use | |---|---| | Primary lockup | Default version when space allows | | Horizontal lockup | Website headers, email signatures, banners | | Stacked lockup | Square or vertical spaces | | Symbol / monogram only | Profile pictures, app icons, favicons, social watermarks | | Wordmark only | When the symbol is already present or too small | | Bilingual lockups | Script-first versions for different markets |

Color versions

Full color on light backgrounds.
Reversed (white or light) on dark or brand-color backgrounds.
One color black and one color white for single-color printing, engraving, embossing and partner materials.
Optional: a version for photographic backgrounds.

Usage rules

Clear space: define a minimum empty area around the logo, often measured using a part of the logo itself (for example the height of a letter), so it scales with the logo.

Minimum size: the smallest size at which the logo remains legible — define it in pixels for screens and millimeters for print, and specify which variation to use below it (for example the symbol only).

Placement: preferred corners or positions for social templates, video watermarks and documents.

Misuse examples ("don'ts"):

Don't:
- Stretch or squash the logo
- Change the colors outside approved versions
- Add shadows, outlines or effects
- Rotate or rearrange elements
- Place on busy backgrounds without the approved treatment
- Recreate the wordmark by typing it in a font
- Put the logo inside another shape not in the guidelines

File delivery

Deliver a logo pack that covers print and digital:

/Logo
  /Primary    SVG, PDF (vector), PNG (transparent, several sizes)
  /Horizontal SVG, PDF, PNG
  /Stacked    SVG, PDF, PNG
  /Symbol     SVG, PDF, PNG, app-icon and favicon sizes
  /Mono       black and white versions
  /Print      CMYK PDF, spot color versions if used
README        which file to use where

Name files predictably: brand_logo_horizontal_fullcolor_rgb.svg.

Protecting the logo: trademark basics

This is general information, not legal advice; trademark law is territorial and varies by country.

Search before you commit. Check official trademark databases in the countries where the brand operates (for example national IP offices in the UK, US, Pakistan, the UAE and Saudi Arabia, plus the WIPO Global Brand Database) and search the market for similar names and marks in the same category.
Distinctiveness matters. Descriptive names and generic symbols are harder to protect.
Registration is by class and territory. Trademarks are registered for specific goods/services classes and countries. International routes such as the Madrid System can simplify filing in multiple countries.
Ownership of design work. In many jurisdictions, a freelancer owns copyright in their design until it is assigned in writing. Contracts should clearly transfer rights in the final logo to the client on payment, and state which fonts or third-party elements need separate licenses.
Use a professional. For important brands, involve a trademark attorney or agent.

Worked example: a creator's logo system

A YouTube and Instagram creator, "Noor Makes", commissions an identity:

Primary: custom wordmark "Noor Makes" with a small star-shaped symbol.
Symbol only: the star inside a circle for profile pictures and watermark.
Horizontal: for YouTube channel art and website header.
Color versions: deep purple on cream; cream on purple; black; white.
Clear space: height of the "N" on all sides. Minimum width: 120 px for the wordmark; below that, the symbol only.
Watermark rule: symbol at 60% opacity, bottom-right safe area on videos.
Contract: copyright in the final logo assigned to the creator on final payment; font license purchased in the creator's name.

Common mistakes

Delivering one PNG and nothing else.
No minimum size or small-size alternative.
Skipping trademark searches until after launch.
Assuming the client owns the design without a written assignment.

Hands-on: logo export specs for digital touchpoints

| Asset | Format | Size / notes | |---|---|---| | Master files | SVG + PDF (vector) | Outlined text; RGB for screen, CMYK/spot versions for print | | Website favicon | SVG favicon plus ICO/PNG fallback | Include 16, 32 and 48 px renderings of the simplified symbol | | Apple touch icon | PNG | 180 × 180 px | | App store icon | PNG | 1024 × 1024 px for Apple's App Store (check each store's current specs) | | Social profile picture | PNG | Square, at least 400 × 400 px; keep the symbol inside the circle crop | | Video watermark | PNG with transparency | Symbol only; define opacity and position | | Email signature | PNG | Horizontal lockup at 2× for sharpness; keep file small |

Trademark checklist (general information, not legal advice)

[ ] Knockout search: official databases in each market — e.g. USPTO (US),
    UKIPO (UK), EUIPO (EU), IPO Pakistan, SAIP (Saudi Arabia), the UAE's
    trademark office, plus WIPO's Global Brand Database
[ ] Search the market: app stores, social handles, domains, marketplaces
[ ] Identify goods/services classes (Nice Classification)
[ ] Decide route: national filings or the Madrid System for several countries
[ ] Written assignment of copyright in the final logo to the client
[ ] Font and third-party element licenses cover logo use
[ ] Calendar: renewals, and monitoring for copycats
[ ] Trademark attorney/agent involved for important brands

Before/after: a delivery that works

| | Before | After | |---|---|---| | Files | One PNG with a white background | SVG/PDF masters, PNGs per lockup, favicon and app icon set, mono versions | | Guidance | None | One-page logo usage sheet: variations, clear space, minimum sizes, don'ts | | Rights | "It's yours" in a DM | Signed assignment on final payment; font license in the client's name | | Protection | Name used for a year before searching | Searches before launch; filing in key markets |

Summary

Build a logo system with lockups, a symbol, color versions, clear space and minimum sizes, deliver an organized file pack, and handle trademark searches and rights transfer properly.

Video lecture: Logo systems, usage rules and protection

Lecture coming soon · 11 chapters · about 9 minutes. Read the full transcript below.

Logo systems and protection
Why a system
Variations and color versions
Usage rules
Worked example 1: a creator's logo system
Worked example 2: a bakery expanding
Watch me do it: the logo file pack
Protection basics
Digital icon set
Common mistakes
Recap and try this now

Lecture transcript

Logo systems and protection

Here's a delivery that happens more often than you'd think. The designer finishes a great logo and sends the client one PNG file, with a white background. A week later, the client needs it on a dark website header, as a favicon, on an embroidered polo shirt, and in a partner's brochure. None of it works. The white box shows up everywhere, the logo blurs when enlarged, and nobody knows how much space to leave around it. In this lecture, you'll learn how to build a logo system with variations and color versions, write usage rules, deliver a proper file pack with export specs, and handle trademark and ownership basics. By the end, your logos will work in every situation, and they'll be protected.

Why a system

Why does a system matter? Because brands appear in wildly different situations: square profile pictures, horizontal website headers, vertical signs, tiny favicons, embroidered uniforms and video end cards. A single logo file can't handle all of them. And without rules, everyone improvises, which erodes the identity quickly. Think of a font family. You don't have one font file. You have regular, bold, italic and more, each for a different job, all clearly part of one family. A logo system is the same idea. Different versions for different jobs, all unmistakably the same brand.

Variations and color versions

Here are the core variations. The primary lockup is the default when space allows. A horizontal lockup suits website headers, email signatures and banners. A stacked lockup fits square or vertical spaces. The symbol or monogram alone handles profile pictures, app icons, favicons and watermarks. A wordmark alone works when the symbol is already present or too small. And bilingual lockups give each script a first-class version for different markets. Then color versions: full color on light backgrounds, reversed on dark or brand-colored backgrounds, one color black and one color white for single-color printing, engraving, embossing and partner materials.

Usage rules

Now usage rules. Clear space is the minimum empty area around the logo, often measured using part of the logo itself, like the height of a letter, so it scales with the logo. Minimum size is the smallest size at which the logo stays legible, defined in pixels for screens and millimeters for print, along with which variation to use below it. Placement rules cover preferred corners for social templates, video watermarks and documents. And then the don'ts: don't stretch or squash it, change colors, add effects, rotate or rearrange elements, place it on busy backgrounds without the approved treatment, or recreate the wordmark by typing it in a font.

Worked example 1: a creator's logo system

Worked example one, simple. A YouTube and Instagram creator commissions an identity. The primary is a custom wordmark with a small star symbol. The symbol alone, inside a circle, becomes the profile picture and video watermark. A horizontal version handles channel art and the website header. Color versions: deep purple on cream, cream on purple, black and white. Clear space: the height of the N on all sides. Minimum width: a hundred twenty pixels for the wordmark, and below that, the symbol only. Watermark rule: the symbol at sixty percent opacity in the bottom-right safe area. And the contract assigns copyright in the final logo to the creator on final payment, with the font license bought in the creator's name.

Worked example 2: a bakery expanding

Worked example two, a business scenario with illustrative details. A bakery chain in Lahore has used its name for a year and is about to open branches in Dubai. Only now does the owner ask about trademarks. The agency's advice: search first. They run knockout searches in the official databases for each market, like IPO Pakistan and the UAE's trademark office, plus WIPO's Global Brand Database, and search app stores, social handles and domains. They identify the classes for bakery goods and café services. For several countries, they consider the Madrid System. They also discover the original freelance designer never assigned the logo's copyright in writing, so they get a signed assignment. And a trademark attorney handles the filings. Expansion goes ahead without surprises.

Watch me do it: the logo file pack

Watch me do it. I'm building the logo file pack. I create a folder called Logo with subfolders for primary, horizontal, stacked, symbol, mono and print. In each, I export SVG and PDF masters with outlined text, plus transparent PNGs at a few sizes. For the symbol, I add the digital specs: an SVG favicon with sixteen, thirty-two and forty-eight pixel renderings, a hundred-eighty pixel Apple touch icon, a ten twenty-four pixel app store icon, and a four-hundred pixel profile picture that fits the circle crop. In print, I add CMYK PDFs and spot color versions. Then I write a README that says which file to use where, and name everything predictably, like brand, logo, horizontal, full color, RGB, SVG.

Protection basics

Let's go deeper on protection basics. This is general information, not legal advice, because trademark law is territorial and varies by country. Search before you commit, in the official databases where the brand operates, plus the WIPO Global Brand Database, and in the market itself. Distinctive names and marks are easier to protect than descriptive ones or generic symbols. Registration is by class of goods or services and by territory, and the Madrid System can simplify filing in several countries. And ownership of design work: in many places, a freelancer owns the copyright in their design until it's assigned in writing. So contracts should transfer rights in the final logo on payment, and note any fonts or elements that need separate licenses.

Digital icon set

Let's make the digital icon set concrete, because this is where small logos live every day. For the website, deliver an SVG favicon plus a PNG or ICO fallback, and check the simplified symbol at sixteen, thirty-two and forty-eight pixels. For Apple devices that save your site to the home screen, a one hundred eighty pixel touch icon. For an app, Apple's App Store asks for a ten twenty-four pixel icon, and other stores have their own specs, so check them. For social profiles, a square image of at least four hundred pixels, with the symbol comfortably inside the circle crop. And for video, a transparent watermark with a defined opacity and position. Put all of these in one icons folder, named clearly.

Common mistakes

Common mistakes. Delivering one PNG and nothing else. No minimum size or small-size alternative. No reversed or one-color versions. Letting people type the wordmark in a font. Skipping trademark searches until after launch. Assuming the client owns the design without a written assignment. Forgetting that the wordmark's font needs a license that covers logo use. And no README, so nobody knows which file to use. A one-page logo usage sheet plus a well-named file pack solves most of these in an afternoon.

Recap and try this now

Let's recap. A logo needs a system: primary, horizontal, stacked, symbol and wordmark versions, bilingual lockups where needed, and full color, reversed and one-color versions. Write usage rules for clear space, minimum sizes, placement and don'ts. Deliver an organized file pack with vector masters, PNGs and digital icon sizes, plus a README. Search trademarks before launch, register by class and territory, and assign rights in writing. Try this now. Build a logo usage page for a brand: list its variations, color versions, clear-space rule, minimum sizes and five don'ts, and draft a file-pack folder structure with a README.

Key takeaways

A logo system includes primary, horizontal, stacked, symbol and wordmark versions, bilingual lockups and full-color, reversed and one-color versions.
Usage rules define clear space, minimum sizes (with a fallback variation), placement and don'ts.
Deliver SVG/PDF masters, PNGs, favicon/app/profile icon sizes, print versions and a README.
Search trademarks before launch in each market; registration is by class and territory (Madrid System for several countries).
Assign copyright in the final logo in writing and confirm font licenses cover logo use.

Try it

Build a logo usage page for a brand: list its variations, color versions, clear-space rule, minimum sizes and five 'don'ts', and draft a file-pack folder structure with a README.