The kitchen sink.

Every token, type style, button, card, and signature pattern in the Northface Construction system: weather-tested, family-first, navy and gold.

Color

Navy for structure, gold for the call to action.

--navy
#122b75 · primary
--navy-deep
#0e2158 · hover
--blue
#5784e1 · mid blue
--blue-link
#366fe3 · links
--gold
#edb32b · .btn--gold
--gold-deep
#cf9a1f · gold text
--ink
#222 · body (extracted)
--ink-strong
#32373c · headings
--bg-tint
#f1f8ff · pale band
--bg-tint2
#e7f2ff · soft panel
--bg-dark
#122b75 · navy band
--border
#e5e7eb · rules
--grad-navy
116° navy → blue · hero-basic, avatars
.cta-overlay-blue
navy multiply wash over CTA photo
Typography

Plus Jakarta Sans, 400 / 600 / 800.

.display
Plus Jakarta Sans 800
clamp(2.4→3.4rem)
Built for Minnesota Weather.
.micro
800 · uppercase · 1.6px
the source's own heading label
Our Expert Roofing & Exterior Services

Minnesota’s Go-To Home Exterior Service Provider

h2
Plus Jakarta Sans 800
clamp(1.7→2.25rem)

Devoted To Serving Families In Minnesota

h3
Plus Jakarta Sans 800
clamp(1.3→1.6rem)

We Partner With You at Every Step

.lede
Plus Jakarta Sans 400
clamp(1.05→1.18rem)

Keep your family safe and your Minneapolis home looking great with durable, stylish roofing, siding, gutters, and windows.

body
Plus Jakarta Sans 400
1rem / 1.65

Northface Construction has been providing exceptional roofing and exterior services to Minnesotans for over 16 years, through everything the Twin Cities weather brings.

Buttons

The gold pill is the primary CTA.

Let’s Get Started Get a Quote View All Services Let’s Get Started Learn More
Let’s Get Started Book an Inspection
Cards

Service, value, review.

Residential roofing
Roofing

Residential Roofing

Passionate

We wouldn’t be here if we didn’t believe in what we were doing.

JS

Jessica S. · Google Review

★★★★★
“They did a fantastic job all around on our roof and siding job! Their communication was incredible.”
Signature shapes

Slant dividers, the blue multiply wash, gradient interior hero.

SVG slant divider

An angled white wedge transitions the hero into the next band, reproduced with a CSS clip-path (.slant-bottom).

Blue multiply CTA

Navy mix-blend-mode: multiply wash over a lifestyle photo (.cta-overlay-blue).

Gradient interior hero

The navy→blue diagonal gradient heads every interior page (.hero--basic).

Assets

Real logo, real Minnesota homes.

Color logo
northface-construction-logo.svgcolor mark · light grounds
White logo
northface-construction-logo-white.svgderived knockout · dark grounds
Family and dog
couple-with-dog-brick-home.jpghero ground · score 9
Model home
elk-river-model-home.webphero / split · score 9
Crew on ladder
roofers-ladder.webptrust / process · score 8
CTA couple
couple-cta-banner.webpCTA multiply band · score 8
Asphalt shingles
asphalt-shingle-roof.webptab-content · score 8
BBB badge
badge-bbb-white.svgtrust · dark grounds
Signature patterns

All 25 patterns are extracted. These six anchor the voice.

hero

"Protecting Minneapolis Families with Trusted Roofing & Exteriors" over an inline quote form and a slant divider. .hero--main

services

Six cards with a navy overlay that deepens on hover. .svc-grid

branded-location

"Devoted To Serving Families In Minnesota" + both offices. .branded

process

"We Partner With You at Every Step" with the four numbered steps. .steps

cta-banner

"Work With Minnesota’s Top Contractors" with the blue multiply wash. .cta-overlay-blue

hero-basic

The navy→blue gradient interior hero. .hero--basic