Develop mobile / web apps using the JGS style guide as defined below. Please create a style guide when a design doesn't adhere to JGS style. Refrain from using other color scheme not defined in the JGS color palette. The goal of this style guide is to drive consistency in branding without constraining the design process.

Developers are free to create their own layout and flow as no specifics are defined. Icons are not defined in this style guide.
Typography
Source Sans Pro
10pxThe quick brown fox jumps over the lazy dog
12pxThe quick brown fox jumps over the lazy dog
14pxThe quick brown fox jumps over the lazy dog
18pxThe quick brown fox jumps over the lazy dog
24pxThe quick brown fox jumps over the lazy dog
32pxThe quick brown fox jumps over the lazy dog
40pxThe quick brown fox jumps over the lazy dog
48pxThe quick brown fox jumps over the lazy dog
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700');
Color Palette
#0072BC
#218BEC
#E6F4F6
#F5FAFA
#003C83
#22B24C
#43C586
#43C58E
#ABFCC2
#ABFCC2
#454545
#575757
#676767
#929292
#A8A8A8
#fff
background: rgba(0,113,188,1);
background: -moz-linear-gradient(45deg, rgba(0,113,188,1) 0%, rgba(144,216,165,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,113,188,1)), color-stop(100%, rgba(144,216,165,1)));
background: -webkit-linear-gradient(45deg, rgba(0,113,188,1) 0%, rgba(144,216,165,1) 100%);
background: -o-linear-gradient(45deg, rgba(0,113,188,1) 0%, rgba(144,216,165,1) 100%);
background: -ms-linear-gradient(45deg, rgba(0,113,188,1) 0%, rgba(144,216,165,1) 100%);
background: linear-gradient(45deg, rgba(0,113,188,1) 0%, rgba(144,216,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0071bc', endColorstr='#90d8a5', GradientType=1 );
Buttons
Button Label
Button Label
Button Label
Button Label
.button-classname{
    padding:10px 25px;
    border-radius: 4px;
    color:#fff;
}

.button-class:hover{
    filter: brightness(1.2);
}
Button Label
.button-classname{
padding:10px 25px;
border-radius: 4px;
color:#fff;
border: #fff solid 1px;
background:none;
}

.button-classname:hover{
color:#282828;
background:#fff
}
Native App Theme
Feel free to select which theme to be used as needed. Icons should be consistent but not limited on the shown example. Mobile theme was developed in outsystems, please contact romeojozer.longalong@jgsummit.ph if you want a copy of the .OML
Default Light Theme