Skip to content

Style Guide

Logo

{% render 'icons', icon: 'logo' %}
<div class="black">{% render 'icons', icon: 'logo' %}</div>
----------
.black 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


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 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>

Subtitle 18 Bold

<p class="subtitle">Subtitle 18 Bold</p>

Body 16 Bold

<p><strong>Body 16 Bold</strong></p>

Body 16 Regular

<p>Body 16 Regular</p>

Body 15 Bold

<p class="text-15 font-medium">Body 15 Bold</p>

Body 15 Regular

<p class="text-15">Body 15 Regular</p>
<p class="text-legal">Legal 16 Regular</p>

Caption 14 Regular

<p class="text-14 leading-tight font-medium">Caption 14 Regular</p>

Caption 13 Regular

<p class="text-13 leading-tight">Caption 13 Regular</p>

Caption 12 Regular

<p class="text-12 leading-tight">Caption 12 Regular</p>

Button 16

<p><a href="#" class="text-button">Button 16</a></p>

Button Link 16

<p><a href="#" class="text-button-link">Button Link 16</a></p>

Button 14

<p><a href="#" class="text-button text-14">Button 14</a></p>

Button Link 14

<p><a href="#" class="text-button-link text-14">Button Link 14</a></p>

Buttons

<a> Primary <a> Button Primary
<button class="sfc-button primary">Primary</button>
<button class="sfc-button primary" disabled>Primary Disabled</button>
<a href="#" class="sfc-button primary">Primary</a>
<button class="sfc-button secondary">Secondary</button>
<button class="sfc-button secondary" disabled>Secondary Disabled</button>
<a href="#" class="sfc-button secondary">Button Primary</a>
<a> Primary <a> Button Primary
<button class="sfc-button primary on-dark">Primary</button>
<button class="sfc-button primary on-dark" disabled>Primary Disabled</button>
<a href="#" class="sfc-button primary on-dark">Primary</a>
<button class="sfc-button secondary on-dark">Secondary</button>
<button class="sfc-button secondary on-dark" disabled>Secondary Disabled</button>
<a href="#" class="sfc-button secondary on-dark">Button Primary</a>
1 2
<button class="sfc-button circle">1</button>
<button class="sfc-button circle" disabled>2</button>
<a href="#" class="sfc-button circle">1</a>
<span class="sfc-button circle disabled">2</span>
<a> Primary - Link Style <a> Button Primary - Link Style
<button class="sfc-button primary link">Primary - Link Style</button>
<a href="#" class="sfc-button primary link">Primary - Link Style</a>
<button class="sfc-button secondary link">Secondary - Link Style</button>
<a href="#" class="sfc-button secondary link">Button Primary - Link Style</a>

Icons

{% render 'icons', icon: 'search' %}
  • 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

  • facebook

  • instagram

  • linkedin

  • pinterest

  • twitter-x

  • youtube

Drawer Title

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyse site usage, and assist in our marketing efforts.

Similar Products

Compare Your Items (3 Items)

+ Add Product

Performance