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 'logo' %}
Inverse logo
{% render 'logo', style: 'inverse' %}
Brown logo
{% render 'logo', style: 'brown' %}
Main logo (small)
{% render 'logo', type: 'small' %}
Inverse logo (small)
{% render 'logo', style: 'inverse', type: 'small' %}
Brown logo (small)
{% render 'logo', style: 'brown', type: 'small' %}

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

Support Colours

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

Buttons

Primary

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

Secondary

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

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

Basic headers
H1
h1, .h1, .d1
H2
h2, .h2, .d2
H2 (Large)
.h2--large, .d2--large
H3
h3, .h3, .d3
H3 (Large)
.h3--large, .d3--large
H4
h4, .h4, .d4
H5
h5, .h5, d5
H6
h6, .h6, .d6
Body Styles
Body
body
Strong
strong
Text-link
a, .text-link
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.
Checkboxes
Radios