Made with Super
Template Guidelines

Template Guidelines

Template Guidelines

This set of guidelines is for designers creating Super templates that would like to meet the expected standard required for templates to be featured on the Super Template Gallery.

1. Introduction

For us to accept templates on to the Super Marketplace, they must hold true to one of our key values: Simplicity. We want it to be as easy as possible for users to apply and customize templates. Below you can find a thorough list of requirements that will help guide you through the process of creating a Super template and includes everything you need to know before submitting a template to the Super Template Gallery.

What is a Super template?

A Super template is way to give a Super site a completely custom design and consists of 2 key components: a duplicatable Notion page & Custom code. The best Super templates do not over complicate the use of the original Notion page and use clean, essential-only custom code only to ensure sites stay fast.

Why do some templates not get accepted?

The most common reason is because the template over complicates the use of Notion or specific blocks, we prefer to feature templates that are easy to use for the average Notion user. Another common reason is that we don't think the design of the template is the right style or fit for our public template gallery. We can't give detailed design feedback for every single submission, but if your application is unsuccessful for this reason, please understand that it's not personal. We work hard in order to curate a high standard of content on our platforms and this includes templates, we simply can't accept all of them. The next most common reason is lack of originality and looking too similar to other existing templates on our gallery.

2. Design

Templates should display a strong understanding of graphic design principles, including contrast, typography, layout, balance, hierarchies, and proportion

2a. Layout and responsive design

  • Templates and blocks should look great and function as expected on all devices and breakpoints including mobile, tablet and desktop
  • Generally, spacing and padding should be tighter on mobile
  • Templates should include a simple, balanced and harmonious layout

2b. Typography

  • Typography and text blocks in Notion should be used in a proper hierarchical manner
  • Headings should not use placeholder text (Lorem ipsum)
  • Paragraphs can use placeholder text (Lorem ipsum)
  • Text colors should pass an accessibility contrast check where possible in order to remain legible and have enough contrast on all device screen
  • All blocks and database items should be tested with short and long line lengths in order to test line height and overflow bugs

2c. Colors

  • In order to achieve a good standard of design, template designs should try to limit the use of primary colors to 1 or 2
  • As above, colors should pass an accessibility contrast check where possible in order to remain legible and have enough contrast on all device screen

3. Quality

At Super we work hard to uphold a great standard of quality across all of our content

3a. Personal skills

  • You should have a strong sense of empathy for the customer and end-user
  • You should have a willingness to receive feedback and creative direction from the Super design team
  • You should have great communication skills and availability to provide quality template support in a timely manner

3b. Notion compatibility

  • The ideal Super template does not over complicate the original intended use of Notion and it’s blocks
  • Template styles should be compatible with all Notion’s blocks that are supported by Super
  • Avoid over-hacking Notion blocks to suite specific needs other than the original intended use

3c. External assets - fonts, libraries and scripts

  • Make sure to seek permission for the use of any copyrighted images and content including photography and text
  • If permission is granted, be sure to include licenses with your template
  • We recommend using free assets that are allowed for resale and free redistribution or CC0-licensed graphics from sources like Unplash and Pexels
  • Keep placeholder text (Lorem ipsum) to a minimum, do not use placeholder text for headings
  • Don’t add loading states on page changes or anything that makes sites appear slower

3d. Testing

Super templates must be widely compatible and free of bugs. In order to have your site listed on the Super Market you must first conduct sufficient testing this should include:

  • Testing that the template works on all browsers
  • Testing that the template works on both desktop and mobile
  • Testing that the template does not have any dead links
  • Testing that the template code does not have any bugs, warnings or errors

3e. CDN file hosting

Put simply, a CDN is a place to store your custom code online. This only makes your code more organised and easier to manage, it also makes your template easily sharable and saves users having to copy and paste hundreds of lines of custom code.

Using Github Pages as a CDN for template files

Github Pages can work as a CDN and it's free to use! To get started visit this page and follow the instructions. Once you've created a Repository and linked it to Github Pages follow the instructions below to upload your template files:

  1. Create a folder inside the repository and give it a name (use your template name)
  2. Then create a new file inside that folder called 'style.css'
  3. Next paste your Custom Code from Super into this file and commit the new file
  4. Head back into Super and in the Code page under the 'Head' tab, include a link to your new css file. You can use the snippet below as a guide, make sure to replace USERNAME and THEME-NAME in the URL below.
<link href="https://USERNAME.github.io/THEME-NAME/style.css" rel="stylesheet" />

4. Documentation

It’s important that templates come with sufficient documentation in order to reduce support requests and to ensure a smooth onboarding experience

4a. Instructions and onboarding

  • You must provide sufficient documentation to help customers with installation, setup, and customization of the template
  • The full installation process of the template must be documented
  • Any advanced styling/layout instructions must be included in the documentation
  • Any non-standard or third-party fonts/scripts/assets used in your theme must be listed, linked to, and appropriately credited in the documentation
  • If your template utilises third-party widgets and tools, then you need to include sufficient instructions on how to setup and replace them

4b. Template versions and change-log

Templates should come with a change-log so that users can track any updates to the template, make sure to include instructions on how to undo any breaking changes so users sites don't stop functioning correctly if they want to update or downgrade template versions.

  • Theme version notes must be documented, including:
    • Version number
    • Date of release
    • List of all updates and fixes included in the update
    • Past version history

4c. Customer support

  • Super Template creators are responsible for providing support to their customers.
  • Contact details need to be included with the template documentation so users know how to reach you for any support and questions.
  • Support questions related to Super should be directed to the Super support team.

5. Distribution

5a. Super’s involvement

At the time of writing, Super does not provide a sales platform for selling templates and does not take commission on template sales. Therefore Super does not take any responsibility for the distribution or sale of any Template associated with the platform, or the handling of any customer service. However, Super works closely with template designers and shares a mutual interest in keeping customers happy and resolving any issues that may arise.

It is the responsibility of template designers to market, distribute and support their templates and end-users. Super provides promotion to templates and their designers via the Super Template Gallery exclusively to designers that have passed thorough requirements and inspection by Super.

5b. Where to list and sell templates

There are a few options for selling digital products, the most common ones used by Super template designers are: Gumroad and Flurly.

5c. Listing information

Super template product listings should be simple, clear and straight-forward.

  • Clearly list the price and features of your template
  • Display images that show off the main features of your template
  • Include a link to a live demo of your template
  • Clearly list any customization options
  • Clearly list any specific pre-requisites such as third-party subscriptions
  • Clearly include the following statement in your product description: Super templates can only be applied to a live site with an upgraded/paid Super account ($12/per month/per site)

5d. Product Download

There are many ways to provide template files and information to your customers, here is one common method:

  • Create a Notion page that includes all the relevant onboarding information and transform it into a password protected Super page
  • Create a PDF document that includes a link to the password protected page and the password
  • Provide the PDF as the file that will be downloaded when users purchase your template

6. Checklist

Template has been thoroughly checked for bugs, invalid code and errors
Template has been thoroughly tested on mobile and desktop
Template has been thoroughly tested on a range of browsers
Template has been thoroughly tested on Notion with all block types
Template has in-depth documentation on installation, usage and customization
Template documentation includes creator’s contact details
Template files are hosted on a CDN
Template has been uploaded to a product listing page

7. Submit a template

If you would like to submit a template to the official Super Template Gallery. Follow the link below to the submission form, please ensure that you have met the above requirements before submitting.