Skip to main contentSkip to site searchSkip to component search
Honeycomb

Colors

Color variables within design tokens play a crucial role in maintaining visual consistency and theming. By abstracting specific color values into variables, teams can ensure coherence in color usage throughout a project.

It is highly recommended to base your choice of color on the abstraction and purpose rather than solely on the color value itself.

Looking for color pair recommendations? See: Color pairing

UI

Colors that are mainly used to highlight elements the user can interact with. Not to be mixed up with Brand colors (they can be similar)! UI colors should follow accessibility and readability standards.
Example:

No tokens to display.

Fonts-Icons

Colors that can be applied on text or icons. For icons there is a default defined, but others (i.e. Brand or UI colors can be applied) based on the use case.
Example:

No tokens to display.

Background

Colors that can be used for the background of a page.

No tokens to display.

Overlay

A semi-transparent color that is applied on top of the entire page to help bring focus on an element which is shown on top.
Example:

No tokens to display.

Component colors

Colors that are connected to a specific component and rarely have a use case outside of it.

No tokens to display.

Grayscale

Grayscale colors to use for custom elements in your layout. Example: A dark background in your layout

No tokens to display.

States

Colors that communicate a specific state. The color is ideally shown next to another visual difference (i.e. an icon) to foster the state communication in an accessible way.
Example:

No tokens to display.

Interaction states

Interaction state colors are visual cues used in user interface design to indicate the status or behavior of interactive elements such as buttons or links.
Example:

No tokens to display.

Brand colors

Colors that present the brand in a direct way. Not to be mixed up with UI colors (they can be similar)! Brand colors do not necessarily have to follow accessibility and readability standards.
Example:

No tokens to display.

Labels

Colors to use for color coding. All label colors meet a minimum contrast of 4.5:1 (with white text on top).

These colors are not part of Honeycomb themes and should be included separately when needed.
Example:
--flix-label-red-color
#d0312d
--flix-label-ginger-color
#be5504
--flix-label-magenta-color
#e11584
--flix-label-golden-brown-color
#996515
--flix-label-emerald-color
#028a0f
--flix-label-blue-color
#3944bc
--flix-label-purple-color
#a32cc4
--flix-label-dark-silver-color
#746d69
--flix-label-black-color
#000000

Charts

Colors for chart elements.

These colors are not part of Honeycomb themes and should be included separately when needed.
--flix-chart-blue-color
#8fa9f7
--flix-chart-yellow-color
#fac858
--flix-chart-pink-color
#ffa9da
--flix-chart-beige-color
#c4a484
--flix-chart-green-color
#92cc76
--flix-chart-red-color
#ff96a7
--flix-chart-grey-color
#bbbbbb
--flix-chart-cyan-color
#60b6d7
--flix-chart-lime-color
#9ce558
--flix-chart-purple-color
#c890ff