Themes
Themes are consistent sets of visual design elements, such as color, typography, icons, and imagery, that are used to create a specific look and feel.
Themes allow for the customization of a product’s user interface to reinforce the brand’s identity, appeal to a defined target audience, or meet certain user requirements. This is achieved by systematically altering visual attributes such as colors, shadows, and typography.
The Micro Focus Design System supports three themes: light, dark, and white label. Each product may adopt one or more themes according to its capabilities and requirements. While each theme has its own specific color palette, certain visual aspects such as spacing guidelines, border radius, fonts, and text sizes are consistent across all themes.
Developers can easily switch between themes by changing a set of universal variables (tokens), while designers can do similarly with the “swap library” feature in Figma.
Micro Focus’ light theme is the default theme for most of our products. The broad color palette gives designers versatility, enough contrast, and variety to communicate clear messages or make important things stand out. Some colors have clear roles or usages, while others are less specific.
Primary
Our Brand Blue works as the primary color (color__primary) appears across all products in different places. It’s mostly used for primary actions, like in a button but as well to show the state of different components. It will usually be associated with an active on on-focus state.
Neutral colors (grayscale)
Neutral colors apply to most backgrounds, text, and shapes. They don’t typically have a meaning associated with them, though their subdued quality can be useful for secondary actions.
Status colors
Status colors can convey information about the state of an element or component, such as success, warning, and error. They are also used to communicate potentially destructive actions or feedback about an action the user is performing. The status colors should be used consistently throughout the product to ensure clear communication.
Additional colors
Additional colors can have multiple uses across the interface, such as representing data in dashboards and tables. They can also indicate severity levels, risk, or overall importance of specific items. Lastly, the additional color palette can help bringing attention to a section in the screen, make an element more appealing, or for situational illustrations.
Usually it’s not recommended to use additional colors for typography. However, in cases where colored text could bring more value to the UI, it’s important to check the contrast between the text and the background meets accessibility standards.
Elevations
The shadows in the dark theme are less visible, so the elevations were enhanced to use background colors in addition to shadow increments. The change of color helps to properly represent the layout hierarchy levels, and gives depth and perspective to the interface. When designing, the base should be the darkest color from the grayscale palette (or neutrals), and each elevated surface should become lighter as they move further up from the background.
Whether for accessibility reasons, working in low-light environments, or just as a user preference, Micro Focus’ dark theme puts the content in the spotlight. The carefully chosen color palette allows clear legibility and complies with accessibility standards while providing a delightful user experience and maintaining our brand identity.
Colors and typography
The grayscale palette mirrors the light theme palette by using the same numerical labels for equivalent levels and provides enough shades to emphasize different elevations, states, and typography.
All typography styles use neutral shades from 75 and above to ensure that text is accessible and readable in every elevation, with the exception of disabled and placeholder text that use opacities of white.
The text color for flat buttons is less saturated to ensure adequate color contrast on dark backgrounds. For this reason raised buttons should be preferred over flat unless the context particularly suits the latter.
Avoid using highly saturated colors against a dark background, since they may cause visual vibrations and induce eye strain.
White-label themes can be customized and rebranded for use by different clients. It allows the efficient creation of customized and branded products, without the need for starting from scratch. The white label theme will allow customizing the primary color, typography, and other interface elements to meet the client’s needs. Any theme modifications should still comply with a minimum of AA accessibility standards