App guidelines

Colors

Our color system supports both light and dark modes, ensuring accessibility through proper contrast ratios and a clear visual hierarchy. By applying colors consistently, we create interfaces that are accessible, legible, and true to our brand.

Primary colors

Our primary colors should be applied to key brand elements in the app, such as navigation components and buttons, to reinforce brand identity.

Primary interface color blue
Primary interface color gray
Primary interface color beige
Primary interface white color

Navigational components are created with Atlas Copco primary brand colors. We recommend keeping the tab bar dark for sufficient contrast in all scenarios.

Template header in a primary blue color
Template header in a primary dark color
Template tab bar in a dark theme
Template tab bar in a dark theme

Tints and shades

We’ve developed tints and shades of our primary colors to provide a wider range of options, ensuring flexibility to cover all design needs.

Explore our tints and shades

Blue 1
Blue 3
Blue 5
Blue 7
Blue 9
Blue 11
Gray 1
Gray 3
Gray 5
Gray 7
Gray 9
Gray 11
Beige 1
Beige 2
Beige 3
Beige 4

Color ratio light theme

This illustrates the recommended color ratio for light theme. Apply colors with hierarchy in mind - most elements should stay balanced, allowing key information and actions to stand out.

Color ratio for a light interface

Color ratio dark theme

This illustrates the recommended color ratio for dark theme. Apply colors with hierarchy in mind - most elements should stay balanced, allowing key information and actions to stand out.

Color ratio for a dark interface

Gradients

We use 45 degree - diagonal gradients to create visual depth for larger colored areas. Always consider white space and do not combine different types of gradients .The gradient should run in the reading order, top left to bottom right of the container. 

Note: Use with discretion - don’t mix gradient colors, keep the gradient within tints and shades of the original primary color and follow the specified color steps in this guideline.

Color codes for gradients in blue, light gray, beige and dark gray

Explore our gradients

Light and dark theme

We recommend designing for both dark and light themes to ensure all applications are accessible in any environment. Maintain branded elements in both styles, and ensure accessibility by verifying adequate contrast levels.

Template app interface in a light theme
Template app interface in a dark theme

Accent colors for validation status updates and data vizualization

Extended accent colors should be used sparingly, primarily for status updates, validation messages, and data visualization. They are reserved for messaging states such as error, success, and information, ensuring clarity without overwhelming the interface.

Three accent colors for validation messages, green, blue and red

Accent colors for validation status updates and data vizualization - Light and dark mode

To support accessibility, status colors must be adjusted for both light and dark modes. Maintain sufficient contrast against the background, and reserve status colors for UI elements only. Text should always use the recommended typography colors.

Accent colors for validation in a light interface
Accent colors for a dark interface
Template page with accent colors used in data visualization

Background and surface color combinations

Below we showcase the different color combinations recommended. The first thee examples are for the light mode and the last one for the dark mode.

Four different combinations of background and surface colors for different themes