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


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 
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.





HEX: #4CAF50

HEX: #FFC107

HEX: #F44336


  Download PSD logo   Download AI logo


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.


Play - Font

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


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