ePG - Light Theme

User Interface Style Guide

Colors

#63DBC1 #53C1A9 #28313B #97A4B1 #319BF5

40, 49, 59 151, 164, 177 49, 155, 245
99, 219, 193 83, 192,169

#319BF5 #EB5858 #FFFFFF

232, 238, 244 234, 88, 88 255, 255, 255

Font

AaBcDd
Nunito is chosen for this
app. Because of its
specificity.

Heading Level 1 Paragraph

Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In

Heading Level 2 malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at

vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum

Heading Level 3 et, suscipit vehicula odio. Vestibulum interdum vestibulum felis ac molestie.
Praesent aliquet quam et libero dictum, vitae dignissim leo eleifend. In in turpis
turpis. Quisque justo turpis, vestibulum non enim nec, tempor mollis mi. Sed vel
Heading Level 4 tristique quam.

Heading Level 5
Quote

Heading Level 6 Grumpy wizards make toxic brew for the evil Queen
and Jack. One morning, when Gregor Samsa woke from
Heading Level 7
troubled dreams, he found himself transformed in his
Heading Level 8 bed into a horrible vermin.

Text Boxes

Non active Active (Selected)

Nam porttitor blandit accumsan. Ut vel dictum sem astaic. Nam porttitor blandit accumsan. Ut vel dictum sem astaic.
In malesuada enim in dolor euismod, id com consectur la. In malesuada enim in dolor euismod, id com consectur la.

Nam porttitor blandit accumsan. Ut vel dictum sem, a pretiu Nam porttitor blandit accumsan. Ut vel dictum sem, a pretiu
dui. In malesuada enim in dolor euismod, id commodo miza dui. In malesuada enim in dolor euismod, id commodo miza
consectetur. Curabitur at vestibulum nisi. Nullam vehiculan consectetur. Curabitur at vestibulum nisi. Nullam vehiculan
si velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vei. si velit. Mauris turpis nisl, molestie ut ipsum

Buttons

Default B U T TO N B U T TO N B U T TO N B U T TO N

Hover B U T TO N B U T TO N B U T TO N B U T TO N

Disabled B U T TO N B U T TO N B U T TO N B U T TO N

Inputs Input States

Default First Name First Name Mark Woods

Active First Name Mark Woods

Disabled First Name First Name Mark Woods

Something is wrong, please check your name

Info copy First Name First Name First Name

Some info copy here Your data is private. Learn more.

Tooltips

Need some help? Need some help? Need some help? Need some help?
Lorem ipsum dolor sit amest Lorem ipsum dolor sit amest Lorem ipsum dolor sit amest Lorem ipsum dolor sit amest
esta pierto los oslos esta pierto los oslos esta pierto los oslos esta pierto los oslos

Boxes - Pop-Ups

Pop-Up 1
Want to delete this items?

OK

Selectlist

Select Option Option 1 Option 1

Option 2 Option 2

Option 3 Option 3
Option 1 Option 2

Option 4 Option 4

Option 5 Option 5

Select Option

Option 1 Option 2