Color Pallete

* - has hover color


Main Site Colors

Main site color
#1C7CD5 *
  • $color-primary ($blue-4)
  • Used for: primary buttons, outline button hover, navigation, icons
  • Use only with light text
  • Hover color: $color-primary-lightened ($blue-5 - #069CF9)
Secondary site color
#0F2940
  • $color-secondary ($blue-1)
  • Used for: main text color, Find a Derm Bar, navigation
  • Use only with light text
  • Hover color: TBD
Site accent color
#DEE3EC *
  • $color-accent
  • Used for: accent button
  • Use only with dark text
  • Hover color: $color-accent-darkened (#C9D1DF)
Site footer color
  • $color-footer
  • Used for: footer
  • Use only with light text
  • Hover color: TBD
Site main background color
#F7F7F7
  • $color-main-background
  • Used for: main background color of site
  • Use only with dark text
  • Hover color: TBD

Main Site Text Colors

Main text color
#0F2940
  • $color-text-primary ($blue-1)
  • Used for: h1, h2, h3, h4, h5, slideshow h1, slideshow h2, slideshow p
  • Use only with light background
  • Hover color: TBD
Secondary text color
#222222
  • $color-text-secondary ($text-2)
  • Used for: h6, lead, p desktop, caption - light, p small
  • Use only with light background
  • Hover color: TBD
Accent text color
#444444
  • $color-text-accent ($text-3)
  • Used for: quote, caption - strong
  • Use only with light background
  • Hover color: TBD
Card text color
#333333
  • $color-text-card
  • Used for: text on cards
  • Use only with light background
  • Hover color: TBD
White text color
#FFFFFF
  • $color-white
  • Used for: text on primary buttons, footer links
  • Use only with dark background
  • Hover color: TBD
Link text color light background
  • $color-link-light-bg ($blue-4)
  • Used for: links only, members nav dropdown title
  • Use only with light background
  • Hover color: $color-link-light-bg-lightened ($blue-5)
Link text color light background - regular text color
  • Inherit regular text color from parent element
  • Used for: links only, card titles
  • Use only with light background
  • Hover color: $color-link-light-bg-lightened ($blue-5)
Link text color dark background
  • $color-link-dark-bg
  • Used for: links only, public nav dropdown title
  • Use only with dark background
  • Hover color: $color-link-dark-bg-lightened (#A0CFFA)

Texts

Text 1
#000000
  • $text-1
  • Used for: TBD
  • Use only with light background
  • Hover color: TBD
Text 2
#222222
  • $text-2
  • Used for: TBD
  • Use only with light background
  • Hover color: TBD
Text 3
#444444
  • $text-3
  • Used for: TBD
  • Use only with light background
  • Hover color: TBD
Text 4
#B8B8B8
  • $text-4
  • Used for: TBD
  • Use only with dark background
  • Hover color: TBD

Reds

Red 1
#CC1D1D
  • $red-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Red 2
#E63E2E
  • $red-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Red 3
#F97878
  • $red-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Red 4
#FCDAD4
  • $red-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Oranges

Orange 0
#F8622B
  • $orange-0
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Orange 1
#F77F08
  • $orange-1
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Orange 2
#F8972B
  • $orange-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Orange 3
#F9BA80
  • $orange-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Orange 4
#FCEACD
  • $orange-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Yellows

Yellow 0
#F9A716
  • $yellow-0
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Yellow 1
#F7BF3F
  • $yellow-1
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Yellow 2
#F7D131
  • $yellow-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Yellow 3
#F7E79F
  • $yellow-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Yellow 4
#FCF8EB
  • $yellow-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Greens

Green 1
#03821B
  • $green-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Green 2
#96C940
  • $green-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Green 3
#B8DD6F
  • $green-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Green 4
#EDF7CD
  • $green-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Mints

Mint 1
#038389
  • $mint-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Mint 2
#00ABA4
  • $mint-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Mint 3
#87E8DF
  • $mint-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Mint 4
#D2F7F1
  • $mint-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Purples

Purple 1
#720F48
  • $purple-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Purple 2
#A51F67
  • $purple-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Purple 3
#C14C8F
  • $purple-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Purple 4
#F9E5F2
  • $purple-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Pinks

Pink 1
#BA119A
  • $pink-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Pink 2
#DB09AA
  • $pink-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Pink 3
#F82ABD
  • $pink-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Pink 4
#F97DDC
  • $pink-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Pink 5
#F9C7EF
  • $pink-5
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Violets

Violet 1
#482C96
  • $violet-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Violet 2
#6B3DD1
  • $violet-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Violet 3
#7F29FB
  • $violet-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Violet 4
#9F77F7
  • $violet-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Violet 5
#D9D0F4
  • $violet-5
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD

Grays

Gray 0
#4A5669
  • $gray-0
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Gray 1
#656F7F
  • $gray-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Gray 2
#838EA1
  • $gray-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Gray 3
#A6B1C5
  • $gray-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Gray 4
#C1CBDC
  • $gray-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Gray 5
#D8DFEA
  • $gray-5
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Gray 6
#E8ECF3
  • $gray-6
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Gray 7
#F3F6F9
  • $gray-7
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Blues

Blue 1
#0F2940
  • $blue-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Blue 2
#054972
  • $blue-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Blue 3
#0078BF
  • $blue-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Blue 4
#1C7CD5
  • $blue-4
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Blue 5
#069CF9
  • $blue-5
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
Blue 6
#9FD7F4
  • $blue-6
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Blue 7
#E8F5F9
  • $blue-7
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD

Aquas

Aqua 1
#44BCD8
  • $aqua-1
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Aqua 2
#90CFE9
  • $aqua-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Aqua 3
#A8E4F8
  • $aqua-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
Aqua 4
#E1F0F4
  • $aqua-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD