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
Durable offers two levels of design control: global design for site-wide consistency, and section design for unique styling of individual content blocks. This allows you to apply a consistent brand aesthetic across your site while also highlighting specific sections with distinct visual treatments.
Global design controls, accessed through the Customize menu, include:
Color palettes (these define the overall color scheme for your entire site, unless overridden by section-specific settings)
Fonts
Corner roundness
Section design controls include:
Layout options for individual sections
Section-specific color palettes
Section-specific visual styles
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 global colors
To change your site's global colors (the default color scheme applied across your entire website), use the Customize (paintbrush icon) option in the top bar. This menu includes global color, font, and corner options.
Path: Website Options Bar > Customize (paintbrush icon)
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, so 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 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 actions.
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.
Applying section-specific color palettes
You can override your site's global color palette for any individual section, allowing you to create visual emphasis, differentiate content blocks, or align with specific branding within a single section. These changes will only affect the selected section and will not alter the colors of other sections or your overall site theme.
Hover over the section you wish to customize. A toolbar will appear at the bottom of the section.
Click the Design button (paint palette icon).
In the Design modal that appears, click the Layout tab.
You will see a row of preset color palettes. Click on any palette to instantly preview how it changes the background and elements within that section.
To choose a specific color, click the color picker icon (the small circle with a rainbow gradient) to open the Custom color modal.
Use the color picker to select your desired hue and shade. Durable will intelligently apply complementary colors to text, buttons, and other elements within the section to maintain readability and contrast.
Click Save to apply your custom color, or Cancel to revert.
Once you are satisfied with the section's color, click Done in the Design modal to close it.
Important: Section-specific color changes only apply to the chosen section. Your global site colors, and the colors of other sections, will remain unaffected.
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
Beyond global settings, you can customize the design of individual sections to make them stand out or align with specific content. Hover over any section on your page and click the Design button (paint palette icon) to access its unique styling options.
Path: Section Controls > Design
Section design options let you:
Switch between preset layouts
Adjust spacing and alignment where available
Apply a unique color palette to the section (see details above)
Crucially, design changes made at the section level (including color palettes) do not affect other sections or pages. These changes apply only to the selected section, allowing for flexible and targeted customization.
For information on other section-specific design settings, such as adding Custom Fields to Your Website's Contact Form, refer to the relevant article.
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.