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
Colour Off White
$color-extra-light

Typography

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

Background Colours

Colour Background Light
$color-background-light
Colour Background Brand
$color-background-brand

Border Colours

Colour Border
$color-border
Colour Border Light
$color-border-light

Support Colours

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

Buttons

Primary

Button Primary
.button .button--primary
Button Primary Outlined
.button .button--primary .button--outlined
Button Primary Inverse
.button .button--primary .button--inverse
Button Primary Inverse Outlined
.button .button--primary .button--inverse .button--outlined

Secondary

Button Secondary
.button .button--secondary
Button Secondary Outlined
.button .button--secondary .button--outlined

Disabled

Button Disabled
.button .button--disabled

Icons

Direction

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

Miscellaneous

snippets/icon-misc
{% render 'icon_misc' with icon: '[icon]' %}
email
phone
account
cart
hamburger
search
close
plus
minus
slider
play
heart
heart-filled
truck
pin

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
No icon found mastercard
maestro
No icon found amex
paypal
No icon found applepay
klarna
sofort
eps
No icon found gpay
No icon found 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

Headers
H1
h1, .h1
H2
h2, .h2
H3
h3, .h3
H4
h4, .h4
H5
h5, .h5
H6
h6, .h6
Body Styles
Body 1
p, .body-1
Strong
strong
Text-link
a, .text-link
Body 2 / Detail
.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)