Design changes control how your site looks, not what it says. The Website Editor separates design from content so you can experiment freely without rewriting your pages.

Global design vs section design

Some design choices apply to your entire site, while others apply only to a single section.

Global design controls include:

Color palettes
Fonts
Themes

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

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 Colors option in the top bar.

Path: Website Options Bar > Colors

When viewing your selected theme's color options, you'll see 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.

As you change your colors:

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 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 Durable's AI to automatically rebalance colors to the theme's 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 the same way as colors.

Path: Website Options Bar > 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.

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.

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 preview your site.

Use Preview 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.