Internal

PorchLight Brand Guide

Logo assets, color palette, typography, and component patterns.

Logo Assets

Logo uses Montserrat (SemiBold 600 / Medium 500). All fills aligned to site palette: navy #3B5068, amber #E8A838.

For Light Backgrounds

Horizontal (SVG)

Primary — nav, header, email

/logo-horizontal.svg

Horizontal @2x (PNG)

Raster — social, print

/[email protected]

Square (SVG)

Stacked lockup — cards, OG image

/logo-square.svg

Square @2x (PNG)

Raster stacked — social profiles

/[email protected]

Mark (SVG)

Icon — navy body, amber glow

/logo-mark.svg

Mark @2x (PNG)

Raster icon — app icon

/[email protected]

For Dark Backgrounds

Horizontal Dark (SVG)

Light fill — footer, dark sections

/logo-horizontal-dark.svg

Horizontal Dark @2x (PNG)

Raster — dark backgrounds

/[email protected]

Mark — Navy BG (SVG)

Light fill mark for navy backgrounds

/logo-mark-navy.svg

Mark — Navy BG @2x (PNG)

Raster mark for navy

/[email protected]

For Amber Backgrounds

Mark — Amber BG (SVG)

Navy fill mark for amber backgrounds

/logo-mark-amber.svg

Mark — Amber BG @2x (PNG)

Raster mark for amber

/[email protected]

Mark — All Backgrounds

White Cream Navy Amber

Color Palette

Navy

#3B5068

Navy Dark

#2A3A4D

Amber

#E8A838

Amber Light

#F5C96A

Cream

#FAF8F5

Gray 100

#F3F1EE

Gray 200

#E5E2DD

Gray 400

#A09A92

Gray 600

#6B6560

Gray 800

#3A3530

Typography

Montserrat for headlines (matches logo). DM Sans for body text.

Logo Font

Montserrat

Aa Bb Cc Dd Ee

Medium 500 — "Construction"

SemiBold 600 — "PorchLight"

Site Headlines

Montserrat

Aa Bb Cc Dd Ee

Semibold 600 — Section headlines

Bold 700 — Hero

Site Body

DM Sans

Aa Bb Cc Dd Ee

Regular 400 — Body text

Medium 500 — Nav, labels

Semibold 600 — Buttons

Bold 700 — Card titles

Type Scale

Hero — clamp(3rem, 6vw, 5.5rem)

One contractor. Every project.

Section Title — clamp(2rem, 4vw, 3rem)

Three trades. One team.

Card Title — 1.25rem / font-bold

Premium Materials, Fair Pricing

Body — 1rem / normal

PorchLight Construction handles your roof, your remodel, and your grading — so you don't have to juggle three different contractors.

Section Label — 0.8rem / uppercase / tracking-wide

What We Do

Buttons

Primary CTA Secondary Nav CTA

Primary on Dark Secondary on Dark

Component Patterns

Nav Bar

Services Why Us Get a Quote

Tag / Pill

Roofing • Remodeling • Site Work

Section Label

What We Do

Service Icon

Why Number

1

Asset Inventory

File	Type	Use
logo-horizontal.svg	SVG	Primary horizontal lockup (nav, header)
[email protected]	PNG @2x	Horizontal raster (social, email)
logo-horizontal-dark.svg	SVG	Horizontal on dark backgrounds (footer)
[email protected]	PNG @2x	Hi-res horizontal on dark
logo-square.svg	SVG	Stacked lockup (cards, OG image)
[email protected]	PNG @2x	Stacked raster (social profiles)
logo-mark.svg	SVG	Mark on light backgrounds (favicon, small)
[email protected]	PNG @2x	Mark raster (app icon)
logo-mark-navy.svg	SVG	Mark on navy backgrounds
[email protected]	PNG @2x	Mark raster on navy
logo-mark-amber.svg	SVG	Mark on amber backgrounds
[email protected]	PNG @2x	Mark raster on amber
favicon.svg	SVG	Browser tab icon
favicon.ico	ICO	Legacy browser fallback