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 Customize Your Website's Favicon.
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. This menu includes color, font, and corner options.
Path: Website Options Bar > Customize
When you open the Customize menu, you'll see options for Palette, Corners, and Fonts. Click Palette to begin customizing your site's color scheme.
Important: Choosing a palette color does not paint every element that exact shade. Durable picks readable variants for text, buttons, cards, and borders so contrast stays usable. Manual custom colors skip those automatic checks - preview the page before you finish.
Understanding and selecting a color palette
The Palette modal shows your current palette: a Base color plus three main swatches. Within each main swatch, a gradient shows the range of shades Durable can apply across the site.
To explore pre-designed color combinations:
In the Palette modal, click Change palette.
A grid of curated color palettes will appear.
Click on any palette to preview how it updates your site's overall color scheme.
If you have a specific brand color, click the small color circle in the top right of the modal, adjust to your color, and you'll see palettes that complement your selection.
Once you find a palette you like, click the customize button if you want to tweak the colors in your palette.
You can also click Reset all in the top right of the Palette modal to revert to the default palette for your current theme.
Customizing individual colors
You can further refine specific colors within your chosen palette.
Customizing the Base color (Background)
The Base color typically defines the primary background or dominant color of your site.
In the Palette modal, click the Base color swatch.
In the Base color modal, choose:
Palette: Theme-safe presets that keep contrast usable.
Custom: Color picker or HEX code for full control. Check that text and other elements stay clear against your backgrounds.
Customizing main palette colors
The three main swatches define the base for color lightness and hue gradient ranges. Durable AI uses these ranges to ensure readability and build the page, rather than forcing elements to be an exact color.
In the Palette modal, click one of the three main color swatches.
In the Change color modal, choose Palette presets or Custom (picker / HEX). Repeat for other swatches as needed.
Customizing button colors
Buttons follow your palette by default. To set them yourself, open Customize elements in the Palette modal:
Choose a button type:
Primary Button: Main call-to-action.
Secondary Button: Less prominent actio
ns.
Outline Button: Transparent fill with a colored border.
In the Change color modal, choose a color from Palette presets or Custom.
As you adjust colors, your site updates in real time. Use the back arrow to return to the Palette modal.
When you like the result, click Done. Click Cancel to discard the change.
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.