Colors

Every Honeycomb's component in any given variation or state (hover, disabled, etc.) is mapped to one of the predefined colors. Constraining the interface to a limited number of colors ensures a high level of consistency between products.

We provide several types of colors:

• Brand colors (normally should not be used in components as they represent a brand related content);
• UI colors (main colors giving your interface an identity)
• Aliases (utility colors that have assigned meanings and are used consistently throughout Honeycomb to set expectations of meaning for users)
• Grayscales

As the best practice we recommend to not use colors directly with their HEX codes or RGB values. You should only be using one of the provided color abstractions when creating your components or variations of existing elements. This makes them theming compatible out of the box.

Remember to use the correct abstraction for your purpose: look through aliases and choose wisely as success-color may not be the same as primary-ui-color. Always pick the variable that matches your use case as precisely as possible.

Colors and themes

Starting from Honeycomb 4.0 we offer theming functionality (yay!). In order to ensure your components are compatible with themes you need to make sure you're reusing the proper variables/tokens in your custom components or variations.

Bellow is the main set of color variables. The complete list can be found in Themes section. Note that themes provide way more than just color variables, things such as spacing, typography, border-radius and others can also be subject to theming.