Set your website colours and typography
Start with the website's shared design settings, then adjust individual sections only where needed. This makes it easier to keep pages consistent as the website grows.
Choose a simple visual direction
Decide on one main background style, a small colour palette and a consistent set of fonts. For a consulting website, a readable neutral background, clear headings and one recognisable action colour are often enough.
Avoid changing every section independently before choosing the general style. A page is easier to scan when similar content looks similar.
Update the shared website design
Open your website in the editor.
Open Website Design.
Review the available colour and typography settings.
Make one change, then inspect several sections and another page that uses the shared style.
Save the draft when you are happy with the result.
Shared settings can affect multiple parts of the website. Check headings, body text, buttons and the header rather than judging a colour from one example alone.
Use section variants deliberately
A section can use a different theme variant to create contrast while still using the website palette. For example, a darker call-to-action section can separate the final contact step from the rest of the page.
Select the section and use its available background and theme settings. Check that text and buttons remain readable on the chosen background. An image background needs enough contrast behind the text, including on a narrow screen.
See the Section reference for its individual settings.
Keep text readable
Use headings to explain the page structure and body text for the details. Prefer a small number of consistent sizes over a different font size for each paragraph.
Check a long heading on a phone. If it wraps into too many lines, shorten the wording before making the text tiny. Avoid using a heading style only to make ordinary text look larger; choose the appropriate text style for its purpose.
The Typography and Markdown guides explain the available text blocks.
Adjust spacing after the content
Spacing should help readers recognise which items belong together. Keep a heading close to its introduction, give separate sections more space and keep repeated cards consistent.
Review padding inside a section separately from gaps between items. Large spacer blocks can create unwanted empty areas on smaller screens. Check the Container, Section and Spacer references before adding more empty space.
Padding, margins and phone layouts
Padding is space inside a box, between its content and its edge. Margin is space outside a box. A gap separates items within a layout. For example, increase section padding when text is too close to the background edge; adjust a container's gap when two cards are too close together.
Select the section or container that owns the spacing before changing a value. Increasing both parent padding and child margins can accidentally double the empty space. Review the available width and alignment controls before using a Spacer block to force a layout.
Check the phone preview after each meaningful layout change. Long text and columns may stack differently on a narrow screen. Keep related content together and avoid fixed wide content that pushes the page sideways. See the Container reference for layout settings.
Add or remove entrance animations
Select a supported section or block and open its Animation setting. Choose an effect such as fade-up or zoom-in, or choose none to remove it. Available controls depend on the selected block.
Preview the page and scroll through it from the top. Keep motion modest and check that important text and actions remain easy to find. If the page feels slow or distracting, remove animations from repeated items before adding more effects. Save and publish the design when the result is ready.
Final check
Preview a narrow and a wide layout. Check contrast, long headings, button labels and image crops. Save your draft, then follow the launch checklist when you want visitors to see the new design.
