This toolkit is a living resource, bringing together logos, colors, typography, and core design elements in one place. Think of it as a reference point rather than a rulebook — these resources and guidelines exist to support a consistent visual language across websites, social media, email, print, and other public-facing materials, while still leaving room for creativity.
[blocksmith_content]
Campaign Logo
[blocksmith_content]
Primary Logo
The preferred logo for most applications. Use this version on white or light neutral backgrounds whenever possible.
Reversed Logo
Use this version on dark, bold, photographic, or high-contrast backgrounds where the primary logo would be difficult to read.
Alternate Treatments
Other Logo Assets
Colors
Click on a color swatch to copy its HEX code.
[blocksmith_content]
Website Color 1
Primary action color. Used for the most important calls to action, including main buttons, key highlights, and moments where the design should draw attention or encourage people to act.
- HEX:
- RGB:
- CSS:
- color-1
- CMYK:
- Pantone:(closest match)
Website Color 2
Secondary accent color. Used for links, secondary buttons, section backgrounds, accents, and other supporting visual details.
- HEX:
- RGB:
- CSS:
- color-2
- CMYK:
- Pantone:(closest match)
Website Color 3
Main text color. Used for headings, body copy, and other high-contrast elements.
- HEX:
- RGB:
- CSS:
- color-3
- CMYK:
- Pantone:(closest match)
Other Website Colors
Additional supporting colors used throughout the website for section backgrounds, alternate buttons, highlights, accents, and other visual details.
- HEX:
- RGB:
- CSS:
- color-4
- CMYK:
- Pantone:(closest match)
- HEX:
- RGB:
- CSS:
- color-5
- CMYK:
- Pantone:(closest match)
- HEX:
- RGB:
- CSS:
- color-6
- CMYK:
- Pantone:(closest match)
- HEX:
- RGB:
- CSS:
- color-7
- CMYK:
- Pantone:(closest match)
- HEX:
- RGB:
- CSS:
- color-8
- CMYK:
- Pantone:(closest match)
Typography
[blocksmith_content]
Display 1
Display 2
Display 3
Display 4
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is some sample lead text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is some sample body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
