What are "Styles"?
Styles let you save design settings like text and colors ahead of time, so you can reuse them throughout your project.
Studio.Design offers two types of styles: Text Styles, which group text settings together, and Color Styles, which group color settings together. Each works independently and covers different settings and locations.
This article gives you an overview of styles and explains the differences between the two types. For detailed steps on how to create and apply each type of style, check out the individual articles.
Tip: Conditional Styles vs. Text Styles / Color Styles
The word "style" is also used in a separate feature called Conditional Styles, which changes the appearance of an element based on certain conditions.
Conditional Styles are different from the "save and reuse" styles covered in this article. If you want to change how a box looks or is laid out under specific conditions like hover or scroll, see Conditional Styles.
Benefits of using styles
Styles help you work more efficiently in situations like these:
Keep your site's tone consistent
By saving styles for headings, body text, brand colors, and more, you won't need to redo settings on every page.
Keep settings consistent across your team
Using shared styles within a project helps prevent inconsistencies between team members.
Apply site-wide changes all at once
When you edit a saved style, the changes apply everywhere that style is used. There's no need to update each element one by one.
Types of styles
In Studio.Design, you can save both text and color as styles.
Type | Main items you can save | Where to save |
Font, size, weight, line height, spacing, direction, underline, italic, and more | Styles panel > Text tab | |
Colors you use repeatedly across your site, such as background colors and text colors | Styles panel > Color tab |
What are Text Styles?
Text Styles let you manage text settings like font and size all in one place.
Once saved, you can apply the same settings to new text with just one click. Color, shadow, and alignment aren't included in Text Styles — you'll set those individually for each text box.
For details on how to create, apply, and delete Text Styles, see Text Styles.
What are Color Styles?
Color Styles let you save and manage colors you use repeatedly, like your brand colors.
You can organize them with labels and hierarchies, making it easy to manage colors on sites with lots of colors or across team projects.
For details on how to create, apply, and delete Color Styles, see Setting up Color Styles.
Viewing saved styles
You can see all your saved styles at a glance in the Styles panel on the left side of the screen.
In the navigation on the left of the screen, click the Styles icon to open the Styles panel in the left panel.
Select the Text tab or the Color tab to see a list of your saved styles.
Tip: Editing styles included with templates
Templates from Studio.Store may already include Text Styles and Color Styles. Before creating new styles when adjusting a design, check what's already saved in the Styles panel. Editing existing styles directly is an efficient way to update the look of the entire template.
Things to keep in mind when using styles
When you copy and paste an element that has styles applied, pay attention to how the settings carry over.
When pasting into another project
The appearance (settings like font and color) is preserved when pasted, but the element won't be linked to Text Styles or Color Styles in the new project.
If you want to manage the settings as styles in the destination project too, you'll need to save them as styles again.
Styles are included in version history
Text Styles and Color Styles are included in the version history feature, which saves information like what was changed and who changed it as a "version" that you can restore. If you make a change by mistake, you can revert to a previous state as needed.