Design Editor: Customize the Look of Every Section

The Design Editor is an infinite canvas where you customize the visual design of every page and section. SproutOS generates a starting design from your brief and sitemap. You then adjust colors, fonts, layouts, images, and text to match the client's brand. Every change is saved automatically.

The Canvas

The canvas shows your full website design — every page, every section, in order. Use these controls to navigate:

• Pan — click and drag on any empty area of the canvas
• Zoom — use the zoom controls at the bottom or scroll while holding Ctrl
• Fit to screen — click the fit button to see your entire design at once
• Switch pages — use the page list on the left sidebar to jump between pages

Color Palettes

SproutOS provides multiple pre-built color palettes organized by industry. Switching palettes updates the entire design instantly.

• Browse palettes by industry: Tech, Health, Finance, Creative, and more
• Create a custom palette using hex color input
• Adjust the global saturation slider to make all colors more vivid or more muted
• Toggle between light and dark text modes

Typography

Choose from 1,000+ Google Fonts for your heading and body text.

• Heading font — applies to all headings across the entire design
• Body font — applies to all paragraph text
• Search and filter fonts by name or category (serif, sans-serif, display, etc.)
• Font changes apply globally and update every section instantly

Section Layouts

Each section type has multiple layout variants. Switching variants changes the visual arrangement without changing the content.

• Open the variant panel for any section to browse available options
• AI Picks are highlighted — these are variants recommended based on your brief
• Bookmark variants you like for quick access later
• Search variants by name or number if you know what you are looking for

Editing Text

Click any text element on the canvas to edit it directly. Changes are saved automatically.

For AI-assisted editing, select any text element to open the quick actions panel:

Images

Click any image on the canvas to replace it. A picker opens with three options:

• Browse the built-in stock photo library
• Upload your own image files
• Select from previously uploaded images

After selecting an image, you can:

• Adjust aspect ratio: Original, 1:1, 4:3, 16:9, 3:2
• Add a color overlay and control its opacity

For logos, upload a light and a dark variant separately. SproutOS applies the correct version automatically based on the section background color.

Responsive Preview

Switch between Desktop, Tablet, and Mobile at any time to check how the design looks at different screen sizes.

AI Design Agent

The AI Design Agent is a chat panel inside the Design Editor. Describe what you want to change and SproutOS applies the changes directly.

Examples of what you can ask:

• "Make the color palette warmer and more inviting"
• "Switch the hero section to a more minimal layout"
• "Use a bold serif font for headings throughout"

Changes made by the AI can be undone. Continue the conversation to refine further.

Frequently Asked Questions

Next Step

Export Your Design

Export your finished design to Elementor, Gutenberg, or Figma.