Colors
Colors are used in our products as a way to carry our brand and voice into our experiences. With color we can highlight movement and draw user attention to specific elements.
Typography colors
This is the color used for typography.
| Hex | Token | Usage |
|---|---|---|
|
Primary (Black) #050505 |
$font_primary | Headline Text |
|
Secondary #63656A |
$font_secondary | Subhead |
|
Tertiary #C3C4C7 |
$font_tertiary | Disabled States |
|
Quaternary #FFFFFF |
$font_quaternary | Text on Dark Backgrounds |
Shades
This is the color pallet used most frequently on the app
| Hex | Token | Usage |
|---|---|---|
|
Black #050505 |
$black | Same as: Shade Black $black, Primary $font_primary |
|
Grey 5 #63656A |
$grey_5 | Same as: Type $font_secondary |
|
Grey 4 #8B8E95 |
$grey_4 | Mainly used for Loading Indicator |
|
Grey 3 #C3C4C7 |
$grey_3 | Same as: Type Tertiary $font_tertiary |
|
Grey 2 #DCDFE4 |
$grey_2 | Mainly used for dividers |
|
Grey 1 #F3F4F5 |
$grey_1 | Mainly used for call outs, element backgrounds disabled button background |
|
White #FFFFFF |
$white | Same as: Type Quaternary $font_quaternary |
Primary colors or brand colors
This is the color pallet used most frequently in the app
| Hex | Token | Usage |
|---|---|---|
|
Background #050505 |
$background | Same as: Shade Black $black, Primary $font_primary |
|
Dark mode Card #2F3541 |
$darkmode_card | Card on Darkmode |
|
Dark Buttons Betslip #303030 |
$betslip | Mainly used for the Betslip Bar and Secondary Buttons |
|
Action Grey #F3F4F5 |
$xxx | Same as: Shade Grey 1 $grey_1 |
Brand Colors
These colors are used within marketing materials.
| Hex | Token | Usage |
|---|---|---|
|
Gold #c0a971 |
$brand_1 | Brand |
|
Gold 2 #9E8B5B |
$brand_2 | Brand on White Background (Accessibility) |
|
Beige 1 #f2f2eb |
$mkg_beige_1 | TBD |
|
Beige 2 #e5e5d8 |
$mkg_beige_2 | TBD |
|
Background 1 #d6d1c6 |
$mkg_Bg_1 | TBD |
|
Background 2 #ada99e |
$mkg_Bg_2 | TBD |
|
Background 3 #c1c6c9 |
$mkg_Bg_3 | TBD |
|
Background 4 #9b9ea1 |
$mkg_Bg_4 | TBD |
|
Black #000000 |
$mkg_Black | TBD |
|
Grey #828282 |
$mkg_Grey | TBD |
|
Grey 1 #100f0f |
$mkg_Grey_1 | TBD |
|
Grey 2 #1b1b1b |
$mkg_Grey_2 | TBD |
|
Grey 3 #232323 |
$mkg_Grey_3 | TBD |
Action colors or system colors
These colors are used to indicate positive or negative actions within our experience. An example is the use of green if the betting lines change trending upward during a live game.
| Hex | Token | Usage |
|---|---|---|
|
Action #475EEC |
$action | On Light: Links, Alerts |
| Action 2 #79BFFF |
$action_2 | On Light: Links, Alerts |
|
Danger #ED2A2A |
$danger | On Light: Live Indicator, Negative, Lines Down |
|
Danger 2 #D45050 |
$danger_2 | On Light: Live Indicator, Negative, Lines Down |
|
Success #61BA2B |
$success | Positive, Lines Up, Can be used on shapes, icons or fonts, depending on the element. |
|
Caution #FFC700 |
$caution | Warning |
Accent colors
Used in backgrounds of badges and flags
| Hex | Token | Usage |
|---|---|---|
|
Accent Blue #6CB3DB @ 10% |
$accent_01 | Used to indicate: New |
|
Accent Green #61BA2B @ 10% |
$accent_02 | Used to indicate: Won, Risk Free |
|
Accent Orange #D6BC68 @ 10% |
$accent_03 | Used to indicate: Exclusive |
|
Accent Red #ED2A2A @ 10% |
$accent_04 | Used to indicate: Live |
Light and Dark Backgrounds
We will support both light and dark backgrounds within our experiences. Because of this we use certain colors for our icons in both experiences. It is also necissary to adjust the colors used between modes for better contrast.
Team Colors
To create a truly unique experience and differentiate our products from others we are utilizing team and league colors. This brings our visuals to a top tier level and creates a premium feel.
Accessibility
It is our goal to be the best in the industry when thinking about all of our users and making sure we use a color palette that passes AA standards.
Brand & Marketing Colors
These colors are used within marketing materials.
| Hex | Token | Usage |
|---|---|---|
|
Gold #c0a971 |
$mkg_gold_1 | Brand |
|
Gold 2 #9E8B5B |
$mkg_gold_2 | Brand on White Background (Accessibility) |
|
Beige 1 #f2f2eb |
$mkg_beige_1 | TBD |
|
Beige 2 #e6e5d8 |
$mkg_beige_2 | TBD |
|
Background 1 #d6d1c6 |
$mkg_Bg_1 | TBD |
|
Background 2 #ada99e |
$mkg_Bg_2 | TBD |
|
Background 3 #c1c6c9 |
$mkg_Bg_3 | TBD |
|
Background 4 #9b9ea1 |
$mkg_Bg_4 | TBD |
|
Black #000000 |
$mkg_Black | TBD |
|
Grey #828282 |
$mkg_Grey | TBD |
|
Grey 1 #100f0f |
$mkg_Grey_1 | TBD |
|
Grey 2 #1b1b1b |
$mkg_Grey_2 | TBD |
|
Grey 3 #232323 |
$mkg_Grey_3 | TBD |
Brand & Marketing Accent Colors
These colors are used within marketing materials.
| Hex | Token | Usage |
|---|---|---|
|
Yellow 1 #feae16 |
$mkg_yellow_1 | Tickers |
|
Yellow 2 #fbca19 |
$mkg_yellow_2 | Tickers |
|
Yellow 3 #fde6aa |
$mkg_yellow_3 | Tickers |
|
Red 1 #db234d |
$mkg_red_1 | Tickers |
|
Red 2 #fc3f2c |
$mkg_red_2 | Tickers |
|
Red 3 #ff7b51 |
$mkg_red_3 | Tickers |
|
Green 1 #006450 |
$mkg_green_1 | Tickers |
|
Green 2 #22a360 |
$mkg_green_2 | Tickers |
|
Green 3 #b5deaf |
$mkg_green_3 | Tickers |
|
Blue 1 #19476e |
$mkg_blue_1 | Tickers |
|
Blue 2 #068de0 |
$mkg_blue_2 | Tickers |
|
Blue 3 #c2e1e4 |
$mkg_blue_3 | Tickers |
|
Purple 1 #3f2dae |
$mkg_purple_1 | Tickers |
|
Purple 2 #5650e6 |
$mkg_purple_2 | Tickers |
|
Purple 3 #9893dd |
$mkg_purple_3 | Tickers |