Tags

Components

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; navy which should be paired with white text, 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.

Color reference

Typography

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.

Spacing

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.

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.

Real world examples

Android Entire UI The range slider allows users to find their preferred entry fee range.
iOS Entire UI The range slider allows users to find their preferred entry fee range.
Web Entire UI The range slider allows users to find their preferred entry fee range.