# Brand gradient: how to make one gradient your signature [Canonical HTML page](https://gradiently.design/guide/brand-gradient-system) Some brands are recognisable from a corner of colour before you see the logo. That is never an accident. Here is how to build a brand gradient that works as a signature, not decoration. ## The short version - A brand gradient works as a signature only when it is distinctive, specified exactly and used the same way at every touchpoint. - A full brand gradient specification covers the ground colour, the colour family, where the light comes from, the surface texture, grain and any motion. - Every brand gradient needs a flat colour fallback for small sizes, single colour print and embroidery. - Recognition comes from repetition, so a signature gradient should appear in the same role and roughly the same amount across posts, slides and packaging. - Gradients are hard to protect legally, which is why distinctiveness and consistent use matter more than any single colour choice. A **brand gradient** becomes a signature when three things are true: it doesn't look like anyone else's, it is specified precisely enough that every designer reproduces it the same way, and it appears in the same role every time. Most brand gradients fail the first test because they start from a popular preset, and the rest fail the second because they live as a single exported image instead of a recipe. Build the asset deliberately and it can do the work of a logo from across a room. ## What separates a signature from a nice gradient ### Decoration - Violet to pink, because it looked good - Rebuilt by eye for each design - Angle and colours vary by designer - Used everywhere, so it means nothing - Breaks at favicon size and in one colour print ### Signature - A colour territory competitors don't use - One written recipe, stored as tokens - Light always comes from the same place - Reserved for set moments, so it is noticed - Has a planned flat fallback The broader case for owning visual assets is in [distinctive brand assets](https://gradiently.design/guide/distinctive-brand-assets). This article is about the practical build. ## How to create a brand gradient, step by step 1. **Map the category** Screenshot the feeds, sites and packaging of ten competitors and lay them out together. Note which hues and blends keep appearing. Your gradient should live somewhere that wall is empty. 2. **Choose a ground** Decide dark or light first. A deep ground makes colour glow and reads premium; a warm off white reads printed and calm. The ground carries the mood more than the accent does. 3. **Pick a small family** Three to five related colours plus at most one accent. Close neighbours blend cleanly; opposites turn grey, as [muddy gradients](https://gradiently.design/guide/muddy-gradients) explains. 4. **Decide where the light comes from** A glow low in one corner, a band across the top, a pool behind the centre. Fixing the light source is what makes the gradient recognisable when it is cropped. 5. **Add a surface** Grain, paper, silk or glass. A material separates your gradient from a screen default. [Gradient texture](https://gradiently.design/guide/gradient-texture) compares the options. 6. **Test recognition** Make five designs, cover the logos and show them to someone who knows the brand. If they can name it from the colour alone, it is working. Copper light on deep teal: `radial-gradient(circle at 20% 85%, #f59e0b 0%, #b45309 18%, #134e4a 55%, #042f2e 100%)` An example signature: a deep teal ground lit by copper from the lower left. Teal and copper are close enough in warmth to blend through brown rather than grey, and the corner light is the part people remember. ## Write the recipe, not just the colours Hex codes alone don't define a gradient. Two designers given the same four colours will produce two different results, because stop positions, direction and texture are where the character lives. Write a specification that someone new could follow without asking you. | Part | Example specification | | --- | --- | | Ground | Deep teal `#042f2e`, at least half the area | | Family | `#134e4a` teal, `#b45309` copper, `#f59e0b` amber | | Light | Radial, centred low left, never behind the headline | | Stops | 0%, 18%, 55%, 100% | | Surface | Fine monochrome grain, just visible at full size | | Motion | Light drifts slowly along the bottom edge; loops | | Fallback | Flat deep teal with copper as the only accent | A one page brand gradient specification. Put it in the [brand style guide](https://gradiently.design/guide/brand-style-guide) and store the values as code. ## Plan the flat fallback A gradient disappears at favicon size, in one colour print, on embroidery and in some email clients. Choose the flat versions now rather than letting each supplier guess. Usually that is the ground colour as the main flat colour and the brightest light colour as the single accent. - Ground, primary flat: #042f2e - Light, accent flat: #f59e0b - Teal, secondary: #134e4a - Paper, for type: #fdf6ec The flat palette that stands in for the gradient on a favicon, a stamp, a uniform or a plain text email. ## Use it in the same role everywhere Recognition is built by repetition in a consistent role. Decide where the brand gradient appears: perhaps covers, launches and the top of every slide deck, with the flat colours doing everyday work. A signature used on everything becomes wallpaper. [Brand consistency](https://gradiently.design/guide/brand-consistency) has more on rules teams actually follow. - Story 1080×1920: 1080 × 1920 - Post 1080×1350: 1080 × 1350 - LinkedIn banner 1584×396: 1584 × 396 - Slide 1920×1080: 1920 × 1080 - Business card 1050×600: 1050 × 600 Five touchpoints with very different shapes. The corner light has to land in the same relative place on each, which means rendering the gradient per format rather than cropping one image. ## Protecting a brand gradient Colours and gradients are difficult to protect through law, and the details depend on the country and on long, proven use; [can you copyright a gradient](https://gradiently.design/guide/can-you-copyright-a-gradient) sets out the general picture without legal advice. In practice the protection most brands have is distinctiveness plus consistency: a look so tied to you that copying it would only remind people of you. Gradiently was built for this gap. A Mark is a finished recipe of colours, materials, light, grain and motion, checked against every other Mark so nothing too close is accepted, and it has exactly one owner at a time. Claiming one puts your name on its public record with a numbered certificate, and only you can export designs with it. It is a registry record, not a trademark, but it means your signature can't turn up in a competitor's feed made with the same tool. A portrait post with a single short line over a distinctive lit gradient background A brand gradient doing its job: the colour and light carry the identity, so the words can stay short. ## FAQ ### What is a brand gradient? A gradient a brand uses consistently as part of its identity, specified exactly so it can be reproduced the same way everywhere. ### How do I create a signature gradient for my brand? Find a colour territory competitors don't use, choose a ground and a small colour family, fix where the light comes from, add a surface texture, and test whether people recognise it without the logo. ### What should brand gradient guidelines include? The ground colour, the colour family with hex codes, stop positions, light direction, texture, any motion and a flat colour fallback. ### Can I trademark my brand gradient? Protecting colours and gradients legally is difficult and depends on the country and on proven use, so ask a trademark lawyer. Distinctive, consistent use is the protection most brands rely on. ### Does a brand gradient need a flat version? Yes. Favicons, single colour print, embroidery and some email clients can't show a gradient, so plan flat colours in advance.