Components

Tags

Last updated: December 2017

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

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 onDarkTextColor text, 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.

Color reference

Typography

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.

Spacing

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.

Do

Use single tags paired with content

Don't

Use multiple tags paired with content

Corners

The corner radius for tags across all platforms is 2.