Variables

Variables is a set of global constraints that define the basic parameters of all our UI elements.

---

1. Content

1.1 Text Size

• Define the size of the header and normal text for standard using

  Content	Size	Content	Size
  <h1></h1>	2.5rem	<h5></h5>	1.25rem
  <h2></h2>	2rem	<h6></h6>	1rem
  <h3></h3>	1.75rem	<p></p>	1rem
  <h4></h4>	1.5rem

1.2 Fonts

• Font: Quicksand on Google Fonts

  For your own customized font, you can override by yourself

• Supports
  • Light: 300
  • Regular: 400
  • Medium: 500
  • Bold: 700

1.3 Icons

• For more detail on icons, you can refer our documents - icon

  papoGen.css includes a complete port of Font Awesome 5.0.8 designed the FontAwesome team for its standard icon set.

---

2. Variables

2.1 Standard Colors

• Define the standard using colors

  Variable	Hex values	Variable	Hex values
  primary	#2D98DA	link	#2D98DA
  secondary	#1B1C1D	link-hover	#45AAF2

  • The color primary is same as the color blue we defined
  • The color secondary is same as the color black we defined
  • The color link is same as the color navy we defined
  • The color link-hover is same as the color inv-navy we defined

2.2 Colors

• Define a set of hex values for common named colors

  Variable	Hex values	Variable	Hex values	Variable	Hex values	Variable	Hex values
  red	#EB3B5A	inv-red	#FC5C65	purple	#8854D0	inv-purple	#A55EEA
  orange	#FA8231	inv-orange	#FD9644	pink	#E84393	inv-pink	#FD79A8
  yellow	#F7B731	inv-yellow	#FED330	brown	#E58E26	inv-brown	#FA983A
  green	#20BF6B	inv-green	#26DE81	grey	#A5B1C2	inv-grey	#D1D8E0
  teal	#0FB9B1	inv_teal	#2BCBBA	black	#1B1C1D	inv-black	#545454
  blue	#2D98DA	inv-blue	#45AAF2	white	#FFFFFF
  navy	#3867D6	inv-navy	#4B7BEC