Designing for everyone
Accessibility ensures that all users can access and interact with our products. All interactive elements (such as buttons, links and forms) need to meet accessibility standards. Use proper heading structure, alt text for all product images and enable keyboard navigability to mention a few. Color contrast and text size must be optimised and readable for users with visual impairments. Make sure the navigation is clear and consistent, taking into account that some users might need assistive tools such as screen reader. Alternative input methods should be considered depending on the device capabilities.
Logotype
The logotype is the core visual representation of the brand and must be used consistently across all product interfaces. It should always be placed in a prominent, familiar location - typically the top-left corner for web applications, and according to capabilities for other devices.
When used within a header or navigation bar, ensure it maintains legibility and visual balance. The logo should never be distorted, re-colored or altered in any way. Only approved versions may be used, depending on the background color and context. A minimum clear space must be maintained around the logo to protect its integrity and avoid visual clutter from adjacent elements. Avoid placing interactive elements too close to the logotype to prevent accidental clicks or confusion.
The logotype can be visible at all times on bigger devices and screens, while on smaller ones the logotype can be used only on the home screen.
Find relevant resources on the Atlas Copco logotype in the main brand manual.
Typography and text styles
Typography should reflect the brand’s identity while prioritizing readability and consistency across screens. The primary typeface specified in the typeface section must be used for all headings, UI text and body content unless performance or system constraints require a fallback.
Maintain the typography hierarchy as defined - using consistent font sizes, weights and line spacing to guide users through content in a clear and scannable way. For example, heading levels should not be skipped (as in H1 directly followed by H3, skipping H2) and body text should remain at a base size of no less than 16px for accessibility and readability.
Source Sans Pro font family
Our digital products should use Source Sans Pro to maintain consistency across all Atlas Copco platforms. Ensure a clear text hierarchy by following good typographic practices: keep text legible, left-aligned and maintain visual distinction between headings and body content.
Font weights: Semi-bold for headlines, Regular for body text, with Bold reserved only for emphasis.
Typography color mapping: Light and dark mode
To ensure consistency across all digital platforms please use Gray#11 for headlines, and Gray#9 for body text and preambles on light backgrounds.
On the dark background use the Gray#2 for the headline and white for the body text and preamble.
