Buttons
Our primary and secondary buttons use rounded corners. 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. All buttons should fill the screen for consistency and placed beneath each other in cases of primary/secondary actions.
Depending on the background color (light/dark mode) the buttons can vary in color combination. The primary button is always solid Blue gradient or Atlas Copco Blue, and secondary buttons are either dark gray gradient for light backgrounds and light gradient on dark backgrounds. Secondary outline buttons follows the same principle, please see Buttons in the Brand Manual for a more in depth guideline.
User interface controls
Toggles, sliders, and similar input controls should behave natively so users instantly recognize and trust them. Branding can be applied through visual styling such as colors, roundness, and subtle gradients, while keeping interactions familiar. Avoid over-customization that disrupts expected platform behavior.
The principle is: native in function, branded in appearance.
Switches
Segmented buttons
Pagination
Activity indicator
Progress bar
Map pin
Charts and graphs
For charts and graphs, additional colors may be introduced to distinguish data points. Always prioritize readability and accessibility, ensuring contrasts are clear and information remains easy to interpret in the app.
