Theme Manager

The Theme Manager (accessible via the palette icon on the left sidebar) establishes global design tokens and baseline typography across your document template. Modifying styles in the Theme Manager updates targeted elements automatically throughout the entire layout, ensuring design consistency and brand alignment.

---

Global HTML Element Rules

These settings apply CSS rules directly to base HTML elements across your template layout.

1. Body (body)

Controls default document page typography and text flow:

• Background (background-color): Sets baseline paper/container background color (Default: #ffffff).
• Color (color): Sets default text color (Default: #000000).
• Font Size (font-size): Sets base body typography size (Default: 1 rem).
• Line Height (line-height): Controls paragraph spacing and line height (Default: 1.75 rem).
• Font Family (font-family): Global document font stack (Default: Arial, Helvetica, sans-serif).

2. Headings (h1)

Defines default styling for primary document titles and section headers:

• Color: Primary heading text color (Default: #000000).
• Font Size: Heading typography scale (Default: 1.5 rem).
• Line Height: Line height spacing (Default: 2.5 rem).
• Font Family: Primary heading typeface (Default: inherit).

3. Subheadings (h2)

Defines default styling for secondary headings and block section titles:

• Color: Subheading text color (Default: #1e1e1e).
• Font Size: Subheading typography scale (Default: 1.2 rem).
• Line Height: Line height spacing (Default: 1.75 rem).
• Font Family: Subheading typeface (Default: inherit).

---

Reusable Utility Classes

The Theme Manager exposes predefined utility CSS classes that can be attached to any individual component via the Right Inspector Panel.

1. Background Color Classes

Apply global theme colors to container backgrounds, table headers, and badges:

---

2. Foreground Color Classes

Apply theme color values to text elements, icons, and inline highlights:

---

3. Border Utility Classes

Manage standardized border radii, widths, and stroke colors across buttons, cards, and image containers:

---

Applying Theme Classes

To assign a theme utility class to a canvas block:

1. Select any component on the visual canvas.
2. Open the Component Classes input inside the Right Inspector Panel.
3. Type or select the target class name (e.g., bg-primary-color, border-radius, or warning-color).