Components
Inputs
Page Elements
Filters
Feedback

Typography

Ticketmaster provides a constrained, purposeful set of typographic styles. These styles map as much as possible to functional roles, so you know when each can be used.

Usage

By consistently tying typographic styles to appropriate functions in the interface, we create a clear visual pattern for users to follow while they’re interacting with our product.

DO
Chart example
Pair Light text weight with Extra Bold to highlight importance.
DON'T
Chart example
Do not use Semibold or Extra Bold on an entire block of text.
DO
Chart example
Use sentence case when text has punctuations and title case for short phrases without punctuation.
DON'T
Chart example
Avoid using Uppercase on all text.
DO
Chart example
Use #262626 - Onyx for body copy.
DON'T
Chart example
Avoid using #262626 - Onyx at 65% opacity or any other gray color for body copy.
DO
Chart example
Use #262626 - Onyx; 100% opacity for primary text and #262626 - Onyx; 65% opacity for secondary text.
DON'T
Chart example
Avoid using #999999 - Slate or any other gray for secondary text.

Line Height Ratio

1.5
Body

Buying the right telescope to take your love of astronomy to the next level is a big next step in the development of your passion for the stars. In many ways, it is a big step from someone who is just fooling around with astronomy to a serious student of the science. But you and I both know that there is still another big step after buying a telescope before you really know how to use it.

So it is critically important that you get just the right telescope for where you are and what your star gazing preferences are. To start with, let’s discuss the three major kinds of telescopes and then lay down some “Telescope 101″ concepts to increase your chances that you will buy the right thing.

1.25
Headers

Fan Club Super Exclusive

CAMPAIGNS

My Account

Line Length

52 - 78 characters

Line-length, traditionally known as a measure, is the number of characters in a single line. It also directly contributes to the readability and pacing of copy. Lines that are too long degrade eye tracking from line to line, making it difficult to gauge which line to read next. In contrast, lines that are too short make it difficult for a reader to maintain a steady reading rhythm. Short lines often create disproportionate ragged edges that negatively affect the design.

Enterprise Guidance

Monospace

Proportional Numbers
1234567890
Monospace Numbers
1234567890
Monospace example
Monospace numbers (aka tabular_numbers) should only be used in data tables that show multiple rows of numbers. In contrast to default (or proportional) numbers, monospace numbers are easier to read in long lists of data tables.

Page Containers

Page container first examplePage container first examplePage container first example
Page container second examplePage container second examplePage container second examplePage container second example

Chart

Chart example

Marketplace Guidance

Event Listing: Collapsed

Collapsed event listing image example

Event Listing: Expanded

Collapsed event listing image example

Event Card

Collapsed event listing image example

Venue Header

Collapsed event listing image example