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

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

Form label

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

Button