How to install Ult

Ult Installation Guide

Thank you for purchasing Ult!
Here's a quick guide of how to install Lift theme and start using it with no resistance. Note that you should have both Notion and Super accounts ready. Have Fun!

1. Create a Super site

Duplicate Notion Template:
Click Here

Share Your Notion Page and Connect it to Super
Check this video guide from Super Team

2. Install Ult Essentials

Paste this code in Site Settings > Code > HTML Head

<link rel="stylesheet" href="https://stfn.co/ult/ult.css">

3. Pick a theme

It will take about 10 minutes to install the theme but every parameter of it would be unlocked for your own cunstomization. Take your time, grab some tea and have fun decorating your new website.

🔥

Light

Demo

Duplicate Theme

‣

or Install Manually

🔥

Dark

Demo

Duplicate Theme

‣

or Install Manually

🔥

Pastel

Demo

Duplicate Theme

‣

or Install Manually

🔥

Crisp

Demo

Duplicate Theme

‣

or Install Manually

🔥

Graphite

Demo

Duplicate Theme

‣

or Install Manually

🔥

Funk

Demo

Duplicate Theme

‣

or Install Manually

🔥

Pine

Demo

Duplicate Theme

‣

or Install Manually

🔥

Arctic

Demo

Duplicate Theme

‣

or Install Manually

🔥

Cyber

Demo

Duplicate Theme

‣

or Install Manually

🔥

Blackout

Demo

Duplicate Theme

‣

or Install Manually

‣

There's also a quick but bulky way to install themes (not recommended)

You can just paste the root code into your CSS box. Please note that you won't be able to use the design editor and customize your theme. See below:

‣

Light

‣

Dark

‣

Crisp

‣

Graphite

‣

Blackout

‣

Pine

‣

Cyber

‣

Pastel

‣

Funk

‣

Arctic

4 (Optional). Frosted Glass header

To achieve the frosted glass header effect, paste the code below to your Super Site > Code > CSS

‣

Light, Crisp, Arctic Themes

‣

Dark, Charcoal, Blackout

‣

Pine

‣

Pastel

‣

Cyber

5 (Optional). Alternative Cover Style

You can change the cover image style by pasting the code below to your Super Site > Code > CSS

Shaded

No code needed, this style comes by default

Fullscreen

.notion-header {
  margin: calc(0px - var(--navbar-height) - 2em) auto 0!important;
  max-width: 100%!important;
  box-shadow: none!important;
}

.notion-header img {
  opacity:100%!important;
}

Block

/* Header Block*/

.notion-header {
  margin: 0 auto!important;
  max-width: var(--layout-max-width)!important;
  box-shadow: none!important;
  border-radius: var(--border-radii-layout)!important;
  overflow: hidden!important;
  width: calc(100% - var(--column-spacing))!important;
}

.notion-header img {
  opacity:100%!important;
}

CSS
You can get CSS file to see how if works or store on your own hosting
See Template's CSS Code

Feel free to ask any question at hello@stfn.co. Let's be in touch!

How to install Ult

Ult Installation Guide

Thank you for purchasing Ult!
Here's a quick guide of how to install Lift theme and start using it with no resistance. Note that you should have both Notion and Super accounts ready. Have Fun!

1. Create a Super site

Duplicate Notion Template:
Click Here

Share Your Notion Page and Connect it to Super
Check this video guide from Super Team

2. Install Ult Essentials

Paste this code in Site Settings > Code > HTML Head

<link rel="stylesheet" href="https://stfn.co/ult/ult.css">

3. Pick a theme

It will take about 10 minutes to install the theme but every parameter of it would be unlocked for your own cunstomization. Take your time, grab some tea and have fun decorating your new website.

🔥

Light

Demo

Duplicate Theme

‣

or Install Manually

🔥

Dark

Demo

Duplicate Theme

‣

or Install Manually

🔥

Pastel

Demo

Duplicate Theme

‣

or Install Manually

🔥

Crisp

Demo

Duplicate Theme

‣

or Install Manually

🔥

Graphite

Demo

Duplicate Theme

‣

or Install Manually

🔥

Funk

Demo

Duplicate Theme

‣

or Install Manually

🔥

Pine

Demo

Duplicate Theme

‣

or Install Manually

🔥

Arctic

Demo

Duplicate Theme

‣

or Install Manually

🔥

Cyber

Demo

Duplicate Theme

‣

or Install Manually

🔥

Blackout

Demo

Duplicate Theme

‣

or Install Manually

‣

There's also a quick but bulky way to install themes (not recommended)

You can just paste the root code into your CSS box. Please note that you won't be able to use the design editor and customize your theme. See below:

‣

Light

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 8px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 48px;
    --page-display: unset;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 45vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 24px;
    --collection-card-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px -10px;
    --collection-card-title-size: 1.2rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 375px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: none;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 1rem;
    --quote-size: 1rem;
    --heading-size: 2.2rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading1-size: calc(var(--heading-size) * 1.875);
    --heading2-size: calc(var(--heading-size) * 1.5);
    --heading3-size: calc(var(--heading-size) * 1.25);
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 60px;
    --navbar-shadow: rgba(0, 0, 0, 0.07) 0px 20px 40px -10px;
    --navbar-button-border-radii: 50px;
		--gray-h: 240;
    --gray-s: 11%;
    --gray-l: 27%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 76% );
    --color-bg-gray-light: var(--color-bg-gray);
    --color-pill-gray: hsl( calc(var(--gray-h) + 14), var(--gray-s), 69% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --brown-h: 16;
    --brown-s: 26%;
    --brown-l: 36%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), var(--brown-s), 80% );
    --color-bg-brown-light: var(--color-bg-brown);
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), 78% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), calc(var(--brown-l) - 28%) );
    --orange-h: 17;
    --orange-s: 88%;
    --orange-l: 53%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), var(--orange-s), 90% );
    --color-bg-orange-light: var(--color-bg-orange);
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) - 6%), 90% );
    --color-pill-text-orange: hsl( calc(var(--orange-h) - 5), calc(var(--orange-s) - 18%), calc(var(--orange-l) - 28%) );
    --yellow-h: 40;
    --yellow-s: 69%;
    --yellow-l: 50%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) + 90%), 90% );
    --color-bg-yellow-light: var(--color-bg-yellow);
    --color-pill-yellow: hsl( calc(var(--yellow-h) + 3), calc(var(--yellow-s) + 24%), 90% );
    --color-pill-text-yellow: hsl( calc(var(--yellow-h) - 11), calc(var(--yellow-s) - 22%), calc(var(--yellow-l) - 28%) );
    --green-h: 149;
    --green-s: 56%;
    --green-l: 44%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( var(--green-h), var(--green-s), 90% );
    --color-bg-green-light: var(--color-bg-green);
    --color-pill-green: hsl( calc(var(--green-h) - 28), calc(var(--green-s) + 3%), 90% );
    --color-pill-text-green: hsl( calc(var(--green-h) - 2), var(--green-s), calc(var(--green-l) - 22%) );
    --blue-h: 235;
    --blue-s: 70%;
    --blue-l: 62%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( var(--blue-h), var(--blue-s), 90% );
    --color-bg-blue-light: var(--color-bg-blue);
    --color-pill-blue: hsl( var(--blue-h), calc(var(--blue-s) - 5%), 90% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) + 7), calc(var(--blue-s) - 6%), calc(var(--blue-l) - 22%) );
    --purple-h: 268;
    --purple-s: 67%;
    --purple-l: 68%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( var(--purple-h), var(--purple-s), 90% );
    --color-bg-purple-light: var(--color-bg-purple);
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) + 5%), 90% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) + 1), calc(var(--purple-s) + 10%), calc(var(--purple-l) - 31%) );
    --pink-h: 318;
    --pink-s: 61%;
    --pink-l: 63%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-bg-pink-light: var(--color-bg-pink);
    --color-pill-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 14%), calc(var(--pink-l) - 31%) );
    --red-h: 3;
    --red-s: 62%;
    --red-l: 59%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( var(--red-h), var(--red-s), 90% );
    --color-bg-red-light: var(--color-bg-red);
    --color-pill-red: hsl( calc(var(--red-h) + 6), calc(var(--red-s) + 42%), 90% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 0), var(--red-s), calc(var(--red-l) - 32%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--gray-h), var(--gray-s), 90% );
    --color-pill-text-default: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --color-text-default: #36364e;
    --color-text-default-light: #6b6b88;
    --color-bg-default: #f5f6f7;
    --color-border-default: #e0e5eb;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #ffffff;
    --color-card-bg: #f5f6f7;
    --color-card-bg-hover: #ffffff;
    --color-calendar-weekend-bg: #f7f6f3;
    --color-checkbox-bg: #36364e;
    --color-code-bg: #efefef;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #36364e;
    --navbar-background-color: #ffffff;
    --navbar-button-text-color: #f8f8f9;
    --navbar-button-background-color: #36364e;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #f8f8f9;
    --footer-background-color: #36364e;
}

‣

Dark

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --navbar-background-color: rgba(25,25,27,0.25)!important;
  --primary-font: Space Grotesk, Space Grotesk-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif;
    --secondary-font: Rubik, Rubik-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif;
    --padding-layout: 1.3rem;
    --border-radii-layout: 20px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 48px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 50vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 24px;
    --collection-card-shadow: rgba(0, 0, 0, 0.25) 0px 20px 40px -10px;
    --collection-card-title-size: 1.2rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: rgba(0, 0, 0, 0.25) 0px 20px 40px -10px;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 2.5rem;
    --quote-size: 1rem;
    --heading-size: 2.2rem;
		--text-weight: 400;
    --heading-weight: 600;
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: rgba(0, 0, 0, 0.25) 0px 20px 40px -10px;
    --navbar-button-border-radii: 50px;
		--gray-h: 0;
    --gray-s: 0%;
    --gray-l: 100%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 53.5% );
    --color-bg-gray-light: hsl( var(--gray-h), var(--gray-s), 53.5% );
    --color-pill-gray: hsl( var(--gray-h), var(--gray-s), 74% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) + 26%) );
    --brown-h: 15;
    --brown-s: 75%;
    --brown-l: 45%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), calc(var(--brown-s) - 7%), 9% );
    --color-bg-brown-light: hsl( calc(var(--brown-h) - 2), calc(var(--brown-s) - 22%), 3% );
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 2%), 14% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) - 21%), calc(var(--brown-l) + 33%) );
    --orange-h: 26;
    --orange-s: 100%;
    --orange-l: 50%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), calc(var(--orange-s) - 10%), 22% );
    --color-bg-orange-light: hsl( var(--orange-h), calc(var(--orange-s) - 30%), 14% );
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) + 9%), 29% );
    --color-pill-text-orange: hsl( var(--orange-h), calc(var(--orange-s) - 23%), calc(var(--orange-l) + 33%) );
    --yellow-h: 49;
    --yellow-s: 100%;
    --yellow-l: 50%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 18%), 21% );
    --color-bg-yellow-light: hsl( var(--yellow-h), calc(var(--yellow-s) - 24%), 13% );
    --color-pill-yellow: hsl( calc(var(--yellow-h) - 1), calc(var(--yellow-s) + 2%), 31% );
    --color-pill-text-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 28%), calc(var(--yellow-l) + 33%) );
    --green-h: 91;
    --green-s: 100%;
    --green-l: 50%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( calc(var(--green-h) + 3), calc(var(--green-s) - 6%), 22% );
    --color-bg-green-light: hsl( var(--green-h), calc(var(--green-s) - 20%), 18% );
    --color-pill-green: hsl( calc(var(--green-h) + 1), calc(var(--green-s) + 3%), 29% );
    --color-pill-text-green: hsl( var(--green-h), calc(var(--green-s) - 20%), calc(var(--green-l) + 38%) );
    --blue-h: 196;
    --blue-s: 100%;
    --blue-l: 50%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( calc(var(--blue-h) - 16), calc(var(--blue-s) + 9%), 11% );
    --color-bg-blue-light: hsl( calc(var(--blue-h) + 16), calc(var(--blue-s) - 27%), 7% );
    --color-pill-blue: hsl( calc(var(--blue-h) - 3), calc(var(--blue-s) - 6%), 21% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) - 5), calc(var(--blue-s) - 32%), calc(var(--blue-l) + 28%) );
    --purple-h: 279;
    --purple-s: 100%;
    --purple-l: 68%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( calc(var(--purple-h) + 2), calc(var(--purple-s) - 31%), 29% );
    --color-bg-purple-light: hsl( calc(var(--purple-h) + 5), calc(var(--purple-s) - 40%), 23% );
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) - 19%), 35% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) - 3), calc(var(--purple-s) - 40%), calc(var(--purple-l) + 24%) );
    --pink-h: 330;
    --pink-s: 100%;
    --pink-l: 54%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 29%), 20% );
    --color-bg-pink-light: hsl( calc(var(--pink-h) + 5), calc(var(--pink-s) - 40%), 12% );
    --color-pill-pink: hsl( calc(var(--pink-h) - 2), calc(var(--pink-s) - 21%), 26% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 4), calc(var(--pink-s) - 41%), calc(var(--pink-l) + 28%) );
    --red-h: 0;
    --red-s: 100%;
    --red-l: 50%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 37%), 14% );
    --color-bg-red-light: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 56%), 7% );
    --color-pill-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 30%), 21% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 7), calc(var(--red-s) - 50%), calc(var(--red-l) + 24%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--default-h), var(--default-s), -19% );
    --color-pill-text-default: hsl( var(--default-h), var(--default-s), calc(var(--default-l) + 23%) );
    --color-text-default: #ebedf3;
    --color-text-default-light: #d2d3d8;
    --color-bg-default: #19191b;
    --color-border-default: #66697a;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #2b2b34;
    --color-card-bg: #1a1a1d;
    --color-card-bg-hover: #262626;
    --color-calendar-weekend-bg: #202020;
    --color-checkbox-bg: #ebedf3;
    --color-code-bg: #474c50;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #ebedf3;
    --navbar-background-color: #28282d;
    --navbar-button-text-color: #28282d;
    --navbar-button-background-color: #ebedf3;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #ebedf3;
    --footer-background-color: #28282d;
}

‣

Crisp

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 12px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 48px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 80vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 10px;
    --collection-card-shadow: rgba(0, 0, 0, 0.05) 0px 20px 40px -10px;
    --collection-card-title-size: 0.875rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: rgba(0, 0, 0, 0.05) 0px 20px 40px -10px;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 2.5rem;
    --quote-size: 1.2rem;
    --heading-size: 2.2rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: none;
    --navbar-button-border-radii: 50px;
		--gray-h: 0;
    --gray-s: 0%;
    --gray-l: 24%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 73% );
    --color-bg-gray-light: var(--color-bg-gray);
    --color-pill-gray: hsl( calc(var(--gray-h) + 14), var(--gray-s), 66% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --brown-h: 24;
    --brown-s: 100%;
    --brown-l: 29%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), var(--brown-s), 73% );
    --color-bg-brown-light: var(--color-bg-brown);
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), 71% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), calc(var(--brown-l) - 28%) );
    --orange-h: 23;
    --orange-s: 100%;
    --orange-l: 50%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), var(--orange-s), 90% );
    --color-bg-orange-light: var(--color-bg-orange);
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) - 6%), 90% );
    --color-pill-text-orange: hsl( calc(var(--orange-h) - 5), calc(var(--orange-s) - 18%), calc(var(--orange-l) - 28%) );
    --yellow-h: 36;
    --yellow-s: 100%;
    --yellow-l: 50%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) + 90%), 90% );
    --color-bg-yellow-light: var(--color-bg-yellow);
    --color-pill-yellow: hsl( calc(var(--yellow-h) + 3), calc(var(--yellow-s) + 24%), 90% );
    --color-pill-text-yellow: hsl( calc(var(--yellow-h) - 11), calc(var(--yellow-s) - 22%), calc(var(--yellow-l) - 28%) );
    --green-h: 120;
    --green-s: 100%;
    --green-l: 36%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( var(--green-h), var(--green-s), 90% );
    --color-bg-green-light: var(--color-bg-green);
    --color-pill-green: hsl( calc(var(--green-h) - 28), calc(var(--green-s) + 3%), 86% );
    --color-pill-text-green: hsl( calc(var(--green-h) - 2), var(--green-s), calc(var(--green-l) - 22%) );
    --blue-h: 236;
    --blue-s: 100%;
    --blue-l: 50%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( var(--blue-h), var(--blue-s), 90% );
    --color-bg-blue-light: var(--color-bg-blue);
    --color-pill-blue: hsl( var(--blue-h), calc(var(--blue-s) - 5%), 90% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) + 7), calc(var(--blue-s) - 6%), calc(var(--blue-l) - 22%) );
    --purple-h: 275;
    --purple-s: 100%;
    --purple-l: 50%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( var(--purple-h), var(--purple-s), 90% );
    --color-bg-purple-light: var(--color-bg-purple);
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) + 5%), 86% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) + 1), calc(var(--purple-s) + 10%), calc(var(--purple-l) - 31%) );
    --pink-h: 328;
    --pink-s: 100%;
    --pink-l: 50%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-bg-pink-light: var(--color-bg-pink);
    --color-pill-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 14%), calc(var(--pink-l) - 31%) );
    --red-h: 2;
    --red-s: 100%;
    --red-l: 50%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( var(--red-h), var(--red-s), 90% );
    --color-bg-red-light: var(--color-bg-red);
    --color-pill-red: hsl( calc(var(--red-h) + 6), calc(var(--red-s) + 42%), 88% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 0), var(--red-s), calc(var(--red-l) - 32%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--gray-h), var(--gray-s), 90% );
    --color-pill-text-default: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --color-text-default: #000000;
    --color-text-default-light: #000000;
    --color-bg-default: #ffffff;
    --color-border-default: #e9e9e9;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #ffffff;
    --color-card-bg: #ffffff;
    --color-card-bg-hover: #f9f9f8;
    --color-calendar-weekend-bg: #f7f6f3;
    --color-checkbox-bg: #000000;
    --color-code-bg: #efefef;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #000000;
    --navbar-background-color: #ffffff;
    --navbar-button-text-color: #ffffff;
    --navbar-button-background-color: #000000;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #000000;
    --footer-background-color: #ffffff;
}

‣

Graphite

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 8px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 48px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 40vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 24px;
    --collection-card-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px -10px;
    --collection-card-title-size: 1rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px -10px;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 2.5rem;
    --quote-size: 1.2rem;
    --heading-size: 1.6rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: rgba(0, 0, 0, 0.25) 0px 20px 40px -10px;
    --navbar-button-border-radii: 50px;
		--gray-h: 0;
    --gray-s: 0%;
    --gray-l: 72%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 25.5% );
    --color-bg-gray-light: hsl( var(--gray-h), var(--gray-s), 25.5% );
    --color-pill-gray: hsl( var(--gray-h), var(--gray-s), 46% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) + 26%) );
    --brown-h: 16;
    --brown-s: 26%;
    --brown-l: 58%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), calc(var(--brown-s) - 7%), 22% );
    --color-bg-brown-light: hsl( calc(var(--brown-h) - 2), calc(var(--brown-s) - 22%), 16% );
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 2%), 27% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) - 21%), calc(var(--brown-l) + 33%) );
    --orange-h: 25;
    --orange-s: 32%;
    --orange-l: 56%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), calc(var(--orange-s) - 10%), 28% );
    --color-bg-orange-light: hsl( var(--orange-h), calc(var(--orange-s) - 30%), 20% );
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) + 9%), 35% );
    --color-pill-text-orange: hsl( var(--orange-h), calc(var(--orange-s) - 23%), calc(var(--orange-l) + 33%) );
    --yellow-h: 38;
    --yellow-s: 45%;
    --yellow-l: 71%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 18%), 42% );
    --color-bg-yellow-light: hsl( var(--yellow-h), calc(var(--yellow-s) - 24%), 34% );
    --color-pill-yellow: hsl( calc(var(--yellow-h) - 1), calc(var(--yellow-s) + 2%), 52% );
    --color-pill-text-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 28%), calc(var(--yellow-l) + 33%) );
    --green-h: 145;
    --green-s: 15%;
    --green-l: 51%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( calc(var(--green-h) + 3), calc(var(--green-s) - 6%), 23% );
    --color-bg-green-light: hsl( var(--green-h), calc(var(--green-s) - 20%), 19% );
    --color-pill-green: hsl( calc(var(--green-h) + 1), calc(var(--green-s) + 3%), 30% );
    --color-pill-text-green: hsl( var(--green-h), calc(var(--green-s) - 20%), calc(var(--green-l) + 38%) );
    --blue-h: 242;
    --blue-s: 18%;
    --blue-l: 63%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( calc(var(--blue-h) - 16), calc(var(--blue-s) + 9%), 24% );
    --color-bg-blue-light: hsl( calc(var(--blue-h) + 16), calc(var(--blue-s) - 27%), 20% );
    --color-pill-blue: hsl( calc(var(--blue-h) - 3), calc(var(--blue-s) - 6%), 34% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) - 5), calc(var(--blue-s) - 32%), calc(var(--blue-l) + 28%) );
    --purple-h: 271;
    --purple-s: 22%;
    --purple-l: 59%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( calc(var(--purple-h) + 2), calc(var(--purple-s) - 31%), 20% );
    --color-bg-purple-light: hsl( calc(var(--purple-h) + 5), calc(var(--purple-s) - 40%), 14% );
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) - 19%), 26% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) - 3), calc(var(--purple-s) - 40%), calc(var(--purple-l) + 24%) );
    --pink-h: 330;
    --pink-s: 25%;
    --pink-l: 62%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 29%), 28% );
    --color-bg-pink-light: hsl( calc(var(--pink-h) + 5), calc(var(--pink-s) - 40%), 20% );
    --color-pill-pink: hsl( calc(var(--pink-h) - 2), calc(var(--pink-s) - 21%), 34% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 4), calc(var(--pink-s) - 41%), calc(var(--pink-l) + 28%) );
    --red-h: 0;
    --red-s: 30%;
    --red-l: 61%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 37%), 25% );
    --color-bg-red-light: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 56%), 18% );
    --color-pill-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 30%), 32% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 7), calc(var(--red-s) - 50%), calc(var(--red-l) + 24%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--default-h), var(--default-s), -19% );
    --color-pill-text-default: hsl( var(--default-h), var(--default-s), calc(var(--default-l) + 23%) );
    --color-text-default: #c0c0c0;
    --color-text-default-light: #9b9b9b;
    --color-bg-default: #2f2f2f;
    --color-border-default: #505050;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #545454;
    --color-card-bg: #262626;
    --color-card-bg-hover: #2f2f2f;
    --color-calendar-weekend-bg: #202020;
    --color-checkbox-bg: #ffffff;
    --color-code-bg: #474c50;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #e1e1e1;
    --navbar-background-color: #191919;
    --navbar-button-text-color: #e1e1e1;
    --navbar-button-background-color: #383838;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #e1e1e1;
    --footer-background-color: #191919;
}

‣

Blackout

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 18px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 54px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 40vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 32px;
    --collection-card-shadow: rgba(0, 0, 0, 0.4) 0px 20px 40px -10px;
    --collection-card-title-size: 1.2rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: none;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 2.88rem;
    --quote-size: 1.2rem;
    --heading-size: 2.2rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: rgba(0, 0, 0, 0.35) 0px 20px 40px -10px;
    --navbar-button-border-radii: 50px;
		--gray-h: 0;
    --gray-s: 0%;
    --gray-l: 100%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 53.5% );
    --color-bg-gray-light: hsl( var(--gray-h), var(--gray-s), 53.5% );
    --color-pill-gray: hsl( var(--gray-h), var(--gray-s), 74% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) + 26%) );
    --brown-h: 19;
    --brown-s: 100%;
    --brown-l: 72%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), calc(var(--brown-s) - 7%), 36% );
    --color-bg-brown-light: hsl( calc(var(--brown-h) - 2), calc(var(--brown-s) - 22%), 30% );
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 2%), 41% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) - 21%), calc(var(--brown-l) + 33%) );
    --orange-h: 25;
    --orange-s: 100%;
    --orange-l: 59%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), calc(var(--orange-s) - 10%), 31% );
    --color-bg-orange-light: hsl( var(--orange-h), calc(var(--orange-s) - 30%), 23% );
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) + 9%), 38% );
    --color-pill-text-orange: hsl( var(--orange-h), calc(var(--orange-s) - 23%), calc(var(--orange-l) + 33%) );
    --yellow-h: 37;
    --yellow-s: 100%;
    --yellow-l: 59%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 18%), 30% );
    --color-bg-yellow-light: hsl( var(--yellow-h), calc(var(--yellow-s) - 24%), 22% );
    --color-pill-yellow: hsl( calc(var(--yellow-h) - 1), calc(var(--yellow-s) + 2%), 40% );
    --color-pill-text-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 28%), calc(var(--yellow-l) + 33%) );
    --green-h: 146;
    --green-s: 100%;
    --green-l: 60%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( calc(var(--green-h) + 3), calc(var(--green-s) - 6%), 32% );
    --color-bg-green-light: hsl( var(--green-h), calc(var(--green-s) - 20%), 28% );
    --color-pill-green: hsl( calc(var(--green-h) + 1), calc(var(--green-s) + 3%), 39% );
    --color-pill-text-green: hsl( var(--green-h), calc(var(--green-s) - 20%), calc(var(--green-l) + 38%) );
    --blue-h: 228;
    --blue-s: 100%;
    --blue-l: 70%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( calc(var(--blue-h) - 16), calc(var(--blue-s) + 9%), 31% );
    --color-bg-blue-light: hsl( calc(var(--blue-h) + 16), calc(var(--blue-s) - 27%), 27% );
    --color-pill-blue: hsl( calc(var(--blue-h) - 3), calc(var(--blue-s) - 6%), 41% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) - 5), calc(var(--blue-s) - 32%), calc(var(--blue-l) + 28%) );
    --purple-h: 270;
    --purple-s: 100%;
    --purple-l: 66%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( calc(var(--purple-h) + 2), calc(var(--purple-s) - 31%), 27% );
    --color-bg-purple-light: hsl( calc(var(--purple-h) + 5), calc(var(--purple-s) - 40%), 21% );
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) - 19%), 33% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) - 3), calc(var(--purple-s) - 40%), calc(var(--purple-l) + 24%) );
    --pink-h: 329;
    --pink-s: 100%;
    --pink-l: 51%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 29%), 17% );
    --color-bg-pink-light: hsl( calc(var(--pink-h) + 5), calc(var(--pink-s) - 40%), 9% );
    --color-pill-pink: hsl( calc(var(--pink-h) - 2), calc(var(--pink-s) - 21%), 23% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 4), calc(var(--pink-s) - 41%), calc(var(--pink-l) + 28%) );
    --red-h: 1;
    --red-s: 100%;
    --red-l: 50%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 37%), 14% );
    --color-bg-red-light: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 56%), 7% );
    --color-pill-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 30%), 21% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 7), calc(var(--red-s) - 50%), calc(var(--red-l) + 24%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--default-h), var(--default-s), -19% );
    --color-pill-text-default: hsl( var(--default-h), var(--default-s), calc(var(--default-l) + 23%) );
    --color-text-default: #d4d4d4;
    --color-text-default-light: #9b9b9b;
    --color-bg-default: #000000;
    --color-border-default: #ffffff;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #262626;
    --color-card-bg: #000000;
    --color-card-bg-hover: #000000;
    --color-calendar-weekend-bg: #202020;
    --color-checkbox-bg: #ffffff;
    --color-code-bg: #474c50;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #ffffff;
    --navbar-background-color: #000000;
    --navbar-button-text-color: #000000;
    --navbar-button-background-color: #ffffff;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #ffffff;
    --footer-background-color: #000000;
}

‣

Pine

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 8px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 48px;
    --page-display: unset;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 30vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 24px;
    --collection-card-shadow: rgba(0, 0, 0, 0.12) 0px 20px 40px -10px;
    --collection-card-title-size: 1.2rem;
    --collection-card-cover-height-small: 321px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: rgba(0, 0, 0, 0.12) 0px 20px 40px -10px;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 1rem;
    --quote-size: 1rem;
    --heading-size: 1.8rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: none;
    --navbar-button-border-radii: 50px;
		--gray-h: 146;
    --gray-s: 24%;
    --gray-l: 72%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 25.5% );
    --color-bg-gray-light: hsl( var(--gray-h), var(--gray-s), 25.5% );
    --color-pill-gray: hsl( var(--gray-h), var(--gray-s), 46% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) + 26%) );
    --brown-h: 20;
    --brown-s: 56%;
    --brown-l: 76%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), calc(var(--brown-s) - 7%), 40% );
    --color-bg-brown-light: hsl( calc(var(--brown-h) - 2), calc(var(--brown-s) - 22%), 34% );
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 2%), 45% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) - 21%), calc(var(--brown-l) + 33%) );
    --orange-h: 30;
    --orange-s: 81%;
    --orange-l: 71%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), calc(var(--orange-s) - 10%), 43% );
    --color-bg-orange-light: hsl( var(--orange-h), calc(var(--orange-s) - 30%), 35% );
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) + 9%), 50% );
    --color-pill-text-orange: hsl( var(--orange-h), calc(var(--orange-s) - 23%), calc(var(--orange-l) + 33%) );
    --yellow-h: 47;
    --yellow-s: 75%;
    --yellow-l: 78%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 18%), 49% );
    --color-bg-yellow-light: hsl( var(--yellow-h), calc(var(--yellow-s) - 24%), 41% );
    --color-pill-yellow: hsl( calc(var(--yellow-h) - 1), calc(var(--yellow-s) + 2%), 59% );
    --color-pill-text-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 28%), calc(var(--yellow-l) + 33%) );
    --green-h: 148;
    --green-s: 41%;
    --green-l: 63%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( calc(var(--green-h) + 3), calc(var(--green-s) - 6%), 35% );
    --color-bg-green-light: hsl( var(--green-h), calc(var(--green-s) - 20%), 31% );
    --color-pill-green: hsl( calc(var(--green-h) + 1), calc(var(--green-s) + 3%), 42% );
    --color-pill-text-green: hsl( var(--green-h), calc(var(--green-s) - 20%), calc(var(--green-l) + 38%) );
    --blue-h: 207;
    --blue-s: 96%;
    --blue-l: 82%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( calc(var(--blue-h) - 16), calc(var(--blue-s) + 9%), 43% );
    --color-bg-blue-light: hsl( calc(var(--blue-h) + 16), calc(var(--blue-s) - 27%), 39% );
    --color-pill-blue: hsl( calc(var(--blue-h) - 3), calc(var(--blue-s) - 6%), 53% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) - 5), calc(var(--blue-s) - 32%), calc(var(--blue-l) + 28%) );
    --purple-h: 270;
    --purple-s: 90%;
    --purple-l: 85%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( calc(var(--purple-h) + 2), calc(var(--purple-s) - 31%), 46% );
    --color-bg-purple-light: hsl( calc(var(--purple-h) + 5), calc(var(--purple-s) - 40%), 40% );
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) - 19%), 52% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) - 3), calc(var(--purple-s) - 40%), calc(var(--purple-l) + 24%) );
    --pink-h: 329;
    --pink-s: 100%;
    --pink-l: 89%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 29%), 55% );
    --color-bg-pink-light: hsl( calc(var(--pink-h) + 5), calc(var(--pink-s) - 40%), 47% );
    --color-pill-pink: hsl( calc(var(--pink-h) - 2), calc(var(--pink-s) - 21%), 61% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 4), calc(var(--pink-s) - 41%), calc(var(--pink-l) + 28%) );
    --red-h: 1;
    --red-s: 100%;
    --red-l: 85%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 37%), 49% );
    --color-bg-red-light: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 56%), 42% );
    --color-pill-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 30%), 56% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 7), calc(var(--red-s) - 50%), calc(var(--red-l) + 24%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--default-h), var(--default-s), -19% );
    --color-pill-text-default: hsl( var(--default-h), var(--default-s), calc(var(--default-l) + 23%) );
    --color-text-default: #f5ceb5;
    --color-text-default-light: #d4ab90;
    --color-bg-default: #244032;
    --color-border-default: #967a60;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #35694f;
    --color-card-bg: #244032;
    --color-card-bg-hover: #35694f;
    --color-calendar-weekend-bg: #202020;
    --color-checkbox-bg: #ffb178;
    --color-code-bg: #474c50;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #f5ceb5;
    --navbar-background-color: #35694f;
    --navbar-button-text-color: #35694f;
    --navbar-button-background-color: #f5ceb5;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #f5ceb5;
    --footer-background-color: #172b25;
}

‣

Cyber

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.1rem;
    --border-radii-layout: 12px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1100px;
    --column-spacing: 24px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 50vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 24px;
    --collection-card-shadow: rgba(0, 0, 0, 0.25) 0px 20px 40px -10px;
    --collection-card-title-size: 1.2rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: rgba(0, 0, 0, 0.25) 0px 20px 40px -10px;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 1rem;
    --quote-size: 1.2rem;
    --heading-size: 1.85rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading1-size: calc(var(--heading-size) * 1.875);
    --heading2-size: calc(var(--heading-size) * 1.5);
    --heading3-size: calc(var(--heading-size) * 1.25);
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: none;
    --navbar-button-border-radii: 50px;
    --gray-h: 0;
    --gray-s: 0%;
    --gray-l: 100%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 53.5% );
    --color-bg-gray-light: hsl( var(--gray-h), var(--gray-s), 53.5% );
    --color-pill-gray: hsl( var(--gray-h), var(--gray-s), 74% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) + 26%) );
    --brown-h: 19;
    --brown-s: 100%;
    --brown-l: 71%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), calc(var(--brown-s) - 7%), 35% );
    --color-bg-brown-light: hsl( calc(var(--brown-h) - 2), calc(var(--brown-s) - 22%), 29% );
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 2%), 40% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) - 21%), calc(var(--brown-l) + 33%) );
    --orange-h: 25;
    --orange-s: 100%;
    --orange-l: 50%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), calc(var(--orange-s) - 10%), 22% );
    --color-bg-orange-light: hsl( var(--orange-h), calc(var(--orange-s) - 30%), 14% );
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) + 9%), 29% );
    --color-pill-text-orange: hsl( var(--orange-h), calc(var(--orange-s) - 23%), calc(var(--orange-l) + 33%) );
    --yellow-h: 62;
    --yellow-s: 100%;
    --yellow-l: 50%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 18%), 21% );
    --color-bg-yellow-light: hsl( var(--yellow-h), calc(var(--yellow-s) - 24%), 13% );
    --color-pill-yellow: hsl( calc(var(--yellow-h) - 1), calc(var(--yellow-s) + 2%), 31% );
    --color-pill-text-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 28%), calc(var(--yellow-l) + 33%) );
    --green-h: 147;
    --green-s: 100%;
    --green-l: 50%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( calc(var(--green-h) + 3), calc(var(--green-s) - 6%), 22% );
    --color-bg-green-light: hsl( var(--green-h), calc(var(--green-s) - 20%), 18% );
    --color-pill-green: hsl( calc(var(--green-h) + 1), calc(var(--green-s) + 3%), 29% );
    --color-pill-text-green: hsl( var(--green-h), calc(var(--green-s) - 20%), calc(var(--green-l) + 38%) );
    --blue-h: 184;
    --blue-s: 100%;
    --blue-l: 60%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( calc(var(--blue-h) - 16), calc(var(--blue-s) + 9%), 21% );
    --color-bg-blue-light: hsl( calc(var(--blue-h) + 16), calc(var(--blue-s) - 27%), 17% );
    --color-pill-blue: hsl( calc(var(--blue-h) - 3), calc(var(--blue-s) - 6%), 31% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) - 5), calc(var(--blue-s) - 32%), calc(var(--blue-l) + 28%) );
    --purple-h: 276;
    --purple-s: 100%;
    --purple-l: 62%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( calc(var(--purple-h) + 2), calc(var(--purple-s) - 31%), 23% );
    --color-bg-purple-light: hsl( calc(var(--purple-h) + 5), calc(var(--purple-s) - 40%), 17% );
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) - 19%), 29% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) - 3), calc(var(--purple-s) - 40%), calc(var(--purple-l) + 24%) );
    --pink-h: 329;
    --pink-s: 100%;
    --pink-l: 51%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 29%), 17% );
    --color-bg-pink-light: hsl( calc(var(--pink-h) + 5), calc(var(--pink-s) - 40%), 9% );
    --color-pill-pink: hsl( calc(var(--pink-h) - 2), calc(var(--pink-s) - 21%), 23% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 4), calc(var(--pink-s) - 41%), calc(var(--pink-l) + 28%) );
    --red-h: 1;
    --red-s: 100%;
    --red-l: 50%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 37%), 14% );
    --color-bg-red-light: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 56%), 7% );
    --color-pill-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 30%), 21% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 7), calc(var(--red-s) - 50%), calc(var(--red-l) + 24%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--default-h), var(--default-s), -19% );
    --color-pill-text-default: hsl( var(--default-h), var(--default-s), calc(var(--default-l) + 23%) );
    --color-text-default: #e8ff00;
    --color-text-default-light: #abb91a;
    --color-bg-default: #15092d;
    --color-border-default: #e8ff00;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #2a1450;
    --color-card-bg: #2a1450;
    --color-card-bg-hover: #422477;
    --color-calendar-weekend-bg: #202020;
    --color-checkbox-bg: #e8ff00;
    --color-code-bg: #474c50;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #e8ff00;
    --navbar-background-color: #2a1450;
    --navbar-button-text-color: #2a1450;
    --navbar-button-background-color: #e8ff00;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #e8ff00;
    --footer-background-color: #2a1450;

}

‣

Pastel

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 17px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 48px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 40vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 24px;
    --collection-card-shadow: rgba(0, 0, 0, 0.07) 0px 20px 40px -10px;
    --collection-card-title-size: 1.2rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: none;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 2.5rem;
    --quote-size: 1.2rem;
    --heading-size: 1.9rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: rgba(0, 0, 0, 0.05) 0px 20px 40px -10px;
    --navbar-button-border-radii: 50px;
		--gray-h: 7;
    --gray-s: 22%;
    --gray-l: 63%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 90% );
    --color-bg-gray-light: var(--color-bg-gray);
    --color-pill-gray: hsl( calc(var(--gray-h) + 14), var(--gray-s), 90% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --brown-h: 18;
    --brown-s: 66%;
    --brown-l: 57%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), var(--brown-s), 90% );
    --color-bg-brown-light: var(--color-bg-brown);
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), 90% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), calc(var(--brown-l) - 28%) );
    --orange-h: 30;
    --orange-s: 76%;
    --orange-l: 56%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), var(--orange-s), 90% );
    --color-bg-orange-light: var(--color-bg-orange);
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) - 6%), 90% );
    --color-pill-text-orange: hsl( calc(var(--orange-h) - 5), calc(var(--orange-s) - 18%), calc(var(--orange-l) - 28%) );
    --yellow-h: 38;
    --yellow-s: 75%;
    --yellow-l: 60%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) + 90%), 90% );
    --color-bg-yellow-light: var(--color-bg-yellow);
    --color-pill-yellow: hsl( calc(var(--yellow-h) + 3), calc(var(--yellow-s) + 24%), 90% );
    --color-pill-text-yellow: hsl( calc(var(--yellow-h) - 11), calc(var(--yellow-s) - 22%), calc(var(--yellow-l) - 28%) );
    --green-h: 148;
    --green-s: 24%;
    --green-l: 46%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( var(--green-h), var(--green-s), 90% );
    --color-bg-green-light: var(--color-bg-green);
    --color-pill-green: hsl( calc(var(--green-h) - 28), calc(var(--green-s) + 3%), 90% );
    --color-pill-text-green: hsl( calc(var(--green-h) - 2), var(--green-s), calc(var(--green-l) - 22%) );
    --blue-h: 202;
    --blue-s: 60%;
    --blue-l: 56%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( var(--blue-h), var(--blue-s), 90% );
    --color-bg-blue-light: var(--color-bg-blue);
    --color-pill-blue: hsl( var(--blue-h), calc(var(--blue-s) - 5%), 90% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) + 7), calc(var(--blue-s) - 6%), calc(var(--blue-l) - 22%) );
    --purple-h: 275;
    --purple-s: 63%;
    --purple-l: 67%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( var(--purple-h), var(--purple-s), 90% );
    --color-bg-purple-light: var(--color-bg-purple);
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) + 5%), 90% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) + 1), calc(var(--purple-s) + 10%), calc(var(--purple-l) - 31%) );
    --pink-h: 328;
    --pink-s: 53%;
    --pink-l: 62%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-bg-pink-light: var(--color-bg-pink);
    --color-pill-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 14%), calc(var(--pink-l) - 31%) );
    --red-h: 2;
    --red-s: 49%;
    --red-l: 65%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( var(--red-h), var(--red-s), 90% );
    --color-bg-red-light: var(--color-bg-red);
    --color-pill-red: hsl( calc(var(--red-h) + 6), calc(var(--red-s) + 42%), 90% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 0), var(--red-s), calc(var(--red-l) - 32%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--gray-h), var(--gray-s), 90% );
    --color-pill-text-default: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --color-text-default: #614e4b;
    --color-text-default-light: #8a7370;
    --color-bg-default: #efe4df;
    --color-border-default: #d0c2c1;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #f5eeeb;
    --color-card-bg: #efe4df;
    --color-card-bg-hover: #f5eeeb;
    --color-calendar-weekend-bg: #f7f6f3;
    --color-checkbox-bg: #614e4b;
    --color-code-bg: #efefef;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #614e4b;
    --navbar-background-color: #f5eeeb;
    --navbar-button-text-color: #f5eeeb;
    --navbar-button-background-color: #614e4b;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #614e4b;
    --footer-background-color: #e3d9d4;
}

‣

Funk

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 16px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1200px;
    --column-spacing: 48px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 55vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 24px;
    --collection-card-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px -10px;
    --collection-card-title-size: 1rem;
    --collection-card-cover-height-small: 380px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 400px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: none;
    --callout-shadow: rgba(0, 0, 0, 0.07) 0px 20px 40px -10px;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 2.5rem;
    --quote-size: 1.2rem;
    --heading-size: 1.55rem;
    --text-weight: 400;
    --heading-weight: 600;
    --heading1-size: calc(var(--heading-size) * 1.875);
    --heading2-size: calc(var(--heading-size) * 1.5);
    --heading3-size: calc(var(--heading-size) * 1.25);
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: none;
    --navbar-button-border-radii: 50px;
		--gray-h: 277;
    --gray-s: 9%;
    --gray-l: 28%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 77% );
    --color-bg-gray-light: var(--color-bg-gray);
    --color-pill-gray: hsl( calc(var(--gray-h) + 14), var(--gray-s), 70% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --brown-h: 18;
    --brown-s: 38%;
    --brown-l: 39%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), var(--brown-s), 83% );
    --color-bg-brown-light: var(--color-bg-brown);
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), 81% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), calc(var(--brown-l) - 28%) );
    --orange-h: 30;
    --orange-s: 100%;
    --orange-l: 50%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), var(--orange-s), 90% );
    --color-bg-orange-light: var(--color-bg-orange);
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) - 6%), 90% );
    --color-pill-text-orange: hsl( calc(var(--orange-h) - 5), calc(var(--orange-s) - 18%), calc(var(--orange-l) - 28%) );
    --yellow-h: 39;
    --yellow-s: 68%;
    --yellow-l: 56%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) + 90%), 90% );
    --color-bg-yellow-light: var(--color-bg-yellow);
    --color-pill-yellow: hsl( calc(var(--yellow-h) + 3), calc(var(--yellow-s) + 24%), 90% );
    --color-pill-text-yellow: hsl( calc(var(--yellow-h) - 11), calc(var(--yellow-s) - 22%), calc(var(--yellow-l) - 28%) );
    --green-h: 165;
    --green-s: 62%;
    --green-l: 43%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( var(--green-h), var(--green-s), 90% );
    --color-bg-green-light: var(--color-bg-green);
    --color-pill-green: hsl( calc(var(--green-h) - 28), calc(var(--green-s) + 3%), 90% );
    --color-pill-text-green: hsl( calc(var(--green-h) - 2), var(--green-s), calc(var(--green-l) - 22%) );
    --blue-h: 221;
    --blue-s: 53%;
    --blue-l: 43%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( var(--blue-h), var(--blue-s), 90% );
    --color-bg-blue-light: var(--color-bg-blue);
    --color-pill-blue: hsl( var(--blue-h), calc(var(--blue-s) - 5%), 85% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) + 7), calc(var(--blue-s) - 6%), calc(var(--blue-l) - 22%) );
    --purple-h: 274;
    --purple-s: 51%;
    --purple-l: 39%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( var(--purple-h), var(--purple-s), 79% );
    --color-bg-purple-light: var(--color-bg-purple);
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) + 5%), 75% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) + 1), calc(var(--purple-s) + 10%), calc(var(--purple-l) - 31%) );
    --pink-h: 328;
    --pink-s: 56%;
    --pink-l: 46%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( var(--pink-h), var(--pink-s), 86% );
    --color-bg-pink-light: var(--color-bg-pink);
    --color-pill-pink: hsl( var(--pink-h), var(--pink-s), 86% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 14%), calc(var(--pink-l) - 31%) );
    --red-h: 2;
    --red-s: 62%;
    --red-l: 55%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( var(--red-h), var(--red-s), 90% );
    --color-bg-red-light: var(--color-bg-red);
    --color-pill-red: hsl( calc(var(--red-h) + 6), calc(var(--red-s) + 42%), 90% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 0), var(--red-s), calc(var(--red-l) - 32%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--gray-h), var(--gray-s), 90% );
    --color-pill-text-default: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --color-text-default: #353f5b;
    --color-text-default-light: #353f5b;
    --color-bg-default: #efdcf3;
    --color-border-default: #e1a49d;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #efefef;
    --color-card-bg: #ffffff;
    --color-card-bg-hover: #f9f9f8;
    --color-calendar-weekend-bg: #f7f6f3;
    --color-checkbox-bg: #2EAADC;
    --color-code-bg: #efefef;
    --scrollbar-background-color: #c8b9ca;
    --scrollbar-thumb-color: #ffffff;
    --scrollbar-border-color: #ffffff;
    --navbar-text-color: #35555b;
    --navbar-background-color: #ffffff;
    --navbar-button-text-color: #ffffff;
    --navbar-button-background-color: #35555b;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #35555b;
    --footer-background-color: #ffffff;
}

‣

Arctic

💡

Please note that you won't be able to customize this theme. The only thing that is unlocked is font selection.

How to install it?

Paste the code below to your Super Site > Code > CSS

:root {
    --padding-layout: 1.3rem;
    --border-radii-layout: 12px;
    --border-thickness-layout: 1px;
    --border-type-layout: solid;
    --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default);
    --layout-max-width: 1300px;
    --column-spacing: 72px;
    --page-display: none;
    --padding-right: calc(env(safe-area-inset-right) + 96px);
    --padding-left: calc(env(safe-area-inset-left) + 96px);
    --padding-right-mobile: calc(env(safe-area-inset-right) + 24px);
    --padding-left-mobile: calc(env(safe-area-inset-left) + 24px);
    --header-cover-height: 50vh;
    --header-title-align: left;
    --header-icon-align: -112px auto auto auto;
    --header-display: block;
    --collection-header-border: var(--border-layout);
    --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem);
    --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem);
    --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px );
    --collection-card-padding: 0px;
    --collection-card-title-padding: 0px;
    --collection-card-content-padding: var(--padding-layout);
    --collection-card-border-radii: var(--border-radii-layout);
    --collection-card-gap: 36px;
    --collection-card-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px -10px;
    --collection-card-title-size: 1.2rem;
    --collection-card-cover-height-small: 320px;
    --collection-card-cover-size-small: 172px;
    --collection-card-cover-height-medium: 390px;
    --collection-card-cover-size-medium: 260px;
    --collection-card-cover-height-large: 420px;
    --collection-card-cover-size-large: 320px;
    --collection-card-icon-display: none;
    --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em);
    --callout-border-radii: calc(var(--border-radii-layout) - 2px);
    --callout-border: var(--border-layout);
    --callout-icon-display: block;
    --callout-shadow: none;
    --file-border-radii: calc(var(--border-radii-layout) - 2px);
    --equation-border-radii: calc(var(--border-radii-layout) - 2px);
    --divider-border: var(--border-layout);
    --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor;
    --code-padding: calc(var(--padding-layout) + 1.4rem);
    --code-border-radii: var(--border-radii-layout);
    --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem);
    --tweet-border-radii: var(--border-radii-layout);
    --tweet-border: var(--border-layout);
    --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem);
    --bookmark-border-radii: var(--border-radii-layout);
    --bookmark-border: var(--border-layout);
    --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px;
    --embed-border-radii: calc(var(--border-radii-layout) - 5px);
    --image-border-radii: calc(var(--border-radii-layout) - 5px);
    --title-size: 2.5rem;
    --quote-size: 1.2rem;
    --heading-size: 1.7rem;
		--text-weight: 400;
    --heading-weight: 600;
    --heading4-size: calc(var(--heading-size) * 1);
    --heading5-size: calc(var(--heading-size) * 0.8125);
    --scrollbar-width: 15px;
    --navbar-height: 56px;
    --navbar-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px -10px;
    --navbar-button-border-radii: 50px;
		--gray-h: 248;
    --gray-s: 55%;
    --gray-l: 19%;
    --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l));
    --color-text-gray: var(--color-gray);
    --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 68% );
    --color-bg-gray-light: var(--color-bg-gray);
    --color-pill-gray: hsl( calc(var(--gray-h) + 14), var(--gray-s), 61% );
    --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --brown-h: 18;
    --brown-s: 100%;
    --brown-l: 30%;
    --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l));
    --color-text-brown: var(--color-brown);
    --color-bg-brown: hsl( var(--brown-h), var(--brown-s), 74% );
    --color-bg-brown-light: var(--color-bg-brown);
    --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), 72% );
    --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), calc(var(--brown-l) - 28%) );
    --orange-h: 22;
    --orange-s: 100%;
    --orange-l: 50%;
    --color-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
    --color-text-orange: var(--color-orange);
    --color-bg-orange: hsl( var(--orange-h), var(--orange-s), 90% );
    --color-bg-orange-light: var(--color-bg-orange);
    --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) - 6%), 90% );
    --color-pill-text-orange: hsl( calc(var(--orange-h) - 5), calc(var(--orange-s) - 18%), calc(var(--orange-l) - 28%) );
    --yellow-h: 38;
    --yellow-s: 100%;
    --yellow-l: 50%;
    --color-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l));
    --color-text-yellow: var(--color-yellow);
    --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) + 90%), 90% );
    --color-bg-yellow-light: var(--color-bg-yellow);
    --color-pill-yellow: hsl( calc(var(--yellow-h) + 3), calc(var(--yellow-s) + 24%), 90% );
    --color-pill-text-yellow: hsl( calc(var(--yellow-h) - 11), calc(var(--yellow-s) - 22%), calc(var(--yellow-l) - 28%) );
    --green-h: 131;
    --green-s: 100%;
    --green-l: 35%;
    --color-green: hsl(var(--green-h), var(--green-s), var(--green-l));
    --color-text-green: var(--color-green);
    --color-bg-green: hsl( var(--green-h), var(--green-s), 90% );
    --color-bg-green-light: var(--color-bg-green);
    --color-pill-green: hsl( calc(var(--green-h) - 28), calc(var(--green-s) + 3%), 85% );
    --color-pill-text-green: hsl( calc(var(--green-h) - 2), var(--green-s), calc(var(--green-l) - 22%) );
    --blue-h: 211;
    --blue-s: 100%;
    --blue-l: 40%;
    --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));
    --color-text-blue: var(--color-blue);
    --color-bg-blue: hsl( var(--blue-h), var(--blue-s), 90% );
    --color-bg-blue-light: var(--color-bg-blue);
    --color-pill-blue: hsl( var(--blue-h), calc(var(--blue-s) - 5%), 82% );
    --color-pill-text-blue: hsl( calc(var(--blue-h) + 7), calc(var(--blue-s) - 6%), calc(var(--blue-l) - 22%) );
    --purple-h: 275;
    --purple-s: 91%;
    --purple-l: 43%;
    --color-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l));
    --color-text-purple: var(--color-purple);
    --color-bg-purple: hsl( var(--purple-h), var(--purple-s), 83% );
    --color-bg-purple-light: var(--color-bg-purple);
    --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) + 5%), 79% );
    --color-pill-text-purple: hsl( calc(var(--purple-h) + 1), calc(var(--purple-s) + 10%), calc(var(--purple-l) - 31%) );
    --pink-h: 328;
    --pink-s: 89%;
    --pink-l: 52%;
    --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l));
    --color-text-pink: var(--color-pink);
    --color-bg-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-bg-pink-light: var(--color-bg-pink);
    --color-pill-pink: hsl( var(--pink-h), var(--pink-s), 90% );
    --color-pill-text-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 14%), calc(var(--pink-l) - 31%) );
    --red-h: 2;
    --red-s: 100%;
    --red-l: 61%;
    --color-red: hsl(var(--red-h), var(--red-s), var(--red-l));
    --color-text-red: var(--color-red);
    --color-bg-red: hsl( var(--red-h), var(--red-s), 90% );
    --color-bg-red-light: var(--color-bg-red);
    --color-pill-red: hsl( calc(var(--red-h) + 6), calc(var(--red-s) + 42%), 90% );
    --color-pill-text-red: hsl( calc(var(--red-h) + 0), var(--red-s), calc(var(--red-l) - 32%) );
    --default-h: 45;
    --default-s: 8%;
    --default-l: 20%;
    --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) );
    --color-pill-default: hsl( var(--gray-h), var(--gray-s), 90% );
    --color-pill-text-default: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) );
    --color-text-default: #4c597a;
    --color-text-default-light: #5371b3;
    --color-bg-default: #dff1ff;
    --color-border-default: #c4d7ff;
    --color-border-dark: var(--color-border-default);
    --color-ui-hover-bg: #ffffff;
    --color-card-bg: #fefffa;
    --color-card-bg-hover: #ffffff;
    --color-calendar-weekend-bg: #f7f6f3;
    --color-checkbox-bg: #5371b3;
    --color-code-bg: #efefef;
    --scrollbar-background-color: #FAFAFA;
    --scrollbar-thumb-color: #C1C1C1;
    --scrollbar-border-color: #E8E8E8;
    --navbar-text-color: #4c597a;
    --navbar-background-color: #ffffff;
    --navbar-button-text-color: #ffffff;
    --navbar-button-background-color: #4c597a;
    --navbar-menu-background-color: var(--navbar-background-color);
    --footer-text-color: #37352F;
    --footer-background-color: #ffffff;
}

4 (Optional). Frosted Glass header

To achieve the frosted glass header effect, paste the code below to your Super Site > Code > CSS

‣

Light, Crisp, Arctic Themes

‣

Dark, Charcoal, Blackout

‣

Pine

‣

Pastel

‣

Cyber

5 (Optional). Alternative Cover Style

You can change the cover image style by pasting the code below to your Super Site > Code > CSS

Shaded

No code needed, this style comes by default

Fullscreen

.notion-header {
  margin: calc(0px - var(--navbar-height) - 2em) auto 0!important;
  max-width: 100%!important;
  box-shadow: none!important;
}

.notion-header img {
  opacity:100%!important;
}

Block

/* Header Block*/

.notion-header {
  margin: 0 auto!important;
  max-width: var(--layout-max-width)!important;
  box-shadow: none!important;
  border-radius: var(--border-radii-layout)!important;
  overflow: hidden!important;
  width: calc(100% - var(--column-spacing))!important;
}

.notion-header img {
  opacity:100%!important;
}

CSS
You can get CSS file to see how if works or store on your own hosting
See Template's CSS Code

Feel free to ask any question at hello@stfn.co. Let's be in touch!

Page background	F5F6F7
Text	36364E
Light text	6B6B88
Border color	FFFFFF
Hover background	FFFFFF
Checkbox background	36364E

Text	36364E
Background	FFFFFF
Button Text	F8F8F9
Button Backgound	36364E

Text	F8F8F9
Background	36364E

Gray	6D6D7F
Brown	755144
Orange	F1581C
Yellow	D89E27
Green	31AF6D
Blue	5964E2
Purple	AA76E4
Pink	DA67B7
Red	D85D57

Card Background	F5F6F7
Card Hover Background	FFFFFF
Calendar Weekend Background	F7F6F3

Primary font	Poppins
Secondary font	Inter

Base	16
Title	1
Headings	1.9
Quote	1

Container width	1300
Column gap	48
Padding	Large
Rounded Edges	16
Notion page links	Hide
Page headers	Enable
Cover height	35

Navbar Shadow	Large
Opacity	0.07

How to install Ult

Ult Installation Guide

Thank you for purchasing Ult!

1. Create a Super site

Duplicate Notion Template:

Share Your Notion Page and Connect it to Super

2. Install Ult Essentials

Paste this code in Site Settings > Code > HTML Head

3. Pick a theme

Light

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Dark

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Pastel

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Crisp

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Graphite

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Funk

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Pine

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Arctic

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Cyber

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Blackout

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

How to install it?

How to install it?

How to install it?

How to install it?

How to install it?

How to install it?

How to install it?

How to install it?

How to install it?

How to install it?

4 (Optional). Frosted Glass header

5 (Optional). Alternative Cover Style

Shaded

Fullscreen

Block

CSS

How to install Ult

Ult Installation Guide

Thank you for purchasing Ult!

1. Create a Super site

Duplicate Notion Template:

Share Your Notion Page and Connect it to Super

2. Install Ult Essentials

Paste this code in Site Settings > Code > HTML Head

3. Pick a theme

Light

1. Create a theme

2. Apply settings as listed below

3. Enjoy your new website!

Dark

1. Create a theme