Digital product interface

Iconography

Use brand-aligned iconography throughout the interface for a consistent and uniform look and feel. Icons should be simple, universally understood and consistent in weight and style. Avoid third-party icons that clash with your visual identity.

Icons

Outline icons are the primary icon style and should be used consistently across the product to maintain a cohesive visual language. It is also recommended to use industry standard icons, and avoid mixing outline or filled styles unless highlighting a specific state (as in active/selected).

Always ensure sufficient contrast against backgrounds, and do not rely on color alone to convey meaning such as error messages. Pair icons with text where possible and needed, for a better understanding of what the icon does.

If possible, use the established icon library to ensure visual consistency and alignment with our brand standards. See all available icons in the Design System library

Icons for a light interface
Icons for a dark interface

Shape, surfaces and graphical elements

Lines, surfaces, separators and text placeholders are essential design elements in product interfaces that improve clarity and organisation. Lines and surfaces are used to divide content into distinct sections, helping users easily distinguish between different areas or functionalities. Content sectioning/framing makes the interface more intuitive and visually balanced.

An interface with graphical elements presented in light and dark mode

Example on light and dark themes for the same application.