Login
Home
New App
Let's Collaborate
Style Guide
Log-Out
Login
User Interface
Typography
Color Palette
Buttons
Themes
Logo Guidelines
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
10px
The quick brown fox jumps over the lazy dog
12px
The quick brown fox jumps over the lazy dog
14px
The quick brown fox jumps over the lazy dog
18px
The quick brown fox jumps over the lazy dog
24px
The quick brown fox jumps over the lazy dog
32px
The quick brown fox jumps over the lazy dog
40px
The quick brown fox jumps over the lazy dog
48px
The 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
Open in a new screen
Dark Theme
Open in a new screen
JGS Green
Open in a new screen
JGS Blue
Open in a new screen
Logo
Download JGS logo guidelines
Loading