Themes should be creating using 6 swatches max, corresponding in principle to the definitions outlined in this section.

Buttons used over the dominant color of the theme should be set in the Primary Swatch, with text set in the Secondary Swatch.

Text

rgb(37, 19, 54)

Background

rgb(242, 242, 242)

Primary

rgb(85, 67, 101)

Secondary

rgb(215, 208, 222)

Overlay

rgba(37, 19, 54, 0.35)

White

rgb(255, 255, 255)

Fonts need to be added in a specific order that maps to certain element types on a page in order to integrate with the organization style guide. 

Please make sure that you're maintaining the proper order and hierarchy when applying fonts to elements in your theme.

Headings

Montserratt Black

Subheadings

Montserratt Bold

Copy

Montserratt Regular

Call to Actions

Montserratt Bold

The styles to the left outline the typographic scale to be used for the creation of new branded and public themes. 

The scale is in the minor third (5:6) using a root-font size of 18px for desktop and tablet, and 16px for mobile. 

Headline XL

4.837 rem | 1.2 | 0
2.986 rem | 1.2 | 0

Headline

3.359 rem | 1.2 | 0
2.986 rem | 1.2 | 0

Heading 1

2.333 rem | 1.2 | 0
2.074 rem | 1.2 | 0

Heading 2

1.944 rem | 1.2 | 0
1.728 rem | 1.2 | 0

Heading 3

1.620 rem | 1.2 | 0
1.440 rem | 1.2 | 0 

Heading 4

1.350 rem | 1.2 | 0
1.200 rem | 1.2 | 0

Body Copy & Buttons

1.125 rem | 1.5 | 0
1.000 rem | 1.5 | 0

Captions

0.938 rem | 1.3 | 0
0.833 rem | 1.3 | 0

Component spacing refers to the spacing between elements inside of a component. 

An example of this would be the relationships between text elements, or the amount of padding inside of a hub card. 

Component spacing is different from block spacing, and should be focused on a smaller scale. 

Spacing between elements should be set in a fixed unit like REMs, and spacing around elements can be set in a relative unit like percent [%].

The shaded blocks to the right are meant to visualize the amount of space that the different values take up.

Block spacing refers to the spacing inside of a block, and should be measured horizontally in percent [%] and vertically in % or REMs depending on the desired effect. 

Spacing in percentages is always measured in relation to the width of the element or it's parent container, so using % to control vertical spacing can yield undesired results on larger screens.

Block spacing refers to the spacing inside of a block, and should be measured horizontally in percent [%] and vertically in % or REMs depending on the desired effect. 

Below are some examples of different grid structures that can be created using the spacing rules outlined above. It's unlikely that any of these specific blocks would be usable in production.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus placeat dolorem, vel tempora quibusdam voluptatem iusto tempore labore repudiandae itaque.

Note

These grid structures are meant as a suggestion only. There's no need for all blocks to adhere strictly to any of these layouts. We want to create unique themes that excite our users.

Some helpful resources for additional reading to help understand the principles outlined in this document.