Color

Primary and Accent Colors

MC Green

HEX: #6ea523 SASS: $green

MC Orange

HEX: #FF8400 SASS: $orange

Grayscale

Gray

HEX: #555555 SASS: $gray

Mid gray

HEX: #8f8f8f SASS: $midgray

Light gray

HEX: #CCCCCC SASS: $lightgray

Lightest gray

HEX: #eeeeee SASS: $lightestgray

Mastery Colors (used in the tracker)

Mastery Red

HEX: #E31212 SASS: $mred

Mastery Yellow

HEX: #E3DC12 SASS: $myellow

Mastery Green

HEX: #0BBC18 SASS: $mgreen

Mastery Blue

HEX: #1566b2 SASS: $mblue

Typography

H1 - 24px Open Sans Light - used as page title

H2 - 18px Open Sans Semibold - used as section headlines

H3 - 16px Open Sans Semibold

H4 - 14px Open Sans Semibold - paragraph headings

<h1>H1 - 24px Open Sans Light - used as page title</h1>
<h2>H2 - 18px Open Sans Semibold - used as section headlines</h2>
<h3>H3 - 16px Open Sans Semibold</h3>
<h4>H4 - 14px Open Sans Semibold - paragraph headings</h4>

H2 Spaced - used for section headings

H3 Spaced - 16px Open Sans Semibold

<h2 class="spaced">H2 Spaced - 24px Open Sans Light - used as page title</h2>
<h3 class="spaced">H3 - 18px Open Sans Semibold - used as section headlines</h3>

Paragraph Text - 14px Open Sans Regular - used as body text for everything everywhere. Lorem ipsum dolor sit amet, sed ne falli tollit saperet. Sea ad malis vulputate, eam laoreet patrioque theophrastus at, idque discere mea eu. Iracundia mediocritatem eu his, graeco facilisi usu no. Meis quodsi timeam eos te. Usu inani vocibus ex, et cum nostrud epicuri complectitur. Malis facer expetenda quo ex, ne falli perpetua has.

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

Forms

Label for the Input

<div>
    <label>Label for the Input</label>
    <input type="text" size="35" placeholder="placeholder" />
</div>

Label for Input Group

<div>
    <label>Label for Input Group</>
    <div class="input-group">
        <input type="text" />
        <button class="btn">Button<button>
    </div>
</div>

Label for the Select

<div>
    <label>Label for the Select</label>
    <select>
        <option>Option1</>
        <option>Option2</>
        <option>Option3</>
    </select>
</div>

Button Group

<div class="buttonGroup">
    <button class="btn">Action 1</button>
    <button class="btn">Action 2</button>
    <button class="btn">Action 3</button>
</div>

Checkbox Group

This is the label This is another label This is even yet another label

<div>
    <label>
        <input type="checkbox" name="name1">
        <span>This is the label</span>
    </label>
    <label>
        <input type="checkbox" name="name2">
        <span>This is another label</span>
    </label>
    <label>
        <input type="checkbox" name="name3">
        <span>This is even yet another label</span>
    </label>
</div>

Radio Group

This is the label This is another label This is even yet another label

<div>
    <label>
        <input type="radio" name="name">
        <span>This is the label</span>
    </label>
    <label>
        <input type="radio" name="name">
        <span>This is another label</span>
    </label>
    <label>
        <input type="radio" name="name">
        <span>This is even yet another label</span>
    </label>
</div>

SlideOut

Advanced Settings

This is the label This is another label This is even yet another label

<div class="slideOut">
    <a class="trigger">
        Click to slide this out 
        <img src="img/icon-down-grey.svg" class="icon" alt="Open">
    </a>
    <div class="slideContent">
        <!-- CONTENT HERE -->
    </div>
</div>

Buttons

Submit This is a basic button This is an outline button

<a href="" class="btn-primary">Submit</a>
<a href="" class="btn">This is a basic button</a>
<a href="" class="btn-secondary">This is an outline button</a>

<a href="" class="btn-primary">
    <div class="spinner light">
        <div class="bounce1">
        <div class="bounce2">
        <div class="bounce3">
    <div>
    Loading
</a>
<a href="" class="btn">
    <div class="spinner dark">
        <div class="bounce1">
        <div class="bounce2">
        <div class="bounce3">
    <div>
    This is a basic button
</a>
<a href="" class="btn-secondary">
    <div class="spinner light">
        <div class="bounce1">
        <div class="bounce2">
        <div class="bounce3">
    <div>
    This is an outline button
</a>

Modals

Launch Modal
<a class="btn openBigDialog" href="/partials/modal1.html">Launch Modal</a>