---
name: mrpave-proposal-design
description: Create branded HTML proposal documents for Mr. Pave bids — utility restoration, mill and pave programs, municipal contracts, commercial paving, residential, and any other project type. Applies the full Mr. Pave proposal design system: hero photo cover, yellow band with chevron, logo, trust strip, scoped sections, pricing table, project approach steps, core values, awards, and contact footer. Use this skill ANY TIME the user says "create a proposal", "make a bid document", "turn this into a proposal", or uploads a PDF/text with scope, pricing, or client details and asks to design it. Also trigger when the user references a specific client, contract value, unit price, or square footage for a paving project.
---

# Mr. Pave Proposal Design Skill

A complete HTML proposal system for Mr. Pave client bids.
Every proposal should feel like a premium, print-ready document — not a generic Word template.
Output is always a single self-contained `.html` file with all images embedded as base64.

---

## When to use this skill

- Any client bid or proposal document
- Mill and pave programs (gas, water, electric, municipal)
- Utility trench restoration proposals
- Commercial paving contracts
- Residential or HOA paving bids
- Renewal or amendment proposals for existing clients
- Any request to "make this look professional" from raw scope/pricing data

---

## Workflow

1. **Extract all proposal data** from whatever the user provides (PDF, text, table, conversation). Identify: client name, contact, project name, location, date, scope description, unit prices, line items, total value.
2. **Ask for any missing critical fields** before building: client name, project name, submission date. Everything else can use placeholders.
3. **Build the full HTML proposal** following the section structure below.
4. **Embed all images as base64** — logo SVG, hero photo, award seals. Never use external URLs; the file must work offline and when emailed.
5. **QA the pricing table** — verify all math (length × width = sqft, sqft × unit price = line total, sum of lines = contract total).
6. **Output a single `.html` file** named `mrpave-[clientname]-proposal.html`.

---

## Required assets (embed as base64 every time)

| Asset | Source path | Usage |
|---|---|---|
| Mr. Pave logo (stacked, primary color) | `/mnt/user-data/uploads/01_Mr_pave_logo_STAKED_Primary_Color.svg` | Cover section, ~200px tall |
| Top Contractor 2024 seal | `/mnt/user-data/uploads/Top_Contractor_Award_2024_white.png` | Awards strip, ~120px |
| Top Contractor 2025 seal | `/mnt/user-data/uploads/Top_Contractor_Award_2025_white.png` | Awards strip, ~120px |
| SWaM certification | `/mnt/user-data/uploads/SWAM.jpeg` | Awards strip, ~80px |
| Hero photo | User-provided OR default driveway shot | Cover hero |

**Embedding rule:** Always use `data:image/svg+xml;base64,...` for SVG, `data:image/png;base64,...` for PNG (preserves transparency), `data:image/jpeg;base64,...` for JPEG. Compress JPEGs to max 1200px wide at quality 65–75 before encoding to keep file size under 500KB.

---

## Brand colors

```css
:root {
  --yellow:  #ffde17;   /* Candlelight — primary accent */
  --ink:     #0f1115;   /* Near-black — headlines, Asphalt */
  --ink2:    #262a31;   /* Body text */
  --muted:   #5b6471;   /* Secondary text, captions */
  --line:    #e6e8ec;   /* Borders, dividers */
  --soft:    #f7f8fa;   /* Alternating section bg */
  --white:   #ffffff;
}
```

Typography: `Open Sans` from Google Fonts, weights 400–800.
Load: `https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap`

---

## Page structure (in order)

### 1. Cover

```
┌────────────────────────────────────┐
│  HERO PHOTO (52vh, dark overlay)   │
├────────────────────────────────────┤
│  YELLOW BAND                       │
│  [small caps] Mr.Pave              │
│  [large title] Project Proposal    │
│  ▼ yellow chevron pointing down    │
├────────────────────────────────────┤
│  COVER BODY (two columns)          │
│  Left: Logo (200px) + company info │
│  Right: "Proposal for:" badge      │
│         Client name + project      │
│         Prepared for: [contact]    │
│         Submission Date: [date]    │
└────────────────────────────────────┘
```

**Hero:** `height: 52vh; min-height: 360px`. Overlay: `linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.35))`. Always use a real Mr. Pave job-site photo.

**Yellow band:**
- `background: var(--yellow); padding: 52px 64px 44px`
- Subheader (small caps): "Mr.Pave" — `font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink)`
- Title (large): "Project Proposal" — `font-size: clamp(40px, 6vw, 72px); font-weight: 800; color: var(--ink); line-height: 1.0`
- Chevron: `::after` pseudo-element, `border-top: 32px solid var(--yellow)` pointing down at `bottom: -32px; left: 64px`

**Cover body:** Two-column grid, `padding: 72px 64px 56px`. Left col: logo img + company address/phone/url. Right col: yellow "Proposal for:" label badge + client block.

**"Proposal for:" badge:** `background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 4px`

### 2. Trust strip

4-item horizontal strip with icon + text. Always include:
- Top Contractor 2024 & 2025 (Pavement Magazine)
- SWaM Certified (Minority-Owned Business)
- Multi-State Coverage (VA · DC · MD · NC · FL)
- Utility-Specialized (Right-of-way & trench restoration)

Icons: simple SVG line icons (stroke only, yellow fill circles). Strip has `border: 1px solid var(--line); border-radius: 12px`. Items separated by `border-right: 1px solid var(--line)`.

### 3. Executive Overview / Why Mr. Pave

Dark section `section-dark` (background: `var(--ink)`). Two-column layout:
- Left: 2 paragraphs explaining Mr. Pave's utility focus and crew capabilities
- Right: bullet list of 6 differentiators (yellow dots)

**Standard differentiators (use verbatim):**
- Specialized expertise in utility trench restoration and right-of-way paving
- Experience supporting major gas utilities including Columbia Gas and Virginia Natural Gas
- Experience supporting municipal and contractor-led water infrastructure restoration
- Highly responsive crews capable of mobilizing quickly across multiple sites
- Modern milling and paving equipment optimized for utility restoration work
- Operational discipline that allows utility partners to close projects efficiently

### 4. Utility Restoration Capability

Light section. Three-column capability cards (Gas, Water, Electric & Fiber), each with `border-top: 4px solid var(--yellow)`. Then two-column bullet list of relevant client experience.

**Standard experience bullets:**
- Columbia Gas — trench restoration and roadway resurfacing
- Virginia Natural Gas — restoration following underground gas infrastructure
- Utility and pipeline contractors installing gas, water, electric, and fiber
- Municipal utility and roadway restoration programs
- Contractor-led water main installation and repair programs
- Right-of-way clearing and restoration for municipal compliance

### 5. Scope & Pricing (dark section)

`background: var(--ink)`. Structure:

**KPI cards row** (2×2 grid, `background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px`):
- Unit Price — large number in `var(--yellow)`, e.g. `$2.61 / sqft`
- Estimated Contract Value — large number in `var(--yellow)`
- Total Linear Footage — if applicable
- Total Square Footage — if applicable

**Bid table** (`border-radius: 12px; border: 1px solid rgba(255,255,255,.12)`):
- `thead`: `background: var(--yellow)`, black text, uppercase 11px labels
- `tbody` rows: `color: rgba(255,255,255,.85)`, `border-bottom: 1px solid rgba(255,255,255,.07)`
- `tfoot` total row: `background: rgba(255,222,23,.1); border-top: 2px solid var(--yellow)`, yellow bold text

**Table columns for mill-and-pave bids:** Street, Length (ft), Width (ft), Sq Ft, Unit Price, Total
**Math check:** sqft = length × width. Total = sqft × unit price. Sum all totals = contract value.

**Note below table:** "Final invoicing will be based on actual square footage installed."

### 6. Project Approach

Light section. Two-column layout:
- Left: numbered steps (1–5, yellow circle numbers)
- Right: service area box with yellow tags for each city/region served

**Standard 5-step process:**
1. **Milling** — Milling of existing pavement to specified depth
2. **Surface Preparation** — Surface preparation and cleaning
3. **Tack Coat Application** — Application of tack coat for adhesion
4. **Asphalt Placement** — Asphalt placement and compaction per ROW standards
5. **Final Inspection** — Surface inspection to confirm quality and compliance

**Service area tags** (yellow bg, black text): Roanoke · Lynchburg · Virginia Beach · Richmond · Northern VA · Washington DC · Maryland · North Carolina · Florida

### 7. Mid-page CTA block

```css
background: var(--ink); border-radius: 16px; padding: 56px 48px; text-align: center; margin: 80px 64px;
```
- Headline: "Ready to Move Forward?"
- Subtext: "Our team is available to review scope, answer questions, and schedule a site walk."
- Two buttons: primary yellow "Call (833) 384-7080 →" + ghost "info@mrpave.com"

### 8. Who is Mr. Pave

Light section. Intro paragraph + mission box + awards strip.

**Mission box:** `background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 36px 40px; text-align: center`
Mission text (use verbatim): *"To strengthen communities by building trustworthy partnerships, delivering exceptional paving solutions through continuous team development, innovation, safety, and unwavering dedication."*

**Awards strip:** Horizontal flex row, `gap: 32px; align-items: center`. Contains:
- Top Contractor 2024 PNG (transparent, 120px tall)
- Top Contractor 2025 PNG (transparent, 120px tall)
- SWaM JPEG (80px tall, `border-radius: 6px`)

### 9. Core Values

Soft background section. Three-column cards with `border-left: 4px solid var(--yellow)`:
- **Quality** — high-quality materials, skilled professionals, built to last
- **Integrity** — honesty, transparency, honoring commitments
- **Safety** — safe environment, stringent standards, culture of accountability

### 10. Community & Sustainability

Light section. Two-column cards:
- **Community Centered Work** — infrastructure that keeps communities moving
- **Eco-Conscious Practices** — recycling asphalt, reducing environmental footprint

### 11. Closing

Dark section `section-dark`. Tagline headline, closing paragraph, two buttons (same as CTA block).

**Closing paragraph:** "Mr. Pave appreciates the opportunity to support [CLIENT] on this program. Our team is committed to delivering precise, durable roadway restoration that reflects the standards expected by [CLIENT] and [JURISDICTION]. We look forward to the opportunity to earn your trust and support your projects safely, efficiently, and with the level of quality your communities expect."

### 12. Contact footer

Three-column dark grid:
- Phone: `(833) 384-7080`
- Email: `info@mrpave.com`
- Address: `3127 Carroll Avenue, Lynchburg, VA 24501`

### 13. Footer bar

```css
background: #07090b; padding: 24px 64px; display: flex; justify-content: space-between;
```
Left: "© [YEAR] Mr. Pave · Precision Asphalt & Concrete Restoration"
Right: *"Your Project, Our Faithful Commitment."* (italic, muted)

---

## Variable fields (replace per proposal)

| Variable | Description | Example |
|---|---|---|
| `[CLIENT]` | Client company name | Roanoke Gas Company |
| `[CONTACT]` | Client contact name | Hal Bailey Jr |
| `[PROJECT_NAME]` | Full project name | 2026 Mill and Pave Program |
| `[LOCATION]` | Project location | Roanoke County, Virginia |
| `[DATE]` | Submission date | March 6, 2026 |
| `[UNIT_PRICE]` | Per sqft price | $2.61 |
| `[CONTRACT_VALUE]` | Total estimated value | $330,856.65 |
| `[JURISDICTION]` | Governing body for ROW | Roanoke County |
| `[YEAR]` | Current year for footer | 2026 |

---

## Pricing table rules

- **Always verify math** before output: `sqft = length × width`, `line_total = sqft × unit_price`, `contract_total = sum(line_totals)`
- If only a total and unit price are given, show a single summary row instead of line items
- If line items are provided (street names, lengths, widths), show the full itemized table
- Width column: if all rows are the same width (e.g. all 9 ft), still show the column
- Format currency: `$X,XXX.XX` — always two decimal places, commas for thousands
- Format sqft: `X,XXX` — commas, no decimals

---

## CSS components (key patterns)

### Section types

```css
/* Light section */
.section { padding: 80px 64px; border-top: 1px solid var(--line); }
.section:nth-child(even) { background: var(--soft); }

/* Dark section */
.section-dark { background: var(--ink) !important; color: var(--white); }

/* Yellow section */
.section-yellow { background: var(--yellow) !important; }
```

### Buttons

```css
/* Primary — yellow, dark text — NEVER white text on yellow */
.btn-primary {
  background: var(--yellow); color: var(--ink);
  font-weight: 700; font-size: 15px; padding: 14px 28px;
  border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
/* Ghost — for dark backgrounds */
.btn-secondary {
  background: transparent; color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.2);
  font-weight: 600; padding: 14px 28px; border-radius: 10px; text-decoration: none;
}
```

### Capability card

```css
.cap-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px;
  border-top: 4px solid var(--yellow);
}
```

### Process step

```css
.step-num {
  width: 40px; height: 40px; background: var(--yellow); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--ink); flex-shrink: 0;
}
```

### Bullet list (yellow dots)

```css
.bullet-list li::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: var(--yellow);
  flex-shrink: 0; margin-top: 7px;
}
```

### KPI card (dark)

```css
.scope-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 28px;
}
.scope-card .big-number { font-size: 36px; font-weight: 800; color: var(--yellow); line-height: 1; }
```

---

## Company facts (use verbatim in every proposal)

```
Legal name:    Precision Asphalt & Concrete Restoration
Brand name:    Mr. Pave
Tagline:       Your Project, Our Faithful Commitment.
Phone:         (833) 384-7080
Email:         info@mrpave.com
Address:       3127 Carroll Avenue, Lynchburg, VA 24501
Website:       www.mrpave.com
Markets:       Virginia · Washington DC · Maryland · North Carolina · Florida
Awards:        Pavement Top Contractor 2024 & 2025
Certification: SWaM Certified (Small, Women and Minority-Owned)
Warranty:      1-Year Workmanship Warranty
Tracker:       Patch Finder Tracking System
```

---

## Service taxonomy (link when relevant)

```
Utility Restoration:  trench restoration, ROW paving, mill and pave
Commercial:           parking lot maintenance, road repair, line striping, sealcoating, concrete repair
Residential:          asphalt driveways, concrete drives/walks/patios, driveway repair
```

---

## Quality checklist

Before delivering any proposal HTML:

- [ ] All images embedded as base64 (no broken external URLs)
- [ ] Logo is SVG at ~200px tall (not the favicon)
- [ ] Hero photo displays — base64 string is not empty
- [ ] Award seals are transparent PNG (not dark JPEG versions)
- [ ] Yellow band: subheader "Mr.Pave" + title "Project Proposal" (or project-specific title)
- [ ] Chevron arrow below yellow band points down
- [ ] All variable fields filled: client, contact, project, location, date, price, value
- [ ] Pricing math verified: sqft = length × width, totals correct
- [ ] "Final invoicing based on actual square footage" note present
- [ ] Tagline "Your Project, Our Faithful Commitment." in footer
- [ ] No white text on yellow anywhere
- [ ] File named `mrpave-[clientname]-proposal.html`
- [ ] File size under 600KB (compress hero JPEG aggressively if needed)
- [ ] Responsive at 860px breakpoint (two-col → one-col)

---

## Reference build

**Roanoke Gas 2026 Mill and Pave Proposal** — built May 2026
File: `mrpave-roanoke-gas-proposal.html`

Scope: 13 streets, 126,765 sqft, $2.61/sqft, $330,856.65 total
Client: Hal Bailey Jr, Roanoke Gas Company, Roanoke County VA
Submission: March 6, 2026

This file is the canonical reference for layout, section order, CSS patterns, and image embedding. When in doubt, match this document.