Lehigh Outfitters - Brand Guidelines
Gear For Work and Weekends

These guidelines were created to help both standardize usage of the Lehigh Outfitters brand as well as encourage ADA-compliance.

Logo

ADA Compliance

Logos and decorative elements don't require the same accessibility as icons or other critical elements.

Full logo

Lehigh Outfitters Logo

Full logo
Black & White

Lehigh Outfitters Logo - Black and White

Full logo
Alternative

Lehigh Outfitters Logo - Alternative

Full logo
Alternative - Black & White

Lehigh Outfitters Logo - Alternative - Black and White

Colors

Orange
Primary
#E57200
rgb(229,114,0)
Green
Secondary
#666200
rgb(102,98,0)
Grey
#333333
rgb(51,51,51)
White
#FFFFFF
rgb(255,255,255)

Typography

ADA Compliance
  • Text over images should be HTML and styled with CSS to enable screen reader usage.
  • Text should have a 3:1 contrast ratio to its background if at least size 24px, 18pt, or 1.5em or bold if at least 19px, 14pt, or 1.2em. Anything smaller requires a 4.5:1 contrast ratio.
  • Use em / rem as sizing units (specifically font-size) to allow for browser scalability.

Headline 1: Raleway, 700 Weight
Subheadlines 500 weight

Headline 2: Uppercase
Subheadlines

Headline 3: Uppercase
Subheadlines

Body

  • Font family should be Lato (Google Fonts)
  • Font weight should be 400
  • Font color should be #212121 on light (white) backgrounds
  • Font size should be scalable according to device
    • Units 'em', 'rem', and 'vw' allow us to create scalable text
    • You can create a minimum font size that scales upwards like this:
    • You will have to use @media queries to create a max font-size
  • Headline 1 should be Capitalized
  • Subsequent headlines should be UPPERCASE

BlockQuote

  • Font color should be #333

Web Elements

ADA Compliance
  • Ensure compliant font-size and color contrast
  • Where appropriate, there should be a title attribute for more context, such as the example button below
  • Tab navigation and form submission should be accessible and intuitive
  • Use labels on all forms, following the example below for good UX
  • Use explicit, contextual, and inline error messaging

Buttons

Forms