Go to main site

ChartMogul Website Styleguide

Building a website for better customer relationships is complicated, but crafting beautifully simple web components doesn’t have to be. Welcome to the ChartMogul Website Styleguide where we grow interface components for ChartMogul website.

AssetsColor

#13324B

90%

75%

60%

45%

30%

#49c7aa

90%

75%

60%

45%

30%

#7140D1

90%

75%

60%

45%

30%

#f36f6d

90%

75%

60%

45%

30%

#245AFF

90%

75%

60%

45%

30%

#ffad66

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

Gotham is the primary font family for our website. Alternatively, Open Sans — a free, open-source font — may be used where Gotham is not an option.

                    
                        font-family:”Gotham A","Gotham B","Open Sans","Trebuchet MS",sans-serif;
                    
                

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>