# Link in bio page design: a landing page for your profile
[Canonical HTML page](https://gradiently.design/guide/instagram-bio-link-page)
The one link on your profile is where curiosity turns into a booking, a sale or a subscriber. Treat it as a tiny landing page: one look, a few buttons, nothing to decode.
## The short version
- A link in bio page is a small mobile landing page that collects the few places you want profile visitors to go next.
- The best link in bio page design uses three to five buttons, ordered by what matters most this week.
- Visitors arrive from a phone, so design the page for a narrow vertical screen first and check it at a phone width.
- The page should wear the same background, colours and fonts as your feed, so the tap feels like walking into the same shop.
- When the link is shared in a message, its preview image is a separate 1200×630 graphic worth designing too.
Good **link in bio page design** is a short mobile landing page: your name, one line about what you do, three to five buttons in order of importance, and a background that matches your feed so the visit feels continuous. Almost everyone arrives from a phone, straight from your profile, with a few seconds of attention. Every choice below follows from that.
## What a link in bio page needs, in order
Read the page top to bottom the way a visitor does. They want to confirm they are in the right place, see what they can do, and do it. Anything that slows those three steps can go.
| Part | What to put there | Keep it to |
| --- | --- | --- |
| Identity | Logo or photo, and your name as it appears on your profile | One image, one line |
| Promise | What you do, for whom, in plain words | Under 12 words |
| Main button | The thing you most want this week: Book, Shop the drop, Get tickets | One, visibly stronger |
| Other buttons | Two to four more destinations | Verbs, not page names |
| Footer | Small social icons and contact | Quiet, at the bottom |
The anatomy of a page people actually use. Pages usually go wrong by adding a tenth button, not by missing one.
Write buttons as actions. Book a table beats Reservations; Read the new issue beats Newsletter. The same principles apply to every short piece of copy on social, which [social media copywriting](https://gradiently.design/guide/writing-copy-for-visuals) covers in more depth.
## Designing the background
The background is most of what a visitor sees, and it is where a page either looks like you or looks like every other free template. Design it for a phone screen first. A 1080×1920 vertical frame, the same as a story, is a sensible working size for the image, and a solid colour behind it covers taller screens and desktop.
A vertical link in bio page for a ceramics studio with its name, a short line and three actions on a gradient background
A link in bio page drawn at phone size: identity at the top, promise, then the actions, with the background doing the brand work.
Keep the busiest, brightest part of the background away from where the buttons sit, usually towards the top or a corner. Buttons need a calm, even surface behind them or their labels start to compete with the colour.
Bright top, calm lower half: `linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%)`
Colour and light in the top third, where the name sits, settling into a deep, even ground behind the buttons.
## Buttons that look tappable
### Avoid
- Every button the same, so nothing leads
- Thin outlines that vanish on a gradient
- Labels in capitals with wide tracking, hard to scan
- Tiny buttons packed close together
- Emoji doing the work of words
### Do
- One filled main button, the rest quieter
- Solid fills taken from your palette
- Sentence case labels, one verb each
- Full width buttons with generous spacing
- Plain words, an icon only if it helps
A filled button in your accent colour, with the others in a softer tint of the ground, gives the eye an obvious first tap. Check that every label meets contrast against its own fill, not against the page: [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility) has the ratios.
## Building your own link in bio page
Link in bio services are quick, but a page on your own domain is easy to build and keeps visitors on your site. This is a complete, minimal version: a full height gradient background, a centred column and one main button. Swap in your colours and links.
```html
Studio Nine
Studio Nine
Handmade ceramics and weekend classes in Bristol.
Book a class
Shop the new pots
Visit the studio
```
One file, no scripts. The solid colour on html shows on overscroll and on screens taller than the gradient.
If you prefer a richer button, [gradient button CSS](https://gradiently.design/guide/css-gradient-button) shows how to give the main one a little depth without making it shout.
## Matching the page to your feed
The tap from profile to page should feel like opening a door in the same building. Use the colours, fonts and background you use in your posts, and the visitor never wonders whether they have left. [Consistent branding across social media](https://gradiently.design/guide/brand-consistency-across-platforms) covers the wider system.
- Night ground: #0b0a1a
- Violet: #4c1d95
- Indigo: #1e1b4b
- Main button: #fbbf24
- Ink: #f5f3ff
The same five colours used on the feed, the page and the buttons. The amber appears only on the main button, which is why it gets tapped.
This is where an owned background pays off. A Gradiently Mark is a living gradient that renders at every size you design, so your posts, stories and the page background can all wear exactly the same look, and nobody else can export with it once you have claimed it. Export the Mark at 1080×1920 with Pro, which keeps it at full size without a watermark, and the page matches your feed by construction.
## The preview image people see when you share the link
When someone sends your link in a message, apps show a preview card built from the page's Open Graph image. A blank or random preview undoes the work above. Design one at 1200×630 with your name and the promise, using the same background. The details are in [OG image size](https://gradiently.design/guide/open-graph-image-size).
A wide link preview card for a ceramics studio with its name and a short line on the same gradient background
The link preview, in the page's own background, so a shared link already looks like you.
1. **Check it at phone width** Open the page on your own phone from your profile, the way visitors do, not in a desktop browser.
2. **Reorder the buttons weekly** Move whatever matters now to the top and retire what has ended.
3. **Test the preview** Send the link to yourself in a message app and look at the card it makes.
## FAQ
### What should be on a link in bio page?
Your name and logo, one line about what you do, three to five action buttons with the most important first, and small contact links at the bottom.
### What size should a link in bio background be?
Design it for a phone first. A 1080×1920 vertical image works well, with a solid colour behind it for taller screens and desktop.
### Should I use a link in bio service or my own website?
A service is quicker to set up. A page on your own domain keeps visitors on your site and gives you full control of the design, and it can be a single HTML file.
### How many links should a link in bio page have?
Three to five is enough for most people. More buttons make each one less likely to be tapped.
### Can I add more than one link to my Instagram bio?
Yes, Instagram lets you add up to five links to your profile, but only the first is visible before a tap. One well designed page is still the clearest route.
### How do I make my link in bio match my Instagram feed?
Use the same background, colours and fonts as your posts, and give the main button your accent colour.