STYLE GUIDE

Private Club Website

Suggested Fonts

 

H1 Heading Inter Tight 90/59px, #600

H2 Headin Inter Tight 64/45px, #500

H3 Heading Inter Tight 32px, #400

H4 Heading Inter Tight 28px, #300

H5 Heading Inter Tight 24px, #500
H6 Heading Source Sans Pro 18px/1.5, #400

PARAGRAPH TEXT IS SOURCE SANS PRO 22px/1.5, #400 - Example of standard link class. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

  • Lorem Ipsum Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

  • Consectetur Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

  1. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

  2. Lorem Ipsum Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Global Styles

Corner Radius of Images, Cards, Backgrounds: 10px

No animations used

 

Hero Style Settings

Row Spacing

Desktop Margin: 150px, 50px 
Desktop Padding: 0px

Tablet Margin: 125px, 50px
Tablet Padding: 0px

Mobile Margin: 100px, 50px
Mobile Padding: 0px

Column One Spacing

All Margins: 0px, 0px

All Padding: 0px, 0px

Column Two Spacing (when using a col background color)

All Margins: 0px, 0px

Desktop & Tablet Padding: 30px

Mobile Padding: 20px

Button Use

CTAs

Example buttons:
cta-primary →
cta-secondary →
cta-five →

Forms

Form buttons will use the "CTA-Primary" class as a default. If you need a white button, use the form option to "Select Alt Button" and the CTA-Five (white solid) will be used.