Klipfolio Guidelines

Colours Palette

Logo & Badge Colours

Logo Black

HEX: #000000

CMYK: C0 M0 Y0 K100

PMS Coated: Black 6C

Logo red

HEX: #ed1c24

CMYK: C0 M94 Y100 K0

PMS Coated: 1795

Logo white

HEX: #ffffff

CMYK: C0 M0 Y0 K0

PMS: None

Brand Primary Colours

blue very light #f4f6f8
blue light #dfebfb
blue #5290e9
blue dark #2c7ae8
red very light #fcf3f8
red light #fae0e2
red #e14d57
red dark #ce4a57
purple very light #f1f0f8
purple light #e1deef
purple #6066ae
purple dark #525a8f
teal very light #f0f8f7
teal light #dcf1ef
teal #50c2b8
teal dark #26a593
yellow very light #fdf6f0
yellow light #faede0
yellow #e9a761
yellow dark #d88e4c

Brand Secondary Colours

green very light #eff5ed
green light #dbead8
green #5ca762
green dark #569959
orange very light #fdf2ef
orange light #fce2de
orange #f87462
orange dark #ea655a
magenta very light #f6edf5
magenta light #edd7e9
magenta #c2529e
magenta dark #af4691

App Colours

app blue light #9ab8ff
app blue #7395e5
app blue dark #3d5998
app blue very dark #35456a
app blue very very dark #273350
app green light #73b881
app green #3ba150
app yellow light #ec932f
app yellow #dc7808
app red light #d94c58
app red #a7313a

Black and White Colours

white #ffffff
grey very light #f5f5f5
grey light #e6e6e8
grey #b2b2b2
grey dark #464648
grey very dark #2a2a2a
black #000000

Icons Colours

Red Icon

Used on the website and presentations

Colours

Primary icon colour: #e14d57

Background colour: #fcf3f3

Blue Icon

Used on the website and presentations

Colours

Primary icon colour: #5290e9

Background colour: #f4f6f8

Purple Icon

Used on emails and presentations

Colours

Primary icon colour: #5f65ae

Background colour: #f1f0f8

Other icon colours could be used if the need arise, like the need to show more than 2 different categories, in that case use the rest of the primary/secondary colours for those icons.

Klipfolio Badges

Klipfolio Badge Size and Exclusion Zone

In a box

  • 80px box 10px rounded corners
  • badge (at 80px) 8px interior border
  • use the triangle to determine exclusion zone

Klipfolio Badge Misuse

Don't do the following

change colour

distort or wrap

change typeface

adding effects

badge without red triangle

badge in a different shape

apply a gradient

apply an outline

rotate

compress size horizontally or vertically

Klipfolio Badge Application

Klipfolio Logo Application

Badge

  • primary use
  • use for print
  • use for web
  • ___________

Badge (white & red)

  • secondary use
  • only for print
  • only if printing in black and white

Badge (black & white)

  • secondary use
  • only for print
  • only if printing in black and white

Typography

Web Font

App Font