Colors

Styleguide Colors

Source: colors/_colors.scss, line 24

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

Ancillary

The ancillary colors are the text color of each circle.

Example

$border-color

#b0c2e3

$text-color

#05182A

$background-color

#f5f5f5

Markup: colors/colors-ancillary.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__circle--dark-text styleguide--border">
                <p class="styleguide__circle-name">$border-color</p>
                <span class="styleguide__circle-val">#b0c2e3</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide--text">
                <p class="styleguide__circle-name">$text-color</p>
                <span class="styleguide__circle-val">#05182A</span>
            </div>
        </div>
        <div class="grid__col--lg-4 grid__col--sm-6 grid__col--xs-12">
            <div class="styleguide__circle styleguide__circle--dark-text styleguide--background-color">
                <p class="styleguide__circle-name">$background-color</p>
                <span class="styleguide__circle-val">#f5f5f5</span>
            </div>
        </div>
    </div>
</div>

Source: colors/_colors.scss, line 38