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.
Logos and decorative elements don't require the same accessibility as icons or other critical elements.
- 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
Headline 3: Uppercase
- 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
- Font color should be #333
- Ensure compliant font-size and color contrast
- Where appropriate, there should be a
titleattribute 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