Brand Style Guide


Logos

  • Logo will always appear on an orange background.
  • Logo may appear stacked or horizontal. The preference is stacked.
  • The shadow on the icon is not included when aligning the logo.

PNG | SVG

PNG | SVG

Layout

  • Using the height as a base, the stacked layout will always have 20% internal padding and 20% external padding.
  • Using the height as a base, the horizontal layout will always have 15% internal padding across the top and bottom, 30% across the left and right and 30% external padding.

Icon

  • The icon will appear slightly aligned to the top to highlight the negative “T”.
  • The icon will always appear in a circle with an orange background.

PNG | SVG

PNG | SVG

Primary Colors

  • Orange text on a white or charcoal background is accessibility compliant.
  • White or charcoal text on an orange background is accessibility compliant.
  • Grey text on a white or beige background is accessibility compliant.
  • Orange
  • #FF6200
  • RGB: 255,98,0
  • Charcoal
  • #424040
  • RGB: 66,64,64
  • Gray
  • #747676
  • RGB: 116,118,118
  • Beige
  • #FAF6EB
  • RGB: 250,246,235
  • White
  • #FFFFFF
  • RGB: 255,255,255

Fonts

Headings

ABCDEFGHIGJLMNOPQRSTUVWXYZ
1234567890

Body

ABCDEFGHIGJLMNOPQRSTUVWXYZ
1234567890

Quotes

ABCDEFGHIGJLMNOPQRSTUVWXYZ
1234567890

Notes


Spelling

  • Two words with a space in between.
  • Capital T’s.
  • Italicized.
Tell Touch
TellTouch
Telltouch
telltouch

Images

  • Flat cartoon style
  • Click on the images opposite to see bigger versions. Right click for copy and save options.