While we aim for consistency, we acknowledge the limitations and differences of platforms and technologies that are outside our control. Our approach is to design within these boundaries—focusing on brand alignment, usability, and seamless handoffs when human assistance is required.
Typography
Typography plays a key role in carrying our brand identity within the chatbot. It reflects our values and tone of voice while also ensuring content is accessible, clear, and engaging for users. Beyond readability, typography strengthens brand recognition and creates a consistent, trustworthy experience across all touch points.
Source Sans Pro font family
Our bots 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 for western countries, 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
To ensure consistency across all digital platforms please use Gray#11 for headlines, and Gray#9 for body text and preambles for light backgrounds.
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 chatbot, such as buttons and headers.
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.
Extended accent colors for validation status updates and data visualisation
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.
Primary chat icon
Our primary chat icon should be with the primary blue gradient or solid Atlas Copco blue as background with a white chatbot icon centred both horizontally and vertically.
User interface
Layouts and UI examples demonstrate how to combine components, branded elements, and design patterns in practice. They provide guidance on structure, spacing, and hierarchy to ensure consistency, usability, and a cohesive brand experience across all chatbots.
Chatbot interface
- Background color Beige #1
- Text color primary gray
- Bot name and/or timestamp Gray #7
- Rounded avatar image with border Gray #5 on avatars with light background
- Slightly rounded corners (4px)
Chatbot avatar
- For a consistent look and feel to our chatbots that aligns with our brand we recommend using Atlas Copco logo as an avatar across all chatbots.
- Chatbot name should not be of a person, it should be connected to the function or purpose of the chat bot in question.
- Avatar should be round with the chat icon within. Chat icon should be 24x24px in the top and 16x16 within the chat.
- Success green status dot with white border when online.
- Within the chat the avatar should have a stroke → Gray #5 to stay visible
User interface
- Background color Blue #11
- Text color White
- Slightly rounded corners (4px)
Header
- Background color uses Blue gradient if possible, otherwise Atlas Copco blue
- White text
- Success green status dot with white border when online
- Rounded avatar image with white border
User dialogue option
- Rounded corners
- Outline and text is Primary Blue #11
- Font: Small paragraph
User input field
- Shape: Rounded corners (56px).
- Text style: Small paragraph text.
- Default user input field: Text gray #7 with white background and gray #5 as stroke color and icon in primary gray #9.
- Active user input field: Text gray #9, on white background with Atlas Copco Blue as stroke color. Send-button primary blue gradient with a white icon.
Chat activation and close button
- Round if possible.
- Blue gradient with white close-icon.
