Design changes determine how your site looks, not its content. The Website Editor separates design from content, allowing you to experiment freely without rewriting your pages. For an introduction to the editor's layout and controls, refer to Getting Oriented in the Website Editor.
You'll find your main site-level design controls in the options bar at the top of the Website Editor. These include Theme, Customize (for colors, fonts, and corners), and Surprise me (for AI-assisted design suggestions).
Global design vs section design
Some design choices apply to your entire site, while others apply only to a single section.
Global design controls, accessed through the Customize menu, include:
Color palettes
Fonts
Corner roundness
Section design controls include:
Layout options for individual sections
Section-specific visual styles
Understanding this difference helps you avoid unexpected changes.
Themes: the foundation of your site's design
Themes define the overall design structure of your site.
They control things like:
Whether elements are light or dark
How navigation, buttons, and backgrounds behave
Default layout patterns for sections such as galleries or banners
For another site-wide branding element, you can also
Choosing a theme sets the design framework your site uses.
New themes are added regularly to support different brand styles and layouts.
Changing your site's colors
To change your site's colors, use the Customize option in the top bar. Previously, color and font options were separate, but they are now consolidated under the Customize menu for a streamlined design experience.
Path: Website Options Bar > Customize > Color palette
When you open the Customize menu, you'll see options for Color palette, Corners, and Fonts. Click Color palette to view a selection of curated Color Palettes. These palettes are designed by Durable's design team to ensure visual harmony and accessibility. Selecting a palette will instantly update your site's overall color scheme.
To further refine your site's colors, click the Customize option within the selected color palette.
Text, buttons, overlays, and backgrounds update automatically
Lightness and contrast are calculated in real time
Nothing becomes hidden or unreadable
You do not need to choose individual colors for every element. Durable's AI works behind the scenes to maintain perfect visibility and contrast, keeping your site accessible and readable - even with advanced customization.
The Customize panel offers advanced controls:
Primary, Secondary, and Accent Colors: Your site's design is built around a primary color, a secondary color, and an an accent color. These colors are applied dynamically across your text, buttons, and other elements.
Shuffle: Click the Shuffle button to automatically generate different harmonious color combinations based on your current primary color. This ensures your site always looks great and maintains optimal contrast.
Manual Color Selection: Ready to take full control? Toggle off the Shuffle option to remove Durable's AI guardrails. You can then individually select specific hues for your primary, secondary, and accent colors using the color picker or by entering a HEX code. Without AI assistance, you'll need to be more careful about maintaining visual appeal and readability.
Background: Use the Background toggle to choose from a selection of preset background colors or manually select a custom background color. If you manually select a background color, be mindful of how it impacts the visibility and contrast of your site's text and elements. Toggling "Shuffle" back on will re-enable Durables AI to automatically rebalance colors to the themes intended look and feel.
When you find a color scheme you like, click Done to apply it.
If you do not want to keep the change, click Cancel.
Changing your site's fonts
Fonts are controlled through the Customize menu, similar to colors and corners.
Path: Website Options Bar > Customize > Fonts
From the Customize menu, click Fonts. Choose from the available typography options to update text across your entire site. Font changes apply globally and update in real time.
Click Done to apply the font or Cancel to discard the change.
Changing your site's corner styles
The Customize menu also allows you to define the corner roundness for elements across your entire website. This ensures a consistent visual theme for all applicable components.
Path: Website Options Bar > Customize > Corners
From the Website Editor, click Customize in the top bar (represented by a paintbrush icon).
In the Customize modal that appears, click Corners.
You will see several options for corner styles, ranging from sharp, square corners to more rounded designs. Click on each option to preview how it affects your site's elements, such as content panels, buttons, and other UI components.
Once you find a corner style you like, click Done to apply it. If you don't want to keep the change, click Cancel.
Durable automatically applies your chosen corner style consistently across all relevant elements on your site, eliminating the need to manually adjust each one.
AI-Assisted Design: The "Surprise me" Option
If you're looking for fresh design inspiration or want to quickly experiment with different looks, the Surprise me option can help. This AI-powered feature generates new combinations of themes, colors, fonts, and corner styles for your entire site.
Path: Website Options Bar > Surprise me
From the Website Editor, click Surprise me in the top bar (represented by a magic wand icon).
Your site will instantly update with a new design, and a preview panel will appear on the right side of the screen. This panel shows the "Version 1" (the new design) and "Original" (your previous design).
To see another AI-generated design, click Shuffle again. Each click will generate a completely new combination of styles.
You can switch between the generated versions and your original design by clicking their respective thumbnails in the preview panel.
Once you find a design you like, click Apply to save it to your editing session. If you don't want to keep any of the generated changes, click Cancel to revert to your original design.
The Surprise me feature is a quick way to explore diverse aesthetic options and find a look that perfectly matches your brand without manual adjustments.
Designing individual sections
If you want to change how a specific section looks, hover over that section and click Design.
Path: Section Controls > Design
Section design options let you:
Switch between preset layouts
Adjust spacing and alignment where available
Design changes at the section level do not affect other sections or pages.
These changes apply only to the selected section, not the rest of the page.
Some sections also include a Customize option for additional design-related settings, such as adding Custom Fields to Your Website's Contact Form.
Navigation and footer design
The navigation bar and footer also include design presets.
When editing either area, switch to the Design tab to choose from available layouts. These presets control structure and positioning, such as alignment, spacing, and whether certain elements are shown.
Navigation and footer design is covered in more detail in a separate article.
Previewing design changes
Design changes update immediately, but it's always a good idea to use Previewing, Publishing, and Managing Visibility to see how your site looks without editing controls, and check both desktop and mobile views to ensure the design feels right on different screen sizes.
Saving design changes
Design changes are part of your current editing session.
When you are finished, click Publish Changes to make your updates live.
Path: Website Options Bar > Publish Changes
If you leave the editor without publishing, design changes will not be saved.
What's next
After designing your site, consider these next steps:
Customize how visitors move through your site with Editing Navigation and Footer.
Optimize your site's visibility and search engine ranking by learning how to Manage Page SEO Settings, Slugs, and Redirects.