Studio Editor: About Site Styles

The Site Styles panel is a one-stop shop to view and manage a site's typography, colors, page transitions, and max width. Creating a theme for your client's site is a great, holistic way to save time and ensure the design is consistent. 

Site colors are a creative way to reinforce and express your client's brand. Use the Colors tab to manage ranges and individual shades, and create a cohesive theme across the site.

Finished customizing the site colors? You can quickly apply shades to elements from the Inspector. Learn more about working with site colors

Text is a crucial part of a site, and you can use the design to reiterate a brand's messaging and content.

The Typography tab is a great way to adjust every aspect of text. Update fonts to quickly apply site-wide changes, or customize individual text styles (e.g. Heading 4, Paragraph 1) for more detailed design. Learn more about working with typography

Want to limit how much elements grow on different screen sizes? Use the Max width tab to set the maximum value. 

This prevents elements you've set to scale proportionally from scaling up past a certain width, so you don't need to worry about oversized components or blocked content. 

Page transitions make the navigation experience more engaging for site visitors. Once you apply the effect, it appears on every page of your client's site. 

You can apply an Out-In effect from the Page transitions tab. Doesn't look how you want on the live site? You can remove it by clicking None.