Brand Guidelines

Visual Elements

This branding guide provides a comprehensive collection of resources for the Charles Butt Foundation’s visual identity, including logos, color palettes, typography, illustrations, and other graphic elements. Each resource is thoughtfully organized and easily downloadable, ensuring that you have all the tools necessary to maintain consistency in your projects. Whether you’re designing a digital campaign, print materials, or internal documents, these resources are readily accessible to streamline your workflow.

Proper usage of each resource is critical to preserving the integrity of our brand. The logo section details the appropriate formats, sizes, and clear space requirements for various applications. The color palette includes exact HEX, RGB, and CMYK values to ensure visual consistency across digital and print mediums. The typography guidelines outline font pairings, weights, and sizes for headings, body text, and captions. For illustration and graphic elements, the guide offers examples of appropriate placement, sizing, and context to align with the organization’s visual tone. Each section provides clear dos and don’ts to eliminate guesswork and maintain a professional and cohesive appearance.

To get started, navigate the left sidebar and select the specific resource you need. Each section is conveniently labeled to help you jump ahead, making it easy to find the guidance and assets most relevant to your project.

---

Logos

The Charles Butt signature represents a deep commitment to delivering on a promise of quality and excellence, whether the signature appears on a product or on a foundation. As modest as Charles is, the inclusion of his signature in the Charles Butt Foundation logo signifies the importance he places on this work. This work is personal to Charles, and in turn, it is personal to all of us.

Primary logo variations

The Charles Butt Foundation primary logo is the main logo to represent the brand. It is used most often and on almost everything, including our website header, business cards, large print collateral, signage, etc.

The logo is presented in primary blue color (PMS 279) whenever possible, and when it works best. When another treatment is required for dark backgrounds, we can reverse-out the logo into white.

Stacked logo variations

The stacked logo is a vertical variable of our primary logo to be used when the primary logo’s horizontal format would not work well in particular environments, such as social media profiles, or when a special purpose warrants it, like lapel pins. This alternative layout ensures our logo is always legible in limited spaces.

As with the primary logo, the stacked logo is presented in our primary blue color (PMS 279) whenever possible, and when it works best. When another treatment is required for dark backgrounds, we can reverse-out the logo into white.

Logo submark variations

The logo submark is the most reduced alternative logo for condensed spaces, and is only applied when all other logo variations are unable to work or when it can serve as a stylized design addition (e.g. a watermark on collateral, a logo stamp) or an accompanying “seal of approval” on products. This mark will not be used as a standalone representation of the brand — only in conjunction with the organization’s logo and/or name.

As with the other logos, the submark logo is presented in our primary blue color (PMS 279) whenever possible, and when it works best. When another treatment is required for dark backgrounds, we can reverse-out the logo into white.

Incorrect logo usage

To maintain the integrity and consistency of our visual identity, the logo must always be used exactly as provided in the official artwork files. Do not alter the logo in any way. This includes—but is not limited to—stretching, squashing, rotating, flipping, changing colors, adding effects, or redrawing any part of it.

Always use the original digital files supplied by the brand team. The logo may be resized to suit different formats or layouts, but proportions must remain locked to prevent distortion. No part of the logo should ever be modified or separated for individual use.

When in doubt, consult with us before applying the logo in new or unconventional ways.

Color palette

The Charles Butt Foundation color palette has been thoughtfully curated to strike a balance between personality, clarity, and inclusivity. The palette ensures that all branded materials are both visually engaging and functionally readable. Each color has been selected for its connection to our foundational roots. By following the provided color values and usage guidelines, we ensure a consistent brand experience that is both engaging and accessible to all audiences.

Primary colors

Our three primary brand colors were selected to create a complementary balance of lightness, vibrancy, and depth. When used together, they convey a tone that is approachable yet confident, imaginative yet grounded. This palette forms the foundation of our visual identity, ensuring consistency across all branded materials from digital platforms to printed collateral. Exact PMS, HEX, RGB, and CMYK codes have been provided to support both screen and print reproduction.

Accent Colors

Inspired by Charles’s passion for sailing and his boat, Rebecca, our accent colors introduce personality and vibrancy into the brand. These tones are designed to complement the primary palette and are ideal for highlighting key elements or creating visual interest in layouts. Exact PMS, HEX, RGB, and CMYK codes have been provided to support both screen and print reproduction.

Accent colors help emphasize important elements on a page (e.g. CTA’s, quotes, formulas, infographics), to create contrast or rhythm. Accent colors are used sparingly and should not exceed 10% of a design. Exact PMS, HEX, RGB, and CMYK codes have been provided to support both screen and print reproduction.

Neutral Colors

Neutral shades play a supporting role in our visual system. Darker neutrals are reserved primarily for typography to ensure legibility and contrast. Lighter neutrals are used sparingly to present secondary or non-essential elements—such as background fills, dividers, or page numbers—in a subtle and unobtrusive way.

Lighter neutrals are used to support layout clarity without drawing attention—ideal for background fills, dividers, page numbers, or other peripheral elements. They should never compete with primary or accent colors and should not be used for key messaging.

Avoid placing text over light neutrals unless the contrast has been tested for accessibility. When in doubt, use a darker shade or an approved background color to maintain readability and brand consistency.

---

Typography

Our brand typography pairs the serif font Lora for headings, interactive components, and quotes, with the sans-serif Work Sans for body copy and supporting text. This combination strikes a balance between elegance and clarity, reinforcing a distinctive yet accessible voice across all communications.

To maintain consistency and establish a clear visual hierarchy, detailed guidelines are provided for font sizes, line spacing, and usage across various layouts.

For digital applications, always use web-safe or embedded versions of Lora and Work Sans to preserve the brand look. In situations where these fonts are not available (basic email clients or internal tools) acceptable substitutes include Georgia for Lora and Arial for Work Sans. These alternatives should be used sparingly and only when the brand fonts cannot be supported.

---

Illustrations

Illustrations play a supporting role in our brand, helping to convey ideas with clarity, creativity, and a human touch. They reflect the tone of Charles Butt Foundation without overwhelming the content. All branded illustrations feature custom line-drawn artwork as part of our organization’s unique visual identity. Use illustrations to simplify complex information, add warmth to layouts, or incorporate subtle personality where appropriate. Requests for new illustrations can be submitted through the graphic design pipeline, ensuring alignment with the established style.

---

Graphic Elements

This section covers additional visual components that enhance and support the brand’s overall identity which may include patterns, textures, and icons. These elements are designed to complement, not compete with, core brand assets like our logo, color, typography, and photography. Usage guidelines are provided to ensure these graphics are applied consistently and thoughtfully, helping to create cohesive and engaging designs across all mediums.

Support, Don’t Distract
Patterns, textures, and icons should enhance the content, not compete with it. These elements are decorative accents—not focal points—and should never overpower typography, imagery, or key messaging.

Maintain Brand Consistency
Use only approved elements provided in the brand asset library. Do not alter colors, proportions, or styles unless explicitly directed in sub-brand or campaign-specific guidelines.

Scale and Placement
Patterns and textures should be used at appropriate scales to avoid visual noise. Subtle repetition works best. Avoid placing detailed patterns behind text or other important content. Icons should be aligned and spaced consistently within layouts.

Color Application
Always use colors from the official brand palette when applying graphic elements. Avoid gradients, drop shadows, or effects unless specifically approved. When layering textures or patterns, ensure there’s enough contrast for legibility and accessibility.

Context Is Key
Use elements with intention. For example:

• Patterns can add structure or energy to layouts, especially in backgrounds or section dividers.
• Textures can create depth and warmth but should be subtle and used sparingly.
• Icons are functional, not ornamental—use them to clarify information, not to fill space.

Keep It Clean
Avoid using multiple graphic elements in a single layout unless there’s a clear visual hierarchy. When in doubt, simplify, white space is encouraged.

Accessibility Matters
All elements must maintain readability and usability. Test any overlays, patterns, or iconography for sufficient contrast and clarity on both light and dark backgrounds.