H1

font-size: 3.75rem;
(translates to 60px when viewing at 100%)

font-weight: 900 (heavy)

H2

font-size: 2.9925rem;
(translates to 48px when viewing at 100%)

font-weight: 900 (heavy)

H3

font-size: 2.25rem;
(translates to 36px when viewing at 100%)

font-weight: 900 (heavy)

H4

font-size: 1.87425rem;
(translates to 30px when viewing at 100%)

font-weight: 900 (heavy)

H5

font-size: 1.49962rem;
(translates to 24px when viewing at 100%)

font-weight: 700 (bold)

H6 - size: 18px, weight: bold / 700

font-size: 1.125rem;
(translates to 18px when viewing at 100%)

font-weight: 700 (bold)

Paragraph and default body text –

font-size: 1.125rem;
(translates to 18px when viewing at 100%)

font-weight: 400 (normal)

Example of a small heading

Above a large one.

Small heading is a h4 with font weight of 400 (normal), colour Purple. Large heading is a H2, fontweight of 900 (heavy), colour NIght.

This heading pattern is generally followed by paragraph text.

Buttons

Note on this background: Ice @ 25%

Sizes

padding: 10px 15px;

font-size: .91406rem;
(translates to 14.625px when viewing at 100%)

padding: 12.5px 18.75px;

font-size: 1.04625rem (translates to 16.74px when viewing at 100%)

padding: 15px 20px;

font-size: 1.125rem;
(translates to 18px when viewing at 100%)

padding: 20px 30px;

font-size: 1.26562rem;
(translates to 20px when viewing at 100%)

padding: 25px 35px;

font-size: 1.40625rem;
(translates to 20px when viewing at 100%)

Colour variations

Demos are using button size small

Normal state:
background: #121c42 (Night)
color: #fff (White)

Hover state:
colours inverted.

Normal state:
background: #a20066 (Purple)
color: #fff (White)

Hover state:
colours inverted.

Normal state:
background: #fff (White)
color: #a20066 (Purple)

Hover state:
colours inverted.

Normal state:
background: #fff (White)
color: #121c42 (Night)

Hover state:
colours inverted.

Normal state:
background: #d2dae3 (Ice)
color: #121c42 (Night)

Hover state:
colours inverted.

Normal state:
background: #d2dae3 (Ice)
color: #a20066 (Purple)

Hover state:
colours inverted.

Normal state:
background: #a1d6ca (Ranges)
color: #121c42 (Night)

Hover state:
colours inverted.

Normal state:
background: #8baad4 (Purple)
color: #fff (White)

Hover state:
colours inverted.

Normal state:
background: #505050 (Charcoal)
color: #fff (White)

Hover state:
colours inverted.

Normal state:
background: #d14124 (Centre)
color: #fff (White)

Hover state:
colours inverted.

Normal state:
background: #f9c3d4 (Flora)
color: #a20066 (Purple)

Hover state:
colours inverted.

Normal state:
background: #ffd100 (Coast)
color: #000 (Black)

Hover state:
colours inverted.

Buttons with icons

Demos are using button size small

Space between icon and text: 15px

Full width buttons: text on the left, icon on the right.

Button with icon on left and chevron on right.

15px spacing between icon and text.

Section spacing

Outer margins and/or inner padding can be used for sections spacing.

This section example has both.

Mobile:
30px above and below

Tablet / Desktop:
60px above and below

Columns

Default column gap is:
20px between columns
(10px padding around a column)

Column gaps can be set to:

Default (20px between / 10px around)
No gap (0 gap)
Narrow (10px between / 5px around)
Extended (30px between / 15px around)
Wide (40px between / 20px around)
Wider (60px between / 30px around)
Custom

Box shadows

Some elements make user of a standard drop shadow; such as blog articles when moused over, or form fields, etc.

box-shadow: 0 2px 20px rgba(0, 0 , 0 , 0.1);

Translates to:
x offest: 0
y offset: 2px
blur: 20px
color: black at 10%

Form elements

Demo form

Alternative button styles for multi-step forms

Fields & Dropdowns

Label:
font-weight: 400 (normal)
color: #8baad4 (Jacaranda)
font-size: 1.125rem; (18px)

Focused Label
font-size: font-size: .7em (12.6px)

Field / Dropdown:
font-size: 1.125rem; (18px)
font-weight: 700 (bold)
color: #121c42; (Night)
height: calc(1.2em + 48.25px);
padding: 23.125px 15px;
box-shadow: 0 2px 20px rgba(0, 0 , 0 , 0.1);

Dropdown chevron
color: #A20066 (Purple)

Note: Calculations used so field sizes can increase / decrease as text sizing feature is used.

Checkboxes & Radios

Normal

Preceding Label:
font-size: 1.125rem; (18px)
font-weight: 700 (bold)
color: #121c42; (Night)

Checkbox / Radio label
font-size: .875em; (15.75px)
font-weight: 400 (normal)
color: #121c42; (Night)

Checkbox square / radio circle
border: 1px solid #A20066 (Purple)
background: #fff (White)

“Checked” label
font-weight: 700 (bold)

“Checked” square / radio
background: #A20066 (Purple)
color: #fff (White)

Boxed

Box
background: #fff (White)
border: 1px solid #e9edf1 (Ice @ 50%);
padding: 23.125px 15px;

Label
font-size: .875em; (15.75px)
font-weight: 700; (bold)
color: #121c42; (Night)

Checkbox square / radio circle
border: 1px solid #A20066 (Purple)
background: #fff (White)

“Checked” box
background: #A20066 (Purple)
box-shadow: 0 2px 20px rgba(0, 0 , 0 , 0.1);

“Checked” label
color: #fff (White)

“Checked” square / radio
background: #fff (White)
color: #A20066 (Purple)

Toggle

Box
padding: 15px 20px;
border: 1px solid #A20066; (Purple)
text-align: center;

Label
font-size: 1.125rem; (18px)
font-weight: 700; (bold)
color: #A20066; (Purple)

“Checked” box
background: #A20066 (Purple)
box-shadow: 0 2px 20px rgba(0, 0 , 0 , 0.1);

“Checked” label
color: #fff (White)

Field Radio / Checkboxes

“Field”:
background: #fff (White)
padding: 23.125px 15px;
box-shadow: 0 2px 20px rgba(0, 0 , 0 , 0.1);

“Field” Label:
font-size: 1.125rem; (18px)
font-weight: 700 (bold)
color: #121c42; (Night)

Box
padding: 23.125px 15px;
border: 1px solid #A20066; (Purple)
text-align: center;

Box Label
font-size: 1.04625rem; (16.74px)
font-weight: 700; (bold)
color: #A20066; (Purple)

“Checked” box
background: #A20066 (Purple)

“Checked” box label
color: #fff (White)