UI Styl e Guidelines
BBy
y Pratik Agade
Pratham Malhotra
Index. 01. Colors 06. Textfields
02. Typography 07. Cards
03. Iconography
04. Spacing
05. Bu ttons
0 1. Colors
B rand Colors
Primary / #023047 Secondary / #219ebc
State Colors
Info Success Warning Error
#2F80ED #27AE60 #E2733B #EB5757
B lack Colors
Black 1 Black 2 Black 3 White
#000000 #1D1D1D #282828 #FFFFFF
Grey Colors
Gray 1 Gray 2 Gray 3 Gray 4 Gray 5
#333333 #4F4F4F #828282 #BDBDBD #E0E0E0
0 2. Typography
Inter
Aa
Google Fonts
Name Font size Line Height
Heading 1 56 px .
61 6 px
Heading Heading 2 48 px 52 8 . px
Line height and paragraph
spacing for heading is
Heading 3 40 px 44 px
1.1 x font size
Heading 4 32 px 35 2 . px
Heading 5 24 px .
26 4 px
Heading 6 20 px 22 px
Inter
Google Fonts
Name Font size Line Height
Aa
Large Text Bold 20 px 28 px
La rge Text Regular
Medium Text Bold 18 px 25.2 px
Medium Text Regular
Normal Text Bold px
ody
16 22.4 px
B
Normal Text Regular
Line height and paragraph
spacing for body text is : Small Text Bold 14 px 19.6 px
1.4 x font size
Small Text Regular
03 Iconog . raphy
Icon sets
f ill icons
04. Spacing
Levels
8 px 16 px 24 px 32 px 40 px 56 px 72 px 80 px 96 px 120 px
05. Buttons
Button Rules:
Full-width Button :
Padding Left Right -> 5 x font size
Left Right -> determined by the device width
Padding Top Bottom -> 1 x font size Top Bottom -> 1 x font size
Color Size Full-width
Primary Small Default
Button Sample Button Sample Button Sample
Secondary Normal Hover
Button Sample Button Sample Button Sample
Medium Active
Button Sample Button Sample
Large Disable
Button Sample Button Sample
Variants
Normal Outline Icon Text Icon
Default
Button Sample Button Sample Button Sample
Hover
Button Sample Button Sample Button Sample
Active
Button Sample Button Sample Button Sample
Disable
Button Sample Button Sample Button Sample
06. Textfields
Label Status
Pla,ceho & Placeholder
lder
Status Input Rules:
Label Padding Left -> 2 x font size
Padding Top-Bottom -> 1 x font size
Padding Right(icon) -> 2 x font size
Input Form ( No label & Status ) Input Form + Status ( No label ) Input State
Input Text Input Text Input Text
Status Success !
Input Text
Input Form + Label Input Form + Label & Status
Warning !
Label Sample Label Sample
Input text Input Text Here Input Text
Empty Error !
11. Cards
Cards
Card Title Card Title Card Title
Some quick example text to build on Some quick example text to build on Some quick example text to build on
the card title and make up the bulk the card title and make up the bulk the card title and make up the bulk
of the card's content. make up the of the card's content. make up the of the card's content. make up the
bulk of the card's content. bulk of the card's content. bulk of the card's content.
Link Read More
Pratik Agade
Pratham Malhotra
