<h6 class="subtitle is-6 is-uppercase has-text-grey">Style</h6><h1 class="title is-1 is-serif has-text-weight-bold">Colors</h1>
<hr class="is-visible">
<p class="subtitle is-5 is-family-secondary"><strong>Color</strong> brings a design to life. It is used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful ways in order to create patterns and visual cues.</p>
<hr class="is-visible">
<br>
<h2 class="title is-4 is-spaced is-family-sans-serif">Brand</h2>
<p class="subtitle is-5">
    Brand colors are used when refering to Biings or any of its products.
</p>

<hr class="is-small">

<div class="columns is-multiline">
    
    <div class="column is-6"><div class="has-background-primary has-shadow"><br><br></div><strong>primary</strong> <br><span class="has-text-grey-dark is-family-monospace">#8c50b9</span></div>
    <div class="column is-4"><div class="has-shadow" style="background-color: #8246AF;"><br><br></div><strong>PANTONE<sup>®</sup> 2587 C</strong><br><span class="has-text-grey-dark"> (<span class="is-family-monospace">#8246AF</span>)</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-primary-dark"><br><br></div><strong>primary-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#654491</span></div>
    <div class="column is-3"><div class="has-background-primary"><br><br></div><strong>primary · pilot</strong><br><span class="has-text-grey-dark is-family-monospace">#8c50b9</span></div>
    <div class="column is-3"><div class="has-background-primary-light"><br><br></div><strong>primary-light</strong><br><span class="has-text-grey-dark is-family-monospace">#AB8CD4</span></div>
    <div class="column is-3"><div class="has-background-primary-lighter"><br><br></div><strong>primary-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#CFBDE6</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-care-dark"><br><br></div><strong>care-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#2D8C90</span></div>
    <div class="column is-3"><div class="has-background-care has-shadow"><br><br></div><strong>care</strong><br><span class="has-text-grey-dark is-family-monospace">#3CBBC0</span></div>
    <div class="column is-3"><div class="has-background-care-light"><br><br></div><strong>care-light</strong><br><span class="has-text-grey-dark is-family-monospace">#77CFD3</span></div>
    <div class="column is-3"><div class="has-background-care-lighter"><br><br></div><strong>care-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#B1E4E6</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-claim-dark"><br><br></div><strong>claim-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#BA854E</span></div>
    <div class="column is-3"><div class="has-background-claim has-shadow"><br><br></div><strong>claim</strong><br><span class="has-text-grey-dark is-family-monospace">#E9A662</span></div>
    <div class="column is-3"><div class="has-background-claim-light"><br><br></div><strong>claim-light</strong><br><span class="has-text-grey-dark is-family-monospace">#F0C191</span></div>
    <div class="column is-3"><div class="has-background-claim-lighter"><br><br></div><strong>claim-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#F6DBC0</span></div>
</div>

<hr class="is-visible is-large">

<h2 class="title is-3 is-family-sans-serif">Greyscale</h2>

<hr class="is-small">

<div class="columns is-multiline">
    <div class="column is-3"><div class="has-background-grey-lighter"><br><br></div><strong>grey-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#DFDBE5</span></div> 
    <div class="column is-3"><div class="has-background-white-ter"><br><br></div><strong>white-ter / light</strong><br><span class="has-text-grey-dark is-family-monospace">#EFECF4</span></div>
    <div class="column is-3"><div class="has-background-white-bis" style="box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);"><br><br></div><strong>white-bis</strong><br><span class="has-text-grey-dark is-family-monospace">#F7F4FB</span></div>
    <div class="column is-3"><div class="has-background-white"><br><br></div><strong>white</strong><br><span class="has-text-grey-dark is-family-monospace">#FFFFFF</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-grey-darker"><br><br></div><strong>grey-darker</strong><br><span class="has-text-grey-dark is-family-monospace">#53485F</span></div>
    <div class="column is-3"><div class="has-background-grey-dark"><br><br></div><strong>grey-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#71687C</span></div>
    <div class="column is-3"><div class="has-background-grey"><br><br></div><strong>grey</strong><br><span class="has-text-grey-dark is-family-monospace">#9B94A4</span></div>
    <div class="column is-3"><div class="has-background-grey-light"><br><br></div><strong>grey-light</strong><br><span class="has-text-grey-dark is-family-monospace">#C8C3CF</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-black"><br><br></div><strong>black</strong><br><span class="has-text-grey-dark is-family-monospace">#1B1029</span></div>
    <div class="column is-3"><div class="has-background-black-bis"><br><br></div><strong>black-bis</strong><br><span class="has-text-grey-dark is-family-monospace">#241931</span></div>
    <div class="column is-3"><div class="has-background-black-ter"><br><br></div><strong>black-ter</strong><br><span class="has-text-grey-dark is-family-monospace">#2D223A</span></div>
    <div class="column is-3"><div class="has-background-dark"><br><br></div><strong>dark</strong><br><span class="has-text-grey-dark is-family-monospace">#351F52</span></div>
</div>

<hr class="is-large is-visible">

<h2 class="title is-4 is-family-sans-serif">Palette</h2>

<hr class="is-small">

<div class="columns is-multiline">
    <div class="column is-3"><div class="has-background-cyan-dark"><br><br></div><strong>cyan-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#5A90A8</span></div>
    <div class="column is-3"><div class="has-background-cyan has-shadow"><br><br></div><strong>cyan</strong><br><span class="has-text-grey-dark is-family-monospace">#78C0E0</span></div>
    <div class="column is-3"><div class="has-background-cyan-light"><br><br></div><strong>cyan-light</strong><br><span class="has-text-grey-dark is-family-monospace">#A1D3E9</span></div>
    <div class="column is-3"><div class="has-background-cyan-lighter"><br><br></div><strong>cyan-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#C9E6F3</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-blue-dark"><br><br></div><strong>blue-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#445C97</span></div>
    <div class="column is-3"><div class="has-background-blue has-shadow"><br><br></div><strong>blue</strong><br><span class="has-text-grey-dark is-family-monospace">#5A7BC9</span></div>
    <div class="column is-3"><div class="has-background-blue-light"><br><br></div><strong>blue-light</strong><br><span class="has-text-grey-dark is-family-monospace">#8CA3D9</span></div>
    <div class="column is-3"><div class="has-background-blue-lighter"><br><br></div><strong>blue-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#BDCAE9</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-purple-dark"><br><br></div><strong>purple-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#564499</span></div>
    <div class="column is-3"><div class="has-background-purple has-shadow"><br><br></div><strong>purple</strong><br><span class="has-text-grey-dark is-family-monospace">#735BCC</span></div>
    <div class="column is-3"><div class="has-background-purple-light"><br><br></div><strong>purple-light</strong><br><span class="has-text-grey-dark is-family-monospace">#9D8CDB</span></div>
    <div class="column is-3"><div class="has-background-purple-lighter"><br><br></div><strong>purple-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#C7BDEB</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-red-dark"><br><br></div><strong>red-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#BF4E56</span></div>
    <div class="column is-3"><div class="has-background-red has-shadow"><br><br></div><strong>red</strong><br><span class="has-text-grey-dark is-family-monospace">#EF626C</span></div>
    <div class="column is-3"><div class="has-background-red-light"><br><br></div><strong>red-light</strong><br><span class="has-text-grey-dark is-family-monospace">#F49198</span></div>
    <div class="column is-3"><div class="has-background-red-lighter"><br><br></div><strong>red-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#F9C0C4</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-orange-dark"><br><br></div><strong>orange-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#D97F04</span></div>
    <div class="column is-3"><div class="has-background-orange has-shadow"><br><br></div><strong>orange</strong><br><span class="has-text-grey-dark is-family-monospace">#FF9505</span></div>
    <div class="column is-3"><div class="has-background-orange-light"><br><br></div><strong>orange-light</strong><br><span class="has-text-grey-dark is-family-monospace">#FFB550</span></div>
    <div class="column is-3"><div class="has-background-orange-lighter"><br><br></div><strong>orange-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#FFD59B</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-yellow-dark"><br><br></div><strong>yellow-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#E3AB1B</span></div>
    <div class="column is-3"><div class="has-background-yellow has-shadow"><br><br></div><strong>yellow</strong><br><span class="has-text-grey-dark is-family-monospace">#FCCA48</span></div>
    <div class="column is-3"><div class="has-background-yellow-light"><br><br></div><strong>yellow-light</strong><br><span class="has-text-grey-dark is-family-monospace">#FFE08E</span></div>
    <div class="column is-3"><div class="has-background-yellow-lighter"><br><br></div><strong>yellow-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#FFECBA</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-turquoise-dark"><br><br></div><strong>turquoise-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#46A391</span></div>
    <div class="column is-3"><div class="has-background-turquoise has-shadow"><br><br></div><strong>turquoise</strong><br><span class="has-text-grey-dark is-family-monospace">#5DD9C1</span></div>
    <div class="column is-3"><div class="has-background-turquoise-light"><br><br></div><strong>turquoise-light</strong><br><span class="has-text-grey-dark is-family-monospace">#8EE4D4</span></div>
    <div class="column is-3"><div class="has-background-turquoise-lighter"><br><br></div><strong>turquoise-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#BEF0E6</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-green-dark"><br><br></div><strong>green-dark</strong><br><span class="has-text-grey-dark is-family-monospace">#449956</span></div>
    <div class="column is-3"><div class="has-background-green has-shadow"><br><br></div><strong>green</strong><br><span class="has-text-grey-dark is-family-monospace">#5BCC72</span></div>
    <div class="column is-3"><div class="has-background-green-light"><br><br></div><strong>green-light</strong><br><span class="has-text-grey-dark is-family-monospace">#8CDB9C</span></div>
    <div class="column is-3"><div class="has-background-green-lighter"><br><br></div><strong>green-lighter</strong><br><span class="has-text-grey-dark is-family-monospace">#BDEBC7</span></div>
</div>

<hr class="is-large is-visible">

<h2 class="title is-4 is-family-sans-serif is-spaced">Color modifiers</h2>

<p class="subtitle is-5">
    Most elements and components have color variations thanks to modifiers with syntax <code>.is-[color]</code> (ex: <code>is-primary</code>, <code>is-dark</code>).
</p>

<hr class="is-small">

<table class="table is-bordered">
<thead>
    <tr><th>Target</th>
    <th>Class pattern</th></tr>
</thead>
<tbody>
    <tr><td>Background</td><td><code>has-background-[color]</code></td></tr>
    <tr><td>Text <sup class="has-text-red">( i )</sup></td><td><code>has-text-[color]</code></td></tr>
    <tr><td>Icon <sup class="has-text-red">( i )</sup></td><td><code>has-fill-[color]</code></td></tr>
</tbody>
</table>

!> *does not work with gradients*

<hr class="is-large is-visible">

<h2 class="title is-4 is-family-sans-serif is-spaced">CSS variables</h2>
<p class="subtitle is-5">
    All colors are available as CSS variables through the prefix <code>--color-</code>.
</p>

<hr class="is-small">

    .your-selector
    {
        color: var(--color-primary);
    }

    .your-has-gradient-1
    {
        background: linear-gradient(25deg, var(--color-primary) -30%, var(--color-pink) 130%);
    }
<hr class="is-large is-visible">

<div class="box is-large is-popping" style="background: linear-gradient(90deg, var(--color-primary-dark) -70%, var(--color-pilot) 150%);">
    <span class="tag is-light is-uppercase has-text-weight-semibold">Bonus</span>
    <hr class="is-smaller">
    <h4 class="title is-4 has-text-white is-family-primary">Slack Sidebar Theme</h4>
    <div class="subtitle is-6 has-text-white">Paint your Slack to the colors of Biings by copy-pasting the above HEX codes into your Slack preferences.</div>
    
    #2D223A,#1B1029,#654491,#FFFFFF,#1B1029,#EFECF4,#2DC06D,#875BC1
</div>
