Style guide
A curated collection of design principles, visual assets, and pre-built components that form the visual foundation of the Noctis template. Use this guide to ensure consistency while scaling your website.
Color Styles
Primary Colors
#e4fb6f
#d8f831
Secondary Colors
#0d0c0c
#151515
#2c2c2c
#fafafa
#fFFFFF opacity 50%
Typography
Heading
heading-style-h1
4.375rem
heading-style-h2
3.75rem
heading-style-h3
2.5rem
heading-style-h4
1.875rem
heading-style-h5
1.563rem
heading-style-h6
1.438rem
Paragraph
Display Text
text-size-display
3.125rem / 50px
Line-Height: 130%
Huge Text
text-size-huge
1.875rem / 30px
Line-Height: 130%
Large Text
text-size-large
1.563rem / 25px
Line-Height: 130%
Medium Text
text-size-medium
1.125rem / 18px
Line-Height: 130%
Small Text
text-size-small
1rem / 16px
Line-Height: 130%
Paragraph - Combo Classes
Huge Text
text-size-huge
+
is-center
Centers the text within its container
Huge Text
text-size-huge
+
is-right
Centers the text within its container
Medium Text
text-size-medium
+
is-center
Centers the text within its container
Medium Text
text-size-medium
+
is-accent
Applies 50% opacity for secondary content
Medium Text
text-size-medium
+
is-dark
Changes text color to Highlight Text variable (Dark/Grey).
Small Text
text-size-small
+
is-accent
Applies 50% opacity for secondary content
Spacing System (Paddings)
Our template utilizes a strategic spacing system to maintain visual balance and hierarchy. Instead of hard-coding values into components, we use global spacing classes. This allows for consistent vertical breathing room across all sections and ensures a unified layout.
padding-top
+
is-header
3.75rem / 60px
padding-bottom
+
is-medium
3.75rem / 60px
padding-bottom
+
is-large
8.75rem / 140px
padding-large
8.75rem / 140px
padding-medium
1.875rem / 30px
padding-small
1.5rem / 24px
Spacing System (Margins)
margin-bottom
+
is-medium
3.75rem / 60px
margin-bottom
+
is-small
2rem / 32px
margin-top-medium
1.563rem / 25px
margin-top-small
0.938rem / 15px
