Styleguide

Color

Brand Colors

Color Primary

$color-primary
var(--color-primary)

          

          

            

            
Color Secondary

            
$color-secondary

            
var(--color-secondary)

            

          

        

        
Gray Scale

        

          

            

            
Black

            
$color-black

            
var(--color-black)

            

          

          

            

            
Gray 900

            
$color-gray-900

            
var(--color-gray-900)

            

          

          

            

            
Gray 800

            
$color-gray-800

            
var(--color-gray-800)

            

          

          

            

            
Gray 700

            
$color-gray-700

            
var(--color-gray-700)

            

          

          

            

            
Gray 600

            
$color-gray-600

            
var(--color-gray-600)

            

          

          

            

            
Gray 500

            
$color-gray-500

            
var(--color-gray-500)

            

          

          

            

            
Gray 400

            
$color-gray-400

            
var(--color-gray-400)

            

          

          

            

            
Gray 300

            
$color-gray-300

            
var(--color-gray-300)

            

          

          

            

            
Gray 200

            
$color-gray-200

            
var(--color-gray-200)

            

          

          

            

            
Gray 100

            
$color-gray-100

            
var(--color-gray-100)

            

          

          

            

            
White

            
$color-white

            
var(--color-white)

            

          

        

        
Typography Colors

        

          

            

            
Typography Base

            
$color-typography-base

            
var(--color-typography-base)

            

          

          

            

            
Typography Inverse

            
$color-typography-inverse

            
var(--color-typography-inverse)

            

          

          

            

            
Link

            
$color-link

            
var(--color-link)

            

          

          

            

            
Link Hover

            
$color-link-hover

            
var(--color-link-hover)

            

          

        

        
Layout + Component Colors

        

          

            

            
Background Base

            
$color-background-base

            
var(--color-background-base)

            

          

          

            

            
Background Light Gray

            
$color-background-light-gray

            
var(--color-background-light-gray)

            

          

          

            

            
Background Gray

            
$color-background-gray

            
var(--color-background-gray)

            

          

          

            

            
Background Inverse

            
$color-background-inverse

            
var(--color-background-inverse)

            

          

          

            

            
Border

            
$color-border

            
var(--color-border)

            

          

          

            

            
Input Border

            
$color-input-border

            
var(--color-input-border)

            

          

        

        
Support + Utility Colors

        

          

            

            
Success 300

            
$color-success-300

            
var(--color-success-300)

            

          

          

            

            
Success 200

            
$color-success-200

            
var(--color-success-200)

            

          

          

            

            
Success 100

            
$color-success-100

            
var(--color-success-100)

            

          

          

            

            
Warning 300

            
$color-warning-300

            
var(--color-warning-300)

            

          

          

            

            
Warning 200

            
$color-warning-200

            
var(--color-warning-200)

            

          

          

            

            
Warning 100

            
$color-warning-100

            
var(--color-warning-100)

            

          

          

            

            
Alert 300

            
$color-alert-300

            
var(--color-alert-300)

            

          

          

            

            
Alert 200

            
$color-alert-200

            
var(--color-alert-200)

            

          

          

            

            
Alert 100

            
$color-alert-100

            
var(--color-alert-100)

            

          

          

            

            
Error

            
$color-error

            
var(--color-error)

            

          

          

            

            
Focus

            
$color-focus

            
var(--color-focus)

            

          

          

            

            
Focus Inverse

            
$color-focus-inverse

            
var(--color-focus-inverse)

            

          

        

      

      

        
Background Themes

        

          
.theme-dark

        

        

          
.theme-primary

        

        

          
.theme-gray

        

        

          
.theme-light-gray

        

        

          
.theme-light

        

      

      

        
Buttons

        
Button Regular

        

          

            
            
.btn-primary

          

          

            
            
.btn-secondary

          

          

            
            
.btn-cta

          

        

        
Button Full

        
        
.btn-primary.btn-full

        


        
Disabled Buttons

        

          

            
            
.btn-primary[disabled]

          

          

            
            
.btn-secondary[disabled]

          

          

            
            
.btn-cta[disabled]

          

        

        
Icon Buttons

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

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

        

          

            

  


          

          

            

  


          

        

      

      

        
Typography

        
Fonts

        

          

            
Didot Medium

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-headings

            var(--font-family-headings)
            
"Didot", serif

          

          

            
Didot Medium Italic

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-headings-italic

            var(--font-family-headings-italic)
            
"Didot Italic", serif

          

          

            
Sabon

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-body

            var(--font-family-body)
            
"Sabon LT Pro Regular", serif;

          

          

            
Sweet Sans Pro Medium

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-actions

            var(--font-family-actions)
            
"Sweet Sans Pro Medium", 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

        

        
Subtitles

        

          

            
Subtitle Large

            
.subtitle-lg

          

          

            
Subtitle Small

            
.subtitle

          

        

        

        
Paragraph Styles

        

          

            
Paragraph 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

          

          

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

          

        

        

        

          

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

          

        

        

        
Captions

        

          

            
Caption Large

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

            
.caption-lg

          

          

          
Caption Small

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

            
.caption

          

        

      

      

        
Theming

          
.theme-dark

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

          
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

          
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

          
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

          
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.
            

          

          

            
            
          

          

            
            
          

          

            
            

              
              

            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              
              
            

          

          

            

              Radio Buttons
              

                
                
              

              

                
                
              

              

                
                
              

              

                
                
              

            

          

          

            
            
            
          

        

        
Alerts

        

          

 Default Alert

        

        

          

 Error Alert

          
Additional Error Content

        

        

          

 Success Alert

        

      

      

        
Iconography

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

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

        
Social Icons
  • 

  • 

  • 

  • 

  • 
    
    

  • 

  • 

  • 

  • 


        
General Icons
  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 


        
Small Icons
  • 

  • 

  • 

  • 

  • 

  • 

  • 


        
Large Icons
  • 

  • 

  • 

  • 


      

    

    

      

        
Container & Spacing

      

      

        

          
Container Full

          
.container

        

      

      

        

          
Container Large

          
.container-lg

        

      

      

        

          
Container Medium (Standard)

          
.container-md

        

      

      

        

          
Container Small

          
.container-sm

        

      

      

        
Scalable Containers

      

      

        

          
.container-lg.scalable

        

      

      

        

          
.container-md.scalable

        

      

      

        

          
.container-sm.scalable

        

      


      

        

          
Stacked Component

          
.stacked-component

        

      

      

        

          
Another Stacked Component

          
.stacked-component

        

      

      

        

          
Stacked Components with Same Theme

          
.stacked-component

        

      

      

        

          
This section has no padding-top

          
.stacked-component + .stacked-component