<h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 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">Brand</h2>

The brand colors are mostly used for marketing or when refering to Biings directly.<br>For print material use **PANTONE<sup>®</sup> 2097 U**.

<hr>

<div class="columns is-multiline">
    <div class="column is-3"><div class="has-background-primary"><br><br></div><span><strong>primary</strong></span><br><span class="has-text-grey-dark is-monospace">#815BC3</span></div>
    <div class="column is-3"><div class="has-background-light" style="border:1px solid #EDECF0;"><br><br></div><span><strong>light</strong></span><br><span class="has-text-grey-dark is-monospace">#F9F8FC</span></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">#403D4B</span></div>
    <div class="column is-12"></div>
    <div class="column is-3"><div class="has-background-pilot"><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-care"><br><br></div><span><strong>care</strong> / sky</span><br><span class="has-text-grey-dark is-monospace">#71C7D6</span></div>
    <div class="column is-3"><div class="has-background-claim"><br><br></div><span><strong>claim</strong> / fire</span><br><span class="has-text-grey-dark is-monospace">#F89465</span></div>
</div>

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

<h2 class="title is-4">Greyscale</h2>

<hr class="is-small">

<div class="columns is-multiline">
    <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="border:1px solid #EDECF0;"><br><br></div><span><strong>white-bis</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-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-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-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">#15141B</span></div>
    <div class="column is-3"><div class="has-background-black-bis"><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 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>

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

<h2 class="title is-4">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"><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"><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"><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"><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"><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"><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"><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"><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"><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">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">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">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 has-text-weight-semibold">Paint your Slack to the colors of Biings by copy-pasting the following HEX codes into your Slack preferences.</div>

    #403D4B,#302D3D,#715EB8,#ffffff,#302D3D,#F9F8FC,#5BCC72,#FF9505
</div>
