Colors
Manage your websites global colour palette
The colour settings allow you to manage a global colour palette for your website. You can add additional colours, and override theme defaults. The colours specified in the Theme Studio can be chosen in a component. This can be anything from a font colour to a background gradient.
Recommended Theme Colours
When building your site, we recommend sticking to the core theme colours: Brand, Accent, Surface, and Text. These colours are designed to work together across all components and templates. By using them consistently, you gain a few key benefits:
Global control: Update your colour palette in the Theme Studio once, and the changes flow throughout your entire site. You don’t need to hunt down individual elements to update their styles.
Consistency: Components, layouts, and templates are all built with these theme colours in mind. That means your site will look balanced and professional without you needing to fine-tune every detail.
Flexibility: If you decide to refresh your design later, simply adjust your theme colours. The update will apply instantly, making it quick to rebrand or experiment with new looks.
Compatibility: When you add new templates or components, they’ll automatically inherit your theme colours, so everything feels cohesive from the start.
For best results, avoid using custom colours. Instead, use Brand, Accent, Surface, and Text where possible. This way, your design remains easy to manage, flexible to update, and consistent across the entire project.
Theme Colour Roles
Brand
Use this as your primary identity colour. It’s often the colour from your logo or the one most associated with your brand. Common uses include buttons, navigation highlights, and key interactive elements.
Accent
This is your secondary highlight colour. It’s best used sparingly to draw attention or provide contrast. Examples include links, badges, icons, or subtle hover states.
Surface
The foundation of your design. Surface colours are used for backgrounds, cards, panels, and containers. They provide structure and help separate sections of your site. Surfaces often have light and dark variants for depth.
Text
Reserved for all typography, from body copy to headings. Text colours should maintain strong contrast against your surface colours for readability. The Theme Studio manages light and dark variations automatically.
Last updated