Style Guide

Logo

<li>{{ 'logo.svg' | inline_asset_content }}</li>
<li class="black">{{ 'logo.svg' | inline_asset_content }}</li>
<li class="white">{{ 'logo.svg' | inline_asset_content }}</li>
----------
.black path {
  fill: var(--color-black);
}

.white path {
  fill: var(--color-black);
}

Colors

background-color: var(--color-cobault);

  • black

  • white

  • soft-blue

  • light-grey

  • stone

  • dark-grey

  • cobault

  • sky-blue

  • teal

  • orange

  • yellow

  • steel-blue

  • sand

  • success-10

  • success-20

  • success-40

  • success-60

  • success-80

  • success-100

  • info-10

  • info-20

  • info-40

  • info-60

  • info-80

  • info-100

  • warning-10

  • warning-20

  • warning-40

  • warning-60

  • warning-80

  • warning-100

  • error-10

  • error-20

  • error-40

  • error-60

  • error-80

  • error-100

Dropshadow

  • Small
  • Medium
  • Large
  • XLarge
  • Sticky Button
box-shadow: var(--shadow-small);
box-shadow: var(--shadow-medium);
box-shadow: var(--shadow-large);
box-shadow: var(--shadow-xlarge);
box-shadow: var(--shadow-sticky-button);

Typography

Azo Sans

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem mollitia ipsam obcaecati magni. Tempore dolores eveniet tenetur officia, explicabo cumque, quasi placeat sint, est possimus quibusdam ut consectetur vero rerum.

Regular, Italic, Bold, Bold Italic, Semi-Bold, Semi-Bold Italic 

<p>Regular, <em>Italic</em>, <strong>Bold</strong>, <em><strong>Bold Italic</strong></em>, <strong class="font-medium">Semi-Bold</strong>, <em><strong class="font-medium">Semi-Bold Italic</strong></em></p>

Heading 1

<h1>Heading 1</h1>

Heading 1 <p>

&lt;p class=&quot<p class="h1">Heading 1 &lt;p&gt;</p>

Heading 2

<h2>Heading 2</h2>

Heading 2 <p>

&lt;p class=&quot<p class="h2">Heading 2 &lt;p&gt;</p>

Heading 3

<h3>Heading 3</h3>

Heading 3 <p>

&lt;p class=&quot<p class="h3">Heading 3 &lt;p&gt;</p>

Heading 4

<h4>Heading 4</h4>

Heading 4 <p>

&lt;p class=&quot<p class="h4">Heading 4 &lt;p&gt;</p>
Heading 5
<h5>Heading 5</h5>

Heading 5 <p>

&lt;p class=&quot<p class="h5">Heading 5 &lt;p&gt;</p>
Heading 6
<h6>Heading 6</h6>

Heading 6 <p>

<p class="h6">Heading 6 &lt;p&gt;</p>

Buttons

<a> Primary <a> Button Primary 
<button class="button button--primary">&lt;button&gt; Primary</button>
<button class="button button--primary" disabled>&lt;button&gt; Primary Disabled</button>
<a href="#" class="button button--primary">&lt;a&gt; Primary</a>
<button class="button button--secondary">&lt;button&gt; Secondary</button>
<button class="button button--secondary" disabled>&lt;button&gt; Secondary Disabled</button>
<a href="#" class="button button--secondary">&lt;a&gt; Button Primary</a>
<a> Primary <a> Button Primary 
<button class="button button--primary on-dark">&lt;button&gt; Primary</button>
<button class="button button--primary on-dark" disabled>&lt;button&gt; Primary Disabled</button>
<a href="#" class="button button--primary on-dark">&lt;a&gt; Primary</a>
<button class="button button--secondary on-dark">&lt;button&gt; Secondary</button>
<button class="button button--secondary on-dark" disabled>&lt;button&gt; Secondary Disabled</button>
<a href="#" class="button button--secondary on-dark">&lt;a&gt; Button Primary</a>
<a> Primary - Link Style <a> Button Primary - Link Style 
<button class="button button--primary button--link">&lt;button&gt; Primary - Link Style</button>
<a href="#" class="button button--primary button--link">&lt;a&gt; Primary - Link Style</a>
<button class="button button--secondary button--link">&lt;button&gt; Secondary - Link Style</button>
<a href="#" class="button button--secondary button--link">&lt;a&gt; Button Primary - Link Style</a>

Icons

{{ 'icon-user.svg' | inline_asset_content }}

  • General

  • shield

  • arrow-left-reg

  • arrow-left

  • arrow-right-reg

  • arrow-right

  • basket

  • bin

  • chevron-down-reg

  • chevron-down

  • chevron-left

  • chevron-right

  • download

  • edit-reg

  • edit

  • exit

  • filter

  • help

  • menu

  • minus

  • plus

  • search

  • sort

  • star

  • user

  • shipping

  • refund

  • thumb

  • Social

  • facebook

  • instagram

  • linkedin

  • pinterest

  • twitter

  • youtube

Forms