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 Themes (grid icon) and Customize (paint palette icon, for colors, fonts, and corners).
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 panel, include:
Color palettes (these define the overall color scheme for your entire site, unless overridden by section-specific settings)
Fonts
Corner roundness
Shuffle, which remixes palette, corners, and fonts without changing layout or section types
Section design controls include:
Layout options for individual sections
Section-specific color palettes
Section-specific visual styles
Choose a theme
Themes set the overall look of your site, including layout patterns, light or dark treatment, and how navigation, buttons, and backgrounds behave. New themes are added regularly.
Path: Website Options Bar > Themes
To choose a theme:
Click Themes (grid icon) in the top bar.
The Here are some theme options panel opens. Each thumbnail shows your current site content in that look. The one in use is marked Current theme.
Click a thumbnail to apply that theme on the canvas instantly.
To browse more looks, click Generate more.
Click Confirm theme to keep it, or Undo theme to go back. If you have not chosen a new look, click Done to close the panel.
For another site-wide branding element, you can also Customize Your Website's Favicon.
Shuffle palette, fonts, and corners
Shuffle mixes the color palette, corner roundness, and fonts for the theme you already have selected. Layout and section structure do not change.
Path: Website Options Bar > Customize > Shuffle
Click Customize (paint palette icon) in the top bar.
In the Customize panel, click Shuffle (dice icon) in the top right.
Palette, corners, and fonts update on the canvas. Click Shuffle again for another mix, or open Palette, Corners, or Fonts to adjust by hand.
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 (paint palette icon) option in the top bar. This menu includes global color, font, and corner options.
Path: Website Options Bar > Customize (paint palette icon)
When you open the Customize panel, you'll see Palette, Corners, and Fonts, plus Shuffle (dice icon) in the top right. Click Palette to begin customizing your site's color scheme.
Prefer a walkthrough? This video shows how to open Customize and change your site colors.
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 paint palette 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.
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.