<div class="row">
    <div class="col-xs-24">
        <section class="section" id="bootstrap-colors">
            <header class="section-header">
                <h1 class="section-title">
                    <a href="#bootstrap-colors">Bootstrap colors</a>
                </h1>
            </header>
            <p>These are the primary colors used throughout various Bootstrap controls. They've been altered to use MDL colors instead of Bootstrap colors.</p>
            <div class="row">
                <div class="col-md-12">
                    <div class="color color-fill-accent-vivid-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.brand-primary: $color-accent;
```
                    {{/markdown}}
                </div>
                <div class="col-md-12">
                    <div class="color color-fill-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.brand-success: $color-vivid-low;
```
                    {{/markdown}}
                </div>
                <div class="col-md-12">
                    <div class="color color-fill-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.brand-info: $color-vivid-low;
```
                    {{/markdown}}
                </div>
                <div class="col-md-12">
                    <div class="color color-fill-alert"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.brand-warning: $color-alert;
```
                    {{/markdown}}
                </div>
                <div class="col-md-12">
                    <div class="color color-fill-alert"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.brand-danger: $color-alert;
```
                    {{/markdown}}
                </div>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-xs-24">
        <section class="section" id="mdl-colors">
            <header class="section-header">
                <h1 class="section-title">
                    <a href="#mdl-colors">MDL colors</a>
                </h1>
            </header>
            <h3>Base colors</h3>
            <div class="row">
                <div class="col-md-12">
                    <div class="color color-white"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-white: #FFFFFF;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-black"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-black: #000000;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-accent"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-accent: #0078D7;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-alert"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-alert: #D02E00;
```
                    {{/markdown}}
                </div>
            </div>

            <h3>Background colors</h3>
            <div class="row">
                <div class="col-md-12">
                    <div class="color color-bg-light-vivid-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-light-vivid-high: $color-white;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-light-vivid-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-light-vivid-mid: #F2F2F2;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-light-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-light-vivid-low: #E5E5E5;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-light-neutral-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-light-neutral-high: #D9D9D9;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-light-neutral-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-light-neutral-mid: #CCCCCC;
```
                    {{/markdown}}
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="color color-bg-dark-vivid-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-dark-vivid-high: $color-black;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-dark-vivid-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-dark-vivid-mid: #191919;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-dark-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-dark-vivid-low: #262626;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-dark-neutral-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-dark-neutral-high: #333333;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-bg-dark-neutral-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-bg-dark-neutral-mid: #404040;
```
                    {{/markdown}}
                </div>
            </div>

            <h3>Fill colors</h3>
            <div class="row">
                <div class="col-md-12">
                    <div class="color color-fill-accent-vivid-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-vivid-high: $color-accent;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-vivid-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-vivid-mid: rgba($color-accent, 0.8);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-vivid-low: rgba($color-accent, 0.6);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-neutral-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-neutral-high: rgba($color-accent, 0.4);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-neutral-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-neutral-mid: rgba($color-accent, 0.3);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-neutral-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-neutral-low: rgba($color-accent, 0.2);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-dim-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-dim-high: rgba($color-accent, 0.15);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-dim-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-dim-mid: rgba($color-accent, 0.1);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-accent-dim-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-accent-dim-low: rgba($color-accent, 0.05);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-alert"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-alert: $color-alert;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-dim-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-dim-low: rgba($color-black, 0.05);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-dim-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-dim-mid: rgba($color-black, 0.1);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-neutral-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-neutral-low: rgba($color-black, 0.2);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-neutral-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-neutral-mid: rgba($color-black, 0.3);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-neutral-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-neutral-high: rgba($color-black, 0.4);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-vivid-low: rgba($color-black, 0.6);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-vivid-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-vivid-mid: rgba($color-black, 0.8);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-fill-vivid-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-fill-vivid-high: $color-black;
```
                    {{/markdown}}
                </div>
            </div>

            <h3>Line colors</h3>
            <div class="row">
                <div class="col-md-12">
                    <div class="color line color-line-accent-vivid-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-vivid-high: $color-accent;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-vivid-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-vivid-mid: rgba($color-accent, 0.8);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-vivid-low: rgba($color-accent, 0.6);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-neutral-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-neutral-high: rgba($color-accent, 0.4);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-neutral-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-neutral-mid: rgba($color-accent, 0.3);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-neutral-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-neutral-low: rgba($color-accent, 0.2);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-dim-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-dim-high: rgba($color-accent, 0.15);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-dim-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-dim-mid: rgba($color-accent, 0.1);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-accent-dim-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-accent-dim-low: rgba($color-accent, 0.05);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-alert"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-alert: $color-alert;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-dim-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-dim-low: rgba($color-black, 0.05);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-dim-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-dim-mid: rgba($color-black, 0.1);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-neutral-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-neutral-low: rgba($color-black, 0.2);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-neutral-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-neutral-mid: rgba($color-black, 0.3);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-neutral-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-neutral-high: rgba($color-black, 0.4);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-vivid-low"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-vivid-low: rgba($color-black, 0.6);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-vivid-mid"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-vivid-mid: rgba($color-black, 0.8);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color line color-line-vivid-high"></div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-line-vivid-high: $color-black;
```
                    {{/markdown}}
                </div>
            </div>

            <h3>Text colors</h3>
            <div class="row">
                <div class="col-md-12">
                    <div class="color color-type-primary">Primary</div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-primary: $color-black;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-type-secondary">Secondary</div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-secondary: rgba($color-black, 0.6);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-type-disabled">Disabled</div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-disabled: rgba($color-black, 0.2);
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-type-accent">Accent</div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-accent: $color-accent;
```
                    {{/markdown}}
                </div>

                <div class="col-md-12">
                    <div class="color color-type-alert">Alert</div>
                </div>
                <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-alert: $color-alert;
```
                    {{/markdown}}
                </div>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-xs-24">
        <section class="section" id="mdl-alt-colors">
            <header class="section-header">
                <h1 class="section-title">
                    <a href="#mdl-alt-colors">MDL alt colors</a>
                </h1>
            </header>
            <div class="section-body color-bg-dark-vivid-high p-xs">
                <h3 class="color-type-primary-alt">Alt fill colors</h3>
                <div class="row">
                    <div class="col-md-12">
                        <div class="color color-fill-dim-mid-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-dim-mid-alt: rgba($color-white, 0.1);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-fill-dim-high-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-dim-high-alt: rgba($color-white, 0.15);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-fill-neutral-low-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-neutral-low-alt: rgba($color-white, 0.2);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-fill-neutral-mid-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-neutral-mid-alt: rgba($color-white, 0.3);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-fill-neutral-high-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-neutral-high-alt: rgba($color-white, 0.4);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-fill-vivid-low-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-vivid-low-alt: rgba($color-white, 0.6);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-fill-vivid-mid-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-vivid-mid-alt: rgba($color-white, 0.8);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-fill-vivid-high-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-fill-vivid-high-alt: $color-white;
```
                        {{/markdown}}
                    </div>
                </div>

                <h3 class="color-type-primary-alt">Alt line colors</h3>
                <div class="row">
                    <div class="col-md-12">
                        <div class="color line color-line-dim-mid-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-dim-mid-alt: rgba($color-white, 0.1);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color line color-line-dim-high-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-dim-high-alt: rgba($color-white, 0.15);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color line color-line-neutral-low-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-neutral-low-alt: rgba($color-white, 0.2);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color line color-line-neutral-mid-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-neutral-mid-alt: rgba($color-white, 0.3);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color line color-line-neutral-high-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-neutral-high-alt: rgba($color-white, 0.4);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color line color-line-vivid-low-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-vivid-low-alt: rgba($color-white, 0.6);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color line color-line-vivid-mid-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-vivid-mid-alt: rgba($color-white, 0.8);
```
                        {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color line color-line-vivid-high-alt"></div>
                    </div>
                    <div class="col-md-12">
                        {{#markdown}}
```scss
.color-line-vivid-high-alt: $color-white;
```
                        {{/markdown}}
                    </div>
                </div>

                <h3 class="color-type-primary-alt">Alt text colors</h3>
                <div class="row">
                    <div class="col-md-12">
                        <div class="color color-type-primary-alt">Primary</div>
                    </div>
                    <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-primary-alt: $color-white;
```
                    {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-type-secondary-alt">Secondary</div>
                    </div>
                    <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-secondary-alt: rgba($color-white, 0.6);
```
                    {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-type-disabled-alt">Disabled</div>
                    </div>
                    <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-disabled-alt: rgba($color-white, 0.2);
```
                    {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-type-accent-alt">Accent</div>
                    </div>
                    <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-accent-alt: $color-accent;
```
                    {{/markdown}}
                    </div>

                    <div class="col-md-12">
                        <div class="color color-type-alert-alt">Alert</div>
                    </div>
                    <div class="col-md-12">
                    {{#markdown}}
```scss
.color-type-alert-alt: $color-alert;
```
                    {{/markdown}}
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
