# Northface Construction — Design System Spec

> Source: https://northfaceconstruction.com (captured 2026-07-24, raw page source + CSS rule sweep)
> Stack: Custom WordPress theme (`northface-theme`), Bootstrap reset (dead tokens) + Gravity Forms (Tailwind-preflight form chrome), self-hosted Plus Jakarta Sans, FaceWP review/project filtering
> Asset completeness: complete — real color logo SVG (+ derived white knockout for dark grounds), 10 photos, BBB badge. No video mirrored (secondary-image still stands in for the play-button hero).

## At-a-glance

- **Business:** Northface Construction — exterior remodeler: residential + multifamily/commercial roofing, storm damage repair, siding, window installation, gutters, plus roof rejuvenation, solar shingles, insulation, ice dam removal, and Bosso permanent lighting
- **Geography:** Minneapolis / Twin Cities metro / Elk River, MN. Two offices — Elk River (18332 Joplin St NW, Elk River, MN 55330) and Minneapolis (120 Hennepin Ave suite 502, Minneapolis, MN 55401)
- **Phone:** 763-433-2269 · **Email:** info@northfaceconstruction.com
- **Audience:** Minnesota homeowners whose exteriors take hail, wind, and snow; storm-damage/insurance-claim customers; multifamily & commercial property managers
- **Voice anchors (verbatim):**
  - "5-Star Minneapolis Roofing Contractor"
  - "Protecting Minneapolis Families with Trusted Roofing & Exteriors"
  - "Built for Minnesota Weather: Hail, Wind, Snow & Everything Between"
  - "Our Expert Roofing & Exterior Services"
  - "Minnesota's Go-To Home Exterior Service Provider"
  - "Devoted To Serving Families In Minnesota"
  - "Our Simple Process" · "We Partner With You at Every Step"
  - "Work With Minnesota's Top Contractors"
  - "All Your Roofing Answers."
  - "Elk River Roofing Professionals Who Care"
  - "Let's Get Started"
- **Register:** warm, local, family-first, weather-aware. Sells trust and being cared-for ("Customer For Life Mindset") over spec sheets. Minnesota geography is load-bearing in nearly every headline.

## 🎯 Core assets

### Logo
- `assets/northface-construction-brand/northface-construction-logo.svg` — real color mark (navy/near-black wordmark + `#0374BD` blue roof icon + light-gray facets). viewBox 0 0 177 46. **Use on white / light grounds** (nav, light sections).
- `assets/northface-construction-brand/northface-construction-logo-white.svg` — derived white knockout (all fills → `#FFFFFF`) for the navy footer and dark bands.
- Forbidden: color logo on navy grounds (the dark wordmark disappears); recoloring the blue roof icon; stretching.

### Photography system
Real exterior + lifestyle photography is the mood engine — Minnesota homes, real crews on ladders, families in the yard. Warm and residential, never stocky blue-sky roof clichés.

| Asset | Type | Role | Score |
|---|---|---|---|
| couple-with-dog-brick-home.jpg | family + dog, brick home | hero ground / branded-location | 9 |
| elk-river-model-home.webp | MN model-home exterior | hero / two-col split | 9 |
| roofers-ladder.webp | crew on a ladder | trust / process / hero alt | 8 |
| couple-cta-banner.webp | lifestyle couple | CTA banner (blue multiply) | 8 |
| family-playing-yard-house.webp | family in the yard | company-promise / lifestyle | 8 |
| red-brick-home.webp | red-brick home exterior | two-col / projects | 8 |
| asphalt-shingle-roof.webp | asphalt shingle closeup | tab-content / roofing | 8 |
| metal-roofing.webp | metal roof | tab-content / services card | 7 |
| new-gutters-home.webp | new gutters on a home | services card / feature-split | 7 |
| before-after-roof-washing.webp | roof-wash before/after | roof rejuvenation / resources | 7 |
| badge-bbb-white.svg | BBB accreditation badge (white) | trust / footer (dark grounds) | — |

## 🎨 Color tokens (rendered-frequency ranked, not the declared `:root`)

CSS-sweep extraction. Brand system is **navy `#122b75` + gold `#edb32b` on white** with light-blue tints.

```css
--navy: #122b75;        /* primary — deep bands, footer, headings. Extracted. */
--navy-2: #132c75;      /* rendered navy twin — gradient stop */
--blue: #5784e1;        /* mid blue */
--blue-link: #366fe3;   /* links; light stop of the signature gradient */
--gold: #edb32b;        /* the .btn--gold primary button. Extracted. Immutable. */
--gold-deep: #cf9a1f;   /* gold-on-light text / hover */
--ink: #222222;         /* body (extracted) */
--ink-strong: #32373c;  /* headings / secondary ink (extracted) */
--bg-tint: #f1f8ff;     /* palest blue band */
--bg-tint2: #e7f2ff;    /* soft blue panel */
--border: #e5e7eb;
```

### Signature gradient / fills
- `--grad-navy`: `linear-gradient(116deg, #366fe3, #132c75)` — the navy→blue diagonal fill behind the interior-page hero (`.hero--basic`), review-initial avatars, financing panel, and small CTA. A reusable brand FILL, not only the multiply overlay.

### Dead-token decision (the Bootstrap trap — documented)
The theme loads a **Bootstrap reset** whose entire `--bs-*` custom-property set is declared in `:root` (`--bs-primary:#0d6efd`, `--bs-blue`, the full gray scale, `--bs-success`, etc.) but **never painted** — `var(--bs-*)` is never referenced by the theme, which paints its own navy/gold. Shipping a Bootstrap-blue `#0d6efd` system would be the Baker-purple mistake one level over. **Not painted.** Separately, `#2563eb / #111827 / #1f2937 / #f3f4f6 / #e5e7eb` rank high in the rendered CSS but are **Gravity-Forms Tailwind-preflight form chrome** (`gfield`), not brand — treated as form defaults, only `#e5e7eb` is reused (as the neutral border, which happens to match the theme's own rule color).

## ✏️ Typography

| Role | Original | Substitute | Why |
|---|---|---|---|
| Display + body | Plus Jakarta Sans (self-hosted `PlusJakartaSans-Reg` 400 / `-Semi` 600 / `-ExBold` 800) | **Plus Jakarta Sans** (Google Fonts, 400/600/800) | Same family, free on Google Fonts. No substitution and **no metric re-tuning** — identical vertical metrics. |

Type ramp: `.display` clamp(2.4→3.4rem) w800 · h1 clamp(2.1→2.75rem) · h2 clamp(1.7→2.25rem) · h3 clamp(1.3→1.6rem) · body 1rem/1.65. Source display faces: `.jumbo` 44px + `.title--46/40/34/22`, mapped to the fluid ramp.

Defining typographic moves:
1. **The `.micro` eyebrow** — see carve-out below. Uppercase, letter-spaced label above nearly every heading.
2. Headings set in the ExtraBold (800) weight; big `.jumbo` display headings anchor each band.
3. Color discipline: gold and blue touch interactive/eyebrow elements only. Headline words are ink (or white on dark) — never a colored word inside a heading.
4. Pill CTAs (`999px`), gold fill on navy text.

### Eyebrow carve-out (documented — the ONE allowed eyebrow)
The source puts an uppercase, letter-spaced micro label above nearly every h2 as real structural page grammar (class `.micro` / `.hero .micro`, letter-spacing 1.56–1.65px; frequently it is the semantic h1/h2 styled small). Per the SKILL known-conflict carve-out, **their** treatment is reproduced verbatim as class **`.micro`**: uppercase, letter-spacing, muted/brand color — **NO accent dash, NO stripe, NO mono font**, and the class is not named `eyebrow`/`kicker`. This is the only eyebrow device in the kit; no other is introduced, and no word inside a heading is ever colored.

## 🏗️ Signature patterns

**Extraction rule (2026-07-24): every pattern in `sections.html` is transcribed from a live northfaceconstruction.com section — 25 patterns, all flagged SIGNATURE, each with a source-URL comment. Built pages compose ONLY from these. No generic filler; a section that isn't on the live site is drift.**

Signature shapes reproduced: **SVG angled slant dividers** (`hero-slant-white.svg` bottom edge, `top-slant-white.svg` top edge — the site's section-transition motif, rebuilt as CSS clip-path wedges); **`.cta-overlay-blue` `mix-blend-mode: multiply`** navy wash over the CTA-banner photo; **grayscale blog-single hero** (`filter: grayscale(1)` + `mix-blend-mode: overlay`); **`hero-story-cta` drop-shadow** on the quote-form card; **blue+gold decorative dot-grid** behind the hero form.

### Full pattern inventory (source URLs)

| # | Pattern | Source URL |
|---|---|---|
| 01 | hero (inline quote form, slant divider) | https://northfaceconstruction.com/ |
| 02 | hero--secondary (image + video play button) | https://northfaceconstruction.com/services/ |
| 03 | two-col image/text split (+ boxed variant) | https://northfaceconstruction.com/roofing/ |
| 04 | services grid (6 cards, overlay hover) | https://northfaceconstruction.com/ |
| 05 | branded-location band (devotion + offices) | https://northfaceconstruction.com/ |
| 06 | service-areas + map (city list) | https://northfaceconstruction.com/ |
| 07 | process steps | https://northfaceconstruction.com/ |
| 08 | featured projects carousel | https://northfaceconstruction.com/ |
| 09 | CTA banner (photo, blue multiply overlay) | https://northfaceconstruction.com/ |
| 10 | company-promise / team values | https://northfaceconstruction.com/ |
| 11 | FAQ accordion | https://northfaceconstruction.com/ |
| 12 | recent-articles / featured resources | https://northfaceconstruction.com/ |
| 13 | testimonial pull-quote | https://northfaceconstruction.com/roofing/ |
| 14 | review card grid (FaceWP, initials avatar) | https://northfaceconstruction.com/reviews/ |
| 15 | tabbed materials content | https://northfaceconstruction.com/roofing/ |
| 16 | certification / partner logos strip | https://northfaceconstruction.com/services/ |
| 17 | team members grid | https://northfaceconstruction.com/team/ |
| 18 | careers listing | https://northfaceconstruction.com/careers/ |
| 19 | financing block | https://northfaceconstruction.com/financing/ |
| 20 | blog index featured article | https://northfaceconstruction.com/blog/ |
| 21 | blog post grid | https://northfaceconstruction.com/blog/ |
| 22 | rich-text content band (basic-content) | https://northfaceconstruction.com/team/ |
| 23 | blog single article body (grayscale hero) | https://northfaceconstruction.com/blog/3-tab-vs-architectural-shingles/ |
| 24 | section eyebrow / kicker device (`.micro`) | https://northfaceconstruction.com/ |
| 25 | hero--basic (navy→blue diagonal-gradient interior hero) [audit-added] | https://northfaceconstruction.com/reviews/ (also blog, faq, projects, team) |

### Crawl-scope log

- **Crawled (32 pages → 2 CSS fingerprints):** home · services · roofing · siding · window-installation · storm-damage-roof-repair · gutters · commercial-roofing · about · careers · contact · faq · financing · projects · reviews · team · solar-shingles · insulation · ice-dam-removal · roof-rejuvenation · cedar-shake-roofing · bosso-permanent-lighting · contest · youtube · blog · blog/3-tab-vs-architectural-shingles · and one directly-fetched service-area **city** representative per service (roofing-blaine, siding-blaine, window-installation-blaine, storm-damage-roof-repair-blaine, gutters-bloomington, commercial-roofing-blaine).
- **Skipped, with evidence:** the 180 un-fetched service-area **city** pages (each service's `/<service>/<city>/` group is one template that only swaps the city token — a fetched `-blaine`/`-bloomington` representative shares the CSS fingerprint) and the 172 un-fetched **blog posts** (one fetched single-post representative covers the `hero--blog-single` template). 355 sitemap URLs collapse to 2 fingerprints (`0878a9f643` ×24, `403c4ef8c6` ×8), same theme with per-page inline-CSS deltas. Privacy / terms not crawled (runtime/legal, no unique section type expected); if one surfaces later, extract before use.
- **Block-root census reconciled:** every semantic `<section>` root (hero, two-col, two-col-boxed→folded, services, branded-location, service-areas, process, feat-proj, cta-banner, cta-banner-small→folded, company-promise, faq-accordion, recent-articles, quote, tab-content, logos, team-members, career, finance-block, feat-art-wrap, posts, basic-content, additional-services→folded, card--reviews) is cataloged or folded. `page-*` roots are WordPress body-class runtime wrappers, not sections.

## 🚫 Forbidden / off-brand

- ❌ **Bootstrap-blue `#0d6efd`** or any `--bs-*` token — declared by the reset, never painted; the brand is navy `#122b75`
- ❌ Gravity-Forms Tailwind form colors (`#2563eb`, etc.) treated as brand
- ❌ Color logo on navy/dark grounds (use the white knockout)
- ❌ **Colored accent words inside headlines** — the #1 AI tell; the source never does it
- ❌ Any eyebrow device other than the documented `.micro` — no accent dash, no stripe, no mono kicker
- ❌ Sharp-cornered primary CTAs — the gold pill is the signature
- ❌ Stocky roof clichés (clip-art houses, blue-sky-only shingle stock) — photography is real MN homes, crews, and families
- ❌ **LLM copy constructions** — em-dash-chained sentences, "not X, but Y", triple-clever parallelisms, fake-personalized colored "you". Write in the brand's warm, local, plain cadence

## ✅ Vibe / mood keywords (5)

weather-tested · family-first · local-Minnesota · trust-led · exterior-craft

If a composition doesn't hit 3+, it's drifting.

## 🪞 Position in the design-systems library

Roofing/exterior siblings already in the pool: `guardian-roofing`, `baker-roofing`. Northface's distinction is a **navy `#122b75` + gold `#edb32b` exterior-remodeler** system (not red-orange like Baker, not Guardian's wedge system), a full multi-trade exterior scope beyond roofing, and **Minneapolis / Twin Cities / Elk River, MN geography** baked into the voice. Signature look: angled SVG slant dividers, the blue-multiply CTA wash, and the uppercase `.micro` eyebrow. Best fit for: Upper-Midwest roofing & exterior remodelers, storm-damage/insurance-claim contractors, and multi-service home-exterior brands selling trust and being cared-for.

## 🧪 QC log (2026-07-24)

All Phase-5 gates green: verbatim-audit 206/206 PASS · class-audit PASS · palette-audit PASS · browser-qc (contrast / responsive@375 / heading-accents / broken-images) verdict PASS, zero INVISIBLE.

**Justified `low` contrast cases (deliberate, do not "fix"):**
- `.stars` gold `#edb32b` ★ glyphs on white review cards (1.67–1.89): decorative rating symbols mirroring the source's own gold `stars-5.svg`; not readable copy.
- `.sx-pattern .num` pattern-ID numerals in the catalog chrome (2.53): doc chrome quiet token, not brand content.

**Contrast base-color pattern (register new components here):** every photo or gradient ground carries a solid painted base so text never resolves against the page — `.svc-card`/`.cta-banner-band` use `background: var(--navy)` under the photo; `.cta-banner-small`, `.finance-block .panel`, `.review--initials`, `.hero--basic` pair `background: var(--grad-navy)` with `background-color: var(--navy-2)` (the shorthand alone paints no backgroundColor). Any new component putting light text on a photo/gradient must do the same.

**Responsive note:** `.footer .cols` collapses 4-col → 2-col at 880px → 1-col at 560px; the 560px block must stay AFTER the 880px block in `_shared.css` (equal specificity, cascade order decides).

**Verbatim corrections applied post-authoring:** invented form helper lines removed (the source form has none); spliced/truncated ledes replaced with exact source sentences (asphalt-shingles, repair-vs-replace); invented trust bullets replaced with the real per-page hero badges (siding: Reliable Workmanship Warranties / Budget-Friendly Financing / LP Smartside Partner (MN Local!); storm: FREE Emergency Inspection / Emergency Roof Repair Services / Exceeding Client Expectations); financing bullets now the page's three real facts; blog excerpt and blog-single intro now the articles' real opening lines; blog-single "Roofing" category chip replaced with the source's real "Posted On:" micro (the class name `kicker` also violated the banned-device grep and is gone).