UI Style Guide

Company UI guidelines

Brand assets

Logo

Logo colors

#00B140 R0 G177 B64 Hover: #009736
#FFFFFF R255 G255 B255  
#B1B4B4 R177 G180 B180 Hover: #999999

Color palette

Sellfy green
Background
UI elements/strokes
#00B140 R0 G177 B64 Hover: #009736
#F4F4F4 R244 G244 B244 Hover: #FFFFFF
#D0D3D4 R208 G211 B212 Hover: #B1B4B4
 
Titles
Text
Links
#333F48 R51 G63 B77 Hover: #4D585F
#5B6770 R91 G103 B112 Hover: #5B6770

Typography

H1 - this is a page header

  • Proxima Nova Bold / 48px
  • Line height: 48px
  • Color: #333F48
  • Alternative: #FFFFFF

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

  • Proxima Nova Regular / 34px
  • Line height: 1 (34px)
  • Colors: #333F48
  • Alternative: #FFFFFF

H3 - this is a subheader

  • Proxima Nova Regular / 24px
  • Line height: 1.5 (36px)
  • Colors: #86939E
  • Alternative: #333F48

H3 - this is a paragraph headline

  • Proxima Nova Semibold / 18px
  • Line height: 1 (18px)
  • Colors: #86939E
  • Alternative: #FFFFFF

This is a body text

  • Proxima Nova Regular / 16px
  • Line height: 1.5 (24px)
  • Colors: #5B6770
  • Alternative: #FFFFFF
This is a small additional text
  • Proxima Nova Regular / 14px
  • Line height: 1 (14px)
  • Colors: #5B6770
  • Alternative: #FFFFFF

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 R0 G177 B64 Hover: #009736
#FFFFFF / #D0D3D4 R255 G255 B255 Hover: #B1B4B4

 

Button text colors

#FFFFFF R255 G255 B255 Hover: #B1B4B4
#5B6770 R91 G103 B112 Hover: #5B6770

 

Toggle checkbox

Size 16px, 29px Circle size 14px Inactive color #B1B4B4 Hover color #5B6770 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/

Default height 40px 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)

Product card

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

Button text Proxima Nova Bold 13px, #FFFFFF