Style Guide
A curated collection of design principles, visual assets, and pre-built components that form the visual foundation of the Vellum template. Use this guide to ensure consistency while scaling your website.
Color Styles
Primary Colors
#ff4824
#0d0d0d
#ffffff
Secondary Colors
#a09a9a
#1b1b1b
#404040
#e5e5e5
Typography
Aa
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Aa
Manrope
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Heading
heading-style-h1
4.375rem
Line-Height: 130%
heading-style-h2
3.75rem
Line-Height: 130%
heading-style-h3
3.438rem
Line-Height: 140%
heading-style-h4
2.813rem
Line-Height: 140%
heading-style-h5
2.188rem
Line-Height: 140%
heading-style-h6
1.563rem
Line-Height: 140%
Paragraph
Text Display
text-size-display
2.5rem / 40px
Line-Height: 130%
Text Huge
text-size-huge
1.25rem / 20px
Line-Height: 140%
Text Large
text-size-large
1.125rem / 18px
Line-Height: 140%
Text Medium
text-size-medium
1rem / 16px
Line-Height: 140%
Paragraph - Combo Classes
Text Display
text-size-display
is-center
Alignment: Center
Text Display
text-size-display
is-red
Color: Brand Accent
Text Huge
text-size-huge
is-red
Color: Brand Accent
Text Large
text-size-large
is-center
Alignment: Center
Text Large
text-size-large
is-muted
Color: Text Muted
Text Large
text-size-large
is-red
Color: Brand Accent / Text Transform: Uppercase (All Caps)
Text Medium
text-size-medium
is-center
Alignment: Center
Text Medium
text-size-medium
is-right
Alignment: Right
Text Medium
text-size-medium
is-tag
Layout: Padding, Border & Interactive Hover Effect
Text Medium
text-size-medium
is-white
Color: Text Primary
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
3rem / 48px
padding-top
+
is-medium
6.25rem / 100px
padding-top
+
is-xlarge
11.25rem / 180px
padding-bottom
+
is-small
3rem / 48px
padding-bottom
+
is-medium
8.75rem / 140px
padding-bottom
+
is-xlarge
11.25rem / 180px
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 XS
0.625rem / 10px
Gap S
0.938rem / 15px
Gap S Plus
1.25rem / 20px
Gap M
1.563rem / 25px
Gap M Plus
1.875rem / 30px
Gap L
2.5rem / 40px
Gap XL
3.125rem / 50px
Gap XXL
5.625rem / 90px
Gap Huge
6.25rem / 100px
Buttons