UI Style Guide

Company UI guidelines

Brand assets

Logo

Logo colors

#00B140 rgb(0, 177, 64) Hover: #009736
#FFFFFF rgb(255, 255, 255)  
#B1B4B4 rgb(177, 180, 180) Hover: #999999

Color palette

Sellfy green (primary)
Blue (secondary, hyperlinks)
Yellow (warnings, badges)
Red (errors)
#00B140 rgb(0, 177, 64) Hover: #009736
#FFBF3F rgb(255, 191, 63) Hover: #D9A336
#CF4520 rgb(207, 69, 32)  
 
Headers
Text
UI elements/strokes
Background
#111111 rgb(17, 17, 17) Inverted: #FFFFFF
#666666 rgb(102, 102, 102) Inverted: #EEEEEE
#D0D3D4 rgb(208, 211, 212) Hover: #B1B4B4
#F4F4F4 rgb(244, 244, 244)  

Typography

H1 - this is a page header

  • Proxima Nova Bold / 48px
  • Line height: 1 (48px)
  • Color: #111111
  • Color (inverted): #FFFFFF

H2 - this is a section header
(product page headline)

  • Proxima Nova Regular / 34px
  • Line height: 1 (34px)
  • Color: #111111
  • Color (inverted): #FFFFFF

H3 - this is a subheader

  • Proxima Nova Regular / 24px
  • Line height: 1.5 (36px)
  • Color: #111111
  • Color (inverted): #FFFFFF

H3 - this is a paragraph headline

  • Proxima Nova Semibold / 18px
  • Line height: 1 (18px)
  • Color: #111111
  • Color (inverted): #FFFFFF

This is a body text

  • Proxima Nova Regular / 16px
  • Line height: 1.5 (24px)
  • Color: #666666
  • Color (inverted): #EEEEEE

This is a small additional text

  • Proxima Nova Regular / 14px
  • Line height: 1 (14px)
  • Color: #999999
  • Color (inverted): #BBBBBB

Typography usage

H1 should only be used as page main headline and H3 can be added under it. H3 can be added under H2. H1, H2 and H3 only can be used in those ways. H4 can be only used as a paragraph title and all the paragraphs should be formated in body text style (width exceptions when subtitle H3 can be long too but then it should be paired with H1 and H2 only).

Links in typography can be shown in different ways:
1) used in blue link color #3C97EF (mostly in paragraphs and separately added links);
2) by using different (heavier) font weight (regular in semibold, semibold in bold, etc.);
3) by using hover effect - lighter to darker color (shown in Color Palette section).
*1) and 2) shouldn't be mixed but 2) and 3) should always be used together.

Buttons and badges

Buttons

Padding 15px, 30px Corners 3px Font Proxima Nova Bold 14px

Padding 20px, 45px Corners 3px Font Proxima Nova Bold 16px

Padding 30px, 60px Corners 3px Font Proxima Nova Bold 16px

Button colors

#00B140 rgb(0, 177, 64) Hover: #009736
#FFFFFF / #D0D3D4 rgb(255, 255, 255) Hover: #B1B4B4

 

Button text colors

#FFFFFF rgb(255, 255, 255) Hover: #FFFFFF
#666666 rgb(102, 102, 102) Hover: #111111

 

Toggle checkbox

Size 16px, 29px Circle size 14px Inactive color #B1B4B4 Hover color #666666 Active color #00B140

 

Badges

10% OFF

Padding 6px, 10px Corners 3px Font Proxima Nova Bold 14px Color #FFBF3F Hover color #D9A336

PRO

Padding 5px, 7px Corners 3px Font Proxima Nova Bold 12px Color #CF4520 Hover color #B03B1B

Grids

Total width 960px
Number of columns 12
Gutter width 20px
Column width 60px

UI elements

Dividers

Vertical divider

Weight 1px Color #D0D3D4 Dash 5px Gap 5px

Horizontal divider

Weight 1px Color #D0D3D4 Dash 5px Gap 5px

Pattern

Background #4D585F Pattern #FFFFFF 10% opacity Click here to download: Dark pattern

Forms

@
https://sellfy.com/

Input paddings (all sides) 15px Stroke #D0D3D4 / #B1B4B4 Filing color #FFFFFF Corners 3px Font Proxima Nova Regular 14 px, #D0D3D4 / #B1B4B4

Icons

Icons from Font Awesome icon pack
Lineking icon set

Success/error notifications

Success message!
Error message!

Height 40px Padding 10px, 15px Font Proxima Nova Semibold 13px, #FFFFFF Filing color #FFFFFF

Colors Success #00B140 / Error #CF4520 Icons 16px

Collections

Table view

Table name

Small button

Column name (h2)

Column name (h2)

Primary info (body text)
Description (additional text/link)
Secondary info (body text)

Width 300px Padding 20px Price tag Proxima Nova Bold 16px Button color #00B140 Button padding 10px

Button text Proxima Nova Bold 13px, #FFFFFF