Style Guide
A curated collection of design principles, visual assets, and pre-built components that form the visual foundation of the Altus template. Use this guide to ensure consistency while scaling your website.
Color Styles
Primary Colors
#f9f7f5
#000000
#b87333
#fFFFFF
Secondary Colors
#000000 19%
#000000 25%
#000000 60%
#fFFFFF 60%
#24d366
Typography
Aa
Outfit
ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890(,.;:?!$&*)
Aa
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890(,.;:?!$&*)
Heading
heading-style-h1
3.125rem
Line-Height: 120%
heading-style-h1
is-dark
3.125rem
Line-Height: 120%
heading-style-h2
2.5rem
Line-Height: 120%
heading-style-h2
is-white
2.5rem
Line-Height: 120%
heading-style-h2
is-center
2.5rem
Line-Height: 120%
heading-style-h3
2.188rem
Line-Height: 120%
heading-style-h4
2.063rem
Line-Height: 120%
heading-style-h5
1.875rem
Line-Height: 120%
heading-style-h6
1.563rem
Line-Height: 120%
Paragraph
Text Gigantic
text-size-gigantic
9.4rem / 150px
Line-Height: 90%
Text Hero
text-size-hero
8rem / 120px
Line-Height: 100%
Text Display
text-size-display
3.125rem / 50px
Line-Height: 120%
Text Huge
text-size-huge
1.25rem / 20px
Line-Height: 120%
Text Large
text-size-large
1.125rem / 18px
Line-Height: 120%
Text Medium
text-size-medium
1rem / 16px
Line-Height: 130%
Text Small
text-size-small
0.875rem / 14px
Line-Height: 120%
Paragraph - Combo Classes
Text Display
text-size-display
is-center
Text Display
text-size-display
is-dark
Text Huge
text-size-huge
is-center
Text Huge
text-size-huge
is-gray
Text Huge
text-size-huge
is-white
Text Medium
text-size-medium
is-gray
Text Medium
text-size-medium
is-white
Text Medium
text-size-medium
is-width
Text Small
text-size-small
is-badge
Text Small
text-size-small
is-center
Text Small
text-size-small
is-grey
Text Small
text-size-small
is-white
Spacing System (Paddings and Margins)
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-small
0.7rem / 11px
padding-top
+
is-medium
3.125rem / 50px
padding-top
+
is-large
9.375rem / 150px
padding-botton
+
is-small
1.25rem / 20px
padding-botton
+
is-medium
6.25rem / 100px
padding-botton
+
is-large
9.375rem / 150px
Grid & Flexbox System (Gaps)
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 XXS
0.313rem / 5px
Gap XS
0.625rem / 10px
Gap S
1.25rem / 20px
Gap S Plus
1.875rem / 30px
Gap M
3.125rem / 50px
Gap L
3.75rem / 60px
Gap XL
5.625rem / 90px
Gap Huge
12.5rem / 200px