Framework

Global Presets UI Style Guide

00. General Guidelines

All borders, lines and dividers: 1px wide. Various colours.
Drop shadows: very subtle

01. Colour palette

#030D18
RGB 29/37/45

#002B56
RGB 0/46/93

#5692CE
RGB 65/143/222

#D1E5F4
RGB 198/214/227

#C48839
RGB 196/136/57

#C4390F
RGB 179/61/38

rgba(3,13,24,0.8)
80%

rgba(0,43,86,0.8)
80%

rgba(86,146,206,0.8)
80%

rgba(209,229,244,0.8)
80%

rgba(196,136,57,0.8)
80%

rgba(196,57,15,0.8)
80%

rgba(3,13,24,0.6)
60%

rgba(0,43,86,0.6)
60%

rgba(86,146,206,0.6)
60%

rgba(209,229,244,0.6)
60%

rgba(196,136,57,0.6)
60%

rgba(196,57,15,0.6)
60%

rgba(3,13,24,0.4)
40%

rgba(0,43,86,0.4)
40%

rgba(86,146,206,0.4)
40%

rgba(209,229,244,0.4)
40%

rgba(196,136,57,0.4)
40%

rgba(196,57,15,0.4)
40%

rgba(3,13,24,0.2)
20%

rgba(0,43,86,0.2)
20%

rgba(86,146,206,0.2)
20%

rgba(209,229,244,0.2)
20%

rgba(196,136,57,0.2)
20%

rgba(196,57,15,0.2)
20%

02. Text styles

Defined font styles

Primary

Secondary

Heading 1

Heading 1

Displace Serif
desktop size 46px
tablet size 45px
mobile size 44px 

colour #002B56

h1{
font-style: normal;
line-height: 1.2;
}

Heading 1

Displace Serif
desktop size 46px
tablet size 45px
mobile size 44px 

colour #5692CE

h1{
font-style: normal;
line-height: 1.2;
}

Heading 2

Heading 2

Displace Serif
desktop size 44px
tablet size 43px
mobile size 42px

colour #002B56

h2{
font-style: normal;
line-height: 1.3;
}

Heading 2

Displace Serif
desktop size 44px
tablet size 43px
mobile size 42px

colour #C48839

h2{
font-style: normal;
line-height: 1.3;
}

Heading 3

Heading 3

Displace Serif
desktop size 35px
tablet size 34px
mobile size 33px

colour #030D18

h3{
font-style: normal;
line-height: 1.3;
}

Heading 3

Displace Serif
desktop size 35px
tablet size 34px
mobile size 33px

colour #030D18

h3{
font-style: normal;
line-height: 1.3;
}

Heading 4

Heading 4

Nunito Sans Light
desktop size 34px
tablet size 32px
mobile size 30px

colour #C4390F

h4{
font-family: ‘Nunito Sans’, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.3;
}

Heading 4

Nunito Sans Light
desktop size 34px
tablet size 32px
mobile size 30px

colour #5692CE

h4{
font-family: ‘Nunito Sans’, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.3;
}

Heading 5

Heading 5

Nunito Sans Light
desktop size 30px
tablet size 28px
mobile size 26px

colour #002B56

h5{
font-family: ‘Nunito Sans’, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.3;
}

Heading 5

Nunito Sans Light
desktop size 30px
tablet size 28px
mobile size 26px

colour #C4390F

h5{
font-family: ‘Nunito Sans’, sans-serif;
font-weight: 300;
font-style: normal;
line-height: 1.3;
}

Heading 6

Heading 6
Nunito Sans Bold
desktop size 24px
tablet size 22px
mobile size 20px

colour #5692CE

h6{
font-family: ‘Nunito Sans’, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.3;
}

Heading 6

Nunito Sans Bold
desktop size 24px
tablet size 22px
mobile size 20px

colour #C48839

h6{
font-family: ‘Nunito Sans’, sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.3;
}

Label accent

Accent

Nunito Sans Regular
desktop size 19px
tablet size 19px
mobile size 18px

(size 24 for bigger text)

colour #C4390F

{
font-family: ‘Nunito Sans’, sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.6;
}

Body

Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.

Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu

Nunito Sans Regular
desktop size 18px
tablet size 17px
mobile size 16px

colour #030D18

body {
font-family: ‘Nunito Sans’, sans-serif;
color: #030D18
font-weight: 400;
font-style: normal;
line-height: 1.6;
}

Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.

Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu

Freight Sans Pro Book 400,
desktop size 17px
tablet size 16px
mobile size 16px

colour #030D18

body {
font-family: ‘Nunito Sans’, sans-serif;
color: #030D18
font-weight: 400;
font-style: normal;
line-height: 1.6;
}

Body

Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.

Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu

Nunito Sans Regular
desktop size 19px
tablet size 18px
mobile size 17px

colour #030D18

body {
font-family: ‘Nunito Sans’, sans-serif;
color: #030D18
font-weight: 400;
font-style: normal;
line-height: 1.6;
}

Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.

Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu.

Nunito Sans Regular
desktop size 15px
tablet size 15px
mobile size 15px

colour #030D18

body {
font-family: ‘Nunito Sans’, sans-serif;
color: #030D18
font-weight: 400;
font-style: normal;
line-height: 1.6;
}

List

  • Lemon drops
  • Tiramisu
  • Gingerbread

Link

kristine@kristinetghardberg.no

kristine@kristinetghardberg.no

03. Modules

The last part of this style guide handles some of the most-used modules in the layouts. This gives us options that we can use as to create unique layouts that are diverse and interesting but still on brand.

Primary

Secondary

Tertiary

Button

Click Here
Click Here
Click Here
Click Here

Call to action

Title

Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu

Click Here

Title

Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu

Click Here

Contact form

Blurb

v

Title Goes Here

Your content goes here. Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.

Title Goes Here

Your content goes here. Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.

v

Title Goes Here

Your content goes here. Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.

Divider

Social Media Follow

Image

standard square corners

 drop shadow