Color

<div class="h2_guide-title">
    color Text Dark</div>

<p><code>.is-text-dark-*</code></p>

<a href="" class="yui-color is-text-dark-1">.yui-color.is-text-dark-1</a>
<a href="" class="yui-color is-text-dark-2">.yui-color.is-text-dark-2</a>
<a href="" class="yui-color is-text-dark-3">.yui-color.is-text-dark-3</a>
<a href="" class="yui-color is-text-dark-4">.yui-color.is-text-dark-4</a>
<a href="" class="yui-color is-text-dark-5">.yui-color.is-text-dark-5</a>
<a href="" class="yui-color is-text-dark-6">.yui-color.is-text-dark-6</a>
<a href="" class="yui-color is-text-dark-7">.yui-color.is-text-dark-7</a>
<a href="" class="yui-color is-text-dark-8">.yui-color.is-text-dark-8</a>
<a href="" class="yui-color is-text-dark-9">.yui-color.is-text-dark-9</a>

<hr class="hr_guide-line">

<div class="h2_guide-title">color Text Light</div>

<p><code>.is-text-light-*</code></p>

<div style="padding: 16px; background: #ccc;">
    <a href="" class="yui-color is-text-light-1">.yui-color.is-text-light-1</a>
    <a href="" class="yui-color is-text-light-2">.yui-color.is-text-light-2</a>
    <a href="" class="yui-color is-text-light-3">.yui-color.is-text-light-3</a>
    <a href="" class="yui-color is-text-light-4">.yui-color.is-text-light-4</a>
    <a href="" class="yui-color is-text-light-5">.yui-color.is-text-light-5</a>
    <a href="" class="yui-color is-text-light-6">.yui-color.is-text-light-6</a>
    <a href="" class="yui-color is-text-light-7">.yui-color.is-text-light-7</a>
    <a href="" class="yui-color is-text-light-8">.yui-color.is-text-light-8</a>
    <a href="" class="yui-color is-text-light-9">.yui-color.is-text-light-9</a>
</div>

<hr class="hr_guide-line">

<div class="h2_guide-title">Color Text Theme </div>
<p><code>.is-text-primary</code>,<code>.is-text-info</code>,<code>.is-text-warning</code>,<code>.is-text-danger</code></p>

<a href="" class="yui-color is-text-primary">yui-color.is-text-primary</a>
<a href="" class="yui-color is-text-info">yui-color.is-text-info</a>
<a href="" class="yui-color is-text-warning">yui-color.is-text-warning</a>
<a href="" class="yui-color is-text-danger">yui-color.is-text-danger</a>

<hr class="hr_guide-line">

<div class="h2_guide-title">color Brand Color</div>
<p><code>.is-text-twitter</code>,<code>.is-text-facebook</code>,<code>.is-text-hatena</code>,<code>.is-text-pocket</code></p>

<a href="" class="yui-color is-text-twitter">yui-color.is-text-twitter</a>
<a href="" class="yui-color is-text-facebook">yui-color.is-text-facebook</a>
<a href="" class="yui-color is-text-hatena">yui-color.is-text-hatena</a>
<a href="" class="yui-color is-text-pocket">yui-color.is-text-pocket</a>

<hr class="hr_guide-line">

<style>
    span.yui-color {
        line-height: 2;
        padding: 8px;
    }
</style>

<div class="h2_guide-title">color bg Dark</div>

<p><code>.is-bg-dark-*</code></p>

<span class="yui-color is-bg-dark-1">yui-color.is-bg-dark-1</span>
<span class="yui-color is-bg-dark-2">yui-color.is-bg-dark-2</span>
<span class="yui-color is-bg-dark-3">yui-color.is-bg-dark-3</span>
<span class="yui-color is-bg-dark-4">yui-color.is-bg-dark-4</span>
<span class="yui-color is-bg-dark-5">yui-color.is-bg-dark-5</span>
<span class="yui-color is-bg-dark-6">yui-color.is-bg-dark-6</span>
<span class="yui-color is-bg-dark-7">yui-color.is-bg-dark-7</span>
<span class="yui-color is-bg-dark-8">yui-color.is-bg-dark-8</span>
<span class="yui-color is-bg-dark-9">yui-color.is-bg-dark-9</span>

<hr class="hr_guide-line">

<div class="h2_guide-title">color Bg Light</div>

<p><code>.is-bg-light-*</code></p>
<div style="padding: 16px; background: #ccc;">
    <span class="yui-color is-bg-light-1">yui-color.is-bg-light-1</span>
    <span class="yui-color is-bg-light-2">yui-color.is-bg-light-2</span>
    <span class="yui-color is-bg-light-3">yui-color.is-bg-light-3</span>
    <span class="yui-color is-bg-light-4">yui-color.is-bg-light-4</span>
    <span class="yui-color is-bg-light-5">yui-color.is-bg-light-5</span>
    <span class="yui-color is-bg-light-6">yui-color.is-bg-light-6</span>
    <span class="yui-color is-bg-light-7">yui-color.is-bg-light-7</span>
    <span class="yui-color is-bg-light-8">yui-color.is-bg-light-8</span>
    <span class="yui-color is-bg-light-9">yui-color.is-bg-light-9</span>
</div>
<hr class="hr_guide-line">

<div class="h2_guide-title">Color Bg Theme </div>
<p><code>.is-bg-primary</code>,<code>.is-bg-info</code>,<code>.is-bg-warning</code>,<code>.is-bg-danger</code></p>

<a href="" class="yui-color is-bg-primary">yui-color.is-bg-primary</a>
<a href="" class="yui-color is-bg-info">yui-color.is-bg-info</a>
<a href="" class="yui-color is-bg-warning">yui-color.is-bg-warning</a>
<a href="" class="yui-color is-bg-danger">yui-color.is-bg-danger</a>

<hr class="hr_guide-line">

<div class="h2_guide-title">Color Bg Brand Color</div>
<p><code>.is-bg-twitter</code>,<code>.is-bg-facebook</code>,<code>.is-bg-hatena</code>,<code>.is-bg-pocket</code></p>

<a href="" class="yui-color is-bg-twitter">yui-color.is-bg-twitter</a>
<a href="" class="yui-color is-bg-facebook">yui-color.is-bg-facebook</a>
<a href="" class="yui-color is-bg-hatena">yui-color.is-bg-hatena</a>
<a href="" class="yui-color is-bg-pocket">yui-color.is-bg-pocket</a>

<hr class="hr_guide-line">