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.4 Cards
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
Default notification
Success notification
Warning notification
Error notification
