Keple brand colours

The brand colours are equal in status. They always appear in full tone and may not be darkened, lightened or displayed transparently.

 
 
 
 

Primary dark gray

Usability: for regular text, headings and headlines

Secondary light gray

Usability: border, frame, disabled elements, shadow

Primary blue

Usability: accent, call to action

White

Usability: background

HEX: #606063
RGB: 96/96/99
CMYK: 3/3/0/61
PANTONE: Cool Gray 11 C

HEX: #E5E5E5
RGB: 229/229/229
CMYK: 0/0/0/10
Pantone: Cool Gray 1 C
HEX: #2196F3
RGB: 0/167/225 
CMYK: 100/26/0/12 
PANTONE: 2995 C
HEX: #FFFFFF
RGB: 255/255/255
CMYK: 0/0/0/0
---

Warning Colors

The Keple Warning Colors are used solely for notifications, warnings and status messages if a colour differentiation is required.

 
 
 

Green

Amber

Red

HEX: #4CAF50

HEX: #FFC107

HEX: #F44336


Logo

  Download PSD logo   Download AI logo


Typography

The headline, subheadline and body copy take effect at different levels, as we know. The typography can do a wonderful job in supporting this.

HG Maru Gothic PRO - Font

This font is used to create our logo typography. Do not use this font for text of headlines. It's used ONLY in logo.

Download

Play - Font

Play font is used for packaging headlines and general text in printed materials.

Download


Packaging examples

 

 

 

 


Lifestyle pictures

 

 

 

 


Upwork examples

 

 

 


Product image guidelines

 

  1. Products must fill at least 85% of the image.
  2. Absolutely minimum white space, cropped to the edge of the product.
  3. Position product angle in such a way for it to take as much as possible space.
  4. Always a square, no rectangles.
  5. Must have a pure white background.
  6. Must be at least 2000 x 2000 px.
  7. Must not exceed 10,000 pixels.
  8. JPG is the preferred image format.
  9. Lighting/brightness/saturation must be bright, crisp and eye-popping.
  10. No shadows.
  11. Use of a macro-lens is required for small objects.
  12. Our company identity is to position objects in all main / hero product pictures from top-left to bottom-right (see more live examples here). 225 to 45° as per schema on the right.
  13. Secondary images must features details, features and specifications.
  14. Do not use any weird angles, only strict 0/360, 45, 90, 135, 180, 225, 270 and 315 degrees.

 

Main / Hero image examples

 

 

Secondary image examples

Product typePrimary/HeroSecondarySecondarySecondary
Cable
Adaptor
Mains