Design System

The website's layout is based on a 960px grid that comprises six columns, with its elements organized in, sections, containers, rows and columns. The only elements allowed to deviate from this layout are the background branding components.

Each column is set with 0.64em padding on its left and right sides, ensuring a consistent horizontal spacing between the website's different elements.

The sub-class size--width is utilized to re-measure the columns. To illustrate, a 4 by 2 column split necessitates a col.size--4 element paired with a col.size--2 element. More intricate layouts can be created by nesting rows and their columns within parent columns, if necessary.

Headings

The website's text follows a major third, 1.125em type scale, using an 18px base. To increase the contrast between headings, text sizes jump 2 levels within the scale. This means that H1 headings have a size of 3.052em and H2 headings have a size of 1.952em.

To ensure legibility and consistency, the weight of the lettering increases as the size of the text decreases, ranging from 300-light for H1 to 700-bold for H4.

Paragraphs

The website utilizes two types of paragraphs: body and call-out. Body paragraphs are used in the main content of articles or pages and are sized at 1em or 18px. To create contrast between these paragraphs and their headings, the text weight is set to 300-light.

On the other hand, call-out paragraphs are paired with H1 headings and are usually placed above the fold on most devices. These paragraphs are 1.563em in size and also set to 300-light to differentiate them from H2 headings.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Nunc ut sem vitae risus tristique posuere.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.