01 Colour Palette 02 Typography 03 Grid 04 Units

Foundation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus.

01 Colour Palette

1.1 Primary

Bittersweet
RGB 255 90 96
HEX #FF5A60
Scooter
RGB 67 189 212
HEX #43BDD4
Lemon
RGB 255 225 26
HEX #FFE11A

1.2 Blacks & Greys

Night Rider
RGB 46 46 46
HEX #2E2E2E
White Smoke
RGB 238 238 238
HEX #EEEEEE
Alabaster
RGB 248 248 248
HEX #F8F8F8

1.3 Accessibility Guidelines

Text Colour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus.

02 Typography

2.1 Typeface

Font Family
Open Sans Light
Aa
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0
Font Family
Open Sans Light Italic
Aa
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0
Font Family
Open Sans Semibold
Aa
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0
Font Family
Open Sans Semibold Italic
Aa
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0

2.2 Headings

Heading 01
Open Sans Light
30px

The five boxing wizards jump quickly.

Heading 02
Open Sans Light
22px

The five boxing wizards jump quickly.

Heading 03
Open Sans Light
18px

The five boxing wizards jump quickly.

Heading 04
Open Sans Light
16px

The five boxing wizards jump quickly.

Heading 05
Open Sans Light
13px
The five boxing wizards jump quickly.
Heading 06
Open Sans Light
11px
The five boxing wizards jump quickly.

2.3 Paragraph

Open Sans Light
font size 14px, line height 22px

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

03 Grid

3.1 Grid System

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq.

3.1.1 Fixed Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq.

col col-4
col col-8

3.1.2 Gutters

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq.

col col-4 px2
col col-8 px2

3.1.3 Responsive Grid

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq.

sm-col sm-col-12 md-col-5 lg-col-4 px2
sm-col sm-col-12 md-col-7 lg-col-8 px2

3.1.4 12 Column Grid Units

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq.

col col-1 px2
col col-11 px2

col col-2 px2
col col-10 px2

col col-3 px2
col col-9 px2

col col-4 px2
col col-8 px2

col col-5 px2
col col-7 px2

col col-6 px2
col col-6 px2

04 Units

4.1 Relative Units

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq.

4.2 Em's v Rem's v Pixels

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pixels

Constant measurment based on screen pixel size.

1 unit
10px
2 units
20px
3 units
30px
REM's

Relative to font size of root element.

1 unit
1rem
2 units
2rem
3 units
3rem
EM's

Relative to font size of parent element.

1 unit
0.7142857em
2 units
1.428751em
3 units
2.1428571em

4.3 Units

When to use what?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut molestie leo, ut suscipit est. Sed ut molestie ligula. Aenean in elit at erat luctus laoreet congue sit amet massa. Donec dapibus dolor sit amet neque commodo maximus.