UI Elements

UI Elements

On our digital platforms, we prove that we are tackling the most critical and technical tasks – but never lose our optimistic approach in doing so. Additional to the overall clear, reduced UI language, you can find joyful elements in-between the lines. The path guides us through the interactive elements, the network provides the structure between the modules and our coral tone grasps attention for all CTA elements.

UI Style Guide

The shared path and anchor point give coherence and uniqueness to the UI elements of SUSE.

Call-to-actions
CTAs are available in three hierarchies. One is filled coral shape, one has a solid/filled outline, and the least prominent a dotted outline.
links and link statuses
The brand colors are used to inform us about the status of links. 
forms
In forms, we use the anchor point and shared path can be used in elements such as a drop-down.
selection controls
The anchor point and path are also present in selection controls 
webicons
Webicons are similar to the previously mentioned illustrative icon, but simplified.

Download

Icons

The line is an evolving design element; extending all the way down to our icons. To learn more about how our icons are made visit our Iconography page or download some icons below.

Product Icons

Product Icons

Download

Webicons

webicons

Download

Transitions

Micro-animations for web are based on the motion principles.


 

call-to-actions
CTAs: the tertiary CTA, made of the shared path, transforms into a filled line when hovering.
dropdowns
Drop-downs: some elements allow introducing the anchor point in a functional way.
icons
Icons: to enhance the open style of the illustrative icons, they can load as a stroke drawing itself.
selection controls
Selection controls: the same shared path/outline effect can be applied to other UI elements.