Style Guide
A curated collection of design principles, visual assets, and pre-built components that form the visual foundation of the Layout template. Use this guide to ensure consistency while scaling your website.
Primary Colors
#2a2626
#ffffff
##1d623c
Secondary Colors
#2a2626 Opacity 70%
#dde8e2
Anton
H1
12.5rem
Line-Height: 110%
H1
12.5rem
is-center
Line-Height: 110%
H2
5.313rem
Line-Height: 110%
H2
5.313rem
is-center
Line-Height: 110%
H3
4.375rem
Line-Height: 110%
H4
3.125rem
Line-Height: 110%
H5
2.5rem
Line-Height: 110%
H6
1.875rem
Line-Height: 110%
Text Huge
text-size-huge
2.5rem / 40px
Line-Height: 110%
Text Huge
text-size-huge
is-black
2.5rem / 18px
Line-Height: 110%
Text Large
text-size-large
1.125rem / 40px
Line-Height: 140%
Text Large
text-size-large
is-center
1.125rem / 18px
Line-Height: 140%
Text Medium
text-size-medium
1rem / 16px
Line-Height: 130%
Text Medium
text-size-medium
is-gray
1rem / 16px
Line-Height: 130%
Text Medium
text-size-medium
is-white
1rem / 16px
Line-Height: 130%
Text Medium
text-size-medium
is-italic
1rem / 16px
Line-Height: 130%
Text Small
text-size-small
0.875rem / 14px
Line-Height: 110%
Text Small
text-size-small
is-superscript
0.875rem / 14px
Line-Height: 110%
Text Small
text-size-small
is-subscript
0.875rem / 14px
Line-Height: 110%
- Ul List - item one
- Ul List - item two
- Ul List - item three
- Ol List - item one
- Ol List - item one
- Ol List - item one
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
margin-bottom
+
margin-small
0.625rem / 10px
margin-bottom
+
margin-medium
1.875rem / 30px
spacer-small
1.875rem / 30px
spacer-medium
3.125rem / 50px
spacer-large
6.25rem / 100px
spacer-huge
9.375rem / 150px
Our template utilizes a strategic gap system to maintain visual balance and hierarchy within structural layouts. Instead of hard-coding values into grids and flex containers, we use global gap classes. This allows for consistent horizontal and vertical spacing across all components and ensures a unified, responsive alignment.
Gap S
0.625rem / 10px
Gap M
1.25rem / 20px
Gap L
1.875rem / 30px
Gap XL
3.125rem / 50px