Live Demo · Pikes Peak Web Designs
← Samples Get a site like this →
Call (928) 315-9094 Home Services Service Area Shop Pricing Notes Book Job

Brand guidelines.

Three colors. Two type families. One way of saying things. The rules that keep Lumen looking and reading like Lumen, on the website, on the truck, on the invoice.

01 / Palette

Three colors. No exceptions.

Pure black. Electric yellow. Bone. That's the system. Every additional color is a deviation that needs justification, not approval.

Black
#000000
Type, primary fill, all surfaces that aren't bone
Yellow
#FACC15
Highlight, button-on-black, link underlines
Bone
#F8F8F7
Page background, long-form reading
Gray
#404040
Body copy, secondary type
Gray light
#737373
Captions, metadata
Yellow deep
#D19E00
Hover state for yellow surfaces
02 / Typography

Two faces. Both Archivo.

Archivo Black for the headlines. Archivo (variable) for everything else. No serifs anywhere on the system. No third typeface.

Three crew. Done right.
Archivo Black 400 / clamp(2.75rem, 2rem + 5vw, 6rem) / line-height 0.95 / tracking -0.04em
Section heading, oversized
Archivo Black 400 / clamp(2rem, 1.5rem + 2vw, 3.5rem)
Lead paragraph. Slightly heavier weight than body. The Archivo variable axis lets us tighten the sentence-level rhythm.
Archivo 500 / 1.15rem / line-height 1.5
Default body. Reads sharp at any size. We avoid optical sizes; the Archivo body weight does the work without any sub-family swaps.
Archivo 400 / 1rem / line-height 1.55 / max-width 60ch
Job ID 2014.0231
Archivo 700 / 0.85rem uppercase / job tags, license numbers, codes
03 / Components

Building blocks.

Buttons
Book a Job Call (928) 315-9094

Black fill + yellow text by default. Outline is black-on-bone with a 3px black inset border. No rounded corners, no transitions beyond color flips.

Highlight
Real fast. Done right.

Yellow background on em element. Always black text on yellow. Used for emphasis at the headline level only; never inside body copy.

Stat block
2,300+ jobs closed since 2014, all permit-pulled

Black surface, yellow number, white label. Reserved for hard, verifiable counts. Never decorative metrics.

04 / Voice

Sound like a master electrician.

If a sentence wouldn't be said by Ray on a job site at 4pm on a Tuesday, it doesn't go on the website.

  • Short. Declarative. Period. No semicolons, no asides. The trade is binary. The voice is binary.
  • Permit-pulled, code-passed. Specifics that prove the work. Job counts, license numbers, inspection results.
  • No "premium," no "professional." Adjectives that say nothing. The work says it.
  • All caps for emphasis only. Headlines, button labels, stat numbers. Never inside body copy.
  • No exclamation marks ever. Confidence doesn't shout.

Site by Pikes Peak Web Designs.

Designed, coded, hosted, and maintained by Pikes Peak Web Designs. $0 down, $175/month flat. Custom-coded, accessible, fast.

Visit Pikes Peak Web Designs