Live Demo · Pikes Peak Web Designs
← Back to Samples Get a site like this →
Call (928) 315-9094 Home Services Residential Commercial Service Area About Pricing Blog Free Inspection

Brand Guidelines

The visual and written standards that make Redcap Roofing look and sound like Redcap Roofing, on the website, on a truck, on a business card, on an invoice.

01

Palette

Four colors. Red and black carry the brand; cream and off-white reduce the contrast of long-form content. Safety yellow is used sparingly for emphasis only, never as a decoration.

Redcap Red
#DC2626 Primary action, highlights, logo
Graphite
#0F131D Header, dark sections, body text on cream
Warm Paper
#F7F5F0 Page background, long-form reading
Ink
#14171F Body copy
Safety Yellow
#F7D046 Accent only, use for emphasis, not decoration
Slate
#4E5460 Secondary text, captions, metadata
02

Typography

Oswald sets the voice of the brand, condensed, confident, rooted in the trades. IBM Plex Sans handles the reading copy. IBM Plex Mono appears only in technical callouts.

Heading, display
Oswald 600 · clamp(2.25rem, 5vw, 3.75rem) · 1.05 line-height · tracking -0.005em
Heading, section
Oswald 600 · clamp(1.6rem, 3vw, 2.25rem)
Body, lead. Longer introductory paragraph that sits just under a heading. Slightly larger than standard body copy to ease entry into the page.
IBM Plex Sans 400 · 1.125rem · 1.55 line-height
Body, default. The workhorse of the site. Standard paragraphs, list items, form labels. Max width of 58 characters for comfortable line length on long-form pages.
IBM Plex Sans 400 · 1rem · 1.6 line-height
Captions, metadata, footnotes.
IBM Plex Sans 400 · 0.85rem · slate color
License #CO-RF-18432
IBM Plex Mono 400 · reserved for technical callouts
03

Components

The small set of reusable building blocks that compose every page. If a new pattern is needed, it's added here first.

Buttons

Primary button for the main call to action per section. Outline for the secondary action. Dark reserved for the "learn more" equivalent on light sections.

Section label

Colorado Springs since 2009

Used immediately above the section heading. Orients the reader before the headline lands.

04

Voice

How Redcap sounds. If a line of copy would feel out of place coming from a fifteen-year foreman, it doesn't belong on the site.

  • Plain language, blue-collar direct. We talk like people who've been on roofs for twenty years, not like a marketing agency.
  • Specifics over adjectives. Not "the best roofers in town", "$2M liability, license CO-RF-18432, 17 full-time W-2 employees."
  • Own the tradeoffs. We're not the cheapest and we say so. Trust is earned by being honest about what we aren't.
  • No exclamation marks. A calm voice during a storm is part of the product.
  • No jargon without translation. If we say "ice-and-water shield," we explain what it does the first time.
  • Phone number always clickable, always prominent. Calls close work, not forms.
05

Site by Pikes Peak Web Designs

This site was designed, coded, hosted, and is maintained by Pikes Peak Web Designs. $0 down, $175/month flat.

Visit Pikes Peak Web Designs