Definitions: links, buttons and call to action texts
A call to action (CTA) is an instruction conveyed in text, such as "Add to cart". Buttons and links are the interactive elements used to visually guide the user on where to click. Most times, links and buttons display a call to action, but they could also contain just an icon, such as the magnifier glass to symbolize search.
While buttons are styled elements, links are typically displayed as a simple clickable call to action text - that should be differentiated from other text with a visual decoration, such as an underline.
Buttons and call to action texts
Interactive elements should follow best practices and accessibility standards. They should be large enough to be easily clickable across all devices, promoting both accessibility and user convenience. Aim for 44x44px on buttons that needs physical interaction.
When designing interactive elements for product interfaces, it is important to effectively communicate their purpose through clear and descriptive labels or icons. Buttons should be visually distinct by ensuring sufficient contrast with the background, which is especially crucial in dark themes to enhance visibility.
Primary interactive elements should be used sparingly and be placed prominently in areas where users naturally focus, to effectively guide user actions. Additionally, maintaining consistency in styles and colors for similar actions throughout the interface helps create a cohesive and intuitive user experience.
Use sentence case for all CTAs on buttons and links to ensure clarity and readability (for example "Download brochure" or "Contact our expert”). Avoid using title case, all lowercase, or all caps, as these styles might lead to inconsistency or disrupt readability.
A minimum of 24x24 pixels for interactive elements is required. They should be large enough to be easily clickable across all devices, promoting both accessibility and user convenience - so aim for 44x44px on buttons that needs physical interaction.
Buttons
Our buttons have rounded corners and primary brand colors, no other colors should be applied to buttons. While corner radius may vary across operating systems and cannot always be controlled, aim to follow our brand style as closely as possible to maintain consistency.
A solid blue button is the primary while outline buttons are secondary and icon buttons follow the same principle and color.
Behavior of interactive elements
It is important that interactive elements, outside of the design system, follow the same behaviour. Every element should have the same logic and visual appearance throughout different platforms. Each element should have a default state, on mouse hover, pressed or clicked, disabled and on keyboard focus if applicable.
Users can also navigate the product interface by using commands such as clicking or tapping on menus and buttons outside of the main screen to move between different sections.
User interface controls
Switches
Segmented buttons
Activity indicator
Progress bar
Error messages and feedback
Align the design of error messages, confirmations and system feedback with the brand’s visual identity. Use color and iconography to signal state changes, while keeping the text calm, helpful and on-brand.
