Brand Style
This section controls the visual feel of your entire page: colors, the background, fonts, and the shape of your cards. If you’re not sure where to start, pick a preset and adjust from there. You can always change everything later.
Quick Start Presets
Section titled “Quick Start Presets”Ten built-in themes to get you going. Each one sets all your colors at once. Pick the vibe that’s closest to what you want, then fine-tune individual colors if needed.
| Preset | Style |
|---|---|
| Default Dark | Dark blue-gray with pink accent |
| Warm Earth | Light cream with teal accent |
| Ocean | Deep navy with coral accent |
| Neon | Black with hot pink accent |
| Minimal | White with blue accent |
| Pastel | Light pink with rose accent |
| Mono Dark | Black with gray, no color accent |
| Mono Light | White with gray, no color accent |
| Forest | Dark green with gold accent |
| Retro | Deep purple with red and yellow accents |
Presets are a starting point, not a commitment. Every color is individually editable after you select one.
Once you’ve picked a preset (or even if you haven’t), open the Customize panel right below it. That’s where the color, background, font, and card-style controls live. It starts open by default — you only need to collapse it if you want a tighter view of the picker row.
Color System
Section titled “Color System”Your page uses six colors. They sit inline as a single row of swatches at the top of the Customize panel — no expand toggle, no hidden palette. Everything you can change is visible at once.
| Color | What It Does |
|---|---|
| Background | The base color of your page and your widget tiles. Tiles paint a slightly lifted version of this so they read as raised off the page. If you add a gradient or photo background (see below), it paints on top of this. |
| Brand | Your main accent color. Shows on the divider, focus outlines, and accent elements. |
| Text | The color of all text. Softer shades are derived automatically. |
| Hover | The color social icons brighten to when someone hovers over them. |
| Accent | A secondary highlight color you can assign to individual tiles and content cards for visual variety. |
| Avatar | Controls the avatar ring, hover effects, and ambient lighting. |
The most important decision here is the relationship between Background and Text. High contrast (dark on light, or light on dark) keeps everything readable. The verification checker will warn you if your contrast is too low.
A note on the Background color
Section titled “A note on the Background color”Even when you pick a gradient or a photo for your background style, the Background color still matters — it’s the base your widget tiles derive their color from. Change the Background swatch and your tiles shift with it, even if the visible page is covered by a photo. Think of the Background swatch as your page’s foundation color, not strictly “what the visitor sees behind everything.”
Background Style
Section titled “Background Style”Below the color row, a segmented control lets you pick how your page background paints. Three modes:
| Mode | What it does |
|---|---|
| Solid | Your Background color, edge to edge. The default. Clean, fast, and works with any palette. |
| Gradient | A two-stop linear gradient with a configurable angle. Add gentle motion or a hint of texture if you want it. |
| Photo | A hero image of your choosing, with a frosted-glass treatment over your hero and cards so text stays readable. |
Only the controls for the active mode show — flipping between modes preserves whatever you had set in each one, so you can experiment freely without losing your work.
No extra controls. Your Background color paints the page. If you want the cleanest look, this is it.
Gradient
Section titled “Gradient”Two color stops and an angle.
| Field | Description |
|---|---|
| Stop A | The first gradient color. Seeded from your palette the first time you switch to gradient mode. |
| Stop B | The second gradient color. |
| Angle | 0–359°. 0° runs bottom-to-top, 90° runs left-to-right, and so on. |
| Animate | Optional. Drifts the gradient slowly for a living, ambient feel. Respects prefers-reduced-motion, so visitors who’ve asked their OS to reduce motion won’t see the animation. |
| Noise | Optional. Overlays a subtle grain texture, the kind you’d see on a printed poster. Quietly takes the edge off pure CSS gradients. |
Animate is only available in gradient mode. (Animated photos read as tacky, animated solids are meaningless.)
Upload an image and Beacon paints it across your page.
| Field | Description |
|---|---|
| Photo | Drag-and-drop or click Upload. JPG, PNG, and WebP are all supported. PNGs preserve transparency; everything else is stored as JPG. EXIF data is stripped on upload. |
| Replace / Remove | Available once you’ve uploaded — swap the image or clear it without leaving the panel. |
Two things happen automatically when you go into photo mode:
- The hero gets a frosted-glass plate. Your avatar, name, bio, and social row sit on top of a soft blur of the photo behind them. Text stays readable against any image.
- Cards pick up the same treatment. Link and feed cards get the frosted-glass effect too, so they read against the photo without you having to fiddle with opacities.
A practical tip: landscape photos with a calm area in the upper third tend to look best, since that’s where the hero plate sits. Busy compositions with high contrast right behind the avatar can fight the readability work the blur is doing.
If your cards still look wrong against your specific photo — too dark when the photo is dark, too washed out when it’s light — use the Card background control under Card Style (below) to force a tint direction.
Choose from 17 built-in Google Fonts:
Archivo, DM Sans, Fraunces, Inter, Lato, Merriweather Sans, Montserrat, Nunito, Open Sans, Outfit, Playfair Display, Poppins, Raleway, Roboto, Sora, Space Grotesk
You can also type any name from Google Fonts to use a font that isn’t in the list. The preview updates instantly so you can see how it looks before committing.
If you’re unsure, Inter and DM Sans are clean and versatile. Playfair Display and Fraunces add personality if you want something with more character.
Card Style
Section titled “Card Style”Controls the border radius on cards and content elements across your page. The picker shows the four options left-to-right from squarest to roundest, so you can compare at a glance.
| Style | Look |
|---|---|
| Sharp | No rounding, square corners (0px) |
| Subtle | Minimal rounding (6px) |
| Rounded | Standard rounded corners (16px, default) |
| Soft | Extra-rounded, pill-like corners (24px) |
Rounded is the safe default. Soft feels friendly and modern. Sharp has a more editorial, structured look. Pick the one that matches the personality of your page.
Card background
Section titled “Card background”A second control under Card Style decides which way your cards tint:
| Setting | What it does |
|---|---|
| Auto | Picks the direction from your page brightness. Light pages get dark-tinted cards; dark pages get light-tinted cards. The default — and the right answer most of the time. |
| Dark | Forces a dark tint regardless of page brightness. |
| Light | Forces a light tint regardless of page brightness. |
You’ll mostly only reach for Dark or Light if you’re using a photo background. Auto reads page brightness as a heuristic, and most photos aren’t uniformly bright or dark — so it can occasionally guess wrong against a specific image. Flipping the toggle sidesteps the guess.
On solid and gradient backgrounds, Auto almost always nails it.