Guidelines
Guidelines
Usage
The Title should:
- Be used for headings to structure pages, panels, or text sections
- Be used to create a clear typographic hierarchy that enables consumers to skim and scan the content of a page
- Have its viewport value be set to reflect the breakpoint or device, the interface is designed for.
- Use the contrasting appearance to its context: 'light' on dark surfaces, and 'dark' on light surfaces.
Content
The Title should:
- Only display short and glanceable text content
Size and Weight
The Title should:
- Use 'x-large' or 'large' size as a default starting point for the largest headline size.
- Use size and weight to create a hierarchy for the content for content clarity.
- Use the same size and weight for similar level and type content and component.
- Be set to have the same size across viewport sizes.
- Use 'heavy' weight in experiences closely related to Red Bull products.
Spacing
The spacing should:
- Be set to 'none' when building interface components. Spacing Titles inside components should use the Spacing scale.
- Be set to 'long-form' when laying out long-form content.
- Be set to 'long-form-top' when the long-form content starts below the non-text component to apply the correct spacing above the text.
- Be set to 'long-form-bottom' when the long-form content ends above the non-text component to apply the correct spacing above the text.
Accessibility
The Title should:
- Be used on predefined surface colors when it's used in conjunction with the body text.
- Have its contrast ratio reviewed when placed on images or on colors that are not part of the Cosmos 'surface' palette.