Brand Identity Basics: Logo, Colour, Typography

In most businesses brand identity is assumed to consist of a single logo file. Yet the logo is only one part; what really matters is how that logo behaves in different places, which colours and which typeface stand next to it. Inconsistency in digital shows most here.

What is the minimum needed for a brand identity?

Four things are enough: versions of the logo prepared for different environments, a palette of two or three colours, a font family and a short note describing where and how to use them. A comprehensive brand guide is a matter for large corporations; for a small business these four cover everything needed to look consistent.

Which formats the logo should be ready in

A single file isn't enough. The minimum set is:

• Vector (SVG): the master source. Stays sharp at every size, used directly on the web.
• Light and dark background versions: a logo that can't be read on a dark background gets lost in the site's footer.
• Horizontal and square versions: the horizontal logo doesn't fit the profile picture area; a square (icon) version is needed.
• Simplified icon: the full logo can't be read at 16 pixels. A lettermark or symbol is used for the browser tab and app icon.

If these four versions aren't ready, you have to go back to the designer with every new need, and over time differing, hand-cropped copies appear.

How to build the colour palette

A simple three-layer structure is enough for most jobs:

The most common mistake is spreading the primary colour everywhere. The primary colour draws attention when used sparingly; if half the page is the brand colour, nothing stands out.

When choosing colours also check the contrast ratio. Light grey text on a light grey background may look elegant but can't be read; for accessibility a 4.5:1 ratio is the baseline for normal text.

Choosing fonts

Two typefaces are enough for most brands: one for headings, one for body text. Using different weights within a single family is also valid and usually gives a more consistent result.

Look at three criteria for the web:

1. Turkish character support. If ğ ş ı İ ç ö ü are missing, the font can't be used. Look for Latin-ext support.
2. File size. Each weight is a separate file. Loading more weights than necessary lowers page speed; two or three weights are usually enough.
3. Readability at small sizes. A decorative typeface that looks nice in a heading can't be read at 14 pixels.

Serving fonts from your own server (self-hosting) is both fast and cleaner in terms of privacy, since no data goes to a third party.

What keeps consistency is not a document but file organisation

Long guides get written and not read. The method that works is making the right file easy to find: in a single folder, logo versions with clearly written names and a short note with the colour codes.

When someone crops the logo from a screenshot and uses it, consistency breaks there; the reason is usually not bad intent but not being able to find the right file.

The three most overlooked places in digital

1. Browser tab icon. When missing, a blank page icon appears in the tab; a small but trust-breaking detail.
2. Share image. The card that appears when the site link is shared on social media. If not defined, the link appears as bare text.
3. Email signature. When everyone on the team designs their own signature, messages from the same business look like they come from different companies.

When to refresh

Changing the brand identity often damages recognition. The situations that justify a refresh are limited: a change of business line, a marked change in target audience, or the existing identity being technically unusable (like the vector source being lost).

If none of these apply, fixing the application usually pays more than changing the identity.

The relationship between identity and web design

Brand identity doesn't replace web design; it lays the groundwork for it. When the designer is given only a logo file, colour and typography decisions are improvised during the project; the result is usually a nice site that is independent of the brand.

If the identity is defined up front, the design process is both shorter and less contentious: colour choice, heading size and button appearance are already set; what's left to discuss is layout and content.

That's why in site redesign projects the order is: first the identity is settled, then design starts. Done the other way round, the identity takes shape according to the site and inconsistencies appear in printed work.

Consistency on social media

Profile images are square and small; the full logo is usually unreadable. Use the icon version and put the same image on all platforms.

Cover images are cropped at different ratios from platform to platform. Keeping the important content in the centre saves preparing a separate image for each platform.

Then there's name consistency: the username being the same on every platform makes it easier for the search engine to associate them with the same brand and for people to find you.

Sizing and spacing rules

How much space to leave around the logo is the most violated rule of the identity. A simple measure works: a margin equal to the height of one of the letters in the logo is kept on every side.

Likewise set a lower limit: the smallest width at which the logo may be used. Below that, the icon version is used instead of the full logo.

Frequently asked questions

Should I have a logo designed or buy a ready-made one? Ready-made templates are fast and cheap, but the same template may belong to others too and can cause problems in trademark registration. If you're building a long-term brand, original design is safer.

How many colours should I use? One primary colour, three to five neutral shades and three status colours are enough for most jobs. More makes consistency harder to keep.

Is a font licence needed? For commercial use, yes. Some fonts that look free are open only for personal use; check the licence before using them on the web.

Handing over the identity

When the design work ends you should have not only the finished images but also the source files: the vector version of the logo, the names and licence information of the fonts used, the colour codes.

When these aren't received, a few years later even the simplest need — a sign, packaging — requires a redesign. The line "source files will be delivered" in the contract is therefore not a visual detail but a commercial safeguard.

To generate the browser tab icon and app icons from your logo you can use the Favicon Generator, and to convert between colour codes the colour converter on the Developer Tools page.