How to Style UI Elements

By the end of this doc, you'll be able to:

1. Understand the difference between theme-level and section-level styling
2. Set up your brand colours, fonts and colour schemes in the Style Guide
3. Customise buttons, inputs, taglines, icons, shapes and spacing across your whole site
4. Adjust the layout, colour scheme and animation of an individual section

Two Levels of Styling: Theme and Section

Relume styles your site on two levels:

• Theme level: You define reusable styles once (colours, fonts, buttons, spacing and more), and every section that uses them updates automatically.
• Section level: You choose how each individual block is laid out and which of your theme's options it uses.

This split means you can restyle your entire site in one place, while still giving each section its own character.

How Theme and Section Styling Work Together

Think of the theme as your design system (the shared set of colours, fonts and components that define your brand) and each section as a set of choices made from that system.

• Theme level (the system): Change something here, and every section that points at it changes too.
• Section level (the choices): Each section has its own settings for how that block is composed and which theme options it uses.

Setting a brand colour creates a full shade ramp (a range of lighter and darker versions of that colour), but it won't appear on your page until something uses it, such as a colour scheme applied to a section.

How to Style Your Site at the Theme Level

All of your reusable styles live in the Style Guide.

1. Click Styling in the left sidebar.
2. Review the settings in the Style Guide panel that opens.

Choose or Add a Theme

A theme is a saved combination of all your Style Guide settings.

1. Click a theme card under Themes (for example, Clean Mint) to apply it.
2. Click the + card to create a new theme.

Set up your theme before fine-tuning individual sections. Theme changes ripple across the whole site, so starting there saves you repeating edits section by section.

Set Your Brand Colours and Fonts

1. Click Brand (Logos, colours and fonts) below the themes.
2. Set your brand colours to build your palette.
3. Choose your heading and body fonts.

Set Up Colour Schemes

Colour schemes are named colour sets, such as Light, Dark or a brand-coloured surface. Sections use these schemes to decide their background, text and accent colours.

1. Expand Color Schemes in the Style Guide.
2. Click an existing scheme, such as Light or Dark, to edit it.
3. Click the + card to add a new scheme.

Customise the Rest of Your UI Elements

Expand each category in the Style Guide to adjust it:

• Typography: Heading and body font sizes, weight, line height, letter spacing and case.
• Spacing: How dense or airy your sections and columns feel.
• Radius & Stroke: Corner radius (from sharp to rounded) and border thickness for cards and containers.
• Icons: Glyph style (outlined, rounded or sharp), weight and colour.
• Buttons: Colour, fill style (such as flat, gradient or bordered), padding, radius and font for primary, secondary and link buttons.
• Inputs: Text field style (filled, bordered or underlined), radius and border intensity.
• Taglines: The small eyebrow text above headings, including its treatment, colour and size.

How to Style an Individual Section

Each section has its own settings in the right-hand panel.

1. Click a section on the canvas to select it. A coloured outline and label (for example, Features Hero) appear around it.
2. Review the section's settings in the right-hand panel.

Layout

• Style: Choose a layout variation for the section from the dropdown.
• Direction: Swap the order of the content, such as moving the image to the other side of the text.
• Column Ratio: Choose an even or uneven split between columns.
• Section Height: Choose Auto to fit the content, or Viewport to fill the height of the screen.
• Section Padding: Choose how much space sits above and below the section.

Styling

• Colour Scheme: Choose which of your theme's colour schemes this section uses, such as Light or Dark.

Behavior

• Animation: Choose how the section animates as it appears, or select None.

To swap the section for a different layout entirely, click Replace component at the top of the right-hand panel.