Design Elements

COLOURS

Black

HEX: #000000

RGB: 0 0 0

CMYK: 60 40 40 100

White

HEX: #FFFFFF

RGB: 255 255 255

CMYK: 0 0 0 0

Orange

HEX: #E3681B

RGB: 227 104 27

CMYK: 7 72 100 0

Dark Orange

HEX: #8E381E

RGB: 142 36 30

CMYK: 28 85 100 29

Grey

HEX: #585858

RGB: 88 88 88

CMYK: 63 55 54 29

Dark Grey

HEX: #282828

RGB: 40 40 40

CMYK: 71 65 64 68


PRIMARY

Black

HEX: #000000

RGB: 0 0 0

CMYK: 60 40 40 100

  • Background for print and digital mediums.
  • Text colour when on white background.
  • Only excluded from documents.

White

HEX: #FFFFFF

RGB: 255 255 255

CMYK: 0 0 0 0

  • Background colour for documents.
  • Primary text colour.
  • Logo and icon colours when on a black, image or coloured background.

SECONDARY

Orange

HEX: #E3681B

RGB: 227 104 27

CMYK: 7 72 100 0

  • Used for primary buttons.
  • Sparing accent colour.
  • Subtitle colour.
  • Web link colour.
  • Used in illustration/patterns.

Dark Orange

HEX: #8E381E

RGB: 142 36 30

CMYK: 28 85 100 29

  • Used for secondary buttons.
  • Sparing accent colour.
  • Used in illustration/patterns.

Grey

HEX: #585858

RGB: 88 88 88

CMYK: 63 55 54 29

  • Background option.
  • Sparing accent colour.
  • Used in illustration/patterns.

Dark Grey

HEX: #282828

RGB: 40 40 40

CMYK: 71 65 64 68

  • Background option.
  • Sparing accent colour.
  • Used in illustration/patterns.
Copied to Clipboard!

 

 


 

 

TYPOGRAPHY

HEADER

MONTSERRAT

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9


BODY

Inter

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9


PRINT/DIGITAL SCALING

H0 - MONTSERRAT EXTRA BOLD
60px // Tracking: -5
H1 - MONTSERRAT BOLD
36px // Tracking: 0
H2 - MONTSERRAT SEMIBOLD
30px // Tracking: 10
H3 - MONTSERRAT SEMIBOLD
25px // Tracking: 25
H4 - MONTSERRAT SEMIBOLD
21px // Tracking: 50
P1 - Inter Normal
12px // Tracking: 0
P2 - Inter Normal
10px // Tracking: 5
P3 - Inter Normal
8px // Tracking: 5

 


WEB SCALING

H0 - MONTSERRAT EXTRA BOLD
4.831rem // Tracking: -5
H1 - MONTSERRAT BOLD
2.986rem // Tracking: 0
H2 - MONTSERRAT SEMIBOLD
2.488rem // Tracking: 10
H3 - MONTSERRAT SEMIBOLD
2.074rem // Tracking: 25
H4 - MONTSERRAT SEMIBOLD
1.728rem // Tracking: 50
P1 - Inter Normal
1.2rem // Tracking: 0
P2 - Inter Normal
1rem // Tracking: 5
P3 - Inter Normal
0.833rem // Tracking: 5

 


LOGOS

Primary Logo

PRODUCT LOGO

This is the primary logo for Kaffelogic. This is the default logo that should be used on product, documents and general branding.

This logo is to exist only in the Primary and Secondary colours. No exceptions.


Horizontal Logo

CORPORATE LOGO

This is the offset logo, this is only to be used on specified documents, not branding of physical products.


Stacked Logo

NANO 7 ICON

This is the illustrative logo for the Nano 7. This logo is to be used for profile images, merchandise and specific product branding.

This logo is never to be placed next to, or as a part of the master or offset logo.

LOGO SPACING

 

 

 

 

PRODUCT LOGO SPACING

Kaffelogic Product logo spacing
  • Minimum Size: Width: 6mm // 17px

CORPORATE LOGO SPACING

Kaffelogic Corporate logo spacing
  • Minimum Size: Width: 5mm // 14px

NANO 7 ICON SPACING

Kaffelogic Nano 7 Icon spacing
  • Minimum Size: Width: 5mm // 14px

 

LOGO DO'S & DON'TS

DO'S

 

DONT'S

 


ICONS

 

Icons are used in conjunction with certain associated features or talking points. They are to be used in packaging, promotion content where able and website display. 

They are to be placed above the feature text when there is ample room, or used in bullet point configuration when needing to be more condensed.

All icons are to be sized to the same cubic dimension.