Styleguide

What is this?

The Styleguide serves as a digital brand guideline to help with the website build. The goal of a styleguide is to improve consistency, quality and communication across the UI, making the design and development process more efficient and focused.

This Styleguide is to establish a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

How to use it

Each section showcases common style elements across the project with a specification on the right column on how to use it within snippets/sections.

Brand

This section displays all the brand marks assiocated with the client/project.

Logos

Main logo
{% render 'global_site-logo' %}
Inverse logo
{% render 'global_site-logo' with type: 'inverse' %}

Colours

Brand

Colour Primary
$color-primary
Colour Secondary
$color-secondary

Greys

Colour Grey Dark
$color-grey-dark
Colour Grey Medium
$color-grey-medium
Colour Grey Light
$color-grey-light

Typography

Colour Text Primary
$color-text-primary
Colour Text Light
$color-text-light

Alert Colours

Colour Success
$color-success
Colour Warning
$color-warning
Colour error
$color-error

Support Colours

Colour pink
$color-pink
Colour amber
$color-amber
Colour orange
$color-orange
Colour pale-blue
$color-pale-blue
Colour blue
$color-blue
Colour dark-red
$color-dark-red
Colour purple
$color-purple
Colour green
$color-green

Buttons

Primary

Button Primary
.button .button--primary
Button Primary Outlined
.button .button--primary .button--outlined
Button Primary Icon
.button .button--primary .button--with-icon
Button Primary Icon Outlined
.button .button--primary .button--with-icon .button--outlined
Button Primary Inverse
.button .button--primary .button--inverse

Secondary

Button Secondary
.button .button--secondary
Button Secondary Outlined
.button .button--secondary .button--outlined
Button Secondary Icon
.button .button--secondary .button--with-icon
Button Secondary Icon Outlined
.button .button--secondary .button--with-icon .button--outlined

Text Only

Text-Only Dark
.button .button--text-dark
Text-Only Light
.button .button--text-light

Icons

Direction

snippets/icon-direction
{% render 'icon_direction' with icon: '[icon]' %}
arrow-up
caret-up
caret-down
caret-left
caret-right

Miscellaneous

snippets/icon-misc
{% render 'icon_misc' with icon: '[icon]' %}
tick
email
phone
account
cart
hamburger
search
share
close
plus
minus
lock
grid-1
grid-2
grid-3
play
heart
heart-filled

Social

snippets/icon-social
{% render 'icon_social' with icon: '[icon]' %}
facebook
fancy
instagram
pinterest
twitter
vimeo
youtube
linkedin
snapchat
rss

Payment

snippets/icon-payment
{% render 'icon_payment' with icon: '[icon]' %}
visa
mastercard
maestro
amex
paypal
applepay
klarna
sofort
eps
gpay
shopify

Spacing

Base Spacing

For paddings and margins. Can also be used to style widths and heights of smaller elements

0.25rem
$spacing-2xs
0.5rem
$spacing-xs
0.75rem
$spacing-sm
1rem
$spacing-md
1.5rem
$spacing-lg
2rem
$spacing-xl
2.5rem
$spacing-2xl
3rem
$spacing-3xl

Large Layout Spacing

Used to style dimensions of larger elemens e.g. buttons

4rem
$span-sm
6rem
$span-md
8rem
$span-lg
10rem
$span-xl

Typography

Display headers
D1
.d1
Basic headers
H1
h1, .h1
H2
h2, .h2
H3
h3, .h3
H4
h4, .h4
H5
h5, .h5
Body Styles
Body 1
p, .body-1
Strong
strong
Text-link
a, .text-link
Body 2
.body-2
caption
.caption
small
small
label
Block Styles
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet nulla ut ornare congue. Sed laoreet suscipit nunc"
blockquote, .blockquote
  • Unordered list item
  • Unordered list item
  • Unordered list item
    • Unordered list sub-item
    • Unordered list sub-item
    • Unordered list sub-item
ul
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
    1. Ordered list sub-item
    2. Ordered list sub-item
    3. Ordered list sub-item
ol
We'll never share your email with anyone else.
Multiple options
Radio (input + label)