Styles

Apply styles to the UI components of your Experiences

Studio's style settings give you complete control over the visual appearance of your Experience. These comprehensive styling options allow you to configure colours, spacing and layout to create a cohesive styled Experience that matches your brand.

What colour formats does Studio accept?

Studio accepts standard CSS colour formats in its colour settings, including both Hex and RGBA formats. For example, you can use #FFFFFF or rgba(255,255,255,1) for white.

For transparent colours, use the RGBA format where the fourth value controls opacity. For instance, rgba(255,255,255,0.5) creates white at 50% transparency.

Can I use gradients?

Yes, Studio supports gradient colours in most cases. To create a gradient, add each colour to the list using their Hex or RGBA codes. Arrange the colours in your desired gradient sequence, then choose a direction for the gradient flow.

Gradients cannot be applied to text colours or border styling. For these cases, you'll need to use our Advanced CSS overrides feature.

Whether a setting supports gradients or single colours is indicated by its input field type in Studio. List-type fields support both gradients and single colours - simply add one colour for a single colour effect, or multiple colours for a gradient.

When should I use background colours rather than images?

CSS colours should be your primary choice for clean, fast, and accessible UI styling. Only use background images when you specifically require photographic elements or complex textures that cannot be replicated through CSS.

In many cases, you can combine both approaches effectively, as background colours sit behind background images. If your image contains solid colour areas, you can make these sections transparent using a PNG format. Then set your background colour to match the desired shade, which will show through the transparent areas and fill any gaps.

This layered approach ensures your Experience performs optimally while maintaining visual consistency.