Use these brand guidelines to maintain consistency when communicating across channels about Mightybytes and its initiatives.

To advance our mission, Mightybytes incorporates the following principles into our business operations, culture, initiatives, and company communications.

Use the following guidelines to maintain communications consistency across channels and touchpoints.

Typography

Use these type styles when creating page content on the website and in other visual communications.

Mightybytes uses two primary fonts in our visual communications:

1. Bricolage Grotesque: used for larger headings
2. Helvetica Neue: used for smaller headings and body copy for improved legibility

If the above fonts are not available, default system fonts (Arial, Helvetica, etc.) are used as backup to minimize additional data transfer.

Use these headings to create content and document hierarchy that works for both humans and machines.

In instances where you need display text with extra visual impact, you can break the text into banners by combining type sizes and accent colors.

The smaller text should be the base of the heading (i.e. 48px for an H2) while the larger text should be 214% of the smaller value (i.e. 102.72px).

On the Website

• Choose the custom ‘Stack’ block in WordPress to set this up.
• Adjust font size using the block Typography panel (Large on top, XL on bottom).
• Choose color options in the Styles panel.
• Also, remember to maintain good content structure by adjusting banner text headings (h2, h3, etc) to match document hierarchy.

Use the palettes below to communicate value through color. Please note that the colors will change depending on whether the site is in light or dark mode.

This is the primary palette. Use these colors for most Mightybytes-related visual communications.

Secondary colors should be used sparingly for highlights and to separate an item from other elements on a page.

Hero images and photos are treated with various duotone colors from the palette above. Grain is added to maintain smallest possible file size while also compensating for artifacts that come with heavy image compression.

• Website photos are used sparingly to keep page size down.
• Make sure they communicate value relevant to page content.
• When adding grain, you may need to adjust amount based on photo fidelity.
• When compressing images, find an acceptable balance between image fidelity and file size.
• Digital images are delivered via the website using modern formats (WEBP, AVIF, SVG, etc.) whenever possible.
• If you need a Photoshop template, contact us at the bottom of this page.

Inline SVG icons convey meaning, reduce page size and server calls, and help people with reading or other cognitive disabilities more easily understand content. Examples below.

Use primary icons on top level pages to communicate key concepts about Mightybytes, our services, process, and so on.

Use green icons in call-to-action blocks, accordion menus, and other areas to convey meaning and support content.