<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>
<p class="subtitle is-5"><span class="has-text-weight-semibold">Color</span> 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 is-large">

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

Brand colors are used when refering to Biings or any of its products.

<br><br>

<div class="columns is-multiline">
    
    <div class="column is-6"><div class="has-background-primary has-shadow"><br><br></div><span><strong>primary</strong></span><br><span class="has-text-grey-dark is-monospace">#815BC3 / PANTONE<sup>®</sup> 2097 U</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-dark"><br><br></div><span><strong>dark</strong></span><br><span class="has-text-grey-dark is-monospace">#432f65</span></div>
    <div class="column is-3"><div class="has-background-primary-dark"><br><br></div><span><strong>primary-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#614492</span></div>
    <div class="column is-3"><div class="has-background-primary-light"><br><br></div><span><strong>primary-light</strong></span><br><span class="has-text-grey-dark is-monospace">#a78cd5</span></div>
    <div class="column is-3"><div class="has-background-primary-lighter"><br><br></div><span><strong>primary-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#cdbde7</span></div>
    <div class="column is-12"><br></div>
    <div class="column is-3"><div class="has-background-pilot-dark"><br><br></div><span><strong>pilot-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#784589</span></div>
    <div class="column is-3"><div class="has-background-pilot has-shadow"><br><br></div><span><strong>pilot</strong> • Velvet</span><br><span class="has-text-grey-dark is-monospace">#A05CB7</span></div>
    <div class="column is-3"><div class="has-background-pilot-light"><br><br></div><span><strong>pilot-light</strong></span><br><span class="has-text-grey-dark is-monospace">#bd8dcd</span></div>
    <div class="column is-3"><div class="has-background-pilot-lighter"><br><br></div><span><strong>pilot-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#d9bee2</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-care-dark"><br><br></div><span><strong>care-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#50908f</span></div>
    <div class="column is-3"><div class="has-background-care has-shadow"><br><br></div><span><strong>care</strong> • Danube</span><br><span class="has-text-grey-dark is-monospace">#6bc0bf</span></div>
    <div class="column is-3"><div class="has-background-care-light"><br><br></div><span><strong>care-light</strong></span><br><span class="has-text-grey-dark is-monospace">#97d3d2</span></div>
    <div class="column is-3"><div class="has-background-care-lighter"><br><br></div><span><strong>care-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#c4e6e5</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-claim-dark"><br><br></div><span><strong>claim-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#c67651</span></div>
    <div class="column is-3"><div class="has-background-claim has-shadow"><br><br></div><span><strong>claim</strong> • Sandy</span><br><span class="has-text-grey-dark is-monospace">#F89465</span></div>
    <div class="column is-3"><div class="has-background-claim-light"><br><br></div><span><strong>claim-light</strong></span><br><span class="has-text-grey-dark is-monospace">#fab493</span></div>
    <div class="column is-3"><div class="has-background-claim-lighter"><br><br></div><span><strong>claim-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#fcd4c1</span></div>
</div>

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

<h2 class="title is-4 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><span><strong>grey-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#EDECF0</span></div> 
    <div class="column is-3"><div class="has-background-white-ter"><br><br></div><span><strong>white-ter</strong></span><br><span class="has-text-grey-dark is-monospace">#F3F2F6</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><span><strong>white-bis / light</strong></span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></div>
    <div class="column is-3"><div class="has-background-white"><br><br></div><span><strong>white</strong></span><br><span class="has-text-grey-dark is-monospace">#FFFFFF</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-grey-darker"><br><br></div><span><strong>grey-darker</strong></span><br><span class="has-text-grey-dark is-monospace">#6D6881</span></div>
    <div class="column is-3"><div class="has-background-grey-dark"><br><br></div><span><strong>grey-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#8B85A0</span></div>
    <div class="column is-3"><div class="has-background-grey"><br><br></div><span><strong>grey</strong></span><br><span class="has-text-grey-dark is-monospace">#B4B0C2</span></div>
    <div class="column is-3"><div class="has-background-grey-light"><br><br></div><span><strong>grey-light</strong></span><br><span class="has-text-grey-dark is-monospace">#D3D1DB</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-black"><br><br></div><span><strong>black</strong></span><br><span class="has-text-grey-dark is-monospace">#1E162B</span></div>
    <div class="column is-3"><div class="has-background-black-bis has-shadow"><br><br></div><span><strong>black-bis</strong></span><br><span class="has-text-grey-dark is-monospace">#302D3D</span></div>
    <div class="column is-3"><div class="has-background-black-ter"><br><br></div><span><strong>black-ter</strong></span><br><span class="has-text-grey-dark is-monospace">#403D4B</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><span><strong>cyan-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#5A90A8</span></div>
    <div class="column is-3"><div class="has-background-cyan has-shadow"><br><br></div><span><strong>cyan</strong> • Viking</span><br><span class="has-text-grey-dark is-monospace">#78C0E0</span></div>
    <div class="column is-3"><div class="has-background-cyan-light"><br><br></div><span><strong>cyan-light</strong></span><br><span class="has-text-grey-dark is-monospace">#A1D3E9</span></div>
    <div class="column is-3"><div class="has-background-cyan-lighter"><br><br></div><span><strong>cyan-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#C9E6F3</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-blue-dark"><br><br></div><span><strong>blue-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#445C97</span></div>
    <div class="column is-3"><div class="has-background-blue has-shadow"><br><br></div><span><strong>blue</strong> • Indigo</span><br><span class="has-text-grey-dark is-monospace">#5A7BC9</span></div>
    <div class="column is-3"><div class="has-background-blue-light"><br><br></div><span><strong>blue-light</strong></span><br><span class="has-text-grey-dark is-monospace">#8CA3D9</span></div>
    <div class="column is-3"><div class="has-background-blue-lighter"><br><br></div><span><strong>blue-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#BDCAE9</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-purple-dark"><br><br></div><span><strong>purple-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#564499</span></div>
    <div class="column is-3"><div class="has-background-purple has-shadow"><br><br></div><span><strong>purple</strong> • Marguerite</span><br><span class="has-text-grey-dark is-monospace">#735BCC</span></div>
    <div class="column is-3"><div class="has-background-purple-light"><br><br></div><span><strong>purple-light</strong></span><br><span class="has-text-grey-dark is-monospace">#9D8CDB</span></div>
    <div class="column is-3"><div class="has-background-purple-lighter"><br><br></div><span><strong>purple-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#C7BDEB</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-pink-dark"><br><br></div><span><strong>pink-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#9D468B</span></div>
    <div class="column is-3"><div class="has-background-pink has-shadow"><br><br></div><span><strong>pink</strong> • Fuchsia</span><br><span class="has-text-grey-dark is-monospace">#CC5BB5</span></div>
    <div class="column is-3"><div class="has-background-pink-light"><br><br></div><span><strong>pink-light</strong></span><br><span class="has-text-grey-dark is-monospace">#DB8CCB</span></div>
    <div class="column is-3"><div class="has-background-pink-lighter"><br><br></div><span><strong>pink-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#EBBDE1</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-red-dark"><br><br></div><span><strong>red-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#BF4E56</span></div>
    <div class="column is-3"><div class="has-background-red has-shadow"><br><br></div><span><strong>red</strong> • Froly</span><br><span class="has-text-grey-dark is-monospace">#EF626C</span></div>
    <div class="column is-3"><div class="has-background-red-light"><br><br></div><span><strong>red-light</strong></span><br><span class="has-text-grey-dark is-monospace">#F49198</span></div>
    <div class="column is-3"><div class="has-background-red-lighter"><br><br></div><span><strong>red-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#F9C0C4</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-orange-dark"><br><br></div><span><strong>orange-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#D97F04</span></div>
    <div class="column is-3"><div class="has-background-orange has-shadow"><br><br></div><span><strong>orange</strong> • Carrot</span><br><span class="has-text-grey-dark is-monospace">#FF9505</span></div>
    <div class="column is-3"><div class="has-background-orange-light"><br><br></div><span><strong>orange-light</strong></span><br><span class="has-text-grey-dark is-monospace">#FFB550</span></div>
    <div class="column is-3"><div class="has-background-orange-lighter"><br><br></div><span><strong>orange-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#FFD59B</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-yellow-dark"><br><br></div><span><strong>yellow-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#DEA244</span></div>
    <div class="column is-3"><div class="has-background-yellow has-shadow"><br><br></div><span><strong>yellow</strong> • Casablanca</span><br><span class="has-text-grey-dark is-monospace">#FFC15E</span></div>
    <div class="column is-3"><div class="has-background-yellow-light"><br><br></div><span><strong>yellow-light</strong></span><br><span class="has-text-grey-dark is-monospace">#FFD48E</span></div>
    <div class="column is-3"><div class="has-background-yellow-lighter"><br><br></div><span><strong>yellow-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#FFE6BF</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-turquoise-dark"><br><br></div><span><strong>turquoise-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#46A391</span></div>
    <div class="column is-3"><div class="has-background-turquoise has-shadow"><br><br></div><span><strong>turquoise</strong> • Bermuda</span><br><span class="has-text-grey-dark is-monospace">#5DD9C1</span></div>
    <div class="column is-3"><div class="has-background-turquoise-light"><br><br></div><span><strong>turquoise-light</strong></span><br><span class="has-text-grey-dark is-monospace">#8EE4D4</span></div>
    <div class="column is-3"><div class="has-background-turquoise-lighter"><br><br></div><span><strong>turquoise-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#BEF0E6</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-green-dark"><br><br></div><span><strong>green-dark</strong></span><br><span class="has-text-grey-dark is-monospace">#449956</span></div>
    <div class="column is-3"><div class="has-background-green has-shadow"><br><br></div><span><strong>green</strong> • Emerald</span><br><span class="has-text-grey-dark is-monospace">#5BCC72</span></div>
    <div class="column is-3"><div class="has-background-green-light"><br><br></div><span><strong>green-light</strong></span><br><span class="has-text-grey-dark is-monospace">#8CDB9C</span></div>
    <div class="column is-3"><div class="has-background-green-lighter"><br><br></div><span><strong>green-lighter</strong></span><br><span class="has-text-grey-dark is-monospace">#BDEBC7</span></div>
</div>

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

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

<hr class="is-invisible is-small">

<div class="columns is-multiline is-gapless">
    <div class="column is-12"><div class="has-background-gradient-1"><br><br></div></div>
    <div class="column is-12"><strong>gradient–1</strong><span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Primary</span> &nbsp;→&nbsp; <span class="is-monospace">Pink</span></span></div>
    <div class="column is-12"><br></div>
    <div class="column is-12"><div class="has-background-gradient-2"><br><br></div></div>
    <div class="column is-12"><strong>gradient–2</strong><span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Cyan</span> &nbsp;→&nbsp; <span class="is-monospace">Turquoise</span></span></div>
    <div class="column is-12"><br></div>
    <div class="column is-12"><div class="has-background-gradient-3"><br><br></div></div>
    <div class="column is-12"><strong>gradient–3</strong><span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Red</span> &nbsp;→&nbsp; <span class="is-monospace">Yellow</span></span></div>
</div>

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

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

Most elements and components have color variations thanks to modifiers with syntax `.is-[color]` (`is-primary`, `is-dark`) or `.has-text-[color]` (`has-background-red`, `has-background-gradient-1`).

<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">CSS variables</h2>

All colors are available as CSS variables through the prefix `--color-`.

<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>

<div class="box is-large is-popping has-background-gradient-1">
    <h4 class="title is-4 has-text-white">Slack Sidebar Theme</h4>
    <div class="subtitle is-6 has-text-pink-lighter">Paint your Slack to the colors of Biings by copy-pasting the following HEX codes into your Slack preferences.</div>
    #302D3D,#432F65,#815BC3,#ffffff,#432F65,#F9F8FC,#5BCC72,#A05CB7
</div>
