Design Best Practices
We cannot legally distribute our fonts, and therefore cannot require their use. However, we welcome and encourage components to purchase your own font license for the same fonts we use in our branding: Klavika and Helvetica. Learn more about the fonts used in our branding »
Don't set paragraphs and headings that are not hyperlinked to the same text color as text links and buttons, as doing so diminishes the visibility of linked items. Always ensure the color used for hyperlinks and buttons on the site are unique, stand out and can be easily recognized.
Images should be web-optimized. This includes cropping and scaling the image to the right size before uploading it to the website. Do not attempt to resize the image using HTML or CSS, as the image may appear distorted and increase load time for site visitors. Standard file formats for images are .jpg, .png or .svg.
Use consistent width and margins when framing sections of content on website templates. The left and right edges of the header elements, body elements and footer elements should line up evenly with each other.
Responsive & Adaptive Design
Don't create a separate mobile site independent of your desktop site, as this could negatively impact your search engine rankings. Instead, maintain one site that can adjust responsively to any screen size. Ensure that the website is user-friendly to mobile device users:
- Provide a mobile-friendly navigation menu.
- Ensure that multi-column layouts are scaled down for tablet screens or reduced to single-column for mobile screens.
- Ensure that images are configured to automatically adjust/resize as needed.
Be mindful of any accessibility needs for the website to ensure usability by people with physical disabilities. Find more information about accessibility guidelines at www.w3.org/TR/WCAG20.