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:
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
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Light |
Main Colors
Page background | F5F6F7 |
Text | 36364E |
Light text | 6B6B88 |
Border color | FFFFFF |
Hover background | FFFFFF |
Checkbox background | 36364E |
Navbar Colors
Text | 36364E |
Background | FFFFFF |
Button Text | F8F8F9 |
Button Backgound | 36364E |
Footer Colors
Text | F8F8F9 |
Background | 36364E |
Notion Colors
Gray | 6D6D7F |
Brown | 755144 |
Orange | F1581C |
Yellow | D89E27 |
Green | 31AF6D |
Blue | 5964E2 |
Purple | AA76E4 |
Pink | DA67B7 |
Red | D85D57 |
Database Colors
Card Background | F5F6F7 |
Card Hover Background | FFFFFF |
Calendar Weekend Background | F7F6F3 |
Done! Hit Save button at the top and get back
‣
Primary font | Poppins |
Secondary font | Inter |
Sizes
Base | 16 |
Title | 1 |
Headings | 1.9 |
Quote | 1 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 48 |
Padding | Large |
Rounded Edges | 16 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 35 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | Large |
Opacity | 0.07 |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Dark
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Dark |
Main Colors
Page background | 19191B |
Text | EBEDF3 |
Light text | D2D3D8 |
Border color | 66697A |
Hover background | 2B2B34 |
Checkbox background | EBEDF3 |
Navbar Colors
Text | EBEDF3 |
Background | 28282D |
Button Text | 28282D |
Button Backgound | EBEDF3 |
Footer Colors
Text | EBEDF3 |
Background | 28282D |
Notion Colors
Gray | FFFFFF |
Brown | C7481C |
Orange | FF6E00 |
Yellow | FFD000 |
Green | 7CFF00 |
Blue | 00BAFF |
Purple | C45AFF |
Pink | FF168B |
Red | FF0200 |
Database Colors
Card Background | 1A1A1D |
Card Hover Background | 262626 |
Calendar Weekend Background | 202020 |
Done! Hit Save button at the top and get back
‣
Primary font | Space Grotesk |
Secondary font | Rubik |
Sizes
Base | 18 |
Title | 2.5 |
Headings | 2.2 |
Quote | 1 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 48 |
Padding | Large |
Rounded Edges | 20 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 50 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | Large |
Opacity | 0.25 |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | Large |
Opacity | 0.25 |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Pastel
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Light |
Main Colors
Page background | EFE4DF |
Text | 614E4B |
Light text | 8A7370 |
Border color | D0C2C1 |
Hover background | F5EEEB |
Checkbox background | 614E4B |
Navbar Colors
Text | 614E4B |
Background | F5EEEB |
Button Text | F5EEEB |
Button Backgound | 614E4B |
Footer Colors
Text | 614E4B |
Background | E3D9D4 |
Notion Colors
Gray | B5918C |
Brown | DA7549 |
Orange | E4913C |
Yellow | E6AF4E |
Green | 599073 |
Blue | 4CA0D2 |
Purple | B578E0 |
Pink | D26CA3 |
Red | D27F7C |
Database Colors
Card Background | EFE4DF |
Card Hover Background | F5EEEB |
Calendar Weekend Background | F7F6F3 |
Done! Hit Save button at the top and get back
‣
Primary font | Gentium Basic |
Secondary font | Libre Franklin |
Sizes
Base | 18 |
Title | 2.5 |
Headings | 1.9 |
Quote | 1.2 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 48 |
Padding | Large |
Rounded Edges | 17 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 40 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | Large |
Opacity | 0.05 |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Crisp
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Light |
Main Colors
Page background | FFFFFF |
Text | 000000 |
Light text | 000000 |
Border color | E9E9E9 |
Hover background | FFFFFF |
Checkbox background | 000000 |
Navbar Colors
Text | 000000 |
Background | FFFFFF |
Button Text | FFFFFF |
Button Backgound | 000000 |
Footer Colors
Text | 000000 |
Background | FFFFFF |
Notion Colors
Gray | 3D3D3D |
Brown | 963D00 |
Orange | FF6300 |
Yellow | FF9900 |
Green | 00B700 |
Blue | 0011FF |
Purple | 9300FF |
Pink | FF0088 |
Red | FF0900 |
Database Colors
Card Background | FFFFFF |
Card Hover Background | F9F9F8 |
Calendar Weekend Background | F7F6F3 |
Done! Hit Save button at the top and get back
‣
Primary font | Inter |
Secondary font | Inter |
Sizes
Base | 16 |
Title | 2.5 |
Headings | 2.2 |
Quote | 1.2 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 48 |
Padding | Large |
Rounded Edges | 12 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 80 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Graphite
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Dark |
Main Colors
Page background | 2F2F2F |
Text | C0C0C0 |
Light text | 9B9B9B |
Border color | 505050 |
Hover background | 545454 |
Checkbox background | FFFFFF |
Navbar Colors
Text | E1E1E1 |
Background | 191919 |
Button Text | E1E1E1 |
Button Backgound | 383838 |
Footer Colors
Text | E1E1E1 |
Background | 191919 |
Notion Colors
Gray | B7B7B7 |
Brown | B18879 |
Orange | B38A6C |
Yellow | D6BD93 |
Green | 709680 |
Blue | 8F8EB1 |
Purple | 967EAD |
Pink | B7879F |
Red | B97E7E |
Database Colors
Card Background | 262626 |
Card Hover Background | 2F2F2F |
Calendar Weekend Background | 202020 |
Done! Hit Save button at the top and get back
‣
Primary font | Manrope |
Secondary font | Manrope |
Sizes
Base | 16 |
Title | 2.5 |
Headings | 1.6 |
Quote | 1.2 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 48 |
Padding | Large |
Rounded Edges | 8 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 40 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | Large |
Opacity | 0.25 |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Funk
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Light |
Main Colors
Page background | EFDCF3 |
Text | 353F5B |
Light text | 353F5B |
Border color | E1A49D |
Hover background | EFEFEF |
Checkbox background | 2EAADC |
Navbar Colors
Text | 35555B |
Background | FFFFFF |
Button Text | FFFFFF |
Button Backgound | 35555B |
Footer Colors
Text | 35555B |
Background | FFFFFF |
Notion Colors
Gray | 49414E |
Brown | 8A553E |
Orange | FF8000 |
Yellow | DCA644 |
Green | 2AB390 |
Blue | 3458A8 |
Purple | 6C3198 |
Pink | B73479 |
Red | D34A45 |
Database Colors
Card Background | FFFFFF |
Card Hover Background | F9F9F8 |
Calendar Weekend Background | F7F6F3 |
Done! Hit Save button at the top and get back
‣
Primary font | Rubik |
Secondary font | Inter |
Sizes
Base | 16 |
Title | 2.5 |
Headings | 1.55 |
Quote | 1.2 |
Done! Hit Save button at the top and get back
‣
Container width | 1200 |
Column gap | 48 |
Padding | Large |
Rounded Edges | 16 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 55 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | Large |
Opacity | 0.07 |
Done! Hit Save button at the top and get back
‣
Title Size | 1 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Pine
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Dark |
Main Colors
Page background | 244032 |
Text | F5CEB5 |
Light text | D4AB90 |
Border color | 967A60 |
Hover background | 35694F |
Checkbox background | FFB178 |
Navbar Colors
Text | F5CEB5 |
Background | 35694F |
Button Text | 35694F |
Button Backgound | F5CEB5 |
Footer Colors
Text | F5CEB5 |
Background | 172B25 |
Notion Colors
Gray | A6C9B5 |
Brown | E4B59E |
Orange | F1B478 |
Yellow | F1DF9F |
Green | 79C79E |
Blue | A5D6FD |
Purple | D8B5FB |
Pink | FFC8E4 |
Red | FFC8E4 |
Database Colors
Card Background | 244032 |
Card Hover Background | 35694F |
Calendar Weekend Background | 202020 |
Done! Hit Save button at the top and get back
‣
Primary font | Playfair Display |
Secondary font | Lato |
Sizes
Base | 18 |
Title | 1 |
Headings | 1.8 |
Quote | 1 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 48 |
Padding | Large |
Rounded Edges | 8 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 30 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | Large |
Opacity | 0.12 |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Arctic
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Light |
Main Colors
Page background | DFF1FF |
Text | 4C597A |
Light text | 5371B3 |
Border color | C4D7FF |
Hover background | FFFFFF |
Checkbox background | 5371B3 |
Navbar Colors
Text | 4C597A |
Background | FFFFFF |
Button Text | FFFFFF |
Button Backgound | 4C597A |
Footer Colors
Text | 37352F |
Background | FFFFFF |
Notion Colors
Gray | 1D164C |
Brown | 9A2E00 |
Orange | FF5C00 |
Yellow | FFA300 |
Green | 00B320 |
Blue | 0063CE |
Purple | 7C0AD0 |
Pink | F11689 |
Red | FF3D36 |
Database Colors
Card Background | FEFFFA |
Card Hover Background | FFFFFF |
Calendar Weekend Background | F7F6F3 |
Done! Hit Save button at the top and get back
‣
Primary font | Libre Baskerville |
Secondary font | IBM Plex Sans |
Sizes
Base | 18 |
Title | 2.5 |
Headings | 1.7 |
Quote | 1.2 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 72 |
Padding | Large |
Rounded Edges | 12 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 50 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Cyber
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Dark |
Main Colors
Page background | 15092D |
Text | E8FF00 |
Light text | ABB91A |
Border color | E8FF00 |
Hover background | 2A1450 |
Checkbox background | E8FF00 |
Navbar Colors
Text | E8FF00 |
Background | 2A1450 |
Button Text | 2A1450 |
Button Backgound | E8FF00 |
Footer Colors
Text | E8FF00 |
Background | 2A1450 |
Notion Colors
Gray | FFFFFF |
Brown | FF986A |
Orange | FF6A00 |
Yellow | F8FF00 |
Green | 00FF71 |
Blue | 32F3FF |
Purple | B13DFF |
Pink | FF0786 |
Red | FF0300 |
Database Colors
Card Background | 2A1450 |
Card Hover Background | 422477 |
Calendar Weekend Background | 202020 |
Done! Hit Save button at the top and get back
‣
Primary font | |
Secondary font |
Sizes
Base | |
Title | |
Headings | |
Quote | |
Done! Hit Save button at the top and get back
‣
Container width | |
Column gap | |
Padding | |
Rounded Edges | |
Notion page links | Hide |
Page headers | Enable |
Cover height |
Done! Hit Save button at the top and get back
‣
Navbar Options | |
Navbar Shadow | |
Opacity |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
Blackout
Duplicate Theme
‣
1. Create a theme
- Go to your Super Site > Design
- Press Create a new theme
- Type a theme name and hit Create
2. Apply settings as listed below
You can free your creativity up and go with your own parameters. The example below will give you the same result as displayed in demo.
‣
Default Color Mode | Dark |
Main Colors
Page background | 000000 |
Text | D4D4D4 |
Light text | 9B9B9B |
Border color | FFFFFF |
Hover background | 262626 |
Checkbox background | FFFFFF |
Navbar Colors
Text | FFFFFF |
Background | 000000 |
Button Text | 000000 |
Button Backgound | FFFFFF |
Footer Colors
Text | FFFFFF |
Background | 000000 |
Notion Colors
Gray | FFFFFF |
Brown | FF9E71 |
Orange | FF852C |
Yellow | FFB130 |
Green | 32FF8B |
Blue | 6786FF |
Purple | A954FF |
Pink | FF0585 |
Red | FF0300 |
Database Colors
Card Background | 000000 |
Card Hover Background | 000000 |
Calendar Weekend Background | 202020 |
Done! Hit Save button at the top and get back
‣
Primary font | Syne |
Secondary font | Space Grotesk |
Sizes
Base | 18 |
Title | — |
Headings | 2.2 |
Quote | 1.2 |
Done! Hit Save button at the top and get back
‣
Container width | 1300 |
Column gap | 54 |
Padding | Large |
Rounded Edges | 18 |
Notion page links | Hide |
Page headers | Enable |
Cover height | 40 |
Done! Hit Save button at the top and get back
‣
Navbar Shadow | Large |
Opacity | 0.35 |
Done! Hit Save button at the top and get back
‣
Callout icon | Disable |
Callout shadow | None |
Opacity | — |
Done! Hit Save button at the top and get back
‣
Title Size | 1.2 |
Card Gap | 24 |
Cover Height Large | 420 |
Cover Height Medium | 380 |
Cover Height Small | 320 |
Card Icon | Disable |
Card Shadow | Large |
Opacity | 0.1 |
Done! Hit Save button at the top and get back
3. Enjoy your new website!
‣
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:
‣
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;
}‣
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;
}‣
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;
}‣
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;
}‣
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;
}‣
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;
}‣
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;
}‣
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;
}‣
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;
}‣
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
‣
:root {
--navbar-background-color: rgba(255,255,255,0.25)!important;
}‣
:root {
--navbar-background-color: rgba(0,0,0,0.5)!important;
}‣
:root {
--navbar-background-color: rgba(66, 92, 77, 0.75)!important;
}
‣
:root {
--navbar-background-color: rgba(245,238,235,0.5)!important;
}‣
:root {
--navbar-background-color: rgba(42, 20, 80, 0.25)!important;
}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
Feel free to ask any question at hello@stfn.co. Let's be in touch!