Designing your page
Themes, colors, fonts, backgrounds and how to make one link stand out, with the choices that keep a page easy to read.
Guide 3 of 6 · 7 min read
Almost everything you see on a HYDLNK page can be changed: 23 settings in five groups, from colors and fonts to spacing and the background. You don’t need to touch all of them. Start from a theme, change three or four things, and you’ll have a page that looks like yours. The design page lets you try this on a demo first.
Start from a theme
A theme is a complete look: colors, fonts, buttons, spacing and background together. Apply one of the system themes in the Design tab and the whole page changes at once. Applying a theme also clears any changes you had made to the page’s look, and you can undo it if you change your mind.
Like everything else, a new theme only changes your draft. Visitors see it after you press Publish.
Color
Eight colors cover everything on the page. The Design tab lists them under these short names:
| Name in the editor | Where it shows |
|---|---|
bg | The page background |
surface | Cards and grid tiles |
text, textMuted | Main text; bio, captions and subtitles |
accent | Avatar ring, card titles, outlines |
buttonBg, buttonText | Filled buttons and the text on them |
border | Edges of cards, tiles and icons |
Keep text readable. Text against its background should have a contrast ratio of at least 4.5 to 1, and so should button text against its button. Light gray on white and mid-gray on black are the usual mistakes. When in doubt, make the text darker (or lighter) than feels necessary: your visitors are reading on phones, often outdoors.
Type
Pick a heading font and a body font from the eighteen Google Fonts on offer. Headings are your name, your headers and your card titles; body is everything else.
- A serif heading over a sans body is the classic pairing: Fraunces with Inter, Instrument Serif with Geist.
- One sans for both is clean and modern: Geist and Geist, Manrope and Manrope.
- Monospaced faces (Space Mono, Geist Mono) suit short headings, not paragraphs.
Text size makes all text larger or smaller, Heading weight sets how bold headings are, and Letter case can set headings in capitals. Capitals work for short headers; avoid them for long names.
Shape and buttons
Corner radius rounds every corner, from square (0) to soft (32 px), and Border width sets how heavy edges are. Button style picks one of five button styles:
- Fill: solid buttons. The clearest call to action.
- Outline: an edge in your accent color. Calm and editorial.
- Soft: a light tint of the button color. Quiet, good on photos.
- Shadow: a hard offset shadow. Playful.
- Pill: fully rounded ends, whatever the radius.
Space
Spacing sets the space between blocks: compact, regular or airy. Content width sets how wide the column gets on large screens, from 360 to 720 px, and Alignment centers the page or aligns it left. Airy spacing and a narrow column feel calm; compact suits pages with many links.
Backgrounds
Choose a solid color, a gradient or an image for the Background. For an image:
- Choose a calm photo without much detail where your text will sit.
- Raise Overlay to wash the photo with your background color until text is easy to read.
- Add some Blur (up to 20 px) to soften a busy picture.
Images you upload count toward your plan’s storage: 10 MB on Free, 100 MB on Pro and 1 GB on Studio.
Make one thing stand out
A link or a card can override the page’s colors, button style and corner radius. Use it for the one action that matters most, such as a filled “Book now” among outlined links. Use it sparingly: if everything stands out, nothing does.
Save it as a theme
When you like the result, choose Save as theme. That saves your whole look as a theme of your own, which you can apply to any of your pages. Free accounts keep up to 3 saved themes; Pro and Studio keep as many as they like.
Editing a saved theme updates the drafts of every page that uses it. Live pages keep their published look until you publish them again, so you can review each one first.
Check it on a phone
Most of your visitors arrive from a social app on a phone. Before you publish, look at the preview at phone size, or open your published page on your own phone, and check that every button is easy to read and easy to tap.