Go to main site

ChartMogul Website Styleguide

Welcome to the ChartMogul Website Styleguide where we document web interface components used throughout ChartMogul website.

AssetsColor

These are some of the colors we often use. Feel free to use variations of these colors. We are open about experimenting with different colors so please don’t limit yourself with the colors specified here.

#13324B

90%

75%

60%

45%

30%

#3DBEC7

90%

75%

60%

45%

30%

#245AFF

90%

75%

60%

45%

30%

#FF4370

90%

75%

60%

45%

30%

#7140D1

90%

75%

60%

45%

30%

#ffad66

90%

75%

60%

45%

30%

#ffe924

90%

75%

60%

45%

30%

#FF9394

90%

75%

60%

45%

30%

AssetsIcon

Straight lines and edges are integral part of ChartMogul’s visual language. However, in places like social media where control is limited, we allow use of rounded containers.

Company values

  • Excellence

  • Integrity

  • Ownership

  • Impact

  • Empathy

AssetsFont

Noto Sans is the primary font family for our website.

                    
                        font-family:'Noto Sans', 'Trebuchet MS', sans-serif !default;
                    
                

Build a better business, faster

                    
                        h1.hero-tagline  {  font-size: 37px; font-weight: semibold;  }
                    
                

Smart companies use ChartMogul to drive subscription business growth and create more profitable customer relationships.

                    
                        p.hero-description  {  font-size: 18px; font-weight: normal;  }
                    
                

Get answers — fast

                    
                        h1.section-title  {  font-size: 30px; font-weight: semibold;  }
                    
                

Are we on track to hit our ARR target? Which plan has the best customer LTV? How is marketing contributing to revenue? Use our pre-built filters — or create your own — and quickly surface answers to any question.

                    
                        p.section-description  {  font-size: 15px; font-weight: normal;  }
                    
                

CSS ComponentsButton

                        
                            

<a class=“btn btn-primary”>...</a>

<a class=“btn btn-primary-white”>...</a>

<a class=“btn btn-border”>...</a>

                        
                            

.btn-primary { background-color: #000; transition: all .2s ease-in-out; }

.btn-primary:hover { background-color: lighten(#000, 15%); }

.btn-primary-white { background-color: #fff; transition: all .2s ease-in-out; }

.btn-primary-white:hover { background-color: darken(#fff, 15%); }

.btn-border { background: none; color: #000; border: 1px solid #000; transition: all .2s ease-in-out; }

.btn-border:hover { background-color: #000; color: #fff; }

                        
                            

<a class=“btn btn-text--more">...</a>

                        
                            

.btn-text--more { color: #000; text-decoration: none; display: inline-block; padding-bottom: 10px; }

.btn-text--more:hover { border-bottom: 1px solid #000; }

CSS ComponentsGrid

We use Bootstrap 3 as a base of our grid system.
To learn more about this particular version of Bootstrap, visit getbootstrap.com/docs/3.3/css/

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)

CSS ComponentsForm

                        
                            

<div class="form-group">

<select class="form-control”>

<option>...</option>

</select>

</div>


<div class="form-group">

<input class="form-control”>

</div>

                        
                            

.form-control { height: 47px; padding: 14px; border-radius: 0; border: 1px solid #C8C8C8; box-shadow: none; }

.form-control:focus { outline: 0; padding: 14px; border-radius: 0; border-color: #58CFB3; }

CSS ComponentsAlert

Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus
                        
                            

<div class="alert alert-info">Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>

<div class="alert alert-warning">Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>

<div class="alert alert-danger">Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>

<div class="alert alert-success">Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>