Brand style on digital banners and in email newsletters
Invariants and variables: what in brand style must not be touched
The majority of problems with digital adaptation are solved at the stage of dividing elements into two groups. The first one — constants that remain the same regardless of the medium. The second one — variables that must change according to context, otherwise the brand will not physically fit into the format or become unreadable.
| Invariants (do not change) | Variables (adapted) |
|---|---|
| Logo proportions and shape | Logo size and version (full / icon) |
| Main color palette (HEX codes) | Saturation and contrast under dark/light mode |
| Font family | Text size and line spacing |
| Tone of communication and brand voice | Text length and number of elements on the screen |
| Key graphic pattern/iconography | Text density, CTA button size |
The mistake most teams make is to think that adaptation only concerns size. In fact, composition is also variable: what in an 600px letter is read as three columns, on a mobile screen should become one — otherwise the brand does not 'compress', but falls apart.
Scaling logic: why 600px and 320px require different solutions
The standard email letter width is 600 pixels. But when opened on a phone, a banner or letter compresses to 320–375 pixels, and if the text was already small in the 600px layout, on mobile it becomes physically unreadable, not just 'a bit less convenient'.
- Main text — no less than 16px, otherwise on mobile it turns into noise.
- CTA buttons — at least 44×44 pixels, this is the standard for comfortable finger tapping, not an aesthetic recommendation.
- Every element of the layout must be simplified when transitioning to 320px, not just reduced proportionally.
This works only when the designer immediately plans three states of the layout — desktop email, mobile email, and banner — as variants of one grid, not as three separate tasks.
Dark theme: how the same layout falls apart without warning
Dark mode is not a cosmetic setting but a separate rendering environment, and it is implemented differently in Gmail, Apple Mail, and Outlook. A logo with dark letters on a transparent PNG in a light layout looks perfect, but in the dark mode of the email client, it simply disappears on a black background. The same story with PNG files: transparency that worked on a white background turns part of the graphics into an unreadable blob in dark mode.
This can only be anticipated at the system development stage, not afterward:
- Create a second version of the logo — inverted or with a solid background — before email production begins.
- Test each template in both modes at the same time, not check dark mode 'if there is time left'.
- Do not use PNGs with a transparent background where the element must be visible in both modes — only versions with a fixed background.
Companies that skip this step learn about the problem from users — when an email with a 'missing' logo appears in a screenshot and spreads across social networks.
Raiffeisen case: modular grid instead of unique design for each medium
Raiffeisen Bank restructured its work with digital materials exactly according to the principle of invariants and variables: instead of creating a unique design for each banner, letter, and landing page, the team developed a single grid and a set of modular blocks that assemble for different sizes like a constructor. The result — the development time for materials was reduced by half.
The mechanism is simple: the designer does not have to solve anew how a header should look in a letter — they take a ready-made 'header' module and plug it into the appropriate grid. Variability remains, but it is managed rather than chaotic.
Digital brandbook: why offline guidelines do not work here
A classic brandbook is almost always written before the digital era — it meticulously describes business cards, packaging, signage, but bypasses email and banner advertising. As a result, product teams and marketers are forced to figure out themselves how to interpret the style in a new channel, and each interprets it slightly differently. This is called brand drift — a gradual divergence of the visual language from the original system.
A digital guideline solves this problem not by describing 'how it should look,' but by providing a set of ready-to-use assets and rules:
- Ready-made modular blocks for emails and banners in various sizes, rather than one static layout.
- Separate versions of the logo and color schemes for light and dark modes.
- Precise pixel values — minimum margins, button sizes, type size — rather than general phrases like 'maintain balance.'
- Examples of 'what not to do' next to examples of 'what to do' — this reduces the number of questions from teams by orders of magnitude.
Where variability turns into brand destruction
Adaptation is needed, as long as it is subordinated to the system. The problem begins when each new campaign introduces its own micro-solutions — a new shade, a slightly different font emphasis, a custom button version — and after six months the brand looks like the work of three different agencies across different channels. The balance is simple to define: if someone changes an element from the invariant table 'for the sake of the beauty of a specific banner' — this is no longer adaptation, but a system violation, and the solution must be rolled back to approved constants.
Invariants and variables: what in brand style must not be touched
The majority of problems with digital adaptation are solved at the stage of dividing elements into two groups. The first one — constants that remain the same regardless of the medium. The second one — variables that must change according to context, otherwise the brand will not physically fit into the format or become unreadable.
| Invariants (do not change) | Variables (adapted) |
|---|---|
| Logo proportions and shape | Logo size and version (full / icon) |
| Main color palette (HEX codes) | Saturation and contrast under dark/light mode |
| Font family | Text size and line spacing |
| Tone of communication and brand voice | Text length and number of elements on the screen |
| Key graphic pattern/iconography | Text density, CTA button size |
The mistake most teams make is to think that adaptation only concerns size. In fact, composition is also variable: what in an 600px letter is read as three columns, on a mobile screen should become one — otherwise the brand does not 'compress', but falls apart.
Scaling logic: why 600px and 320px require different solutions
The standard email letter width is 600 pixels. But when opened on a phone, a banner or letter compresses to 320–375 pixels, and if the text was already small in the 600px layout, on mobile it becomes physically unreadable, not just 'a bit less convenient'.
- Main text — no less than 16px, otherwise on mobile it turns into noise.
- CTA buttons — at least 44×44 pixels, this is the standard for comfortable finger tapping, not an aesthetic recommendation.
- Every element of the layout must be simplified when transitioning to 320px, not just reduced proportionally.
This works only when the designer immediately plans three states of the layout — desktop email, mobile email, and banner — as variants of one grid, not as three separate tasks.
Dark theme: how the same layout falls apart without warning
Dark mode is not a cosmetic setting but a separate rendering environment, and it is implemented differently in Gmail, Apple Mail, and Outlook. A logo with dark letters on a transparent PNG in a light layout looks perfect, but in the dark mode of the email client, it simply disappears on a black background. The same story with PNG files: transparency that worked on a white background turns part of the graphics into an unreadable blob in dark mode.
This can only be anticipated at the system development stage, not afterward:
- Create a second version of the logo — inverted or with a solid background — before email production begins.
- Test each template in both modes at the same time, not check dark mode 'if there is time left'.
- Do not use PNGs with a transparent background where the element must be visible in both modes — only versions with a fixed background.
Companies that skip this step learn about the problem from users — when an email with a 'missing' logo appears in a screenshot and spreads across social networks.
Raiffeisen case: modular grid instead of unique design for each medium
Raiffeisen Bank restructured its work with digital materials exactly according to the principle of invariants and variables: instead of creating a unique design for each banner, letter, and landing page, the team developed a single grid and a set of modular blocks that assemble for different sizes like a constructor. The result — the development time for materials was reduced by half.
The mechanism is simple: the designer does not have to solve anew how a header should look in a letter — they take a ready-made 'header' module and plug it into the appropriate grid. Variability remains, but it is managed rather than chaotic.
Digital brandbook: why offline guidelines do not work here
A classic brandbook is almost always written before the digital era — it meticulously describes business cards, packaging, signage, but bypasses email and banner advertising. As a result, product teams and marketers are forced to figure out themselves how to interpret the style in a new channel, and each interprets it slightly differently. This is called brand drift — a gradual divergence of the visual language from the original system.
A digital guideline solves this problem not by describing 'how it should look,' but by providing a set of ready-to-use assets and rules:
- Ready-made modular blocks for emails and banners in various sizes, rather than one static layout.
- Separate versions of the logo and color schemes for light and dark modes.
- Precise pixel values — minimum margins, button sizes, type size — rather than general phrases like 'maintain balance.'
- Examples of 'what not to do' next to examples of 'what to do' — this reduces the number of questions from teams by orders of magnitude.
Where variability turns into brand destruction
Adaptation is needed, as long as it is subordinated to the system. The problem begins when each new campaign introduces its own micro-solutions — a new shade, a slightly different font emphasis, a custom button version — and after six months the brand looks like the work of three different agencies across different channels. The balance is simple to define: if someone changes an element from the invariant table 'for the sake of the beauty of a specific banner' — this is no longer adaptation, but a system violation, and the solution must be rolled back to approved constants.
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
