Design Standards

Design Standards for Web Application

---

• Use a 4 color palette. It consists of white, red, purple and black.
• Try to follow material design. (https://material.io/design/)
• Use fontawesome or our own icons for iconography.
• Use jQuery for animation.
• Stick to our template and use the components provided in them (widgets, cards, forms etc.) instead of creating new ones.

FONT

• Font Family: Roboto

• Font Size:

Element	Specs
Normal	1rem
Page Title	3.21rem
Heading	2.42rem
Sub-Heading	1.42rem

• Capitalize font on buttons.

• Text Color:

Element	Specs
Normal Text	#000000(black)
Button Text	#FFFFFF(white)
Link Text(active)	#5e72e4(Blue)
Link Text(visited)	No change

• Line height:

Element	Specs
Normal	1.72rm
Page Title	3.21rem
Heading	2.86rem
Sub-Heading	2.14rem

Others

• Buttons should have a width to height ration of 144:40 (preferable 144px width by 40 px height).
• Small icons like checkboxes should be 28px.
• Minimum spacing between any two elements including space between an element and screen border itself should be not less than 19px.