Design Editor: Customize the Look of Every Section
Learn how to use the SproutOS Design Editor to customize colors, fonts, layouts, images, and text across your entire website design before exporting.
Phase 2 of 3: Prompt → Sitemap → You are here: Design → Export. The Design Editor is where your website comes to life visually. Every page and section from your sitemap is rendered here as a real design you can customize.
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 prompt 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
- Click Randomize colors to instantly generate a new color combination based on your current palette
- Add a new accent color using the + button under Primary Colors, or remove an existing accent by clicking the delete icon on it
Try several palettes before settling on one. Switching is instant and you can always go back.
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
- Click Randomize fonts to instantly swap to a new heading and body font pairing
Buttons
The Buttons section lets you control the global style of all buttons across your design. Changes here apply to every button on every page.
- Button Sizes: choose the default button size - Small (S), Medium (M), or Large (L)
- Corner Radius: select from four options ranging from sharp square corners to fully rounded
- Display Icon: toggle Yes or No to show or hide icons inside buttons
Select a Button Design to choose the overall button style. Each design shows a preview of how your Primary, Secondary, and Link buttons will look across the site.
Cards
Cards customization is coming soon.
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:
| Action | What It Does |
|---|---|
| Rewrite | Rewrites the text from scratch using your brief as context |
| Make Shorter | Reduces length while keeping the meaning |
| Make Longer | Expands the text with more detail |
| Fix Grammar | Corrects spelling and grammar errors |
| Improve Writing | Improves clarity and flow |
| Simplify | Makes the language easier to read |
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
- Set the Position of the image within its frame - choose from Center, Left, Right, Top, or Bottom
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.
| Viewport | Width |
|---|---|
| Desktop | Full canvas |
| Tablet | 768px |
| Mobile | 375px |
Design edits are made in Desktop view. Tablet and Mobile views are for previewing only.
Frequently Asked Questions
Color and font changes apply globally across all pages. Section variant changes apply only to the specific section you changed.
Yes. Use Ctrl+Z to undo recent changes. The AI Design Agent also has its own undo for applied AI changes.
A section type is the kind of content, for example Hero, Pricing, or FAQ. A section variant is the visual layout for that type. You choose the section type in the Sitemap Editor and the layout variant in the Design Editor.
Yes. Use Pitch Concepts to create a shareable preview link. Your client can view the design without needing to log in to SproutOS.
Next Step
Export Your Design
Export your finished design to Elementor, Gutenberg, or Figma.