Themes and Fonts
Your Flo page look — background, font, buttons, spacing, and search preview text — is controlled from the builder Page tab. These settings apply to the whole page unless a single block overrides them (for example a custom button color on one product block).
Fans see the result at https://myflo.link/yourname after you Update live. The Page tab preview updates as you edit, but visitors only get changes after you save appearance settings and publish.
For button shape and hover details, see Button styles. For your photo, bio, and cover banner, see Profile header.
Open the Page tab
Open the builder
Dashboard → Builder on a desktop browser (the builder needs a wide screen).
Switch to Page
In the right sidebar, click Page (or deselect any block so Block is not active). Block settings disappear; page sections appear.
Expand a section
Tap a section title — Templates, Typography, Buttons, Layout, or SEO — to open it. Only one section needs to be open at a time.
Save appearance
Scroll to the bottom and click Save appearance. This stores your page styles in Flo.
Publish
Click Publish or Update live in the top bar so fans see the update — Publishing.
Save appearance vs Publish
Save appearance only saves your Page tab choices. Publish / Update live pushes the page (including blocks) to your public URL. Do both when you change templates or fonts.
Autosave on blocks
Block edits (copy, products, layouts) auto-save on a delay. Page tab styles use the Save appearance button — they do not rely on the same autosave toast.
What the Page tab controls
| Section | What you change |
|---|---|
| Templates | One-click starting looks — background, font, button colors, shape, and spacing together |
| Typography | The main font for your page (headlines and most block text) |
| Buttons | Default button color, button text color, shape, fill style, and hover animation for page CTAs |
| Layout | How wide the page feels on large screens and vertical gap between blocks |
| SEO | Page title and meta description for browser tabs and search results |
Page background today
Page background (solid color or gradient) is set when you pick a template. The Page tab does not yet include separate background or pattern pickers — change the overall backdrop by choosing another template, then fine-tune font and buttons below.
Templates
Templates are the fastest way to restyle your page. Each template applies a bundled set of choices: backdrop, font, button colors, button shape, animation, and spacing.
Click a template swatch to apply it. The phone preview updates immediately. Click Save appearance, then Update live when you are happy.
| Template | Look and feel |
|---|---|
| Classic | Flo’s default — dark canvas (#0f0e17), purple CTA, Inter font, rounded buttons |
| Dark | Near-black background, white buttons with black text, minimal and high-contrast |
| Midnight Hues | Deep purple-to-blue gradient, violet CTA |
| Peach Punch | Bold orange solid background, warm Nunito font, pill-shaped coral button |
| Cyan Chic | Cool blue-green gradient, cyan CTA, DM Sans font |
| Neon Grape | Dark purple canvas, violet button with pulse hover |
| Apricot Sorbet | Soft peach gradient, friendly Nunito, orange pill button — blocks use a light card style |
| Lime Light | Fresh mint-green gradient, green CTA, Poppins — light cards |
| Shadow Splash | Navy gradient, coral-red soft-fill button |
| Blueish | Soft sky-blue gradient, blue CTA, Plus Jakarta Sans — light cards |
Light templates
Apricot Sorbet, Lime Light, and Blueish use brighter backgrounds. Flo automatically switches block cards to a light style (white cards, dark text) so content stays readable. Darker templates keep the classic dark card look.
Templates replace several settings at once
Switching templates overwrites background, font, button colors, button style, animation, and spacing. Re-check Typography and Buttons after a template change if you had custom tweaks.
Typography
Under Typography, pick the font fans see across your page — block titles, descriptions, and most body text. Fonts load from Google Fonts on your live page (except Inter, which Flo already bundles).
Fonts are grouped in the list:
Sans-serif
| Font | Best for |
|---|---|
| Inter | Clean, modern default |
| Roboto | Neutral and readable |
| Open Sans | Friendly and open |
| Poppins | Rounded, approachable |
| Montserrat | Bold marketing headlines |
| DM Sans | Geometric, contemporary |
| Nunito | Soft and warm |
Serif
| Font | Best for |
|---|---|
| Playfair Display | Editorial, elegant |
| Merriweather | Classic reading feel |
| Lora | Balanced serif body |
| Fraunces | Distinctive, creative |
Display
| Font | Best for |
|---|---|
| Raleway | Thin, stylish headers |
| Outfit | Modern display sans |
| Space Grotesk | Techy, confident |
| Josefin Sans | Retro, tall letterforms |
Mono
| Font | Best for |
|---|---|
| Fira Code | Developer / technical brand |
| Space Mono | Bold monospace accent |
The selected font shows a small dot in the list. Your profile header can use Page default for name and bio, or pick its own fonts in Edit profile header → Design — see Profile header.
Buttons (page defaults)
The Buttons section sets the default look for primary actions across your page — Join, Buy, Subscribe, Book, and similar CTAs on blocks that use the page theme.
| Control | Options |
|---|---|
| Button color | Main fill color (color picker) |
| Button text color | Label color on the button (color picker) |
| Shape | Rounded · Pill · Sharp · Squircle |
| Fill | Solid · Outline · Ghost · Soft |
| Hover animation | None · Lift on hover · Pulse · Fill |
These map to the same choices documented in Button styles. Individual blocks may still override button label text or colors inside their own Edit window.
Pro plan requiredCheckout branding (logo, colors, and font on the Flo Pay modal) is separate from page buttons. Pro and Studio customize it under Settings — see Button styles — Checkout branding.
Layout
Page width
How wide the content column feels on desktop (the page stays mobile-first; this affects large screens).
| Option | Width |
|---|---|
| Narrow | 420px |
| Default | 480px |
| Wide | 560px |
Block spacing
Vertical gap between blocks on your page (profile header and blocks below).
| Option | Feel |
|---|---|
| Compact | Tighter stack |
| Normal | Balanced default |
| Relaxed | More breathing room |
| Spacious | Maximum space between blocks |
SEO
The SEO section does not change how your page looks — it helps browsers and search engines describe your link.
| Field | Purpose |
|---|---|
| Page title | Shown in the browser tab and search result title (for example Jane Doe — Coach & Courses) |
| Meta description | Short summary for search snippets — 160 characters max with a live counter |
Public vs unlisted
Whether your page is public or unlisted, and custom domains, are not in the Page tab. Set those under Settings → Page & domain — Your Flo page.
How page styles reach each block
Page tab
Template, font, buttons
Live page
Preview + myflo.link
Every block
Colors, font, buttons
Overrides
Optional per block
At Every block
Profile header
Photo, bio, cover, and alignment live in the profile header editor. Name and bio fonts can differ from the page default.
At Overrides
Single block
Some blocks let you change button labels, colors, or layout in that block’s Edit or Display tab without changing the rest of the page.
| Layer | What it controls |
|---|---|
| Page tab | Default font, backdrop (via template), button palette, spacing, SEO |
| Profile header | Photo, bio, cover media, alignment, optional name/bio fonts |
| Per block | Offer connection, layout, and sometimes local button or color overrides |
“Powered by Flo” badge
On the Free plan, a small Powered by Flo badge may appear at the bottom of your public page.
On Creator, Pro, and Studio, that badge is hidden automatically — you do not toggle it in the Page tab.
A/B test variants
Creator plan requiredWhen you run an A/B test, each variant has its own Page tab settings. Select a variant on the canvas, open Page, style that variant, click Save appearance, then manage the test from the builder header — A/B testing overview.
Example setups
| Goal | Suggested approach |
|---|---|
| Quick professional dark page | Start with Classic or Dark, keep Inter, set button color to your brand hex |
| Warm creator brand | Peach Punch or Apricot Sorbet, then adjust Button color to match your brand |
| Tech / dev audience | Neon Grape or Cyan Chic + Space Grotesk or Fira Code |
| Airy, minimal | Blueish or Lime Light, Relaxed spacing, Outline or Ghost buttons |
| Tight link-in-bio | Compact spacing, Narrow width, Pill buttons |
| Search-friendly title | Fill SEO page title and meta description before you publish |
Troubleshooting
| Issue | What to try |
|---|---|
| Font or colors not on myflo.link | Click Save appearance, then Update live |
| Template did not change the background | Background comes from the template bundle — pick a different template (see note above) |
| Blocks look wrong on a light template | Expected — light templates use white cards; switch template or adjust button colors for contrast |
| Button shape wrong on one block only | That block may override styles in its Edit or Display tab |
| Header font differs from blocks | Profile Design tab may set name/bio fonts — set Page default or match the Page tab font |
| SEO title unchanged in Google | Search engines cache results — allow time; confirm meta description is under 160 characters |
| Changes lost after refresh | Confirm Save appearance succeeded (toast) before leaving the builder |
| Cannot find Page tab | Click Page in the right sidebar; if a block is selected, click the preview background or close block settings first |
What's next?
- Button styles — shape, fill, and hover reference
- Profile header — cover, avatar, and header fonts
- Blocks — add and arrange sections below the header
- Page builder overview — full builder tour
- Publishing — draft, live, and update
- Your Flo page — URL, visibility, and domain