Super Power



Take your Notion-Super sites to greater heights with custom CSS, site automations, and powerful workflows.

Hi, welcome to Super Power.

I created this site primarily to help Notion-Super users learn how to customize their sites using basic CSS. This site also serves as design resources for theme creators.

I've designed and sold a couple of themes, and I realized that many of my customers wanted to customize their site further, but they don't really know how.

So, I'd like to share what I've learned and already know with my customers and other Notion-Super users.

Content on this site are free to use and distribute with credit. Big thanks to Notion and Super for creating great products.

Hope it helps.



Design Tutorials

Part 1

  • Global site code
  • Page code
  • Two ways to shape your site

Part 2

  • Edit CSS properties in real-time and apply it to your site

Part 3

  • Class and Type selectors
  • Combining selectors with the same CSS properties
  • How to use ID
  • Commenting in CSS
  • Frequently asked CSS tips

Part 4

  • How to use light, dark, and system theme on your site
  • How to change default Notion colors to your own brand colors
  • How to create and assign a new color variable


Part 1: Shaping your site


There are 2 types of code section in Super:

  1. The global site code
    1. Click on site settings → select Code
  2. The page code
    1. Click on site settings → select Pages → click on Edit code

Global site code

  • If you add lines of code in this section, every single page in your site will inherit this code in them.
  • A practical use case for a global code is to inject an analytics script like Plausible. You add an analytics script here, every single page of your site will be trackable.
  • Another use case is to add a CSS theme to your site. Add a script or CSS code, and every single page of your site will have the same style.

Page code

  • Any lines of code you add here will only be applied to that particular page.
  • A practical use case is to add a chat or donation widget to a specific page, and not to every single page.

Shaping your site

With the option of global site code and page code, you can either,

  1. Have a site with a consistent theme by adding CSS code or style script in the global site code. In other words, every single page of your site will have the same theme.
  2. You can apply different themes to different pages within your site by adding CSS code or style script to different pages.

An example of number 2:


Part 2: How to inspect and edit elements on a webpage


Part 3: CSS essentials

CSS Tips

How to hide an element


Part 4: Colors


Notion Colors

What is this?
How to use?
CSS code for light theme
CSS code for dark theme
CSS code for system theme


Notion-Super elements

What is this?
How to use?



Discover how you can accomplish more with Notion & Super.


How to create a light and dark mode switch for your site
Design Tips
October 1, 2021
How to create custom keyboard shortcuts
Workflow Tips
September 20, 2021
How to invert the color of an element
Design Tips
September 14, 2021
How to create columns in a Callout block
Notion Tips
September 13, 2021
Automated email subscribe form
Workflow Tips
September 10, 2021


Notion-Super Themes


Designer's Collection →


Theme by Watashi

Page Contents

Hidden Pages