Theme and design adjustments

Last updated: May 27, 2026

Theme application, per-element styling, and image replacement in the studio’s Design tab.

Right panel layout

The right panel has “Design” and “Content” tabs. Design handles appearance; Content handles text, images, and contact info.

Click elements on the canvas to select them — individual settings appear in the panel.

Applying theme globally

In the “Theme” section at the top of the Design tab, apply a main color and font across the entire site.

Main color applies to hero and key blocks; fonts include Noto Sans JP, Zen Kaku Gothic New, M PLUS 1p, Shippori Mincho, and more.

Click “Apply theme site-wide” to update all sections. Applying theme after individual color changes may overwrite some settings — mind the order.

Per-element styling

With an element selected, change color, opacity, font weight, size, and more. Changes reflect immediately in the preview.

Drag to reposition; resize with corner and edge handles. Hold Shift while dragging to lock aspect ratio.

Add shapes and text to the selected block from the left toolbar.

Updating content

The Content tab handles image replacement, contact info (phone, email), and section text.

Replace placeholder contact info with real details before launch.

Swap images for on-brand assets. Verify rights on your own responsibility.

Changing section order

Use arrow buttons in the left section list to reorder blocks.

For major structural changes (adding/removing sections), updating the brief and regenerating may be more efficient. Note that regeneration resets manual edits.

Theme and design adjustments | DesignLayer