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

[Canonical HTML page](https://gradiently.design/guide/living-brand-identity)

Most identities were designed for paper and then pasted onto phones. A living brand is designed for screens: it moves a little, fits every shape, and makes room for what it carries.

## The short version

- A living brand identity is one whose visuals move, adapt to each format and respond to the content placed on them, rather than staying a fixed image.
- Motion helps on screens because a gentle change catches the eye in a feed, without needing a video shoot.
- Responsive legibility means the background adjusts where words sit so text stays readable on every frame.
- A living identity still needs fixed rules: the same colour family, material, type and kind of motion every time.
- Good living brands respect people who prefer reduced motion and offer a still version.

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.

| Behaviour | What it means | Why it helps |
| --- | --- | --- |
| Motion | The background drifts, breathes or shifts light slowly | Catches the eye in a scroll without shouting |
| Adaptation | It recomposes for each size instead of being cropped | The best part of the look lands in the right place on every format |
| Response | It changes where words sit so they stay readable | Every headline reads without boxes, shadows or blur |

Motion, adaptation and response. Together they turn an identity from an image into a surface.

A living brand is related to a [dynamic identity](https://gradiently.design/guide/dynamic-brand-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](https://gradiently.design/guide/motion-for-still-brands) and [animated gradient backgrounds](https://gradiently.design/guide/animated-gradient-background) go deeper on the craft.

### Avoid

- Fast colour cycling
- Words that bounce or spin
- A different animation style per post
- Loops with a visible jump at the end

### Do

- A slow drift of light across the surface
- Still words, or one calm entrance
- One motion signature for the whole brand
- A seamless loop that joins invisibly

## 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](https://gradiently.design/guide/one-look-every-size) shows how that works in practice.

- Story 1080×1920: 1080 × 1920
- Instagram post 1080×1350: 1080 × 1350
- Link preview 1200×630: 1200 × 630
- LinkedIn banner 1584×396: 1584 × 396

From very tall to very wide. A living identity recomposes for each instead of being cut down from one picture.

## 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.

A dance school post where the gradient's bright area runs straight through the headline

A fixed background: the brightest area can land right behind the headline.

The same dance school post with a calm, darker area of the gradient behind the headline

A responsive background: the calm area moves behind the words and the type stays crisp.

For the principles behind this, see [text on a gradient](https://gradiently.design/guide/text-on-gradient) and [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-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](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

```css
.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 */
  }
}
```

A slow drift across a navy, blue and teal surface, with a still frame for anyone who prefers reduced motion. More in [reduced motion](https://gradiently.design/guide/reduced-motion).

## How to start a living brand without rebuilding everything

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. **Make the background the moving part** It fills the most space and carries the least information, so motion there costs nothing in clarity.
3. **Choose one motion signature** A drift, a slow breath of light or a gentle shimmer. Write it in your [brand style guide](https://gradiently.design/guide/brand-style-guide).
4. **Render per format** Make each size from the same recipe instead of cropping one master file.
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.

## FAQ

### What is a living brand identity?

An identity whose visuals move gently, adapt to every format and respond to the words placed on them, while keeping the same colours, material and type.

### Is motion branding only for big companies?

No. A slow moving background behind still words is enough, and it needs no video shoot or animation team.

### Will a moving background make my text harder to read?

It can, if the bright or busy areas pass behind the words. Keep motion slow and keep the calmest part of the surface behind text.

### How should a living brand handle reduced motion settings?

Show a still frame of the same look when the device asks for reduced motion. On the web, use the prefers-reduced-motion media query.