Themes

Dark Theme

Whether for accessibility, working in low-light environments or for your products preference, Micro Focus’s dark mode is designed to put the content in the spotlight. It comes with a brand new color palette that’s been carefully chosen to allow clear legibility, comply with accessibility standards, and provide a delightful user experience all while maintaining Micro Focus’s brand identity.

Elevations

Similar to the light mode, the dark mode is also based on elevations representing the layers or levels in the hierarchy of the layout. In the dark mode, shadows are less obvious so the elevations have been adapted and enhanced to work with two styles: the background color and its drop shadow style. This combination of styles gives depth and perspective to the interface while also showing a clear hierarchy between components.

When designing, the base should be the darkest color from the neutral palette and each elevated surface should become lighter as they move further up from the background.

Dashboards, cards, tables, and toolbars are considered elevation 1 because these components are directly in the background. While layout components such as masthead and side navigation panels are elevation 2 because any content on the canvas would be behind these elements.

Dialogs, notifications, modals, and other types of overlays that are displayed on top of any content will use either elevation 3 or 4, and it’s dependent on what elevations/content is behind it.

Overlay elements like dropdowns or date pickers need to stand out in busy screens, so they are considered the highest elevation (4) to provide maximum contrast between them and other layers.

Colors

The dark mode comes with a new color palette that has been carefully chosen to allow clear legibility, comply with accessibility standards, and provide a delightful user experience all while maintaining Micro Focus’s brand identity.

This unique grayscale palette (or neutrals) mirrors the light mode palette using the same numerical labels for equivalent levels. It also provides enough shades to emphasize all the different elevations, states, and typography types. In dark mode, status colors differ from the light mode in order to work better with the darker background shades.

If using additional colors for text (not recommended) or graphics in the dark mode, then care should be taken when using highly saturated colors to avoid inadequate color contrast or causing visual vibrations against the dark background because this can induce eye strain.

Typography​

Typography styles use neutral shades from 75 and above to ensure that text is accessible and readable in every elevation. The only exception to this is the disabled state and placeholder text that use opacities of white. Like in flat buttons, when using blue or red text we created accessible shades specifically for this use case, which are accessible in all elevations.

Raised vs. Flat buttons​

When using dark mode, the choice of which type of button to use is important. Raised buttons have greater prominence than flat buttons, in comparison to the light mode, as the text colors for flat buttons are desaturated to ensure adequate color contrast on a dark background. Raised buttons are preferred unless the context particularly suits flat buttons.

Outline vs. Filled Iconography

If colored icons are used in dark mode (for example to show status) then care should be taken with the style and color used to ensure that their visibility and color contrast are suitable.

Filled icons are usually more prominent and should be used when adjacent to raised buttons. If outline icons are used in a primary (blue) or negative (red) form then their color should match the equivalent flat buttons. Outline icons using other colors should be carefully selected to ensure adequate color contrast (4.5:1) against their background color. Less saturated colors may need to be used for this purpose.

Use filled icons when they are close to raised buttons.

Avoid mixing line-based icons with raised buttons and vice versa.

Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates

Contribute  |  Updates