Style combinations and site Animation

If you want to try a completely different visual direction for your site—moving from a minimal editorial look to something corporate, warm, or dark—you don’t need to tweak every color and font one by one. The Brand → Styles tab lets you transform your entire visual system at once or by family.

Changing your entire site’s look in one click with Style combination

Under Brand → Styles → Style combination (Combinations), you’ll find more than 30 complete art directions (Product, Studio, Editorial, Executive, Evergreen, Pulse, Coral, Calm, Quiet luxury, Fintech, Brutalist, Nordic, and more).

Clicking any combination updates across every page of your site at once:

• The 9-color palette (backgrounds, surfaces, text, and accents).
• The font pairing for headings and body copy, along with their weights and spacing.
• The shape, borders, and shadows of buttons and cards.
• The vertical spacing between sections and the navigation bar divider style.

You can click through as many combinations as you like to see how they look on your real content right on the canvas.

Exploring and applying curated Color palettes and Font combinations

If you like the structure of your current combination but only want to swap its colors or typography, right below Style combination you can change each part independently:

• Color (Palettes that work together): browse palettes curated by mood (Suggested, Modern, Warm, Elegant, Soft, and Dark). You can also drag the Hue slider to rotate every color in the palette together while keeping them harmonious.
• Font (Font pairs for headings and text): try ready-made font pairings where the heading typeface and body typeface are already balanced in scale and weight.

Changing the visual style of all buttons, cards, section spacing, and the navigation bar

Inside the same Brand → Styles tab, quick visual pickers let you restyle key components without editing pixels:

Group in Styles	What you can change in one click
Buttons	Shape (Pill, Rounded, Soft square, Sharp, Tonal, Outline, Ghost, Text link, Ink line, Brutalist), Shadow, Inner shadow, Size, Text (normal or uppercase), and Weight.
Card	Global look for all cards: Hairline, Outlined, Box, Soft, Rounded, Flat, Plain square, Sharp, Ink line, or Bold.
Sections → Spacing	How much vertical breathing room sections have across the site: Tight, Compact, Balanced, Roomy, or Spacious.
Sections → Navigation bar	How the top menu separates from the rest of the page: No separation, Hairline, Ink line, Thick line, Tinted bar, or Tinted with line.

Setting up global site Animation (automatic scroll animations, speed, and style)

Under Brand → Styles → Animation, you can bring your whole site to life on scroll without configuring animations element by element:

1. Choose an animation style:
   • None: nothing moves as visitors scroll down the page.
   • Subtle: a short, quiet fade.
   • Smooth: blocks rise gently as they enter the screen.
   • Elegant: slower entrance paired with a soft blur.
   • Dynamic: quick entrance with a slight bounce.
   • Slide in, Grow, Reveal, Cinematic, or Flip: styles with stronger visual presence.
2. Click Play animation (▶): preview the effect live on the current canvas.
3. Customize by role (Customize): open Customize to pick the Speed (Slow, Normal, Fast, Very fast) and set separate Entrance or Hover effects for Large titles, Small titles, Text, Buttons, Cards, and Photos.

Respecting individual animations and accessibility: Global animation applies to every page, but if you give a specific element its own animation in the inspector, it keeps its own setting. In addition, if a visitor has “reduced motion” enabled on their device, the published site automatically respects their preference and shows the content without animation.

Resetting styles to the template’s original design

If you want to go back to the exact look your template or chosen combination started with after experimenting with colors, fonts, or buttons:

• Under Style combination, the first card marked Starting point (or From the template) preserves the initial design you opened the project with.
• Inside any individual token under Your brand, you can also click Restart style to restore that style (including its tablet and mobile overrides) to the original values of your active combination.