Consistency through simplicity

Design System


Small sites still use systems. Simple systems are still systems that can be forgotten if not written down.


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.

Section and Container: class= section

Row: class = row

Columns: class = col

Padding: 0.64em

Nesting and Grouping

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.

4 by 2 layout

2 by 2 nested in 4 by 2 layout



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.


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.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 2

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

Heading 3

Nunc ut sem vitae risus tristique posuere.

Heading 4

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.