Customising your bio page theme

This guide walks you through changing the visual theme of your bio page — background colour, text colour, and fonts. You can preview every change in real time before publishing.

Note: You need an existing bio page to customise. If you haven't created one yet, start with Article #9.

Open theme settings

Log in to your dashboard at www.1smart.link.
Click Bio Pages in the left sidebar.
Select the bio page you want to customise.
You will see the bio page editor with a live phone preview on the right-hand side of the screen.

All theme changes you make in the following steps will appear instantly in this preview panel, so you can see exactly how your page will look before publishing.

Set your background colour

The background colour fills the area behind and around your bio page card. On desktop, this is the space surrounding the central card. On mobile, it forms the page backdrop.

Locate the Background colour setting in the theme section of the editor.
Click the colour swatch to open the colour picker.
Choose a colour visually, or type a hex value directly (e.g. #0C0C14).
Check the live preview on the right to confirm you are happy with the result.

Tip: If you upload a hero image and use a template, the platform can automatically extract background, button, and text colours from that image — so your theme will never look mismatched. See the hero image section below for details.

Set your text colour

The text colour controls how your name, bio description, and widget text appear on the page.

Locate the Text colour setting.
Click the colour swatch to open the colour picker.
Choose a colour or enter a hex value.
Confirm readability against your chosen background in the live preview. High contrast between text and background is essential for accessibility.

Choose your fonts

Bio pages support 16 Google Fonts, split across two settings:

Setting	What it controls	Examples
Title font	Headings, widget titles, your display name	Playfair Display, Space Grotesk, Inter
Body font	Body text, widget subtitles, descriptions	Source Sans, Inter, Space Grotesk

Locate the Title font dropdown in the theme settings.
Select a font from the list of 16 available Google Fonts.
Locate the Body font dropdown.
Select a font for your body text.
Review both choices in the live preview.

Recommended font pairings

If you are unsure which fonts work well together, try one of these combinations:

Clean and neutral — Inter (title) + Inter (body). A single-font pairing that works for any industry.
Editorial and classic — Playfair Display (title) + Source Sans (body). Ideal for content creators, writers, or brands with a polished feel.
Modern and technical — Space Grotesk (title) + Space Grotesk (body). Suits tech products, startups, and developer-focused pages.

Understand the hero image effect

Your hero image — the cover photo on your profile card — also influences how your page looks:

On mobile, the hero image fills the top of the screen edge-to-edge.
On desktop, a blurred version of the hero image appears behind the card, creating a soft halo effect around your content.

When you use a template with an uploaded hero image, the platform derives your button colours, background colour, and text colour from the image automatically. This means your theme stays visually cohesive without manual colour matching.

Save and publish

Once you are satisfied with your theme choices in the live preview, click Save (or Publish, depending on your page status).
Open your bio page URL in a browser to verify the final result on both desktop and mobile.

Troubleshooting

Text is hard to read against the background. Choose colours with strong contrast. Dark text on a light background (or light text on a dark background) is the safest approach.
Font changes are not showing in the preview. Try refreshing the editor page. If the issue persists, clear your browser cache and reload.
Colours look different on my phone. Screen calibration varies between devices. Test on a couple of screens to ensure your palette is comfortable across both desktop and mobile.

Article #9
Article #10
Article #14
Article #17