Guidelines

Color

Last updated: April 2020

Colors at FanDuel are defined in 3 palette variations.


Default palette

The default color mapping for FanDuel’s palette. Colors are named explicitly with lighter or darker variations from the base.

Themed palette

A themed color mapping for white labelling. The Default palette is mapped to a theme independent of the actual color names.

Context palette

Contextual based color mapping. Named by usage and role, independent of the actual color name.


Context pallete

  • fanduelNavy
    headingTextColor
    #1F375B
  • fanduelGreyD4
    bodyTextColor
    #445058
  • fanduelGreyD3
    subTextColor
    #818E95
  • fanduelWhite
    onDarkTextColor
    #FFFFFF
  • fanduelBlueD1
    linkColor
    #1381E0
  • fanduelBlueD2
    linkHoverColor
    #0E67B3
  • fanduelGreyL4
    screenBackgroundColor
    #F0F3F8
  • fanduelWhite
    cardBackgroundColor
    #FFFFFF
  • fanduelGreyL2
    borderColor
    #CFD6DB

Default and Themed palette

  • fanduelGreen
    primaryColor
    #1BB152
  • fanduelGreenL2
    primaryColorL2
    #49C175
  • fanduelGreenL1
    primaryColorL1
    #32B964
  • fanduelGreenD1
    primaryColorD1
    #189F4A
  • fanduelGreenD2
    primaryColorD2
    #137C39
  • fanduelBlue
    secondaryColor
    #1493FF
  • fanduelBlueL2
    secondaryColorL2
    #43ADFF
  • fanduelBlueL1
    secondaryColorL1
    #2C9EFF
  • fanduelBlueD1
    secondaryColorD1
    #1381E0
  • fanduelBlueD2
    secondaryColorD2
    #0E67B3
  • fanduelNavy
    tertiaryColor
    #1F375B
  • fanduelNavyL2
    tertiaryColorL2
    #294B75
  • fanduelNavyL1
    tertiaryColorL1
    #224168
  • fanduelNavyD1
    tertiaryColorD1
    #1C3252
  • fanduelNavyD2
    tertiaryColorD2
    #162740
  • fanduelRed
    destructiveColor
    #E44242
  • fanduelRedL2
    destructiveColorL2
    #FF4F4F
  • fanduelRedL1
    destructiveColorL1
    #F24747
  • fanduelRedD1
    destructiveColorD1
    #DB3F3F
  • fanduelRedD2
    destructiveColorD2
    #BF2D2D
  • fanduelOrange
    supportive1Color
    #F99F4A
  • fanduelOrangeL2
    supportive1ColorL2
    #FFB874
  • fanduelOrangeL1
    supportive1ColorL1
    #FFA958
  • fanduelOrangeD1
    supportive1ColorD1
    #EA913C
  • fanduelOranged2
    supportive1ColorD2
    #DA812D
  • fanduelYellow
    supportive2Color
    #FFCB4D
  • fanduelYellowL2
    supportive2ColorL2
    #FFD87A
  • fanduelYellowL1
    supportive2ColorL1
    #FFCF5B
  • fanduelYellowD1
    supportive2ColorD1
    #F4C041
  • fanduelYellowD2
    supportive2ColorD2
    #E8B436
  • fanduelPurple
    supportive3Color
    #887AEF
  • fanduelPurpleL2
    supportive3ColorL2
    #988CF6
  • fanduelPurpleL1
    supportive3ColorL1
    #9285F6
  • fanduelPurpleD1
    supportive3ColorD1
    #7B6EDD
  • fanduelPurpleD2
    supportive3ColorD2
    #695CC8
  • fanduelGrey
    neutralColor
    #B9C4CB
  • fanduelGreyL5
    neutralColorL5
    #F5F8FC
  • fanduelGreyL4
    neutralColorL4
    #F0F3F8
  • fanduelGreyL3
    neutralColorL3
    #E4E8EE
  • fanduelGreyL2
    neutralColorL2
    #CFD6DB
  • fanduelGreyL1
    neutralColorL1
    #C2CBD1
  • fanduelGreyD1
    neutralColorD1
    #AFBBC2
  • fanduelGreyD2
    neutralColorD2
    #99A8B1
  • fanduelGreyD3
    neutralColorD3
    #818E95
  • fanduelGreyD4
    neutralColorD4
    #455058
  • fanduelWhite
    baseColor
    #FFFFFF