# Theme and styling

#### Per-template theme

Theme colors and typography are configured per template in the visual editor Theme panel — not in the global plugin settings screen.

1\. Open a template in the visual editor.  
2\. Open the Theme panel.  
3\. Adjust colors, fonts, and related theme options.  
4\. Preview on the canvas.  
5\. Save the template.

#### Why per-template?

Different pages can use different brand treatments (landing page vs blog vs campaign) without changing a single global theme for the whole site.

#### Component styles

Individual components may also expose style-related settings in their settings panel (spacing, alignment, etc., depending on the component). Use Theme for overall look; use component settings for local tweaks.

#### Front-end CSS

Builder can output theme CSS variables for a layout. Your project templates may include theme CSS via Builder’s Twig helpers so the front end matches the editor.

#### Tips

\- Set Theme early on a starter template, then duplicate that template for consistent branding.  
\- Prefer Theme tokens over one-off HTML/CSS in the HTML component.  
\- After theme changes, hard-refresh the front end if you have aggressive browser or CDN caching.