Framework
Global Presets UI Style Guide
00. General Guidelines
All borders, lines and dividers: 1px wide. Various colours.
Drop shadows: very subtle
01. Colour palette
#000000
rgb(0,0,0)
#ff2216
rgb(255,34,22)
#1b0abd
rgb(27,10,189)
#fbb911
rgb(251,185,17)
#a13dcb
rgb(161,61,203)
#16f1dc
rgb(22,241,220)
#2E2D2C
#FC423D
#362FC1
#a13dcb
rgb(161,61,203)
#16f1dc
rgb(22,241,220)
#706F6F
#F47A7A
#4D4DC1
#F7D186
#a13dcb
rgb(161,61,203)
#16f1dc
rgb(22,241,220)
#C6C6C6
#F49090
#8484D3
#F7D9A4
#a13dcb
rgb(161,61,203)
#16f1dc
rgb(22,241,220)
#EDEDED
#F9B2B2
#ACACE2
#f7e8d4
#a13dcb
rgb(161,61,203)
#16f1dc
rgb(22,241,220)
02. Text styles
Defined font styles
Primary
Secondary
Heading 1
Heading 1
Poppins bold 700,
desktop size 50px
tablet size 48px
mobile size 46px
Heading 2
Heading 2
Montserrat Light 300,
desktop size 46px
tablet size 44px
mobile size 42px
Heading 3
Heading 3
Montserrat Light 300,
desktop size 38px
tablet size 36px
mobile size 34px
Heading 4
Heading 4
Montserrat Light 300,
desktop size 36px
tablet size 34px
mobile size 32px
Heading 5
Heading 5
Montserrat Light 300,
desktop size 32px
tablet size 30px
mobile size 28px
Heading 6
Heading 6
Montserrat Light 300,
desktop size 24px
tablet size 22px
mobile size 20px
Label accent
Accent
Montserrat Light 300,
desktop size 19px
tablet size 19px
mobile size 18px
(size 24 for bigger text)
Body
Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.
Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu
Montserrat Light 300,
desktop size 18px
tablet size 17px
mobile size 16px
Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.
Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu
Montserrat Light 300,
desktop size 17px
tablet size 16px
mobile size 16px
Body
Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.
Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu
Montserrat Light 300,
desktop size 19px
tablet size 18px
mobile size 17px
Cupcake ipsum dolor sit amet bear claw jujubes jelly beans jelly. Apple pie dragée muffin lollipop I love chupa chups I love dragée gingerbread.
Sweet gummi bears gingerbread chocolate chocolate bar sweet. Chocolate gummies tiramisu sesame snaps lemon drops lollipop dragée. Bear claw tiramisu tiramisu.
Montserrat Light 300,
desktop size 16px
tablet size 16px
mobile size 16px
List
- Lemon drops
- Tiramisu
- Gingerbread
03. Modules
The last part of this style guide handles some of the most-used modules in the layouts. This gives us options that we can use as to create unique layouts that are diverse and interesting but still on brand.
Primary
Secondary
Tertiary
Divider
Social Media Follow
Image
standard square corners
rounded corners
drop shadow
Person
Name Goes Here
Position
Cupcake I love sesame snaps jelly beans. Gummies pie cake carrot cake marzipan. Pie I love jelly beans I love icing. I love sugar plum tart gummi bears muffin topping.
Name Goes Here
Position
Cupcake I love sesame snaps jelly beans. Gummies pie cake carrot cake marzipan. Pie I love jelly beans I love icing. I love sugar plum tart gummi bears muffin topping.
Accordion
Question here
Answer here
Question here
Answer here
