What a brand identity has to do in the digital age

What has changed about where people first meet a brand?

For many brands, the first meeting is no longer a shopfront, a printed brochure or a business card. It is a small circle beside a post, a few seconds of a reel, a search result or a WhatsApp profile. The logo is the size of a fingernail, the colours are rendered by a phone screen in dark mode or light, and the viewer is already scrolling past.

That changes what brand identity in the digital age has to do. A logo used to be designed for the letterhead and the signboard, then adapted for the web. The order has reversed. If a mark does not hold up as a profile picture, it fails at the first meeting, however well it sits on a sign. When I work on positioning and identity, the first question is where a customer will actually see the brand first, and the design starts from there.

The touchpoints that now carry an identity

• Profile pictures and app icons, often cropped to a circle.
• Feed posts, carousels and stories, seen at arm's length on a phone.
• Reels and short videos, where the identity has to work in motion and often with sound.
• Link previews: the image and title that appear when someone shares a page on WhatsApp or LinkedIn.
• The website, the one place where the whole system is seen together.
• Print and physical touchpoints, which still matter and now have to match the screen.

Print has not gone away. For Aritha Cafe, the identity we designed had to hold together on menu cards, cups and napkins as well as in templates for online communication and store displays. The digital age did not replace those touchpoints. It added many new ones and put the phone in front of all of them.

Does your logo work at the size of a profile picture?

Most logos are approved large, on a white slide, in a presentation. Online, they spend most of their life at a fraction of that size, on busy backgrounds. Run these five tests before you approve a new mark, and run them on the logo you already have.

1. The circle test. Place the logo inside a circle, the way Instagram, WhatsApp and YouTube show profile pictures. If a wide wordmark shrinks to an unreadable line, you need a compact version: a symbol, a monogram or a stacked lockup.
2. The fingernail test. Look at it at profile-picture size beside a post on your own phone, held at arm's length. Fine lines, thin serifs and small taglines disappear first.
3. The browser tab test. Reduce it to a favicon. In our branding process, the refine stage tests the chosen logo at favicon size and on dark and light grounds before anything goes into the brand book.
4. The one-colour test. Show it in a single colour: white on a dark ground, dark on a light one. A mark that only works in full colour will struggle on photographs, video overlays and dark mode.
5. The blur test. Blur it or squint at it. The silhouette alone should still read as yours.

Build a logo family, not one logo

The fix is rarely a new logo. It is a family of versions, each made for a size and a context:

• Primary lockup: the full logo for the website header, signage and documents.
• Compact or stacked lockup: for square and vertical spaces.
• Symbol or monogram: for profile pictures, app icons, favicons and video watermarks.
• One-colour versions: white and dark, for photographs, video and dark mode.

When we built the VicWide website, the brand pieces included a wordmark with a single roof-pitch cut in the V, a favicon, app icons and branded link previews. A brand that lives online needs that whole set from day one, not only the main logo.

Mistakes that show up at small sizes

• A tagline locked into the logo, which turns into a grey smudge in every small placement.
• Detail that only works in print, such as hairline outlines or fine textures.
• A symbol that depends on colour to be recognised, which disappears in a one-colour use.
• Letter spacing so tight that letters merge when the logo is reduced.

How should an identity behave in motion?

An identity now spends much of its time moving: in reels, video intros, website transitions and animated posts. If motion is not designed, every editor and every agency invents it differently, and the brand looks inconsistent even when the logo itself is correct.

Decide the motion principles once

• Speed and easing. Is the brand calm or energetic? Slow, eased movement says something different from fast cuts and snaps.
• How the logo arrives. One agreed reveal for the end of a film, and a shorter version for reels.
• How type moves. Whether words appear line by line, slide in or simply cut, and how long they stay on screen to be read.
• What never moves. Body copy, prices and key information should sit still long enough to read.
• Sound. If the brand has a short sonic cue for its logo reveal, it belongs in the rules, along with where it must not play automatically, such as on the website.

Two of our website builds show the range. The Kalaluha website opens on a 384-frame aerial film of a concert night that plays as the visitor scrolls and resolves on the company's gold mark, so the identity arrives as the payoff of the motion. The NAROZ.ai launch page takes the quiet route: slow drifting light, a wave that eases towards the cursor and one decrypt moment on the status line. Its brief asked for slow, elegant motion, and nothing on the page moves just to show off.

Motion rules matter just as much in campaign work. For One MG Lido Mall, our 2D sales animations were designed to align with the mall's brand guidelines, with typography motion and branded graphic transitions, and delivered both as landscape promotional films and as portrait reels.

Plan the still version too

Some visitors set their device to reduce motion, and an identity should look complete when they do. On Kalaluha, when a visitor's system asks for reduced motion, smooth scrolling and reveals switch off and the hero settles on its final frame, so the page still reads in full. Write the still version of every animated piece into the guidelines: the end frame of a logo reveal is also your poster frame and your thumbnail.

What do social formats ask of a visual system?

Each social format has its own frame, its own interface laid over the top and its own few seconds of attention. A visual system that works on social is one a designer can apply quickly to every format without breaking the rules.

Format by format

• Profile picture: the symbol or monogram, centred, with enough space around it to survive the circle crop.
• Feed posts and carousels: a grid with fixed margins, a type hierarchy for headline, body and call to action, and one consistent position for the logo, if it appears at all.
• Stories and reels: a full-screen vertical frame where the platform's buttons, captions and profile icon cover part of the picture. For Reels ads, Meta's ads guide recommends a 9:16 frame and leaving at least 14% of the top, 35% of the bottom and 6% of each side free of text, logos and other key elements. Mark those safe zones on your templates.
• Reel covers: one cover design, so the grid on your profile reads as a single brand.
• Link previews: a designed share image for each important page, so a link sent on WhatsApp carries the brand with it.

Templates are part of the identity

The identity work for Aritha Cafe included templates for online communication alongside the logo, the typography and colour guides and the brand book. For the ethnic fashion and saree label Sri Saundaryam, the brand work included defining unified digital guidelines, photographing and filming the drapes and textures of its silk collections, and producing Instagram reels, with every asset designed to stay consistent across its digital platforms.

A good social template fixes what must stay the same, such as margins, type sizes, colour use and logo position, and leaves room for what should change: the photograph, the headline, the offer. Build templates in the tool your team actually uses every day, or they will be quietly abandoned.

Common mistakes on social

• Putting the full logo in the corner of every post, where it competes with the message.
• Using a different typeface for every festive post.
• Designing for the square feed grid and forgetting the vertical frame.
• Placing text where the platform's buttons and captions will cover it.
• Changing the look every month to chase a trend, so nothing builds recognition.

Formats change faster than identities should. For which video habits are worth building into your templates, see social media video trends that outlast the fads.

How do you keep colour and type consistent across screens and print?

A brand's red can look like three different reds on a phone, a laptop and a printed menu. Consistency comes from defining each colour for each medium, not from hoping one value travels everywhere.

Define colour for every medium

• HEX and RGB for screens: websites, apps, social posts and video graphics.
• CMYK for everyday print, with values checked on a physical proof from your printer.
• A spot colour reference, such as a Pantone number, where an exact match matters, for example on packaging or signage.
• Dark and light behaviour: how each colour looks on a dark ground and a light one, since many people browse in dark mode.
• Text pairings: which colour combinations are readable for body text, and which are for large type or decoration only.

The NAROZ.ai site shows how far the screen side of this can go. Dark is the default, a fully designed light theme is one click away, and the canvas, the gradient mesh and every surface recolour when a visitor switches. The colours live as dark and light design token sets, so one toggle recolours text, surfaces, gradients and the canvas. That is a colour specification turned into working code.

Choose type that works everywhere you need it

• Check that the licence covers every use: desktop for print design, web embedding for the site, and app or video use if you need them. Font licences often treat these as separate uses.
• Test the typeface at small sizes on a phone, not only as a headline on a large monitor.
• Pick a fallback for places your brand font cannot go, such as email and some social tools.
• Keep the system small and give each face one job. The Kalaluha website uses three voices: Fraunces for titles, the brand face Neulis Sans for reading and Space Mono for small labels.
• If you publish in Kannada as well as English, choose an English typeface that sits well beside a Kannada face of similar weight and character.

Keep photography and video in the same colour world

Colour consistency covers footage too. A grade that fights the palette makes one brand look like two. Agree a look for photography and video in the guidelines, covering warmth, contrast and how skin tones should sit, and see the art of colour grading for how that look is built in post.

How does the website become the identity's main stage?

Social profiles show an identity in fragments, inside someone else's interface. The website is the one place where the whole system appears together, under your control: logo, colour, type, imagery, motion, tone of voice and structure.

On Kalaluha, the site is built in black and gold, a near-black ground with gold as the live accent, with a corner-bracket frame around the viewport and the three type voices. Project, team and article pages each get their own share image, so the identity travels when a page is shared. On NAROZ.ai, a near-black ground carries a single violet accent with cyan as its echo, with General Sans for headings and body and JetBrains Mono for small labels, all in about 42 KB of hand-written code. Two very different brands, but in both the site is where the identity is stated most completely.

What the website should carry from the identity

• The colour and type system as design tokens, so every page uses the same values.
• The full logo family: header lockup, favicon, app icons and share images.
• Motion rules, including the reduced-motion version.
• Photography and video that match the brand's agreed look.
• The tone of voice in headings, buttons, form labels and error messages, not only on the home page.

Use the site to test the system

A website puts an identity under more strain than any other touchpoint: long pages, forms, tables, small screens, dark mode. If the system breaks on a contact form or a product page, it will break elsewhere too. Build the site from the guidelines, note every place where a rule was missing or unclear, and feed those gaps back into the brand book.

What should guidelines include so the brand holds up online?

Guidelines written for print usually stop at the logo, colours and fonts. A digital brand book also has to say how the identity behaves on screens, in motion and in templates, with clear examples of right and wrong use, so it stays consistent long after handover.

A digital brand book checklist

• Logo family, with minimum sizes, clear space and versions for profile pictures, favicons and app icons.
• Colour values in HEX, RGB, CMYK and spot colour, with dark and light mode rules and readable text pairings.
• Type system: typefaces, sizes for screen and print, fallbacks and licence notes.
• Social templates for posts, carousels, stories and reel covers, with platform safe zones marked.
• Motion: easing, speed, the logo reveal, type animation and the still version of each.
• Photography and video: lighting, framing, colour grade and what to avoid.
• Tone of voice: how the brand writes captions, replies and website copy, with examples.
• Link previews and email signatures.
• Right and wrong examples in every section.
• An owner: the person who answers questions and approves exceptions.

Make the guidelines easy to follow

• Keep a one-page summary that a freelancer can follow on their first day.
• Store master files in one shared folder with clear, consistent names.
• Review the book when you add a platform or a format, not only when you rebrand.

Visual rules cannot foresee every case. The guidelines should also say what the brand stands for, so people can make good calls where the book is silent. For that side of the work, read how to build a strong brand narrative. If your identity was designed before the phone became the first touchpoint, our branding work covers refreshes, logo families and brand books built for screens as well as print.