How to customize the look of your site

With Super themes, you can instantly customize your site’s design with zero coding knowledge.

Designing your site with Super themes

Super themes transform your Notion page into a professional website you'll want to share. You can customize the appearance of Notion blocks without coding — straight from your Super site dashboard. Dive in all the different design options and find the look that speaks to you.

You can view, edit and apply all your themes from the Themes menu which is at the top level of your Super Dashboard.

You can also view, edit, preview and apply a theme to your current site by using the Design menu in the site dashboard.

Create your first theme

To start with your first theme:

Head to your Super site dashboard and select Design
Under Theme, press Turn into Theme
A prompt will show asking you to duplicate the theme.
Click Duplicate and this will show you Copy of "your sitename".

You can now customize your theme and save all changes by clicking Save Changes at the top
You must apply this theme to your site to see it on the live site, and you can change or remove a theme from your site whenever you like.

Choose site colors

In the Colors section, you can toggle between light and dark Default color modes for your site.

You can then customize each mode:

In the Main colors section, you can pick colors for the main site content, including page background, text, and more
If you have enabled a navbar for your site, use Navbar colors section to change its look
Use Footer colors to change your footer’s appearance
In Notion colors, you can change each default Notion color by picking your own (for example, if you have any yellow blocks, changing the color yellow will affect all blocks across your site with the same color)
Use Database colors to change available color options for databases
In the Scrollbar colors section, you can customize the scrollbar appearance, which runs down the right side of your site

Pick from the best optimized Google fonts

Go to Typography section to customize your site fonts to match them to your style and personality and make your site easier to read:

Choose your Primary (for titles, headings, and quotes) and Secondary font (for everything else)
Under Sizes, you can alter the sizes of Base text, which affects the entire site, and Title, Headings, and Quote individually

The Google fonts selected here are hosted on Super infrastructure for fast delivery to your site and to enhance User and SEO performance.

Design the entire site layout

The Layout section allows you to change global aspects of your site:

With Container width slider, you can change the width of your main content on your page. Note that full width Notion pages will always be full width in Super.
Change the space between columns using Column gap
Pick Padding size for callouts, databases, and other blocks by selecting default, small, medium or large
In the Rounded Edges section, use the slider to adjust the roundness of your media (images, cards, callouts, and others) edges
Under Notion page links, click to show or hide all Notion page blocks on your site
In the Page headers section, you can enable or disable your page header image. Disabling will not delete your header image in Notion and you can enable it back at any time
If you have enabled Page headers, you can adjust their height using the Cover height slider
In the Title and icon align, you can choose the alignment of your page header’s title and icon, which will both move as one unit and cannot be aligned separately

Design sleek Callout blocks

To change the look of your Notion callout blocks, head to the Blocks section. There you will find the option to enable or disable the Callout icon and a choice of three Callout shadow sizes you can pick to let your callout blocks stand out more.

Customize your Database's design

Head to Databases section to change database design features on your site:

In the Card Options, you can modify the appearance of your database cards using sliders
You can also set the Title Size, Card Gap ad Cover Heights of your gallery cards.
Enable or disable Card Icon, which appears next to your database page titles
Change the look of the Card Shadow, by picking one of the four sizes, or leave it in its default mode. Then, you have the liberty to set the opacity of your gallery cards.

Change the look of your NavBar

In the Navigation section, you can adjust the height of your navbar and select styling for Navbar Shadow. To further customize navbar content, you can return to your Super site dashboard and click into the Navbar section. Learn more about adding a navbar to your site to make it easy for visitors to find their way around in our navbar guide.

Applying and removing themes on sites

When you have finished making all your site design changes, you can return to the Design section to edit your Theme at any time. To save time, you can even create additional themes you can apply across all your Super sites.

To add your theme to another site, simply navigate to the site you want to apply the theme to and go to the Design section to select your Theme from the dropdown menu. That’s all!