Color

Colors have a role that defines their distinctive function within the user interface.

Our color system is based on roles. Every color has a role assigned that specifies its purpose and function within the interface – so you always know when to use which set color.

We provide colors for the most common use-cases: Primary, Surface, Text, Focus, Positive, Negative, and Inform.

🎨 Figma: Color Tokens are available as Color Styles that you can access via Shape Fill, Stroke Colors, or Text Colors.

💻 Code: The Color is available as a variable.

Primary

Our primary color scale reflects the Red Bull brand's main color. Use it to create brand recognition in your interfaces and to set highlights that draw your users ' attention. Use it consciously and only for a carefully selected set of elements in your experience.

cosmos-color-primary #DB0A40 rgb(219, 10, 64)

cosmos-color-primary-darker #C3093B rgb(195, 9, 59)

cosmos-color-primary-lighter #F50B48 rgb(245, 11, 72)

Surface

Use surface colors to style the surface of interface components – like backgrounds, borders, and box-shadows.

Solid

Dark

cosmos-color-surface-solid-dark #00162B rgb(0, 22, 43)

cosmos-color-surface-solid-dark-darker #000F1E rgb(0, 15, 30)

cosmos-color-surface-solid-dark-lighter #001C39 rgb(0, 28, 57)

Light

cosmos-color-surface-solid-light #F8F8F8 rgb(248, 248, 248)

cosmos-color-surface-solid-light-darker #EFEFEF rgb(239, 239, 239)

cosmos-color-surface-solid-light-lighter #FFFFFF rgb(255, 255, 255)

Glass

Use glass colors to add transparency to user interfaces. Like surface colors, glass colors can be used for backgrounds and borders.

Dark

cosmos-color-surface-glass-dark-90 #000F1EE5 rgba(0, 15, 30, 0.9)

cosmos-color-surface-glass-dark-80 #000F1ECC rgba(0, 15, 30, 0.8)

cosmos-color-surface-glass-dark-60 #000F1E99 rgba(0, 15, 30, 0.6)

cosmos-color-surface-glass-dark-45 #000F1E73 rgba(0, 15, 30, 0.45)

cosmos-color-surface-glass-dark-20 #000F1E33 rgba(0, 15, 30, 0.2)

cosmos-color-surface-glass-dark-10 #000F1E19 rgba(0, 15, 30, 0.1)

cosmos-color-surface-glass-dark-5 #000F1E0C rgba(0, 15, 30, 0.05)

Light

cosmos-color-surface-glass-light-90 #FFFFFFE5 rgba(255, 255, 255, 0.9)

cosmos-color-surface-glass-light-80 #FFFFFFCC rgba(255, 255, 255, 0.8)

cosmos-color-surface-glass-light-60 #FFFFFF99 rgba(255, 255, 255, 0.6)

cosmos-color-surface-glass-light-45 #FFFFFF73 rgba(255, 255, 255, 0.45)

⚠️ Deprecation Notice

cosmos-color-surface-glass-light-40 has been marked as deprecated. See the current deprecations to learn more.

cosmos-color-surface-glass-light-40 #FFFFFF66 rgba(255, 255, 255, 0.4)

cosmos-color-surface-glass-light-20 #FFFFFF33 rgba(255, 255, 255, 0.2)

cosmos-color-surface-glass-light-10 #FFFFFF19 rgba(255, 255, 255, 0.1)

cosmos-color-surface-glass-light-5 #FFFFFF0C rgba(255, 255, 255, 0.05)

Text

Text colors are optimized for legibility and contrast. Every text color comes with a subtle substitute to create hierarchy and structure. Text colors should also be used for Icons as they are often displayed in the same context.

Dark

cosmos-color-text-dark #000F1E rgb(0, 15, 30)

cosmos-color-text-dark-subtle #000F1E99 rgba(0, 15, 30, 0.6)

Light

cosmos-color-text-light #FFFFFF rgb(255, 255, 255)

cosmos-color-text-light-subtle #FFFFFF99 rgba(255, 255, 255, 0.6)

Accent

Focus

The focus color is exclusively for displaying focus states. The color provides a contrast ratio greater than 3:1 on dark and light surfaces and therefore meets the accessibility requirements of WCAG 2.1.

cosmos-color-accent-focus #1B6AEE rgb(27, 106, 238)

Positive

Use the positive color to feedback success to users.

cosmos-color-accent-positive #159D48 rgb(21, 157, 72)

Negative

Use this color to warn about critical actions (like deleting a user profile) or highlighting a negative sports result in a table. Never use the negative color to feedback mistakes made by the user, use the inform color instead.

cosmos-color-accent-negative #DB0A40 rgb(219, 10, 64)

Inform

Use this color to inform users about a certain state, like an event that is delayed or a form input that is invalid. Choose the inform color instead of the negative color whenever possible.

cosmos-color-accent-inform #E06600 rgb(224, 102, 0)