Logo design
A logo does not explain a company; it identifies it. Its job is to be recognised quickly, at any size, in one colour, by someone who is not paying attention. This page covers the kinds of logo, what basic shapes communicate, the principles that make a mark last, and how to use a logo inside a MIAN interface.
Five kinds of logo
| Kind | What it is | When it works |
|---|---|---|
| Wordmark | The name, set in a distinctive way. | The best default for a new brand: it teaches the name. Needs a short name and a typeface with character. |
| Lettermark | One or a few initials. | For long names. People must learn what the letters stand for, so it takes longer to work. |
| Symbol | A picture or abstract mark on its own. | Only works alone after years of being seen beside the name. |
| Combination | A symbol and a wordmark that can be used together or apart. | The most flexible: the symbol becomes the app icon and favicon, the wordmark does the introducing. |
| Emblem | The name inside a shape, like a seal or a badge. | Feels traditional and official; loses detail at small sizes. |
What shapes say
Circle
Unity, community, completeness, softness. Friendly and inclusive; no direction, so it feels stable and safe.
Square and rectangle
Stability, order, reliability, honesty. The shape of buildings and documents; feels solid and a little formal.
Triangle
Direction, energy, ambition, risk. Pointing up it is growth, pointing right it is progress, pointing down it is tension.
Vertical lines
Strength, height, authority.
Horizontal lines
Calm, speed, breadth, the horizon.
Curves and organic shapes
Movement, nature, humanity, pleasure.
Sharp angles
Precision, technology, aggression, speed.
Eight principles
- Simple
- It can be drawn from memory after seeing it once. If it needs explaining, it is an illustration, not a logo.
- Works in one colour
- Design it in black first. Colour, gradients and effects are added to a mark that already works, never used to make it work.
- Scales
- Legible at 16 pixels (a favicon) and at 16 metres (a sign). Test both before approving anything in between.
- Distinctive silhouette
- Fill it in solid black: is the outline still yours? Recognition lives in the outline.
- Appropriate
- It suits the sector’s expectations just enough to be believed, and breaks them just enough to be noticed.
- Timeless before fashionable
- Avoid the effect of the year. A good mark can be redrawn, never replaced.
- Built on a grid, corrected by eye
- Geometry gives consistency; optical corrections (round shapes slightly larger than square ones, thinner horizontals) make it look right.
- One idea
- A mark that tries to show the product, the founder’s initial and the mission shows nothing.
Rules for using it
- Clear space: keep an empty margin around the logo equal to the height of one of its letters.
- Minimum size: decide the smallest size at which it stays legible (often 24px tall for a wordmark, 16px for a symbol) and never go below it.
- Versions: full colour, one colour dark, one colour light, and a symbol-only square for icons. Nothing else.
- Backgrounds: say which backgrounds are allowed. On photographs, use the one-colour version.
- Never: stretch it, recolour it, add a shadow or outline, rotate it, or rebuild it in another typeface.
A logo inside a MIAN interface
- Use an inline SVG that draws with currentColor, so the logo takes the noodle’s ink in light and dark automatically.
- In a site header, the logo is 24 to 32px tall and links to the home page with an accessible name (“Company home”).
- The favicon is the symbol alone on a solid background, at 32px and as a 512px maskable icon.
- Match the mark to the noodle’s geometry: square marks for square noodles, round marks for round ones. A pill-shaped interface with a sharp, angular logo looks like two brands.
- Do not put the logo in the hero as well as the header. Once per screen is enough.
<a class="mn-site-brand" href="/" aria-label="Acme home">
<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" aria-hidden="true">
<path d="M3 20 12 4l9 16Z"/>
</svg>
<span>Acme</span>
</a>Every noodle page says which kind of mark suits its geometry and type, under Colour, type and brand.
Five tests before you approve it
- The squint test: blur your eyes. Is it still a clear shape?
- The favicon test: 16px, one colour. Still recognisable?
- The neighbour test: place it among ten competitors’ logos. Can you find it in one second?
- The fax test: black on white, no greys. Does it survive?
- The memory test: show it for five seconds, then ask someone to draw it.