1. From the event's dashboard, click on "Website" to open the website builder.
2. Go to "Theme & Typography" to configure theme, colour and typography settings for the entire website in one go.
3. Theme Presets: The fastest way to set your whole look at once.
4. Pick a ready-made preset and click on it applies immediately as Primary, secondary, and even as bacgrounds all together.
5. Click Browse all to see the full set of presets beyond the few shown by default.
6. Click on a theme of choice to select.
7. Click on "Apply preset" to apply it in the website.
Note: Whats the reason one block "doesn't match" after a theme update ?
By default, a block's text and colours simply point to the theme rather than having a value of their own that's why changing one theme colour can update buttons and headings across your whole site at once. If you want one specific block to keep its own colour even after future theme changes, open that block and set its colour directly rather than leaving it on the default. Do this only where you mean to, since it's the most common reason one block "doesn't match" after a theme update.
8. Colours: This shows the colours your current theme is built from Primary, Secondary, Card, Background, and so on.
9. Under colours - Each colour with its own swatch and code can be seen.
10. Click any colour to change it, and every section or block using that colour updates right away.
11. For more detail on each colour including how it's used and its accessibility contrast rating click on Edit in full theme editor.
12. This opens a full table of colour tokens, showing exactly what each one is used for for Primary, Secondary, buttons and brand accents, cards and panels and a pass/fail contrast check so you can see if a colour is hard to read against its background before you publish.
13. Typography: Shows the fonts your current theme uses a Display font for headings, a Body font for paragraphs and general text, and an optional Mono font for things like code, stats, or timestamps.
14. Pick a different font for any role from the dropdown, and every heading or paragraph using that role updates right away.
15. For more detail including how each text size is used across your site click on the "Open full theme editor"
16. check the Typescale further down the same panel. This shows a full table of named text styles, each with a live preview.
17. Type scale: a set of named text sizes (Display, H1, H2, H3, Lead, Body, Small, Eyebrow) that every text block on your site pulls from.
18. Shadows: Preset elevation levels like None, Soft, Lifted, Floating, Overlay are used for cards, popovers, and modals across your site. Each level controls how far a shadow spreads and how strong it looks, so elements like cards or dropdowns feel consistently "lifted" off the page.
19. Button Defaults: Three controls apply to every button on the site at once. Shape, Primary fill, and Size. A live preview shows real buttons updating as you change them.
20. Motions Controls how lively transitions and hover effects feel across the site. Animation has four presets with each setting speed and intensity together. Respect prefers-reduced-motion, on by default, disables animations for visitors whose devices are set to reduce motion.
21. Reset theme Reverts all theme changes and back to the last saved preset or default. Useful for undoing experimentation in one click instead of reversing each change individually.
