# Brand mockup: see your brand in its gradient before you commit
[Canonical HTML page](https://gradiently.design/guide/brand-mockup)
A logo on a white artboard tells you almost nothing. Put it on the places your brand actually lives, at the sizes people actually see, and the right choice gets obvious fast.
## The short version
- A brand mockup shows your name and logo on the real surfaces your brand will live on, so you judge the identity in context rather than on a blank artboard.
- For a digital brand, the surfaces that matter most are the app icon or favicon, the social profile and header, the podcast or newsletter cover, the docs or help page, the deck and the website.
- Check every mockup at small sizes, for contrast between the name and its background, and for consistency across wide, square and tall formats.
- Compare two or three backgrounds side by side on the same surfaces rather than judging one at a time.
- Try on your brand at gradiently.design/try puts your own name and logo across brand-use previews in any unclaimed Mark, free and without an account.
A **brand mockup** is a preview of your brand on the places it will actually appear: the app icon, the X header, the podcast cover, the docs page, the pitch deck and the website. It lets you judge a logo, a name and a background together, at real sizes, before you spend money or months on them. The fastest free way is to type your brand's name into [Try on your brand](/try) and look at every surface at once; the method below also works with any design tool.
## Why digital brands need a brand mockup
A product brand is rarely seen big. Most people meet it as a 60 pixel icon on a phone, a circle next to a post, or a link card in a chat. A mark that looks striking at 2,000 pixels on an artboard can turn to mush at those sizes, and a background that flatters the logo can swallow the name. A mockup is where you catch that, cheaply.
It also shows the brand as a system. When the same ground sits behind the icon, the header, the cover and the deck, people recognise you before they read you. That is the whole point of [brand consistency across platforms](https://gradiently.design/guide/brand-consistency-across-platforms), and a mockup is the first place you can see whether you have it.
- App icon: 1024 × 1024
- X header: 1500 × 500
- Podcast cover: 3000 × 3000
- Link preview: 1200 × 630
- Deck slide: 1920 × 1080
- Website hero: 1920 × 1080
Six surfaces a digital brand mockup should cover, drawn to scale. One ground has to work in a square, a 3:1 strip and a 16:9 frame.
## What to check in a brand mockup
Looking at a mockup and thinking "nice" is not a test. Go through the same four checks on every option, and write down what fails.
| Check | How to test it | What passes |
| --- | --- | --- |
| Small sizes | Shrink the icon to 32 px and 16 px, view the profile picture at about 40 px | You can still tell what it is; the [favicon](https://gradiently.design/guide/favicon-design) is not a blur |
| Contrast | Test the name against the darkest and lightest parts of the background | At least 4.5:1 for small text and 3:1 for large text and logos ([WCAG](https://www.w3.org/TR/WCAG22/)) |
| Consistency | Put the square, wide and tall versions next to each other | They read as one brand, not three ideas |
| Motion | Watch the ground move, then look at a single still frame | Both the moving and the still version keep the name readable |
Four checks for any brand mockup. The contrast ratios are the WCAG minimums; see [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) for how to measure them.
### Small sizes come first
Start with the smallest surface, not the biggest. A wide wordmark will never fit a square icon, so plan a square symbol or an initial for those spots. Our guide to [logo sizes](https://gradiently.design/guide/logo-sizes) lists where each version goes.
### Contrast across the whole ground
A gradient has many colours, so the name can pass on one side and fail on the other. Check where the words actually land. [WebAIM's contrast checker](https://webaim.org/resources/contrastchecker/) takes two hex codes and gives you the ratio in seconds.
A square podcast cover where the show name sits over a busy part of the gradient
Words run straight over the busiest part of the ground.
The same podcast cover with the gradient calmer and better contrasted behind the show name
The ground calms behind the words and the name reads at a glance.
## How to make a free brand mockup with Try on your brand
Try on your brand is a free page on Gradiently. You do not need a card or an account, and the only thing it asks for is your brand's name. It puts that name, and your logo if you add one, across brand-use previews wearing a Mark: a living gradient or material background that has one owner at a time.
1. **Type your brand's name** Open [/try](/try) and type it. It is the only thing the page needs.
2. **Add your logo** Drop in a PNG, JPG, SVG or WebP. It is read in your browser, and a plain background is taken out so the logo sits on the gradient. A transparent PNG looks best. Wide wordmarks use your initial in square spots like the app icon.
3. **Or fill from your website** Paste your address and it reads your site's name, line, icon and theme colour. You can undo it.
4. **Add a tagline and what you make** Pick SaaS, AI and apps, fintech, agency, design studio, creator and newsletter, podcast and music, courses or something else. It orders your previews and suggests gradients that fit.
5. **Scroll the previews** Your brand appears on an app icon and its small sizes, X, Instagram and LinkedIn profiles, a YouTube banner, a podcast cover, a newsletter, a deck, a sign-in screen, a website and its link preview, all wearing the same Mark.
> **Previews, not designs** The previews show your brand in context. They are not editable designs, so use them to choose a direction, then build the real assets.
## Compare two or three grounds side by side
Judging one background at a time is how people end up picking the last one they saw. Shuffle through Marks (and step back if you skipped a good one), look at the suggested rail, or open the full library and search by colour or mood. Heart the ones that work to build a shortlist of up to 12.
Then press Compare. It puts two or three of your shortlist next to each other on the same previews, so the only thing that changes is the ground. Run the four checks on each and keep the one that passes them all. If you are torn, [how to pick the right Mark](https://gradiently.design/guide/pick-the-right-mark) has a tie-breaker.
An X header for a fictional brand called Lumen Labs on one gradient
Option A on the X header.
The same Lumen Labs X header on a second gradient for comparison
Option B on the same header, same words.
### Avoid
- Judging the ground on its own, without your name on it
- Comparing options on different surfaces
- Only looking at the big hero image
- Picking from memory after scrolling past ten options
### Do
- Always look with your real name and logo in place
- Compare two or three on the same previews
- Start with the app icon and profile picture
- Shortlist as you go, then compare the shortlist
## Saving and sharing your brand mockup
- **Email me my previews** sends your brand wearing the gradients you chose to your inbox, so you can look again on a bigger screen. It is one email, not a newsletter.
- **Share** gives you a link that opens your brand in the same gradients, with its own preview card when you paste it into a chat. Shared brands are kept out of search results.
- **Save my brand** keeps your name, logo, kind of brand, site and shortlist, and carries them into your Brand Kit when you sign up, on a free account too.
## When to claim a Mark
Trying a Mark on is free and anyone can do it. Claiming is a paid step that makes you its only owner: your name on its public record, a numbered certificate, and nobody else can design or export with it. Claim when the Mark has passed your checks on every surface and you are ready to use it in public, because until then someone else can claim it first. Press **Make it mine** to open the Mark's page; [how to claim a Mark](https://gradiently.design/guide/how-to-claim-a-mark) walks through the rest.
## A brand mockup method that works in any tool
You can run the same test in Figma, Keynote or a plain browser. The trick is to fix the surfaces first and swap only the background.
1. **Set up the frames** Make one frame per surface at its real size: app icon 1024×1024, X header 1500×500, podcast cover 3000×3000, link preview 1200×630, slide 1920×1080. Exact sizes are in [the app icon size guide](https://gradiently.design/guide/app-icon-size) and the [X header size guide](https://gradiently.design/guide/x-header-size).
2. **Place the same name and logo** Same words, same logo file, same position rules in every frame.
3. **Swap one background at a time** Duplicate the whole set for each candidate. Never mix candidates inside one set.
4. **Zoom out and shrink** View the icon at 32 px and the full set at a quarter size. What survives is your answer.
5. **Show someone for five seconds** Ask what the brand is called and what colour it is. If they hesitate, the mockup failed.
```html
```
A quick browser mockup: one ground on an icon at three sizes and a 3:1 header. Change the gradient in `.ground` to compare options.
## FAQ
### What is a brand mockup?
A brand mockup is a preview of your name, logo and colours on the real places your brand will appear, such as the app icon, social header, cover, deck and website. It lets you judge the identity in context before you commit to it.
### How can I make a brand mockup for free?
Type your brand's name into [Try on your brand](/try) to see it across brand-use previews without an account or card. You can also set up real-size frames in any design tool and swap backgrounds one at a time.
### What should I check in a brand mockup?
Check that the icon still reads at 32 px and 16 px, that the name has enough contrast everywhere it lands, and that the square, wide and tall versions look like one brand. If the background moves, check a still frame too.
### Can I edit the previews in Try on your brand?
No. The previews show your brand in context so you can choose; they are not editable designs. You can save them by email, share a link, or save your brand into a Brand Kit when you sign up.
### Do I have to claim a Mark to try it on?
No. Trying on any unclaimed Mark is free. Claiming is a paid step that makes you its only owner, with a numbered certificate.