🚀
  • All Blocks
  • About
  • Blog
Get Kraft
Kraft

All Blocks

How to install

Tips and tricks

Nick Stepuk, 2024

FacebookXInstagram
How to Install Kraft

How to Install Kraft

💡

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

image

Once you purchase Kraft, you'll get a link to Kraft Notion Template that should be duplicated to your Notion.

Share it to web

image

Publish your new Notion page to web.

Create a new Super Site

image

Use the link you've got from Notion Sharing while creating a Super Site

Paste the theme's custom code

image

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

image

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:

‣
Default Theme

Style

Background Color: RGBA 255 255 255 0.5

Text Color: RGBA 0 0 0 1

Height: 72px

Visible on scroll: Check

Shadow: None

‣
Darkmode Theme

Style

Background Color: RGBA 42 46 48 0.5

Text Color: RGBA 255 255 255 1

Height: 72px

Visible on scroll: Check

Shadow: None

‣
Neutral Theme

Background Color: RGBA 241 235 229 0.5

Text Color: RGBA 77 88 111 1

Height: 72px

Visible on scroll: Check

Shadow: None

‣
Blackout Theme

Background Color: RGBA 0 0 0 0.5

Text Color: RGBA 255 255 255 1

Height: 72px

Visible on scroll: Check

Shadow: None

‣
CTA Colors

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

  • How to Install Kraft Theme
  • 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!
  • 🔥
  • And don't forget to have fun!
  • Nick Stfn
  • See Also
image

Nick Stfn

Product designer, maker, nomad. Kraft Creator

Twitter / Website

See Also

Articles

Tips and TricksTips and Tricks
Tips and Tricks
TipsHow-to
How to Install KraftHow to Install Kraft
How to Install Kraft
DocumentationHow-to
All Kraft Blocks - at a GlanceAll Kraft Blocks - at a Glance
All Kraft Blocks - at a Glance
Documentation
💡
image

Get three Super templates with 50% discount

Expand your publishing possibilities by getting Lift, Kraft, and Ult half the price

Learn More

Kraft Theme by Nick Stfn

Social

Twitter

Instagram

Website

Page Examples

Homepage

Blog

Blog Post

About

Get Template

💡
Feel free to ask any questions about Kraft theme by dropping a line to hello@stfn.co
BlogArticle PageAbout⚫Kraft Pro