Style guide

This is a basic outline of styles used across the site for quick reference and for testing in production. It's rarely up-to-date or conclusive of all the styles, and is definitely not representative of a proper design system.

Breakpoint check

Your device is in the def group

This banner is only shown to def screen sizes (< 480px)

Your device is in the sm group

This banner is only shown to sm screen sizes (>= 480px)

Your device is in the md group

This banner is only shown to md screen sizes (>= 768px)

Your device is in the lg group

This banner is only shown to lg screen sizes (>= 1024px)

Your device is in the xl group

This banner is only shown to xl screen sizes (>= 1280px)

Colours

Black

#202020

800

#212930

800

#032025

800

#2e2032

800

#44140e

700

#2a333c

700

#053038

700

#39283e

700

#661e15

Charcoal

#35414d

Petrol

#095463

Indigo

#2f475f

Plum

#543a5b

Blood

#8e2b1d

Tan

#8f591d

Olive

#8f8b1d

Avocado

#638f1d

Bright

#52718e

Bright

#1d9cb5

Bright

#4a77a4

Bright

#8d5499

Bright

#ce4836

Bright

#ce8736

Bright

#cec736

Bright

#94ce36

200

#cfd6de

200

#c4dbdf

200

#9d76a7

200

#e07567

100

#e7ebee

100

#e3eff2

100

#c1a8c7

100

#eaa399

#f3f5f7

#f2f7f8

#ede6ef

#f8e0dd

White

#fefefe

Typography

Headings

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five

Heading level six

Other text styles

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.

Buttons

Button with no icon

Button with square icon

Button with no iconAnd a subLabel

Button with no iconAnd an external link

Button with square iconAnd a subLabel

Button with file iconBoth icons customised

Button with LinkedIn iconIn LinkedIn style

Button with Medium iconIn Medium style

Button with IW iconIn Infinity Works style

Icons

Alerts and messages

Hello. I'm Ben.

I'm an experienced digital designer and occasional data visualiser. I've written or created a lot of stuff in over 25 years designing and thinking about digital things. Very little of it is on this site.

This is a message with simple text

Sometimes a heading is required

This is a message with a heading and a plum variant

This is a message with simple text and a red variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

This is a message with simple text and a charcoal variant. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

This is a message with simple text and a transparent variant

This is a message with simple text, a plum variant and showing the icon on mobile

This is a message with simple text, a transparent variant and the introMessage class

This is an alert with a simple message. Need to restyle these as they look too similar to buttons!

This is an alert with a simple message and a plum variant

Sometimes a heading is required

This is an alert with a heading and an avocado variant

Main grid

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Col 7

Col 8

Col 9

Col 10

Col 11

Col 12

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Col 7

Col 8

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Col 1

Col 2

Col 3

Col 4

Col 5

Col 1

Col 2

Col 1

Container (Default) with a box inside

Container (Variant: noPadding) with a box inside

Container (Variant: fullWidth) with a box inside

Container (Variant: fullWidth + noPadding) with a box inside