Style Guide | v1.0

Color Palette

Primary Colors
HEX: #264653
HEX: #00A896
HEX: #E76F51
HEX: #F4A261
Grey Scale

HEX: #E9ECEF

HEX: #CED4DA
HEX: #ADB5BD
HEX: #6C757D
HEX: #343A40
Typography
H1 | Desktop
Font face: Signika
Weight: 500
Size: 3.2rem
Color #1/5: #264653
Color #2/3/4: #FFFFFF
Line-height: 1.1em
Letter-spacing: -1px
H2 | Desktop
Font face: Signika
Weight: 500
Size: 1.7rem
Color #1/2/3/4: #6C757D
Color #5: #264653
Line-height: 1.1em
Letter-spacing: -0.5px
Body | Desktop
Font face: Inter
Weight: 400
Size: 1.25rem
Color #1/5: #343A40
Color #2/3/4: #343A40
Line-height: 1.5em
Letter-spacing: -0.4px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo magna, semper suscipit nisi sed, porta viverra neque. Vivamus mauris massa, porta non faucibus non, iaculis non justo. Nullam sed felis ut nisi pulvinar vestibulum est.
Buttons
Normal
Font face: Inter
Weight: 400
Size: 1.1rem
Border-radius: 6px
Padding: 16px 18px 16px 18px
Background-color #1: #00A896
Background-color #2: #F4A261
Background-color #3: #6C757D
Background-color #4: #E9ECEF
Border-bottom #1: 4px solid #264653
Border-bottom #2: 4px solid #E76F51
Border-bottom #3: 4px solid #343A40
Border-bottom #4: 4px solid #CED4DA
Box-shadow: 0px 0px 15px 0px rgba (0, 0, 0, 0.2)
Line-height: 1em
Letter-spacing: 0px
Hover:
Background-color #1: #264653
Background-color #2: #E76F51
Background-color #3: #343A40
Background-color #4: #CED4DA
Border-bottom #1: 4px solid #264653
Border-bottom #2: 4px solid #E76F51
Border-bottom #3: 4px solid #343A40
Border-bottom #4: 4px solid #CED4DA
Forms

Input, textarea, select
Font: Inter
Weight: 400
Size: 1.1rem
Border-radius: 0px
Padding: 10px 15px
Border #1: 2px solid #CED4DA
Border #2: 2px solid #00A896
Color: #343A40
Line-height: 1.5em

Label
Font: Signika
Weight: 500
Size: 1.2rem
Color: #343A40
Letter-spacing: -0.2px