Style Guide

[Colours]

[Fonts]

[Buttons]

[Messages/Hints]

Note: Here is the Text Style Guide.

Colours

dark-green

#25582d

RGB: 37, 88, 45

CMYK: 82, 40, 92, 35

green

#118c18

RGB: 17, 140, 24

CMYK: 84, 16, 100, 3

bright-green

#94d904

RGB: 148, 217, 4

CMYK: 50, 0, 98, 0

bright-orange

#fda404

RGB: 253, 164, 4

CMYK: 0, 43, 93, 0

orange

#ce6e10

RGB: 206, 110, 16

CMYK: 16, 64, 100, 3

brown

#bf4804

RGB: 191, 72, 4

CMYK: 18, 80, 100, 8

red

#e00707

RGB: 224, 7, 7

CMYK: 2, 98, 100, 1

bright-grey

 

#f1f1f1

RGB: 241, 241, 241

CMYK:

grey

#6c757d

RGB: 108, 117, 125

CMYK:

purple

#bf04b3

RGB: 191, 4, 179

CMYK: 42, 88, 0, 0

plum

#740261

RGB: 116, 2, 97

CMYK: 61, 100, 23, 13

blue

#06aff2

RGB: 6, 175, 242

CMYK: 69, 15, 0, 0

Fonts

H1: Termina, 60px/4rem, 200

H2: Termina, 40px/2,667rem, 200

H3: Termina, 24px/1,6rem, 300

H4: Termina, 18px/1,2rem, 300

H5: Termina, 15px/1rem 300

Navigation: Termina, 15px/1rem, 300

Body: Poppins, 15px/1rem, 300

Buttons

Big Buttons (attention)

default button big

size: extra-large
font: 20px, 400
padding: 15px 20px;
border-radius: 5px;

Small Buttons (Register, login...)

size: extra-small
font: 13px, 400
padding: 9px 10px 7px 10px;
border-radius: 5px;

Messages/Hints

Grab Attention

Box
background-colour: bright-orange;
box-shadow: 3px 5px 5px #4444;
padding: 10px;
transform: rotate(-2deg);

Normal Text
color: black;
font: 14,4/15px, 300;

Link
active link in [ ]
color: plum;
font-weight: bold;

Just Information

Box
background-colour: white;
padding: 10px;
box-shadow: 3px 5px 5px #4444;
border: 1px solid #AAAA;
border-left: 10px solid orange/red;

Normal Text
color: black;
font: 14,4/15px, 300;

Link
active link in [ ]
color: green;
font-weight: 300;