UI STYLE GUIDE
COLORS
Background Colors • Home Background
• Template Background • Sections Background • Forms Background •
#f5f5f5
• Dark Background
#ffff
#141414
Buttons Colors • Error Color • Button Color
#e64d3b
#d0463b
• Main Color Button • Button color • Success color
#48b86c
#42a15e
#fdcf11
Text Colors • • • • • #221e1f
Color text Text Buttons Titles Lines/Separators Tables borders
• Links color
#5c9540
• Alert Color • Buttoon color
#f3bc18
FONT-FAMILY
Font Family Style:
Font family:
Meta Pro
Thin Light Medium Bold Italic Bold
Aa Aa Aa Meta Pro
Bold
Ligth
Thin
Meta Pro
Meta Pro
TYPOGRAPHY AND LAYOUT
Heading 1 Font-Family Font-Size
Meta Pro 48px
A little design is a dangerous thing.
Heading 2 Font-Family Font-Size
Meta Pro 32px
A little design is a dangerous thing.
Heading 3 Font-Family Font-Size
Meta Pro 20-24px
A little design is a dangerous thing.
Subtitle Font-Family Font-Size
Meta Pro 16px
A little design is a dangerous thing.
Body Font-Family Font-Size
Meta Pro 12-16px
A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing. A little design is a dangerous thing.
BUTTONS
1
2
Button 1:
Button 3:
Button 2:
Button 4:
Default: #e54c3b Hover:# d0463a Active: # e54c3b Disabled :50% opacity
Default: #4eb96e Hover:# 43a05c Active: #4eb96e Disabled: 50% opacity
Default:# ffcd06 Hover:# f2bc19 Active:# ffcd06 Disabled:50% opacity
Default: #88888a Hover:# 7e8082 Active: #88888a Disabled: 50% opacity
3
4
FORMS
Inputs
Checkboxes Buttons Empty:#ffff
Selected: Border # d0d0d0
Typing:# d0d0d0
Unchecked Item Item on Hover Checked Disable
Disabled:Opacity 50%
Error:# e54c3b
Radio Buttons
Succesful:# 4eb96e
Empty:#fff
Unchecked Item Item on Hover Checked Disable
TABLES
Styles Row 1 :#ffffff Row 2 : #f5f5f5 Header Table : #1c3260
ICONOGRAPHY
Margin : 5px
A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. Antoine de Saint-Exupery