Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Create a primary area of interest with large type.

Headlines establish the first-level typographical hierarchy for sections throughout the interface.

Size

The level of headline you select should provide the appropriate hierarchy and visual coherency within the interface.

We help coaches and athletes win with video.

One: Establishes top-level hierarchy. Stick to one per interface.

Microcopy

Capitalization

Use our UI label guidelines when typesetting headlines.

headlinecaps-dont

Don'tset headlines in all caps.

headlinecaps-do

Douse sentence or title case when typesetting headlines.

Brevity

Keep headlines short, sweet and to the point.

headlinecasing-dont

Don'tuse headlines to set large swaths of text.

headlinecasing-do

Douse strong, declarative language.

Small Screens

If you use the headline component, headlines automatically decrease in size for screens smaller than 600px. If you’re designing exclusively for smaller screens, use smaller type sizes and manually provide those specifications to your developer.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.