All the elements of a website/app go into defining a brand's personality. Elements (such as buttons, banners and menus) must remain consistent across every page of the site. Aesthetics must align with the brand rules and come together to make for a fulfilling user experience. Pay attention to optimized page loading times and responsiveness to all screen sizes.
Digital banners
Keep our banners clean, simple and focused on a single message. The use of a strong call-to-action is required for websites or hubsites. Online banners have a wide variety of shapes and sizes. Select imagery as per the banner size. It is preferable to keep room for the placement of the Chicago Pneumatic ripple and text.
Banner usage: Website, Social media, Hubsite, emailer and Apsis templates
Image with ripple.
Image with ripple.
Text and call-to-action buttons entered through the content management system.
- It is preferable to have the ripple in digital banners as shown above.
- The image and ripple can appear together, but the text must not be integrated within the ripple, as it is entered through the content management system.
- Titles can vary (white or black) depending on the background.
- Font must be Arial Black; font size can vary as per the need.
- Call-to-action buttons must always be in
Chicago Pneumatic red; titles can vary (white or black) as per the background.
Colors
The colors shown here refer to the color variants for website elements. They include Chicago Pneumatic red, black, light gray and white.
CP Red
RGB 237 28 46
HEX #ED1C2E
CP Black
RGB 0 0 0
HEX #000000
Light Gray
RGB 204 204 204
HEX #CCCCCC
White
RGB 255 255 255
HEX #FFFFFF
Call-to-action
The primary color for call-to-action buttons are Chicago Pneumatic red/black with reverse text (1), but you can use other combinations (2) if required as long as visibility is considered.
1
2
Fonts
The typeface chosen for all Chicago Pneumatic digital material is Arial. It is available in regular, bold, narrow and black. No other typeface should be used in any form of communication. The fonts should not be extended, condensed or distorted in any way.
Arial Black, Bold, Regular, Bold Italic, Italic
Sharepoint
It has been decided within the Hub Steerco not to provide additional branding to the site template for other brands (including Chicago Pneumatic). This means all sites are obliged to use the Atlas Copco Hub template, No additional templates will be created and supported.
However, it has been decided by the CP Brand Council (and endorsed by the Hub Steerco) that site owners will be allowed to update the following design elements within the Atlas Copco Hub template:
- Brand logo in the header section
- The standard sites themes
The Theme section in the above menu allows you to change your site's color scheme. Select the corresponding color scheme that fits your brand. Changing this setting, will change the following colors:
- Font color of the menu items
- Background colors
- Button (call-to-action) color
Do not change the navigation or footer settings. Refrain from any code changes within any of the other components within the Hub template (including altering the stylesheets). We can only guarantee and support the changes mentioned here.
Branding on the site can easily be changed in the menu by clicking on 'Change the look ' in the Settings drop-down. The Hub template allows you to change the Atlas Copco logo with your brand logo. This can easily be done via the header section in the menu.
