The last tab is everything about how the card looks. Four panels: Presets, Style, Header and Typography. The order they are in is the order you should work in — pick a palette first, then shape the card, then the header band, then the type.
The Presets panel #
Seventy-two ready-made palettes, each drawn as two overlapping circles: the card colour behind, the accent colour in front. They are grouped into families that run down the grid:
| Presets | Family |
|---|---|
| 1 to 8 | Muted tones — soft, low-contrast pairs |
| 9 to 16 | Dark solids |
| 17 to 24 | Electric |
| 25 to 32 | Bright |
| 33 to 40 | Soft pastels |
| 41 to 44 | Dark on dark |
| 45 to 48 | Light on light |
| 49 onwards | Card gradients and tonal pairs |
Click one and the whole card is repainted. A brand new card is opened on a randomly rolled preset, which is a reasonable way to find one you had not considered.
There is a seventy-third swatch at the end, labelled Yours, with the caption Colours of its own, not one of the presets. It is ticked when your palette came from the generator rather than from this grid. Everything you can pick here is yours to use exactly as it is — none of them belong to anyone.
Create my style #
The button under the grid, with a wand beside it. It asks five questions and builds a palette of your own. The hint underneath says the important part plainly: Answer a few short questions and a palette is built for you. You will see it before anything on the card is changed.
The five questions #
| Question | Options | What it decides |
|---|---|---|
| What do you do? | Design, Development, Photography, Content & social, Coaching & consulting, Business & sales, Writing & publishing, Something else | Nudges the hue and saturation towards your field. |
| What is the card for? | Show my work, Be contacted, All my links in one place, Sell a service, An event, A community or group | How much the buttons stand out against the card. |
| Which colours do you like? | Fourteen moods, each with a swatch | The base of everything. This is the answer that decides most of it. |
| Solid colour or gradient? | Solid, Soft gradient, Bold gradient | Whether the card itself is painted with a gradient. |
| Add a background image? | No image, Use an image | A photograph behind the card. Using one is PRO. |
The same five questions, with the same answers and the same effect, are asked by the Generate My Card wizard. The wizard explains what each answer actually changes to the colours.
The finished palette #
You get two overlapping circles showing the palette as it was actually built, then a swatch for each colour with its name and hex value: Card, Buttons, Page around it, and Gradient end when there is a gradient. Below that is the list of your answers, so you can see what produced what.
| Button | What it does |
|---|---|
| Try another | Keeps every answer and rolls a different set. Eight readings, cycling. |
| Start over | Empties the answers so you can ask the questions again. |
| Back | Returns to the last question. The palette you just built is discarded. |
| Use these colours | Applies the palette to the card. Nothing has changed until you press this. |
Text colours are worked out for you from your answers, aiming for a contrast ratio of at least 4.5 to 1, and the page-around colour is derived from the card colour rather than asked for. That is why the result is always readable even when you have no idea what you are doing.
NoteThe generator asks the server for its palette rather than writing colour values into the form from your browser. Same result on screen, but it means a colour you typed by hand somewhere else cannot slip past the lock on the free version.
The Style panel #
The card’s shape, size and colours.
Layout #
Vertical or Horizontal. Vertical stacks everything down the card and is the right answer for almost all of them. Horizontal puts the picture and the text side by side, which suits a card with a very short bio.
Maximum card width #
Free text, not a number. A plain number is pixels; you can also use %, vh, vw, rem, em, calc(), min(), max() and clamp(). So 400, 90% and calc(100% - 50px) are all accepted. Empty means the default.
On a narrow phone, calc(100% - 32px) is a good value: it stops the card touching the edges of the screen without capping it on a desktop.
Shadow #
None, Tiny, Default or Bigger, each with a preview. This is most of what separates a card that looks flat from one that looks like an object.
Shape #
Rounded, Circle or Square. Circle is worth trying on a card that is mostly icons — the icon row becomes a ring, which reads as deliberate rather than accidental.
Spacing #
Smaller, Default or Bigger — the gaps inside the card. Smaller is the fix for a card that is slightly too tall for a phone screen.
Colours PRO #
| Field | What it colours |
|---|---|
| Accent color | The colour buttons, links and highlights are drawn in. |
| Background color | The area around the card. Also the first colour when the outer background is a gradient. |
| Card background color | The card itself. |
| Text color | The name, tagline, bio and button text that does not have a colour of its own. |
| Button background color | Used by the Filled and Simple button designs when theme colours are selected. |
| Button text color | Used by the Filled button design when theme colours are selected. |
On the free version all six are greyed out and badged. The colours still come out right, because they come from a preset or from the generator — you are choosing a palette rather than typing hex codes. That is a smaller product, not a broken one.
Each colour field is a swatch, a hex box and an opacity slider. You can paste a hex value, or an rgba() value if you want a translucent colour. Where a Clear button appears, empty means “inherit from somewhere else” rather than “black”.
The card background group #
Background type decides how the card is filled:
| Type | Extra fields it reveals |
|---|---|
| Color | None — uses the card background colour above. |
| Gradient | Second gradient color, Gradient type, and then either Gradient angle or Gradient direction. |
| Image PRO | Background image, Image size, Image position, Repeat. |
Gradients #
- Gradient type — Linear is a straight blend. Radial (circle) is a circle spreading from a point, and it looks good behind a centred avatar.
- Gradient angle — for linear only, 0 to 360 degrees. 135 points to the bottom left, which is the most common choice because it reads as light falling from the top.
- Gradient direction — for radial only. Nine positions: Center, Top, Top left, Top right, Bottom, Bottom left, Bottom right, Left, Right.
Background images PRO #
| Field | Options | What it does |
|---|---|---|
| Image size | Cover, Contain, Stretch, Original | How the image fills the background. Cover is the default and almost always what you want. |
| Image position | Nine positions | Which part of the image stays visible when it has to be cropped. |
| Repeat | No repeat, Tile, Tile across, Tile down | Only worth changing when the size is Original. |
The card colour shows through anywhere the image does not reach, so an image that is smaller than the card does not leave a gap.
The border group PRO #
| Field | Options |
|---|---|
| Border | Default keeps the border the card already has. No border removes it. Custom uses the three fields below. |
| Sides | All, Top, Right, Bottom, Left. One side at a time. |
| Size | 0 to 20 pixels. 0 is no visible border. |
| Color | Any colour. |
A one-pixel border in a slightly darker shade of the card colour is the cheapest way to make a flat card look deliberate.
The outer background #
The area around the card, which matters when the card is on its own page.
| Field | What it does |
|---|---|
| Display outer background | Colours the area around the card. |
| Outer background color | The colour itself, and the first gradient colour when a gradient is used. |
| The outer background group | The same Color / Gradient / Image set as the card, with its own angle, direction and image settings. |
On a link in bio page this is always on, because the bio page is the whole page. The panel says so rather than pretending the switch does something.
The Header panel #
The band above the picture, and the space between the header and the buttons.
| Field | What it does |
|---|---|
| Show cover | The gradient or image band above the header. On by default. |
| Cover size | Free text like the card width. Sets the cover height in a vertical card, or the cover width in a horizontal one. Plain numbers are pixels; %, vh and the rest work. |
| Cover image | A picture instead of a gradient in the band. |
| Style | Normal or Compact. Compact pulls the header up so a card with a long bio still fits on a phone. |
| Alignment | Left, Center, Right — for the name, the avatar and the tagline as a group. |
| Background color PRO | The header’s own colour, separate from the card. |
| The header background group PRO | Its own Color / Gradient / Image set, with its own second colour, angle, direction and image settings. |
| Space between header and buttons | Default or Smaller. Controls the gap between the header and the social and custom buttons. |
On the two header styles where the corner button would sit underneath the avatar, the avatar is moved clear of it automatically. That is what lets the Save contact button stay in the top left on every header style.
The Typography panel PRO #
The whole panel is a PRO feature. On the free version it is dimmed as a whole with the badge in the panel header, rather than every field being greyed individually — a panel full of dead boxes reads as a failure, not an offer.
The panel’s own instruction: Use the site’s fonts by default, choose a Google Font from the live preview below, or type a custom font name. Leave the size and weight as Default to keep the preset.
There are four identical groups, one for each part of the card:
| Group | What it sets | Size range |
|---|---|---|
| Name | The display name. | 8 to 96 px |
| Role or tagline | The line under the name. | 8 to 48 px |
| Bio | The paragraph under the tagline. | 8 to 48 px |
| Buttons | Every button’s text. | 8 to 48 px |
Each group has four controls:
- Family — a grid of Aa previews. The first is Site default, which uses whatever your theme already loads and is the right answer most of the time. Then a curated list of Google Fonts. Then Custom.
- Custom font name — appears only when the family is Custom. Type the exact family name already loaded on your site.
- Size (px) — empty means Default, which keeps the preset.
- Weight — empty means Default; otherwise it offers the weights that font actually has.
TipChanging the Name size is the fastest way to stop a card looking like every other card. A name at 34 to 40 px with a small bio underneath reads very differently from the preset, and it costs nothing.
What the free version gives you #
Worth being clear, because it is a lot: the free version includes every layout, all 72 presets and the style generator, any number of link, email, embed and divider blocks, a link in bio page with its own address, and a popup across the whole site.
What PRO adds is the parts that scale and measure: unlimited cards and links, analytics, precise popup targeting, the contact card, the six messaging buttons, the Shortcode block, the two WooCommerce blocks, your own SVG icons, and choosing your own colours, backgrounds, borders and fonts.