Keple brand colors

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 picture examples

 

 

 

 


Upwork / A+ content 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