Introducing Pagecloud's site-wide colors

Digital design is changing at warp speed. In a world where websites, apps and companies need to be able to adapt quickly, many are turning to design systems. “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” Whether you’re part of a design team or a freelancer, a design system will let you make updates quickly, maintain a consistent design, and scale your site rapidly! If you don’t want to be left behind, it might be time to consider building your own design system.

If only your website builder could help you create a design system…

You’re in luck! Pagecloud is thrilled to release site-wide colors! This is the first step towards creating a brilliant design system to better serve you and your design team. 

What are site-wide colors?

Site-wide colors are Pagecloud’s new feature that allows you to create, name and reuse a color. You can apply these colors to everything across your pages: objects, backgrounds, image tints and more. When you change a site-wide color, the change will automatically be applied everywhere that color is used across your entire site! 

Site-wide colors will allow you to have a consistent color scheme across your site and dramatically speed up your update process. The best part is it is easy to get started!  

Adding your site-wide colors

There are two ways to add site-wide colors to your site: 1. One at a time, or 2. using our color assistant. 

1. Adding new colors one at a time

To get started, open the new Site settings tab on the left side bar; This is where you will manage your site-wide colors. 

When you open the Site settings for the first time, in-app guidance will show you how to create a site-wide color. You can create and name as many site-wide colors as you want. You can add more at any time, and the list of site-wide colors can be sorted by dragging colors up or down. 

2. Adding site-wide colors using our color assistant 

You can also add site-wide colors by using our color assistant. The color assistant gives you site-wide color suggestions based on frequently used colors throughout your page. This is a huge time saver for existing sites.

Open Site settings and click Suggestions. You will be shown colors that are currently on your page that you can make into site-wide colors. Select all the colors you want to become site-wide colors, click ‘Add selected colors’ and they will be added to your site-wide colors list. To name your newly added colors, open your Site settings and click ‘Edit’ next to the new color. Don’t forget to select ‘Update site-wide color’ to save and apply your changes!

Applying site-wide colors

Now that you've created and named your colors, you can start applying them! Applying site-wide colors is just like applying a normal color. For a step by step guide you can use our site-wide colors help article.

Once you’ve added site-wide colors in Site settings, you will have quick access to your site-wide color list when you want to apply a color to an object, as shown above. You can also adjust the opacity of your color using the opacity slider, allowing you to create various tints while maintaining the color reference. 

You’re now ready to experience the real power of site-wide colors! With just one click, you can change the color wherever it's been applied across your entire site. Magic!

Open Site settings by clicking on the menu item in the left sidebar or by clicking the "Edit site-wide colors" button in the color view in the Editing menu.

Click on the color chip or the Edit button to open the color picker. When you change your color, you can see a preview of what the color will look like on your page. Once you're satisfied click the "Update site-wide color" button.

If you use this color on other pages, those colors will be updated as well once you save this page. It's that fast! And like everything with Pagecloud, you can easily undo your changes. 

Can I still make custom colors? Of course!

If you need to add a color for a one-off purpose, you can use the “Custom color” button. This color will not be a site-wide color.

What’s Coming Next

Site-wide colors is just the first feature Pagecloud is releasing to help you create your own design system and help speed up your design process. Later this summer we will be releasing site-wide typography which will allow you to create save and update your site's typography just as easily as site-wide colors. 

And we won’t be stopping with typography! We have plans to give you all sorts of site-wide control like padding, shadows, and even entire Sections! Digital design isn’t slowing down anytime soon. Pagecloud is here to help you keep up!