Living brands: why moving, responsive visuals are the next identity

A living brand is an identity designed for screens rather than paper: its visuals move gently, recompose for every format and respond to whatever is placed on them, so the words always read. Most brand identities were drawn as fixed images and then cropped onto phones, banners and stories. A living brand keeps the same colours, material and type, but behaves more like a surface than a picture. It is the natural next step for brands that live mostly in feeds.

What makes a brand identity living

Three behaviours separate a living identity from a static one. You don't need all three on day one, but each makes the brand feel more at home where people actually see it.

A living brand is related to a dynamic identity, but the emphasis is different. A dynamic identity varies its form from one piece to the next on purpose. A living identity may look the same on every piece; what changes is how it behaves inside each one, moving, fitting and making room as it goes.

Motion: small, slow and always the same kind

Motion is the most visible part of a living brand and the easiest to overdo. The aim is a background that feels alive, not one that competes with the message. Keep the words still, let the surface move slowly, and use one kind of movement everywhere so it becomes part of the look. Motion for still brands and animated gradient backgrounds go deeper on the craft.

Adaptation: one look, every shape

A brand posted in a week might need a story, a feed post, a link image and a LinkedIn banner. A fixed image cropped to each loses its best part on at least one of them. A living identity is rendered for each shape, so the light and the calm areas land sensibly every time. One look, every size shows how that works in practice.

Response: backgrounds that make room for words

On a gradient or a moving surface, contrast changes across the frame and over time. A headline that reads well in one second can sink into a bright patch the next. The usual fixes, a box behind the text, a drop shadow or a blur, all fight the background. A responsive identity solves it at the source: the calmest part of the surface sits behind the words and the colours near the letters deepen or lift.

For the principles behind this, see text on a gradient and colour contrast and accessibility.

Respect reduced motion

Some people turn on reduced motion in their device settings because animation makes them unwell or distracts them. A living brand on the web should honour that preference and show a still version of the same look. It is a few lines of CSS, documented on MDN.

.brand-surface {
  background: linear-gradient(120deg, #0f172a, #1e3a8a, #0e7490, #0f172a);
  background-size: 300% 300%;
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-surface {
    animation: none;
    background-position: 30% 50%; /* a calm, still frame of the same look */
  }
}

How to start a living brand without rebuilding everything

1. 1

   Keep your fixed core

   Colours, type and logo stay exactly as they are. Living is a behaviour added on top, not a rebrand.

2. 2

   Make the background the moving part

   It fills the most space and carries the least information, so motion there costs nothing in clarity.

3. 3

   Choose one motion signature

   A drift, a slow breath of light or a gentle shimmer. Write it in your brand style guide.

4. 4

   Render per format

   Make each size from the same recipe instead of cropping one master file.

5. 5

   Check every line of text

   On every frame and in every format, the words should read without a box behind them.

Gradiently is built for exactly this. A Mark is a living background, a recipe of colours, materials, light, grain, motion and a type voice that renders live behind every design. It composes itself for each size, its calmest region moves behind your words, and Auto ink picks light or dark type line by line from the Mark's own palette. Words can enter with simple animations such as rise or wipe, and with Pro you can export the design moving, as a GIF, or as MP4 or WebM where your browser supports recording.