Web Style Guide
Menu
Colors
Primary Colors
#324742
#B1CCC6
#DC9334
#FFF4E5
Alternate Colors
#FCF4EA
#A4A697
#B6C2EF
#E27D53
Monochrome Colors
#333333
#828282
#E0E0E0
#FFF4E5
Typography Colors
Header Natural: #DC9334
Header Dark: #324742
Header Light: #FFF4E5
Paragraph Dark: #324742
Paragraph Light: #324742
Logos
Logo Full
Logo Icon
Typography
Headers
Montserrat
Body
Open Sans
Buttons
GT AMERICA
Desktop Fonts
Heading 1 (H1)
FONT SIZE: 48px | Font-weight: 600 | Line-Height: 58px
Header 2 (H2)
FONT SIZE: 36px | Font-weight: 600 | Line-Height: 46px
Header 3 (H3)
FONT SIZE: 32px | Font-weight: 600 | Line-Height: 42px
Header 4 (H4)
FONT SIZE: 28px | Font-weight: 600 | Line-Height: 38px
Header 5 (H5)
FONT SIZE: 24px | Font-weight: 600 | Line-Height: 34px
Header 6 (H6)
FONT SIZE: 20px | Font-weight: 600 | Line-Height: 30px
Paragraph
FONT SIZE: 16px | Font-weight: 400 | Line-Height: 26px
Menu Navigation
FONT SIZE: 18px | Font-weight: 500 | Line-Height: 28px
Tablet Fonts
Header 1 (H1)
FONT SIZE: 36px | Font-weight: 600 | Line-Height: 46px
Header 2 (H2)
FONT SIZE: 32px | Font-weight: 600 | Line-Height: 42px
Header 3 (H3)
FONT SIZE: 28px | Font-weight: 600 | Line-Height: 38px
Header 4 (H4)
FONT SIZE: 24px | Font-weight: 600 | Line-Height: 34px
Header 5 (H5)
FONT SIZE: 20px | Font-weight: 600 | Line-Height: 30px
Header 6 (H6)
FONT SIZE: 18px | Font-weight: 600 | Line-Height: 28px
Paragraph
FONT SIZE: 16px | Font-weight: 400 | Line-Height: 26px
Menu Navigation
FONT SIZE: 16px | Font-weight: 500 | Line-Height: 26px
Mobile Fonts
Header 1 (H1)
FONT SIZE: 32px | Font-weight: 600 | Line-Height: 42px
Header 2 (H2)
FONT SIZE: 28px | Font-weight: 600 | Line-Height: 38px
Header 3 (H3)
FONT SIZE: 24px | Font-weight: 600 | Line-Height: 34px
Header 4 (H4)
FONT SIZE: 20px | Font-weight: 600 | Line-Height: 30px
Header 5 (H5)
FONT SIZE: 18px | Font-weight: 600 | Line-Height: 28px
Header 6 (H6)
FONT SIZE: 16px | Font-weight: 600 | Line-Height: 26px
Paragraph
FONT SIZE: 16px | Font-weight: 400 | Line-Height: 26px
Menu Navigation
FONT SIZE: 16px | Font-weight: 500 | Line-Height: 26px
Buttons
Elements
Iconography Style
Info Box
Shadow
Outlined
Solid Light
Solid Dark
Testimonial Card
Style 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Author Name
Author Designation
Style 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Author Name
Author Designation
Style 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Author Name
Author Designation
Author Card
Author Name
Author Experience & Designation
Author Name
Author Experience & Designation
Author Name
Author Experience & Designation
Author Name
Author Experience & Designation
Images
Background Left
Background Right
Basic
Shadow
Image & Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Page Header
THE NATURAL LAW
THE NATURAL LAW
THE NATURAL LAW
Section Padding
Desktop
Top/Bottom: 40px to 80px
Left/Right: 15px to 30px
Tablet
Top/Bottom: 20px to 60px
Left/Right: 10px to 30px
Mobile
Top/Bottom: 10px to 30px
Left/Right: 10px to 20px
Video
Placeholder with shadow
Placeholder without shadow
© 2023 The Natural Law | Privacy Policy | Terms of Use