Quick answer · Building a website · 2 min read
How do Site Styles work in Wix Studio Two?
Site Styles is Studio Two's design system: the colours, fonts, text styles and styled buttons, lines and containers every page uses. Change a style once and every element using it updates.
Key points
- Every site starts with nine colours and nine text styles.
- Default colours and text styles can't be deleted.
- Save a designed element as a style with Custom Style, then Save.
Site Styles is Wix Studio Two's design system: the colours, fonts, text styles and styled elements every page draws from. Change a style once and every element using it updates. Open it from the Site Styles icon on the left of the editor.
What's in Site Styles?
- Colours. Every site starts with nine, Color 1 to Color 9. The first six are the defaults for apps and elements. You can change and rename the defaults but not delete them. Custom colours can be added, renamed and deleted.
- Fonts. Change a font and every text style using it updates.
- Text styles. Nine defaults: six headings and three paragraph styles. Each has its own size, minimum and maximum size and spacing for each breakpoint. The defaults can't be renamed or deleted.
- Styled elements. Buttons, lines and containers. The top style in each group is the default for apps, so a Wix Bookings Book Now button uses your primary button style.
How do you save a style from the canvas?
- Select an element you've designed.
- Click Custom Style on the action bar, then Save.
- Choose Update style to overwrite an existing style, or Create new style and give it a name.
- Click Save. Any new fonts or colours in it are added to Site Styles.
If you delete a style that's in use, Wix asks you to pick a replacement. Default styled elements can be restyled but not deleted.
One thing to know: Wix's Studio Two product page still marks Site Styles as coming soon, even though the Help Center documents it. During the gradual rollout it may not be on every account yet.
Our take: set up Site Styles before you build a single page. It's quicker than fixing fonts and colours page by page later. Want it done for you? See our Wix Studio 2 service.