Brand website as an identifier carrier: from logo to web design
Why a website is the most complex identifier carrier
A business card is static: print it and it's forever fixed. A website is hundreds of screen states of the same element. A button looks different in rest, on hover, on click, on keyboard focus, in a loading state, and in an error state. A logo must look equally recognizable on a 27 inch screen and in a favicon of 16×16 pixels. That is why transferring identity from paper to the web is not copying, but repurposing: some solutions are simplified for readability on small screens, and others are complicated because interactivity appears, which was not present in the static version.
A separate reason for the fragility of web identity is organizational. When a brand is developed by one team (strategists and designers), and the website is handed over to an outsourcing studio, a 'Frankenstein effect' occurs: the parts visually resemble each other, but have not merged — different grid rhythm, different color logic, and a different feeling from the interface. The website should be born in the same hands as the brandbook, or the guidelines should be written from the outset with a focus on the web, not adapted afterward.
Logo on screen: formats, sizes, versions
The logo for the website lives in SVG format — it scales without quality loss at any pixel density and usually weighs 2–10 KB, which does not burden page loading. Raster PNGs on the site are only justified for favicon and specific static locations.
| Logo version | Where used | Size / format |
|---|---|---|
| Main (colored) | Header on a light background | SVG, height 30–60px in the header |
| Inverted (light) | Dark background, footer, dark theme | SVG |
| Monochrome | Printed materials, fax, documents | SVG / EPS |
| Favicon | Browser tab | 32×32 px, ICO/PNG |
| Apple Touch Icon | Icon on iOS screen | 180×180 px, PNG |
| Android Icon | Icon on Android screen | 192×192 px, PNG |
| Symbol without text | Mobile header, narrow screens | SVG |
On desktop, the logo in the header usually takes 150–250px in width with a height of 30–60px. On mobile, a full logo with text often does not fit in the header without losing readability — then only the symbol is left. The main practical requirement is that the logo must be recognizable at 32×32 pixels in size, because that is how it appears in the browser tab and bookmarks. If the symbol loses recognizability at such compression, this is a reason to reconsider its construction at the development stage, not after the website launch.
Color and typography: from the brand book palette to CSS variables
Error that almost all projects without a design system make — the color is described as "aesthetic", but not as functional. On a website, each color must have a purpose: error color, success color, link color, background color for highlighting a block, disabled button color. If this is not fixed in CSS variables (custom properties or design tokens), each developer adds their own shade "by eye" — and after six months there are five different reds on the site.
The same applies to typography. A working system usually looks like this: H1 — 48px, H2 — 36px, H3 — 28px, main text — 16px, captions and auxiliary text — 14px, plus fixed rules for line spacing for each level. No more than two fonts are used for the entire site — heading and text fonts, otherwise the interface begins to visually 'noise'. The key difference from print typography: in web design, the font must load quickly, so font selection is also a performance question, not only aesthetics.
Micro-interactions are the language of the brand, not decoration
This is the identity layer that is hardly discussed in articles about brandbooks, yet it determines whether a brand feels 'friendly' or 'cold'. How a button reacts to a click, how smoothly a menu expands, whether the cursor pauses before an interface response — all this is subconsciously read by the user, faster than they can read text.
The rule is simple: animation must last 150–400 milliseconds. Longer than a second — the interface seems sluggish and 'heavy', regardless of actual load speed. Technically, micro-animations must only be built on GPU-accelerated CSS properties — transform and opacity — to avoid page rendering slowdowns. Animation via changing width, height, or margin loads the browser with layout recalculation and visually judders.
An important nuance often overlooked: some users disable animation for medical reasons (vestibular disorders, motion sensitivity). Nielsen Norman Group and WCAG 2.2 standard require supporting system settings — in CSS, this is done via @media (prefers-reduced-motion: reduce). A site that ignores this setting is not just technically careless — it loses accessibility as part of brand ethics.
Design system as a framework that holds identity as the site grows
On a site with five pages, you can manually track consistency. On a site with two hundred pages — no. That is why a design system is not a reference document, but a working tool embedded in the development process. It consists of three layers:
- Basic constants — logo, color palette, typography. This is what does not change regardless of the page.
- Style-forming elements — grid, patterns, icons, photo style, animation principles. This is what sets the 'character' of the interface.
- Media — specific application on real pages: product card, contact form, 404 page.
In practice, this is implemented through design tokens (variable colors, spacing, shadows, animation speed) collected in a UI kit in Figma, which is synchronized with CSS variables in the code. When a designer changes the 'color-error' token in one place, it is automatically updated across all website forms — from registration to checkout. Without this layer, the identity relies solely on team discipline, and discipline does not scale.
Where identity is most often lost
The most common and most underestimated mistake is branding only the main page. The main page is made slowly and carefully, while internal pages — blog, services, contacts, application form, 404 page — are quickly assembled, 'according to the residual principle'. When a user navigates from the main page to an internal page, they see a different font, a different shade of blue, and a different button layout. The sense of brand integrity is destroyed in seconds, and with it, trust — the person subconsciously decides that the site was 'put together in a hurry'.
- Different shades of the accent color on different pages due to the lack of a unified variable in CSS.
- Mixing typefaces — one font on the blog, another on the product card, because different contractors did the layout.
- A branded main page and a 'default' 404 page or error form — without a logo, without brand colors, as if it were a different website.
- Micro-animations, thought out for buttons on the main page, but missing on forms within the personal account.
- The inverted version of the logo is missing, so on dark sections of the site, the logo is simply 'eaten up' by the background.
This can be fixed in only one way — not cosmetically, but structurally: a unified design system with tokens applied to all screens of the site, including service and error states. The confirmation form, the 404 page, the payment notification email — these are just as much carriers of identity as the main page, just less noticeable until the user actually finds themselves there.
Why a website is the most complex identifier carrier
A business card is static: print it and it's forever fixed. A website is hundreds of screen states of the same element. A button looks different in rest, on hover, on click, on keyboard focus, in a loading state, and in an error state. A logo must look equally recognizable on a 27 inch screen and in a favicon of 16×16 pixels. That is why transferring identity from paper to the web is not copying, but repurposing: some solutions are simplified for readability on small screens, and others are complicated because interactivity appears, which was not present in the static version.
A separate reason for the fragility of web identity is organizational. When a brand is developed by one team (strategists and designers), and the website is handed over to an outsourcing studio, a 'Frankenstein effect' occurs: the parts visually resemble each other, but have not merged — different grid rhythm, different color logic, and a different feeling from the interface. The website should be born in the same hands as the brandbook, or the guidelines should be written from the outset with a focus on the web, not adapted afterward.
Logo on screen: formats, sizes, versions
The logo for the website lives in SVG format — it scales without quality loss at any pixel density and usually weighs 2–10 KB, which does not burden page loading. Raster PNGs on the site are only justified for favicon and specific static locations.
| Logo version | Where used | Size / format |
|---|---|---|
| Main (colored) | Header on a light background | SVG, height 30–60px in the header |
| Inverted (light) | Dark background, footer, dark theme | SVG |
| Monochrome | Printed materials, fax, documents | SVG / EPS |
| Favicon | Browser tab | 32×32 px, ICO/PNG |
| Apple Touch Icon | Icon on iOS screen | 180×180 px, PNG |
| Android Icon | Icon on Android screen | 192×192 px, PNG |
| Symbol without text | Mobile header, narrow screens | SVG |
On desktop, the logo in the header usually takes 150–250px in width with a height of 30–60px. On mobile, a full logo with text often does not fit in the header without losing readability — then only the symbol is left. The main practical requirement is that the logo must be recognizable at 32×32 pixels in size, because that is how it appears in the browser tab and bookmarks. If the symbol loses recognizability at such compression, this is a reason to reconsider its construction at the development stage, not after the website launch.
Color and typography: from the brand book palette to CSS variables
Error that almost all projects without a design system make — the color is described as "aesthetic", but not as functional. On a website, each color must have a purpose: error color, success color, link color, background color for highlighting a block, disabled button color. If this is not fixed in CSS variables (custom properties or design tokens), each developer adds their own shade "by eye" — and after six months there are five different reds on the site.
The same applies to typography. A working system usually looks like this: H1 — 48px, H2 — 36px, H3 — 28px, main text — 16px, captions and auxiliary text — 14px, plus fixed rules for line spacing for each level. No more than two fonts are used for the entire site — heading and text fonts, otherwise the interface begins to visually 'noise'. The key difference from print typography: in web design, the font must load quickly, so font selection is also a performance question, not only aesthetics.
Micro-interactions are the language of the brand, not decoration
This is the identity layer that is hardly discussed in articles about brandbooks, yet it determines whether a brand feels 'friendly' or 'cold'. How a button reacts to a click, how smoothly a menu expands, whether the cursor pauses before an interface response — all this is subconsciously read by the user, faster than they can read text.
The rule is simple: animation must last 150–400 milliseconds. Longer than a second — the interface seems sluggish and 'heavy', regardless of actual load speed. Technically, micro-animations must only be built on GPU-accelerated CSS properties — transform and opacity — to avoid page rendering slowdowns. Animation via changing width, height, or margin loads the browser with layout recalculation and visually judders.
An important nuance often overlooked: some users disable animation for medical reasons (vestibular disorders, motion sensitivity). Nielsen Norman Group and WCAG 2.2 standard require supporting system settings — in CSS, this is done via @media (prefers-reduced-motion: reduce). A site that ignores this setting is not just technically careless — it loses accessibility as part of brand ethics.
Design system as a framework that holds identity as the site grows
On a site with five pages, you can manually track consistency. On a site with two hundred pages — no. That is why a design system is not a reference document, but a working tool embedded in the development process. It consists of three layers:
- Basic constants — logo, color palette, typography. This is what does not change regardless of the page.
- Style-forming elements — grid, patterns, icons, photo style, animation principles. This is what sets the 'character' of the interface.
- Media — specific application on real pages: product card, contact form, 404 page.
In practice, this is implemented through design tokens (variable colors, spacing, shadows, animation speed) collected in a UI kit in Figma, which is synchronized with CSS variables in the code. When a designer changes the 'color-error' token in one place, it is automatically updated across all website forms — from registration to checkout. Without this layer, the identity relies solely on team discipline, and discipline does not scale.
Where identity is most often lost
The most common and most underestimated mistake is branding only the main page. The main page is made slowly and carefully, while internal pages — blog, services, contacts, application form, 404 page — are quickly assembled, 'according to the residual principle'. When a user navigates from the main page to an internal page, they see a different font, a different shade of blue, and a different button layout. The sense of brand integrity is destroyed in seconds, and with it, trust — the person subconsciously decides that the site was 'put together in a hurry'.
- Different shades of the accent color on different pages due to the lack of a unified variable in CSS.
- Mixing typefaces — one font on the blog, another on the product card, because different contractors did the layout.
- A branded main page and a 'default' 404 page or error form — without a logo, without brand colors, as if it were a different website.
- Micro-animations, thought out for buttons on the main page, but missing on forms within the personal account.
- The inverted version of the logo is missing, so on dark sections of the site, the logo is simply 'eaten up' by the background.
This can be fixed in only one way — not cosmetically, but structurally: a unified design system with tokens applied to all screens of the site, including service and error states. The confirmation form, the 404 page, the payment notification email — these are just as much carriers of identity as the main page, just less noticeable until the user actually finds themselves there.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
