Motion Guidelines
Color Palette
The color system takes its inspiration from printer test sheets and the visual effect they produce when the gradation of colors is repeated. Your colour choice should point back to the brand.
Download Swatch Collection
The primary palette at 100% saturation
Click on the swatch to copy the hex code to your clipboard
The primary palette at 100% saturation
Click on the swatch to copy the hex code to your clipboard
The entire palette (with 10% increments)
Click on the swatch to copy the hex code to your clipboard
The entire palette (with 10% increments)
Click on the swatch to copy the hex code to your clipboard
Universal Palette
These are common colours to be used across the board, for specific purposes.
#E6E6E6
Standard Gray
For product photographs and showcase
Used in a clean and sophisticated manner
Can be used with other colors in complex layouts
Should not be used together with Standard Cream
#F2EBDD
Standard Cream (Text Backgrounds)
Complements all primary colors in the palette
Always meant to be used with another color
Should not be used in the Headline module
Should not be used with Standard Gray
Color Stacking
Separate modules can be defined through color stacking. Use tints with enough contrast to distinguish the modules.
2 tints
100%
50%
3 tints
100%
60%
30%
4 tints
100%
60%
40%
20%
5 tints
100%
60%
40%
20%
10%
Color in motion
These principles can also be incorporated in animations. The tints effectively contribute to uncluttered color arrangements, accentuating key elements. It confidently showcases the brand's identity. This concept is demonstrated in the instances provided below.
Tints naturally lend themselves to transitions
Can do more with less, when used correctly
Colors aesthetically bring out the brand
The colors direct the eye to the right places
Color helps to highlight
Branding a video
A single color used intelligently can help brand an entire film. These are snippets from one video. The visuals are tied together through the color.
Motion Guidelines
HP Creative Studio.
All Rights Reserved
Color Palette
The color system takes its inspiration from printer test sheets and the visual effect they produce when the gradation of colors is repeated. Your colour choice should point back to the brand.
Download Swatch Collection
The primary palette at 100% saturation
Click on the swatch to copy the hex code to your clipboard
The primary palette at 100% saturation
Click on the swatch to copy the hex code to your clipboard
The entire palette (with 10% increments)
Click on the swatch to copy the hex code to your clipboard
The entire palette (with 10% increments)
Click on the swatch to copy the hex code to your clipboard
Universal Palette
These are common colours to be used across the board, for specific purposes.
#E6E6E6
Standard Gray
For product photographs and showcase
Used in a clean and sophisticated manner
Can be used with other colors in complex layouts
Should not be used together with Standard Cream
#F2EBDD
Standard Cream (Text Backgrounds)
Complements all primary colors in the palette
Always meant to be used with another color
Should not be used in the Headline module
Should not be used with Standard Gray
Color Stacking
Separate modules can be defined through color stacking. Use tints with enough contrast to distinguish the modules.
2 tints
100%
50%
3 tints
100%
60%
30%
4 tints
100%
60%
40%
20%
5 tints
100%
60%
40%
20%
10%
Color in motion
These principles can also be incorporated in animations. The tints effectively contribute to uncluttered color arrangements, accentuating key elements. It confidently showcases the brand's identity. This concept is demonstrated in the instances provided below.
Tints naturally lend themselves to transitions
Can do more with less, when used correctly
Colors aesthetically bring out the brand
The colors direct the eye to the right places
Color helps to highlight