Tags bring attention to a specific piece of content within FanDuel products. They are designed to be used alongside other UI elements to aide a users understanding and can also help promote important content.
Tags are a useful component, however they should not be overused otherwise their significance can be diminished.
Color use with tags is extremely important. To ensure text is legible we have set out colors that should be used for primary and secondary tags. If other color combinations are required, for example, partnership branding then these must be approved by a member of the product design team.
There are three approved color combinations;
fanduelNavy which should be paired with
fanduelYellow which should be paired with
headlineTextColor text and
fanduelGreyL2 background which should be paired with
headlineTextColor text . The grey version can be used to explain items but without making them overly prominent.
The type size is set to
12 - eta and uses uppercase
Proxima Nova Condensed with letter spacing of
1. Text color is dictated by the background color, use the above Color rules.
Tags have a height of
16 - default with padding of
4 - micro. Tags should be
4 - micro away from their paired content to ensure they are related.
In the unlikely event that a tag combined with the paired content exceeds the available horizontal spacing, the tag should wrap onto the line below.
Two tags must never be paired with a single piece of content. They designed to be applied in a singular fashion to aid recognition for the user.
The corner radius for tags across all platforms is