# Change a section look

Use the Design tab for tone, spacing and styles, without touching the rest of the website.

For: Everyone editing a page

## Where the design settings live

With a section selected, the inspector has two tabs. Content changes what the section says; Design changes how it looks. The Simple and All options switch decides how many of the design controls are shown at once.

The same design work is also in the Design panel of the Add rail, where it applies to the whole website, theme, fonts, corners and spacing. If a change belongs to one section, do it here; if it belongs to every page, do it there.

Walkthrough: Where design settings live in the editor (The website editor, then The inspector on the Design tab)

1. **Content and Design**: The inspector has two tabs: what a section says, and how it looks. Design is the right-hand one.
2. **Or the whole website**: The Design panel in the rail carries the theme for every page: colours, fonts, corners and spacing.
3. **Tone for one section**: Tone picks colours from the website palette, so a changed section still matches the rest of the site.
4. **Simple or All options**: Simple hides the rarely needed controls. All options shows everything when Simple has hidden something you want.

1. Select a section and open the Design tab.
2. Change one thing at a time and watch the canvas.
3. Switch to All options when Simple hides something you need.

## Tone, styles and spacing

Tone picks the colours for the section from the website palette: main colour, accent or a quiet surface. Styles offer whole layouts for the same content, for example a card with an image or a plain list, and spacing decides how much air sits above and below.

Because every change is made from the same palette, a section you change still matches the rest of the site. The Theme panel is where the palette itself lives, with a contrast read-out that tells you when text is getting hard to read.

Walkthrough: Tone, spacing and styles on a section (The inspector on the Design tab)

1. **Pick a tone**: Main colour, accent or a quiet surface. One step is usually all a section needs.
2. **Give it air**: Compact, Comfortable or Spacious decides how much space the section takes around its content.
3. **Change the layout**: Styles offer whole arrangements for the same content, from a card with an image to a plain list.

Note: A section that looks wrong often needs one tone step and one spacing step rather than a new layout.

## Can I style one card in a row?

Yes. Alt+Click the card to select the part, then style this part from the right-click menu.

## Why can I not change a font for one section?

Fonts belong to the website theme on purpose. One page with its own fonts is the usual way a site starts to look untidy.

## Related guides

- [Choose colours and fonts](/help/brand-and-design/choose-colours-and-fonts)
- [Work with sections](/help/editor/work-with-sections)
---

CubeSites is a trading name of Cube Systems Limited, part of Crushed Ice Group. Registered in England and Wales, company number 17220899. Registered office: Unit 11, Olney Business Park, Osier Way, Olney, Buckinghamshire, MK46 5FP. ICO registration number ZC216972.

Contact: hello@cubesites.co.uk | 01234 672 617 | https://cubesites.co.uk/contact