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;
navy which should be paired with
yellow which should be paired with
navy text and
grey lighten 2 background which should be paired with
navy text . The grey version can be used to explain items but without making them overly prominent.
The type size is set to
12 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 with padding of
4. Tags should be
4 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