Guidelines
Guidelines
Usage
A Color should:
- Be used according to their defined roles.
- Be used with a purpose rather than as decoration.
- Be used to establish an information hierarchy.
- Be picked from the pre-defined color palette, as those colors are aligned with the Red Bull brand.
- Comply with the Accessibility requirements (WCAG 2.1 AA level) when used in layouts. Refer to Accessibility guidelines for more information.
Primary
A Primary Color should:
- Be used sparingly in interfaces, highlighting important information and interactions.
- Align with the most prominent identity color.
- Not be used for displaying errors or instructions.
- Not be used for content backgrounds or large surfaces.
- Have its lighter and darker variants used for interactive elements' states.
Surface
A Surface Color should:
- Be used for content backgrounds and containers and borders.
- Be neutral but derived from the brand identity.
- Have its surface-solid-dark considered as the default background color for dark mode layouts. The surface-solid-light should be regarded as the default background color for light mode layouts.
- Have its darker and lighter shades of the surface colors be used to establish a hierarchy between surfaces.
Glass
A Glass Color should:
- Be used on top of Surfaces to highlight or darken areas to enhance layout hierarchy.
Text
A Text Color should:
- Be used on text and Icons.
- Use a subtle color variant to enhance hierarchy.
- Have inform color be used for errors.
- Have negative be used in contrast to the positive.
Accent
An Accent Color should:
- Be used to highlight content according to its type.
- Have inform color be used for errors.
- Have negative be used in contrast to the positive.