branding style guide

always start by defining your style. story-board your colors, font, and utility buttons for consistent and recognizable design.

colors

primary colors

primary 1
#516eef

secondry colors

secondary 1
#7051EF
secondary 2
#FF6C98
secondary 3
#F7F6FF
secondary 4
#EFF4FF
secondary 5
#FFF4FA

Neutral Colors

neutral 700
#3A395E
neutral 600
#6E6D8F
neutral 500
#80809D
neutral 400
#E5E5EA
neutral 300
#F7F7FA
neutral 200
#FAFAFC
neutral 100
#FFFFFF

typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 66px/1.182em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 48px/1.250em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 28px/1.286em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 24px/1.333em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 20px/1.400em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 18px/1.444em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Default - 20px/1.778em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph large - 22px/1.8em
Bold - Lorem ipsum dolor sit amet
bold text
Italic - Lorem ipsum dolor sit amet
bold text
Figure & Figure Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ullamcorper.
block quote

google material icons - rounded

search
home
menu
close
settings
done
expand_more
check_circle
favorite
add
delete
arrow_back
star
chevron_right
logout
arrow_forward_ios
add_circle
cancel
arrow_back_ios
arrow_forward
arrow_drop_down
more_vert
check
check_box
toggle_on
grade
open_in_new
check_box_outline_blank
refresh
login
chevron_left
expand_less
radio_button_unchecked
more_horiz
apps
arrow_right_alt
radio_button_checked
download
remove
bolt
toggle_off
arrow_upward
filter_list
delete_forever
autorenew
menu_open
key
block
sort
undo
restart_alt
backspace

google material icons - filled

search
home
menu
close
settings
done
expand_more
check_circle
favorite
add
delete
arrow_back
star
chevron_right
logout
arrow_forward_ios
add_circle
cancel
arrow_back_ios
arrow_forward
arrow_drop_down
more_vert
check
check_box
toggle_on
grade
open_in_new
check_box_outline_blank
refresh
login
chevron_left
expand_less
radio_button_unchecked
more_horiz
apps
arrow_right_alt
radio_button_checked
download
remove
bolt
toggle_off
arrow_upward
filter_list
delete_forever
autorenew
menu_open
key
block
sort
undo
restart_alt
backspace
icon fonts

buttons

Large
Button Primary - Large
default
Button Primary - Default
small
Button Primary - Small
secondary
Button Secondary - Default