Use theme settings to powerfully change the look and feel of your entire project or match your company branding.
VIDEO: SEE IT IN ACTION
Note: Theme configuration is based on Material User Interface (MUI) standards which are web usability best practices driven by Google. They are also dynamic, these settings are a starting point for mid-size screens and will automatically scale up or down for smaller or larger screens.
DIY STEPS
In Studio, navigate to the interface by clicking the “interface icon” in the upper right toolbar.
When on the interface page, in the upper right click the “theme icon”.
You will make changes using the “Theme Settings Edit Panel” on the right while previewing your changes on the left.
Change your theme colors by clicking on the “paintbrush icons” and selecting a color.
“Auto background” will automatically calculate a color based on the primary color.
Unclick “Auto background” to customize your background color.
Edit your page opacity, background blur and shadow using the sliders.
Change the font face by clicking the dropdown menu and selecting a font face.
Change the font size by clicking the dropdown menu and selecting a font size.
Edit the border radius (sharp or rounded corners) by clicking the up or down arrow or typing in a number.
Edit the spacing by clicking the up or down arrow or typing in a number.
Click the carrots next to “extended colors” or “extended typography” for even more customization options.
Click the save button when complete!
FAQ
What is the ideal Image resolution for background images?
For Larger/Full page Images (i.e. Background or full page builder window), We recommend Full HD res (1920x1080).
Can you save a custom theme?
Not currently, however, this ability is in development, Theme Library Feature, and is COMING SOON!
In the meantime, you can create a custom sim “shell” with your theme/assets and then duplicate it as needed to save time.
Can I change the background color or image at the individual page level?
Yes, you have the option to change the background, which overrides the interface background settings for that individual page. You have the ability to add a new background image or change the background color. In the page, go into the "Style" tab in "Settings" and add (or remove) the image or background color.
Which fonts are available on the platform?
There are 21 fonts to choose from in the "font face" drop-down menu:
Which font controls the Title Heading of the project (next to the logo in the upper left)?
“Extended typography” > Body 2 is the font that controls and influences the title heading.
Why can't I upload our custom font?
Our team made a platform-wide design choice to support a curated smaller set of widely-used fonts to ensure users were able to have a consistent and optimal visual experience that also follows the best practices and standards for browser-based applications. Therefore, the limitation is not so much technical (i.e. our platform couldn’t accommodate custom fonts), but rather for UX optimization, visual compatibility to pages/templates/reports/etc., and to minimize the unpredictability of how things could look or the variability of font formats and their technical upload requirements.
What is in the roadmap related to expanded font support or custom fonts?
There are plans in our longer-term roadmap to ponder the integration of support for all of Google's fonts. This potential integration would allow for significantly more font choices and the ability to select the closest match to a client's existing brand fonts (as of November 2023, Google Fonts has 1,578 font families, you can search them here:https://fonts.google.com/ ). The ability to upload custom fonts is not currently on our roadmap.
