# Static Concept → V2 Build Plan
**Execution Space Website — executionspace.com**
Last updated: March 2026

---

## What We Have

| File | Status | Notes |
|------|--------|-------|
| `static-concepts/homepage-v1.html` | ✅ Preserved | Built from text context docs only — dark-themed, pre-Figma |
| `static-concepts/homepage.html` | Working file | Will become V2 |
| GitHub `exe_2025` branch | ✅ Committed | Accent + palette corrections applied on top of Erik's latest commits |

---

## Sources Reviewed

1. **Templates PDF** (4 pages) — Homepage, About/Services, Our Work, Case Study layouts
2. **Patterns PDF** (4 pages) — Typography scale, Colour palette, Button system
3. **WP Block Patterns** (Git repo) — Cross-referenced for copy and layout structure
4. **MILTON_PROJECT_CONTEXT.md** — Overall brief

---

## Patterns PDF — Design Tokens Confirmed

### Typography (Figtree)

| Level | Size | REM |
|-------|------|-----|
| H0 | 96px | 8rem |
| H1 | 64px | 5.33rem |
| H2 | 48px | 4rem |
| H3 | 40px | 3.33rem |
| H4 | 32px | 2.66rem |
| H5 | 24px | 2rem |
| H6 | 20px | 1.66rem |
| Body Large | 18px | 1.5rem |
| Body Medium | 16px | 1.33rem |
| Body Small | 14px | 1.167rem |
| Body XS | 12px | 1rem |

### Colour Palette

| Role | Name | Notes |
|------|------|-------|
| Background | White | Site default — light theme |
| Background Alt | Dark charcoal (~#2B2B2B) | Hero, dark panels |
| Text | Near-black (~#0A0A0A) | Body copy |
| Text Alt 1 | Off-white (~#F3F3F3) | Text on dark backgrounds |
| Text Alt 2 | Mid grey (~#7A7A7A) | Categories, meta labels |
| Accent | #FFCD05 (Yellow) | CTA sections, highlights |
| Black | #000000 | Pure black where used |

### Button System (4 styles)

| Style | Background | Text | Case | Usage |
|-------|-----------|------|------|-------|
| Primary Dark | #2B2B2B pill | Yellow | Sentence | Main CTAs on dark bg |
| Primary Yellow | #FFCD05 pill | Dark | Sentence | CTAs on light sections |
| Secondary Dark | #2B2B2B pill | White | ALL CAPS | Alternate CTAs |
| Ghost / Text | Transparent | Black | ALL CAPS | Inline/understated |

All buttons: `border-radius: 999px` (pill shape), generous horizontal padding (~2rem+).

---

## V1 → V2 Gap Analysis

### 🔴 Critical Changes (Wrong in V1)

**1. Overall background — V1 is all-dark, V2 is light**
- V2 default: white background throughout
- Only the **hero** section is dark (#1A1A1A or #2B2B2B)
- Everything else (portfolio, services, footer) = white or off-white

**2. Hero layout**
- V1: Left-aligned heading, full-width background image, gradient overlay
- V2: **Centred layout**, dark solid background (no full-bleed photo behind text), "ecom" in white + ".exe" in yellow at H0 size (96px), single "Connect with Us" button (Secondary Dark pill)

**3. Logo mark**
- V1: Uses bracket `[ ]` motif
- V2: Uses the **X crosshatch icon mark** to the left of stacked "Execution Space" wordmark

**4. Footer**
- V1: Dark panel (#222), reverse-out text
- V2: **White background**, logo (X icon + text) left, nav links right-aligned, thin separator above copyright line

### 🟡 Layout Changes (Right idea, wrong execution in V1)

**5. Portfolio / Work Grid**
- V1: CSS grid with 12-column asymmetric layout, dark cards
- V2: White background. Header row: X icon + "Section Heading" label at top-left. Grid: **left column = 1 tall image**, **right column = 2 stacked images** (roughly 2:1 column width ratio). Below each image: grey category label (Body XS, all caps) + black headline (H4)

**6. Yellow CTA Section**
- V1: Ghost/outlined button, mostly text-driven
- V2: **Full yellow background**. Left: dark/grey image placeholder rectangle (~half width). Right: headline + body copy + **Secondary Dark pill button** ("LEARN MORE" — dark bg, white text, ALL CAPS)

**7. Let's Discuss**
- V1: Left-aligned heading, standard contact form
- V2: **Fully centred** on yellow background. Headline, then **email input field inline with black "CONNECT" button** (Secondary Dark, ALL CAPS)

### 🟢 Already Correct in V1 (keep)

**8. Services Section**
- Icon + "Section Heading" label stacked at top-left ✅
- 2×2 image grid to the right ✅
- (Just needs white background instead of dark)

**9. Sticky nav / scroll behaviour** — keep the logic, just restyle to white

**10. Mobile hamburger menu** — keep the logic, restyle to match white nav

---

## Page Build Order

### Priority 1 — Homepage V2
Rebuild `homepage.html` against confirmed Figma mockup. This establishes all shared patterns (nav, footer, buttons, tokens) for subsequent pages.

**Sections in order:**
1. Nav — white bg, thin bottom border, X icon logo, links right
2. Hero — dark bg, centred "ecom.exe" H0, single "Connect with Us" button
3. Portfolio Grid — white bg, icon+label header, 1-left + 2-right image layout
4. Yellow CTA — full yellow, image left, text+button right
5. Services — white bg, icon+heading left, 2×2 image grid right
6. Let's Discuss — yellow bg, centred email capture
7. Footer — white bg, logo left, nav right, copyright

### Priority 2 — Our Work Page
Simpler. 2×2 portfolio grid (full page of work). No "Let's Discuss". Uses shared nav + footer.

### Priority 3 — About / Services Page
- Yellow hero (text left, image right)
- 3-column portfolio strip (5 items)
- FAQ accordion (2-column layout)
- Let's Discuss + Footer

### Priority 4 — Case Study / Blog Template
- Article headline, tags (WORK, E-COMMERCE)
- Large feature image
- Body text with inline left-floated yellow-bordered image
- Right sidebar: "PROJECT OVERVIEW" panel
- Masonry gallery below article
- Footer (no Let's Discuss on this template)

---

## CSS Architecture for V2

```css
:root {
  /* Colours */
  --color-bg: #FFFFFF;
  --color-bg-alt: #2B2B2B;
  --color-bg-dark: #1A1A1A;
  --color-text: #0A0A0A;
  --color-text-light: #F3F3F3;
  --color-text-muted: #7A7A7A;
  --color-accent: #FFCD05;
  --color-black: #000000;
  --color-off-white: #F7F6F2;

  /* Typography */
  --font: 'Figtree', sans-serif;
  --text-h0: 6rem;      /* 96px */
  --text-h1: 4rem;      /* 64px */
  --text-h2: 3rem;      /* 48px */
  --text-h3: 2.5rem;    /* 40px */
  --text-h4: 2rem;      /* 32px */
  --text-h5: 1.5rem;    /* 24px */
  --text-h6: 1.25rem;   /* 20px */
  --text-lg: 1.125rem;  /* 18px */
  --text-md: 1rem;      /* 16px */
  --text-sm: 0.875rem;  /* 14px */
  --text-xs: 0.75rem;   /* 12px */

  /* Spacing */
  --section-pad: 6rem 0;
  --container-width: 1280px;
  --container-pad: 0 2rem;

  /* Buttons */
  --btn-radius: 999px;
  --btn-pad: 0.75rem 2rem;
}
```

---

## Open Questions (Confirm with Erik / Figma)

1. **Logo SVG** — Need the actual X crosshatch icon mark asset. Currently have no SVG for it.
2. **Portfolio image ratios** — exact aspect ratio for large left vs 2 stacked right (looks like 4:3 and 16:9?)
3. **Hero copy** — "ecom.exe" (mockup shows) vs "We build companies that move." (WP pattern). Which is final?
4. **Nav links** — exact items and order in nav (Figma needed from Erik)
5. **Services section** — what are the 4 services in the 2×2 grid? (Images only in mockup, no copy visible)
6. **Yellow CTA section** — is this the "About" teaser, a client pitch, or something else? What is the headline?
7. **Exact hex values** for bg-alt and text colours (Figma color inspector needed — approximated from swatches above)

---

## Immediate Next Action

Rebuild `static-concepts/homepage.html` as V2 using the above spec. V1 is safely preserved at `homepage-v1.html`. Once V2 homepage is reviewed and approved, proceed with the remaining 3 page templates.