Documentation How-to
How to Install Kraft Theme
8 Oct, 2021
Here's a quick guide of how to install Kraft theme and start using it with no resistance. Note that you should have both Notion and Super accounts ready
Duplicate Kraft Template
Once you purchase Kraft, you'll get a link to Kraft Notion Template that should be duplicated to your Notion.
Share it to web
Publish your new Notion page to web.
Create a new Super Site
Use the link you've got from Notion Sharing while creating a Super Site
Paste the theme's custom code
Site settings → Code → HTML head
<!-- Animation Module -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- Theme CSS File -->
<link
rel="stylesheet"
href="You'll get the correct link once purchase Kraft"
/>You'll get an original CSS file too if you want to store it on your server but note that the latest version with all the updates and fixes will be only available via the link.
Adjust Appearance via Super Settings
Color theme
Site settings → Theme → Color Theme
You can choose one of four color schemes for Kraft: Light, Darkmode, Neutral, and Blackout
Font
Site settings → Theme → Custom Font
Select one of fonts that listed in Super's theme settings.💡 The original font used in Kraft is Manrope
Custom Navbar
Site settings → Theme → Custom Navbar
Choose between Simple, Minimal, or Balanced. Feel free to adjust your navbar in your way, here are some recommended settings that you can use for better theme match:
Style
Background Color: RGBA 255 255 255 0.5
Text Color: RGBA 0 0 0 1
Height: 72px
Visible on scroll: Check
Shadow: None
Style
Background Color: RGBA 42 46 48 0.5
Text Color: RGBA 255 255 255 1
Height: 72px
Visible on scroll: Check
Shadow: None
Background Color: RGBA 241 235 229 0.5
Text Color: RGBA 77 88 111 1
Height: 72px
Visible on scroll: Check
Shadow: None
Background Color: RGBA 0 0 0 0.5
Text Color: RGBA 255 255 255 1
Height: 72px
Visible on scroll: Check
Shadow: None
Call to Action Text Color: RGBA 255 255 255 1
Gray: HEX #2C393F RGBA 44 57 63 1
Brown: HEX #6B432D RGBA 107 67 45 1
Orange: HEX #EB5822 RGBA 235 88 34 1
Yellow: HEX #FF9D0A RGBA 255 157 10 1
Green: HEX #16A494 RGBA 22 164 148 1
Blue: HEX #3A81EA RGBA 58 129 234 1
Purple: HEX #926CFF RGBA 146 108 255 1
Pink: HEX #EE4C9A RGBA 238 76 154 1
Red: HEX #F13C3C RGBA 241 60 60 1
You're all set!
Build pages in Notion, and they will automatically be synced with Super. Magic!
🔥
And don't forget to have fun!
Feel free to reach me at hello@stfn.co if you have any questions about theme and it's features
Cover image by Robin Schreiner
Table of contents
- Here's a quick guide of how to install Kraft theme and start using it with no resistance. Note that you should have both Notion and Super accounts ready
- Duplicate Kraft Template
- Share it to web
- Create a new Super Site
- Paste the theme's custom code
- Adjust Appearance via Super Settings
- Color theme
- Font
- Custom Navbar
- You're all set!
- Build pages in Notion, and they will automatically be synced with Super. Magic!
- Nick Stfn
- See Also
Nick Stfn
Product designer, maker, nomad. Kraft Creator
See Also
Kraft Theme by Nick Stfn