Skip to Content
arrow-downarrow-top-rightemailfacebooklinkedinlocationmagnifypinterestprintredditsearch-button-closesearch-buttontriangletwitter

Styleguide

This styleguide displays our basic design elements, such as typography and colors. It also demonstrates a series of layout objects and how they can be used.

Please inspect the source code to for classes or markup for use.

Typography

Heading #1

Heading #2

Heading #3

Heading #4

Stroke Title

Stroke Title

Body XL Semibold
Body XL Medium

Body Large Semibold
Body Large Medium
Body Large Regular
Body Large link

Body Semibold
Body Medium
Body Regular
Body link

Caption Semibold
Caption

Colors

Black & White

Black
#000000
White
#ffffff

Grays

200
#333
300
#828282
400
#bdbdbd
500
#e5e2de
600
#f1eee8
700
#f5f2ec
800
#faf7f2

Primary

300
#2e6ba6
500
#479ad6
700
#c1d3e5

Secondary

300
#6bab45
500
#a0dd83
700
#d3e6c8

Highlights

Green Lime
#d1f521
Pink Ruby
#eb4a6e
Blue Turquoise
#0fc9ff
Purple Amethyst
#a35cde
Red Cinnabar
#e53d3d
Green Shamrock
#59de9e
Pink Mauvelous
#f28ab2
Blue Midnight
#0f215e
Orange Flamingo
#f55c42
Orange Peach
#ffa800
Blue Viking
#5cc2d1
Yellow Turbo
#ffe300

Objects

Wrapper

The wrapper object has a max-width, and is automatically centered with a margin left/right auto.


It has left/right padding to stop content from getting too close to the screen edges.


You can break out of a wrapper by using the o-wrapper__wide or o-wrapper__bleed class, which applies negative margins to the element, as seen below.


This content is within a wrapper, but has the class o-wrapper__wide, so it stretches out a bit further.
This content is within a wrapper, but has the class o-wrapper__bleed, so it breaks out to full screen.

Stack

A stack is used to vertically space content. Rather than spacing individual elements, it spaces by context.

It does this using a top margin, applied to every element except the first, and it does it using a series of context-based rules, such as p + p or p + img.

This means we could add spacing rules that work for flow content.

In the example below, we use a stack to evenly space content, as well as show an example of how a form with labels could utilise nested stacks of different sizes.

Note that Orange is the parent stack margin and Pink is the child stack margin.

One element

Two element

Three element

Four

A stack within
Another stack
with bigger sizes

Cluster

A cluster can group a series of elements together, such as buttons, while maintaining even spacing on all sides, even when wrapping.


Note that a cluster must have a child element (in this case a div) on which it can apply a negative margin. That element then contains all the cluster items.


This is a Long Item 1
Short 2
Medium Item 3
Short 4
And this is a long Item 5
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

Buttons

Button showcase