Elevations

Similar to the light theme, the dark theme 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 on the background.
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 theme 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 theme, status colors differ from 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 theme, 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.

Buttons & Icons

When using dark theme, 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.

If colored icons are used in the dark theme (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.

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates