Style Guide

Color

Neutral / Gray Scale

Black

$color-black
var(--color-black)

          

          

            

            
Neutral 900

            
$color-neutral-900

            
var(--color-neutral-900)

            

            
Used to create gradients, overlays, other places were a pure black is needed.

          

          

            

            
Neutral 800

            
$color-neutral-800

            
var(--color-neutral-800)

            

            
Off-black typically used for base text color as well as negative theme background.

          

          

            

            
Neutral 700

            
$color-neutral-700

            
var(--color-neutral-700)

            

          

          

            

            
Neutral 600

            
$color-neutral-600

            
var(--color-neutral-600)

            

            
Accessible minimum (4.5:1) for gray text on gray-200 background

          

          

            

            
Neutral 500

            
$color-neutral-500

            
var(--color-neutral-500)

            

          

          

            

            
Neutral 400

            
$color-neutral-400

            
var(--color-neutral-400)

            

            
Accessible minimum with 3:1 contrast ratio for large (24px) or bold (20px) text. 

          

          

            

            
Neutral 300

            
$color-neutral-300

            
var(--color-neutral-300)

            

            
Disabled

          

          

            

            
Neutral 200

            
$color-neutral-200

            
var(--color-neutral-200)

            

            
Gray Background

          

          

            

            
Neutral 100

            
$color-neutral-100

            
var(--color-neutral-100)

            

          

          

            

            
White

            
$color-white

            
var(--color-white)

            

          

        

        
Primary Colors

        

          

            

            
Color Primary 100

            
$color-primary-100

            
var(--color-primary-100)

            

            
Off-white Background

          

          

            

            
Color Primary 200

            
$color-primary-200

            
var(--color-primary-200)

            

          

          

            

            
Color Primary 300

            
$color-primary-300

            
var(--color-primary-300)

            

          

          

            

            
Color Primary 400

            
$color-primary-400

            
var(--color-primary-400)

            

          

          

            

            
Color Primary 500

            
(Primary Brand Color)

            
$color-primary-500

            
$color-primary

            
var(--color-primary-500)

            
var(--color-primary)

            

          

          

            

            
Color Primary 600

            
$color-primary-600

            
var(--color-primary-600)

            

          

        

        
Typography Colors

        

          

            

            
Text Primary

            
$color-text-primary

            
var(--text-primary)

            

          

        

        
Layout + Component Colors

        

          

            

            
Border

            
$color-border

            
var(--color-border)

            

          

        

        
Support + Utility Colors

        

          

            

            
Success 400

            
$color-success-400

            
var(--color-success-400)

            

          

          

            

            
Success 300

            
$color-success-300

            
$color-success

            
var(--color-success-300)

            
var(--color-success)

            

          

          

            

            
Success 200

            
$color-success-200

            
var(--color-success-200)

            

          

          

            

            
Success 100

            
$color-success-100

            
var(--color-success-100)

            

          

          

            

            
Warning 400

            
$color-warning-400

            
var(--color-warning-400)

            

          

          

            

            
Warning 300

            
$color-warning-300

            
var(--color-warning-300)

            

          

          

            

            
Warning 200

            
$color-warning-200

            
$color-warning

            
var(--color-warning-200)

            
var(--color-warning)

            

          

          

            

            
Warning 100

            
$color-warning-100

            
var(--color-warning-100)

            

          

          

            

            
Error 400

            
$color-error-400

            
var(--color-error-400)

            

          

          

            

            
Error 300

            
$color-error-300

            
$color-error

            
var(--color-error-300)

            
var(--color-error)

            

          

          

            

            
Error 200

            
$color-error-200

            
var(--color-error-200)

            

          

          

            

            
Error 100

            
$color-error-100

            
var(--color-error-100)

            

          

          

            

            
Focus

            
$color-focus

            
var(--color-focus)

            

          

          

            

            
Focus Inverse

            
$color-focus-negative

            
var(--color-focus-negative)

            

          

        

      

      

        
Background Themes

        

          
.theme-dark

        

        

          
.theme-gray

        

        

          
.theme-light

        

      

      

        
Buttons

        
Button Regular

        

          

            
            
.btn-primary

          

          

            
            
.btn-secondary

          

          

            
            
.btn-tertiary

          

          

            
            
.btn-cta

          

        

        
Button Small

        

          

            
            
.btn-primary.btn-sm

          

          

            
            
.btn-secondary.btn-sm

          

          

            
            
.btn-tertiary.btn-sm

          

          

            
            
.btn-cta.btn-sm

          

        

        
Button Large

        

          

            
            
.btn-primary.btn-lg

          

          

            
            
.btn-secondary.btn-lg

          

          

            
            
.btn-tertiary.btn-lg

          

          

            
            
.btn-cta.btn-lg

          

        

        
Button Full

        
        
.btn-primary.btn-full

        


        
Disabled Buttons

        

          

            
            
.btn-primary[disabled]

          

          

            
            
.btn-secondary[disabled]

          

          

            
            
.btn-tertiary[disabled]

          

          

            
            
.btn-cta[disabled]

          

        

        
Icon Buttons

        
There is a button snippet to make including buttons with icons easier

        
{ % render 'button', class: 'btn-secondary btn-sm', btn_text: 'Learn More', has_icon: true, icon_name: 'caret-right', button_link: 'https://google.com/' % }

        

          

            

  


          

          

            

  


          

          

            

  


          

          

            

  


          

        

        
Slider Buttons

        
.slider-button.slider-arrow.slider-arrow-prev

        

          

            
            
          

        

        
.slider-button.slider-arrow.slider-arrow-prev.arrow-secondary

        

          

            
            
          

        

      

      

        
Typography

        
Fonts

        

          

            
Bebas Neue Pro Bold

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-heading
            
"Bebas Neue Pro", "Arial Black", "Arial Bold", Gadget, sans-serif;

          

          

            
Figtree

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-base
            
"Gotham SSm", "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

          

        

        

        
Display Styles

        
Display 1

        
.display-1

        
Display 2

        
.display-2

        

        
Header Styles

        
H1 Header style

        
.heading-1

        
H2 Header style

        
.heading-2

        
H3 Header style

        
.heading-3

        
H4 Header style

        
.heading-4

        
H5 Header style

        
.heading-5

        
H6 Header Style

        
.heading-6

        

        
Scalable Header Styles

        
H1 Scalable

        
.heading-1.scalable

        
H2 Scalable

        
.heading-2.scalable

        
H3 Scalable

        
.heading-3.scalable

        
H4 Scalable

        
.heading-4.scalable

        
H5 Scalable

        
.heading-5.scalable

        
H6 Scalable

        
.heading-6.scalable

        

        
Subheading

        
Subheading Large

        
.subheading-lg

        
Subheading Medium (Default)

        
.subheading-md

        
Subheading Small

        
.subheading-sm

        

        

        
Paragraph Styles

        

        

          

            
Paragraph Large

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

          

            
Paragraph Large Bold

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

        

        

        

          

            
Paragraph Medium (Default)

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

            
Link inside body copy should look like this.

          

          

            
Paragraph Medium Bold (Default)

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

            
Link inside body copy should look like this.

          

        

        

        

          

            
Paragraph Small

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

          

            
Paragraph Small Bold

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

        

        

        

          

            
Paragraph Extra Small

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

          

            
Paragraph Extra Small Bold

            
Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          

        

        

        
blockquote

        

          
Remember, if you don't do it this year, you'll be one year older when you do.

        

        
Caption

      

      

        
Theming

          
.theme-light

          
paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

        

          
.theme-gray

          
paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

        

          
.theme-dark

          
paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

        

          
.theme-dark-transparent

          
paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

          Link
          

          

            

              
            

            

              
            

            

              
            

            

              
            

          

        

      

        
Forms

        

          

            

              
              
            

            

              
              
              
This field is required.
            

          

          

            
            
          

          

            
            
          

          

            
            

              
              

            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
              
This field is required.
            

          

          

            

              Radio Buttons
              

                
                
              

              

                
                
              

              

                
                
              

              

                
                
                
This field is required.
              

            

          

          

            
            
            
          

        

        
Alerts

        

          

 Default Alert

        

        

          

 Error Alert

          
Additional Error Content

        

        

          
 Success Alert

        

      

      

        
Iconography

        
Snippet usage:
        
{ % render 'icon-user' % }

        
If in a loop:  
{ % include 'icon-user' % }

        
Social Icons
  • 
  


  • 


  • 


        
General Icons
  • 

  • 


  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 



  • 

  • 

  • 


        
Alert Icons
  • 

  • 

  • 

  • 


  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 


        
Logos

      

    

    

      

        
Container & Spacing

      

      

        

          
Container Full

          
.container

        

      

      

        

          
Container Large

          
.container-lg

        

      

      

        

          
Container Medium

          
.container-md

        

      

      

        

          
Container Small

          
.container-sm

        

      

      

        
Scalable Containers

      

      

        

          
.container-lg.scalable

        

      

      

        

          
.container-md.scalable

        

      

      

        

          
.container-sm.scalable

        

      


      

        

          
Spaced Section

          
.stacked-component

        

      

      

        

          
Another Spaced Section, Medium Spacing

          
.stacked-component.spacing-md

        

      

      

        

          
Stacked Spaced Sections, Spacing Small, Same Theme

          
.stacked-component.spacing-sm

        

      

      

        

          
This section has no padding-top

          
.stacked-component.spacing-sm + .stacked-component.spacing-sm