Style Guide

Color

Neutral / Gray Scale

Black

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

          

          

            

            
Neutral 900

            
$color-neutral-900

            
var(--color-neutral-900)

            

          

          

            

            
Neutral 800

            
$color-neutral-800

            
var(--color-neutral-800)

            

          

          

            

            
Neutral 700

            
$color-neutral-700

            
var(--color-neutral-700)

            

          

          

            

            
Neutral 600

            
$color-neutral-600

            
var(--color-neutral-600)

            

          

          

            

            
Neutral 500

            
$color-neutral-500

            
var(--color-neutral-500)

            

          

          

            

            
Neutral 400

            
$color-neutral-400

            
var(--color-neutral-400)

            

          

          

            

            
Neutral 300

            
$color-neutral-300

            
var(--color-neutral-300)

            

          

          

            

            
Neutral 200

            
$color-neutral-200

            
var(--color-neutral-200)

            

          

          

            

            
Neutral 100

            
$color-neutral-100

            
var(--color-neutral-100)

            

          

          

            

            
White

            
$color-white

            
var(--color-white)

            

          

        

        
Primary Colors

        

          
          

            

            
Color Primary 500

            
(Primary Brand Color)

            
$color-primary-500

            
$color-primary

            
var(--color-primary-500)

            
var(--color-primary)

            

          

          

            

            
Color Orange Blaze

            
(Matty Brand Color)

            
$color-orange

            
$color-orange-blaze

            
var(--color-orange-blaze)

            
var(--color-orange)

            

          

          

            

            
Accent 200

            
(Secondary Brand Color)

            
$color-accent-200

            
$color-secondary

            
var(--color-accent-200)

            
var(--color-secondary)

            

          

          

            

            
Accent 100

            
$color-accent-100

            
var(--color-accent-100)

            

          

          
        

        
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-orange

        

        

          
.theme-secondary

        

        

          
.theme-gray

        

        

          
.theme-light-gray

        

        

          
.theme-light

        

      

      

        
Buttons

        
Button Small

        

          

            
            
.btn-primary.btn-sm

          

          

            
            
.btn-secondary.btn-sm

          

        

        
Button Medium

        

          

            
            
.btn-primary.btn-md

          

          

            
            
.btn-secondary.btn-md

          

          

            

              

  


            

            
.btn-cta.btn-md

          

        

        
Button Large (Default)

        

          

            
            
.btn-primary.btn-lg

          

          

            
            
.btn-secondary.btn-lg

          

          

            

  


            
.btn-cta.btn-lg

          

        

        
Button Full

        
        
.btn-primary.btn-full

        


        
Icon Buttons

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

        
{ % render 'button', class: 'btn-cta', btn_text: 'CTA Button', has_icon: true, button_link: 'https://google.com/' % }

        

          

            

  


          

          

            

  


          

          

            

  


          

        

        
Disabled Buttons

        

          

            
            
.btn-primary[disabled]

          

          

            
            
.btn-secondary[disabled]

          

          

            

  


            
.btn-cta .disabled

          

        

      

      

        
Typography

        
Fonts

        

          

            
Maison Neue Demi

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-heading
            
"maison neue demi, sans-serif;

          

          

            
Maison Neue Book

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-base
            
"maison neue book, sans-serif;

          

          

            
Maison Neue Mono

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-alt
            
"maison neue mono, sans-serif;

          

        

        

        
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

        

        
Paragraph Styles

        

          

            
Paragraph Default (Medium)

            
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 Default Bold (Medium)

            
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 X-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 X-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 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 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.

          

        

        

        
blockquote

        

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

        

        

        
captions

        
Caption-lg

        
Caption-sm

        

        
monspaced links

        Caption-lg


        Caption-sm
        

        
monspaced links disabled

        Caption-lg


        Caption-sm
      

      

        
Theming

          
.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-secondary

          
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-light-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-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
          

          

            

              
            

            

              
            

          

          

            

              

  


            

            

              

  


            

            

              

  


            

          

          

            

              
            

            

              
            

          

          

            

              

  


            

            

              

  


            

            

              

  


            

          

        

      

        
Forms

        

          

            

              
              
            

            

              
              
              
This field is required.
            

          

          

            

              
              
            

          

          

            
            
          

          

            
            
          

          

            
            

              
              

            

          

          

            

              Checkboxes
              

                
                
              

              

                
                
                
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
  • 

  • 

  • 


  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 
  


  • 

  • 
  
  
  

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 


      

    

    

      

        
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