Style Guide
This page outlines the current styles and standards for the Blueprint website.
Typography
Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
I am a H1 heading
I am a H2 heading
I am a H3 heading
I am a H4 heading
I am a H5 heading
I am a H6 heading
I am a h2 eyebrow
This is an H2 dummy heading
Text XS — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text S — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text M — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text L — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Colours
An overview of this site's brand colors.
Primary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Accent
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Base
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Base
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Buttons
Solid and outline buttons are available across all color sets including black and white.
Buttons sizes
Buttons styles
Buttons animations
Buttons colours
PRIMARY SOLID
PRIMARY outline
secondary solid
secondary outline
Widths
There are multiple values you can use to control element width. They're automatically responsive.
width-10
width-20
width-30
width-40
width-50
width-60
width-70
width-80
width-90
Spacing
There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
space-xs
space-s
space-m
space-l
space-xl
space-xl
Gaps
gap-xs
gap-s
gap-m
gap-l
gap-xl
gap-xxl