Amcor Style Guide

Amcor Style Guide communicates the main visual interface guidelines used across Amcor pages.

It is being continuosly updated and improved.

1.1 Colors

Brand colors

Brand Petrol

HEX:#00395A

Brand Blue

HEX:#24BBEE

Brand Green

HEX:#1BCDAC

Brand color variants

Brand Petrol Dark

HEX:#00243F

Brand Blue Text

HEX:#009EDC

Brand Green Secondary

HEX:#93E7D7

Gradients

Petrol Gradient

linear-gradient(to right, rgba(0, 59, 92, 1),rgba(1, 87, 123, 1))

Brand Gradient

linear-gradient(45deg, brandBlue, brandGreen)

Purple Gradient

linear-gradient(45deg, brandPetrol, #2D0749)

Basic colors

Title Gray

HEX:#414142

Body Gray

HEX:#616163

Light Gray

HEX:#8D8D8E

Lightest Gray

HEX:#E1E1E1

State colors

Success

HEX:#1BCDAC

Success background

HEX:#1BCDAC

Warning

HEX:#FBB055

Warning background

HEX:#FBB055

Error

HEX:#F14D61

Error background

HEX:#F14D61

Sustainability colors

Sustainability Green

HEX:#00A551

Sustainability Paper

HEX:#a67a57

Sustainability Aluminum

HEX:#838483

1.2 Typography

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is normal body content

1.3 Buttons

1.5 Icons

Product category icons

Beverages

Food

Healthcare

Home Care

Personal Care

Pet Care

Specialty Cartons

Technical Applications

1.6 Containers

Container

Desktop width: 75%

Small Desktop width: 80%

Tablet width: 92%

Full Container

Width on all viewports: 100%

Detail Container

Desktop width: 50%

Small Desktop width: 70%

Tablet width: 92%

1.7 Notifications

Error notification