Changing colors, fonts & spacing
Use the Customize panel in the page builder to recolor your event page, swap its fonts and adjust the spacing of each section — no code required. Every change previews live as you make it.
Use the Customize panel in the page builder to recolor your event page, swap its fonts and adjust the spacing of each section — no code required. Every change previews live as you make it.
Every theme comes with colors and fonts that already look great, so you can publish without touching a thing. But when you want the page to match your wedding palette, your brand, or just your taste, the Customize panel gives you point-and-click control. You will see each change in the live preview the moment you make it, so you can experiment freely.
No CSS knowledge needed — pick a color, type a font name, done.
Go to Event page → Customize page for your event. This opens the editor with a live preview of your page on the right.
Click the Customize button on the right edge of the editor. The Customize panel slides in with your theme, colors, and typography controls.
The Customize panel sorts every control into the same four groups, whether you are looking at the whole page or a single section — so the shape is worth learning once:
| Group | What lives there |
|---|---|
| Content | What the page says — including the Event language guests read it in |
| Layout | How a section is arranged — width, padding, alignment, columns |
| Style | How it looks — the Active theme, your color palette, fonts |
| Advanced | The escape hatches — Global CSS and header/footer HTML |
Which groups start open depends on what you are editing. With no section selected — the page-wide view — Content and Style are open, because the theme picker and the palette are the reason you opened the panel. Select a section and only Content is open; Layout and Style are one click away.
After that the panel remembers you: whichever groups you leave open are restored the next time you select a section of that type, so a Schedule always opens the way you like Schedules. Advanced is the exception — it is never restored, so an escape hatch you opened once on one section doesn't greet you on every other.
Open the Style group and you will find Active theme at the top — it lets you switch between your styled themes. Each theme brings its own colors, fonts, and layout, so this is the fastest way to change the whole look at once. Pick a starting point you like, then fine-tune the colors and fonts from there.
Open the Color Palette section to recolor your page. You will see a swatch and a text field for each main color role:
| Color | Where it shows up |
|---|---|
| Primary | Buttons, links, active states, and key highlights |
| Accent | Decorative touches, schedule dots, highlights, and hover states |
| Page Background | The overall background behind your page |
| Surface / Card | The background of cards and sections sitting on the page |
| Text | Your main body text |
| Muted Text | Labels, captions, timestamps, and secondary details |
To change a color, click the swatch to open the color picker, or type a hex code (like #2E2A8F) straight into the text field. The preview updates as you go.
Click the color square next to a role and choose a shade, or paste a hex code into the field beside it.
Your chosen color flows through every matching element on the page automatically — buttons, headings, borders, and more all stay in sync.
Each color you have overridden shows a small Reset link to put it back to the theme default. To clear everything at once, use Reset all to theme defaults at the bottom of the palette.
Fonts live in the More Colors & Typography section, right below the colors. You will find three roles you can set:
--event-font-heading)--event-font-body)--event-font-mono)Type a font family into any of these fields — for example, "Cormorant Garamond", serif — and include a fallback after the comma so text always has something to fall back on. The preview updates immediately.
To use any Google Font (or your own self-hosted web font), load it in Global CSS and then set it as your heading or body font. Global CSS and section-level custom CSS are available on the Standard plan and above.
Go to fonts.google.com, pick a font, and copy its @import URL. For example, for "Cormorant Garamond":
https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&display=swap
In the Customize panel, open the Advanced group and find the Global CSS box. Paste the import at the top, then set the font variable underneath:
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&display=swap");
:root {
--event-font-heading: "Cormorant Garamond", serif;
}
Want the same font for body text? Set both variables:
:root {
--event-font-heading: "Cormorant Garamond", serif;
--event-font-body: "Cormorant Garamond", serif;
}
The font loads and applies right away in the preview. Use the viewport toggle in the editor toolbar to check it on both desktop and mobile.
Each theme sets its own spacing and density, tuned to look balanced out of the box — so there is no single "spacing" slider for the whole page. What you can change is how much room an individual section takes.
Select any section and you'll find Section padding at the bottom of its settings, with four steps:
The steps are relative, not fixed sizes: they are measured against whatever that particular section already uses in that particular theme, at that screen size. So "Narrow" always reads as tighter than normal and "Large" always as roomier, whether the theme is airy or compact, and a section stays in proportion on a phone as well as on a laptop.
A handful of sections are deliberately flush in some themes — their design puts the breathing room inside the block rather than around it. There, "Narrow" has nothing to tighten and looks the same as "Normal"; "Large" still adds room.
Sections that are flush by design in every theme — the navigation bar, the cover, the marquee ticker, and the spacer — have no padding to give, so they don't offer the control at all. Large Media keeps the control only while its width is Contained: a full-bleed band is flush by definition, so there would be nothing for the steps to change.
Section padding can also be set separately for tablet and phone — see Different values on tablet and phone below.
Media sections also offer Section width:
Large Media ships as Full width, since that block exists to fill the screen. Image, Image Grid, and Gallery ship as Contained; switch one to Full width when you want the photos to bleed off both edges.
On those three, width can also differ per screen — a band that bleeds off both edges on a laptop can be pulled back into the column on a phone. Large Media is the exception: its width is a single choice for every screen, because three themes (Rendezvous, Summit, and Concert Pass) restate its full-bleed rule in their own stylesheets, so a "contained on phones" Large Media would quietly stay full-bleed on them. Rather than offer a switch that fails on 3 of 13 themes, Large Media keeps one width — and it already has its own Desktop / Tablet / Mobile height fields, which is where most of the per-screen tuning that band needs happens anyway.
The Text block has its own Width control, and it moves the thing a reader actually notices: how long each line of text is. Long lines are tiring to read — the eye loses its place on the way back to the left margin — so this is the control to reach for when a paragraph feels like hard work.
The block itself follows: Narrow also pulls the whole block into a centred column, and Wide lets it fill the theme's column. On a phone the column is already narrower than any of these, so all three steps read the same there — the control is for the wider screens where the difference exists.
Large Media also has a Tint colour control in its Style group — the same picker as the section background, with your palette's presets. It washes the photo or video in a colour, which is the quickest way to make overlaid text readable or to pull a stock image into your palette.
A colour you pick is applied as a translucent wash, so the media still reads through it rather than being painted over. If you want to set the strength yourself, write an rgba() value with your own alpha and that is used exactly as given. The tint sits above the blur and brightness effects and stays put when the band is parallaxed.
There is no default — until you pick a colour, nothing about your published page changes.
A band that looks generous on a laptop can look enormous on a phone, and a four-across grid that sings on a desktop turns into four postage stamps. So a handful of layout controls can carry a different value on a narrower screen — set once, on the control itself.
Where a control supports it, three small chips sit just above it:
| Chip | What it means |
|---|---|
| Desktop | The value every screen starts from |
| Tablet | Screens up to 1024px wide |
| Phone | Screens up to 640px wide |
Click a chip and the control below it now edits that screen. Pick a value and only that screen changes; everything wider keeps what it had.
Only the layout dials — the ones where "smaller screen, different number" is a real design decision:
Everything else is deliberately not per-screen. Your words, your photos, and your colours are the same on every device, and a switch that turns a feature on or off is an on-or-off decision rather than a layout one. (Hiding a whole block on phones is a different idea and isn't what these chips do.)
The narrower screens inherit from the wider ones. Phone follows Tablet, and Tablet follows Desktop, until you say otherwise:
The panel tells you which of those you are looking at. Under the control, one line reads either "Phone follows Tablet." or "Phone uses its own value." — so "Normal because nobody set it" is never confused with "Normal because I chose it". A chip that already carries a value of its own shows a small dot, so you can see at a glance where the overrides are before clicking anything. On Desktop the line instead reads "Overridden on Tablet and Phone." when narrower screens have taken their own values.
Section padding, text alignment, and section width live in the Layout group of the section's settings; Columns sits with the block's other content choices in Content.
Click Tablet or Phone above the control. The chip highlights, and the control below now edits that screen only.
Choose your value, then use the viewport toggle in the editor toolbar to view the page at that size. The preview switches to a real phone-width frame, so the mobile styles genuinely apply rather than just being drawn narrow.
With Tablet or Phone selected, the status line offers Clear. That removes the override and hands the screen back to the wider one — it does not set it to some other value.
--event-* variables, so your custom touches stay in step with the rest of the page. See Design tokens.