Style Guide

Logos

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 100

            
$color-primary-100

            
var(--color-primary-100)

            

          

          

            

            
Color Primary 200

            
$color-primary-200

            
var(--color-primary-200)

            

          

          

            

            
Color Primary 300

            
$color-primary-300

            
var(--color-primary-300)

            

          

        

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

        

        

          
.theme-light-textured

        

        

          
.theme-light-textured-fade

        

        

          
.theme-dark

        

        

          
.theme-dark-textured

        

        

          
.theme-dark-transparent

        

      

      

        
Buttons

        
Button Regular

        

          

            
            
.btn-primary

          

          

            
            
.btn.btn-secondary

          

          

            
            
.btn-tertiary-red

          

          

            
            
.btn-tertiary-white

          

          

            
            
.btn-cta

          

        

        
Button Small

        

          

            
            
.btn-primary.btn-sm

          

          

            
            
.btn-secondary.btn-sm

          

          

            
            
.btn-tertiary-red.btn-sm

          

          

            
            
.btn-tertiary-white.btn-sm

          

          

            
            
.btn-cta.btn-sm

          

        

        
Button Large

        

          

            
            
.btn-primary.btn-lg

          

          

            
            
.btn-secondary.btn-lg

          

          

            
            
.btn-tertiary-red.btn-lg

          

          

            
            
.btn-tertiary-white.btn-lg

          

          

            
            
.btn-cta.btn-lg

          

        

        
Button Full

        
        
.btn-primary.btn-full

        


        
Disabled Buttons

        

          

            
            
.btn-primary[disabled]

          

          

            
            
.btn.btn-secondary[disabled]

          

          

            
            
.btn-tertiary-red[disabled]

          

          

            
            
.btn-tertiary-white[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/' % }

        

          

            

  

  
  Primary
  
    
      

    
  

  


          

          

            

  

  
  Secondary Caret
  
    
      

    
  

  


          

          

            

  

  
    
    

  
  
  Tertiary Red Icon Left
  

  


          

          

            

  

  
    
    

  
  
  Tertiary White Icon Left
  

  


          

          

            

  

  
  CTA Button
  
    
      

    
  

  


          

        

      

      

        
Typography

        
Fonts

        

          

            
IBM Plex Sans

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-heading
            
"IBM Plex Sans", "Arial Black", "Arial Bold", Gadget, sans-serif;

          

          

            
IBM Plex Sans

            

              ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

              01234567890 !@$%”?,&
            

            $font-family-base
            
"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

        

        
Paragraph Styles

        

          

            
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.

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

          

        

        

        
blockquote

        

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

        

        
Caption

      

      

        
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.

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

          Dark transparent 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.

          Light 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-account' % }

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

        
General Icons
  • 

  • 

  • 

  • 

  • 

  • 


        
UI Icons
  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 


        
Social Icons
  • 

  • 

  • 

  • 

  • 
    
    

  • 

  • 

  • 

  • 


        
Alert Icons
  • 

  • 

  • 

  • 


        
Player 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

        

      

      

        

          
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