CSS Components and Styleguide

Base

The base colors are the background color of each circle.

Example

$primary-color

#527AC2

$secondary-color

#16A085

$success-color

#16A085

$warning-color

#E73C4E

$info-color

#ff8d01

$muted-color

#dddada

Markup: colors/colors-base.html

                    <div class="grid">
    <div class="grid__row">
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--primary">
                <p class="styleguide__circle-name">$primary-color</p>
                <span class="styleguide__circle-val">#527AC2</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--secondary">
                <p class="styleguide__circle-name">$secondary-color</p>
                <span class="styleguide__circle-val">#16A085</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--success">
                <p class="styleguide__circle-name">$success-color</p>
                <span class="styleguide__circle-val">#16A085</span>
            </div>
        </div>
    </div>
    <div class="grid__row">
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--warning">
                <p class="styleguide__circle-name">$warning-color</p>
                <span class="styleguide__circle-val">#E73C4E</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--info styleguide__circle--dark-text">
                <p class="styleguide__circle-name">$info-color</p>
                <span class="styleguide__circle-val">#ff8d01</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--muted styleguide__circle--dark-text">
                <p class="styleguide__circle-name">$muted-color</p>
                <span class="styleguide__circle-val">#dddada</span>
            </div>
        </div>
    </div>
</div>

Source: colors/_colors.scss, line 30