# European Pavers — Brand Spec

> Source: europeanpavers.com (homepage), captured 2026-05-07
> Asset completeness: real horizontal logo + icon mark + wordmark (3 PNG variants from EP CDN) + 12 real project photos from EP's own CDN + real CSS-extracted color & font tokens from `defaults.css` + `fonts.css`
> Tagline: "Built to Last Since 1978"
> Use case in JBSG sprinkle pipeline: commercial / institutional / luxury B2B — for hardscape, masonry, landscape architecture, custom-home builders, premium contractors, and any service brand whose buyer is a developer/architect/general-contractor (not retail consumer).

## Core assets

### Logo
European Pavers ships three real PNG variants. The horizontal lockup is the "ship" mark; the icon-only "P/upside-down-P" monogram is the tight-space mark.

- Horizontal lockup (white-on-transparent, ships on dark photo or teal): `assets/european-pavers-brand/logo-horizontal-white.png` (1626 × 422)
- Icon-only monogram (white-on-transparent): `assets/european-pavers-brand/logo-icon.png` (515 × 422)
- Wordmark only ("PAVERS", white-on-transparent): `assets/european-pavers-brand/logo-wordmark.png` (1109 × 422)

Use the horizontal lockup in nav and footer where horizontal space allows. Use the icon monogram in tight spaces (favicons, social, app tiles, badges, stamp marks). The horizontal lockup is **mandatory** in nav for first-time-visitor brand recognition.

EP only ships white-on-transparent variants. For light backgrounds, the production site places the white logo on the teal `--teal` block — do the same; do not invent a navy/black variant.

### Photography
12 real project photos lifted from EP's own CDN. Tone: full-bleed architectural hardscape, golden-hour or neutral overcast light, paving stones as the visual hero (people are absent or small). Mix of commercial (Tempe Marketplace, Pace Academy, Brookhaven Aquatics Center, Scottsdale Civic Center, Atlanta City Hall rooftop) and residential (entryways, lawns, driveways).

| Asset | Use |
|---|---|
| `assets/european-pavers-brand/hero-entryway.jpg` (1920×1920) | Hero — residential entryway, square crop usable as full-bleed |
| `assets/european-pavers-brand/tempe-marketplace.jpg` | Hero — flagship commercial project, Phoenix |
| `assets/european-pavers-brand/pace-academy-atlanta.jpg` | Hero — flagship Southeast project, schools/private |
| `assets/european-pavers-brand/scottsdale-civic-center.jpg` | Hero — municipal flagship, southwest |
| `assets/european-pavers-brand/brookhaven-aquatics.jpg` | Hero — aquatics/recreation, southeast |
| `assets/european-pavers-brand/atlanta-rooftop-garden.jpg` | Featured — Atlanta City Hall rooftop garden, dramatic angle |
| `assets/european-pavers-brand/tempe-restaurant.jpg` | Featured — restaurant patio, Tempe |
| `assets/european-pavers-brand/corporate-offices.jpg` (1920×1920) | Featured — corporate / mixed-use |
| `assets/european-pavers-brand/home-builders.jpg` (1920×1920) | Featured — residential builder context |
| `assets/european-pavers-brand/residential-lawn.jpg` | Featured — residential, contemporary |
| `assets/european-pavers-brand/materials-porcelain.jpg` | Materials — porcelain paver close-up |
| `assets/european-pavers-brand/texture-chevron.jpg` | Texture — chevron paver pattern detail (signature texture asset) |

## Color tokens (extracted from real CSS — `defaults.css` `:root`)

| Token | Hex | Source | Usage |
|-------|-----|--------|-------|
| `--teal` | `#015760` | EP CSS `--teal` | Primary brand color — deep marine teal. Hero blocks, footer ground, dark feature panels, nav-on-light. Workhorse. |
| `--green` | `#c2eb50` | EP CSS `--green` | Signature lime/chartreuse accent. Primary CTA fills, scroll-to-top button, highlight chips. **The brand's twist** — a saturated lime against deep teal is what makes EP feel modern, not generic-commercial. |
| `--beige-lt` | `#f2f2ef` | EP CSS `--beige-lt` | Page surface / off-white. Use as alternate section background instead of pure white where you want warmth. |
| `--beige-md` | `#e8e8db` | EP CSS `--beige-md` | Stronger warm surface — divider blocks, secondary feature backgrounds. |
| `--white` | `#ffffff` | EP CSS `--white` | Page background, body type on dark. |
| `--black` | `#000000` | EP CSS `--black` | Body type on lime green CTAs (preserves the green's punch). |
| `--gray` | `#bfbfbf` | EP CSS `--gray` | Hairlines, dividers. |
| `--gray-lt` | `#c3c3c3` | EP CSS `--gray-lt` | Lightest dividers, slider pagination dots. |
| `--ink` | `#162a2c` | derived (lifted from `--teal-gradient-down` start) | Body text on light, deep section grounds. Slightly cooler/blacker than `--teal`. |
| `--ink-soft` | `#2a3a3c` | computed | Secondary copy. |
| `--ink-quiet` | `#6b7a7c` | computed | Tertiary copy, captions, metadata. |

### Gradients (signature)
EP uses three signature gradients lifted directly from the production CSS:

```css
--beige-gradient: linear-gradient(180deg, #e8e8db 0%, #ffffff 100%);
--teal-gradient-up: linear-gradient(0deg, #01565f 0%, transparent 100%);
--teal-gradient-down: linear-gradient(180deg, #162a2c 0%, #01565f44 75%, transparent 100%);
```

The teal-gradient-down is the **hero scrim** — bottom-anchored darkness fading to transparent at top. Use it for any photo hero where type sits on the lower portion.

Notes:
- `--teal #015760` is the workhorse — deep, sophisticated, never bright. Treat as ink-substitute on dark sections.
- `--green #c2eb50` is the **brand's signature** — a high-saturation lime/chartreuse. Always paired with `--teal` or `--black`. Never put `--green` on `--white` for body type (illegible). Use it as fill, button background, or accent flash.
- The warm-beige scale (`#f2f2ef` → `#e8e8db`) gives EP its "natural-stone" feel — cool teal grounded by warm sand. This duality is the whole brand.

## Typography (real stack from EP `fonts.css` — both Google Fonts, free)

EP uses two **variable Google fonts** locally — the substitution problem doesn't exist. Use the same stack as production.

| Role | EP original | Substitute used here | Why |
|------|-------------|----------------------|-----|
| Display | `Oswald` (variable, 200–700) | **Oswald** (Google) | Direct match — narrow uppercase condensed sans, the "industrial-modern" voice |
| Body | `Plus Jakarta Sans` (variable, 200–800) | **Plus Jakarta Sans** (Google) | Direct match — humanist sans with warm letter-shapes, generous tracking |

### Type ramp (real values from EP CSS)
- Hero text: 96px Oswald 500, line-height 1.146, uppercase, letter-spacing 0
- H1: 72px Oswald 500, line-height 1.2, uppercase
- H2: 60px Oswald 500, line-height 1.2, uppercase, color `--teal`
- H3: 48px Oswald 500, line-height 1.125, uppercase
- H4: 36px Oswald 500, line-height 1.222, uppercase
- Small heading / eyebrow: 17px Jakarta 800, uppercase, letter-spacing 0.42px, line-height 1.588
- Body: 17px Jakarta 300, letter-spacing 0.42px, line-height 1.588 (note the **light** weight on body — EP's signature)
- Strong inline: Jakarta 800 (bold contrast against Jakarta 300 body)

EP's signature is **Oswald uppercase headlines + Jakarta 300 body**. The weight contrast (300 body → 800 strong) gives reading copy an editorial cadence. Never use Jakarta 400 for body — it loses the contrast.

Headlines are always UPPERCASE. Always. The condensed Oswald in caps is the brand voice.

## Components

### Buttons
Primary CTA — green pill button with arrow (real EP pattern, lifted from `defaults.css`):
```css
background: #c2eb50;        /* --green */
color: #000000;
padding: 12px 32px;
border-radius: 1000px;       /* full pill */
font: 500 17px "Plus Jakarta Sans", sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
```
Hover: `background: #015760` (teal), `color: #ffffff`. The arrow icon translates 5px right.

On dark backgrounds, hover flips to `background: #ffffff; color: #000000` (preserves contrast).

Secondary / text-only:
- Inline `<a>` in `--teal`, hover lightens — no border, no chrome.

### Tags / chips
Real EP tag pattern (lifted from `defaults.css`):
```css
padding: 8px 20px;
border: 1px solid #ffffff;
border-radius: 50px;
text-transform: uppercase;
```
Outlined pill, used on dark backgrounds to filter or label. Direct use: location filters, category tags, project type indicators.

### Container border-radius (signature)
Real EP uses `--container-border-radius: 22px` consistently across cards, image containers, and feature blocks. This is the **softness** that warms the otherwise rectilinear hardscape brand. Apply to all card-like surfaces.

### Scroll-to-top FAB (signature)
Mobile-only floating action button (real EP pattern):
- 52 × 52px lime-green circle, fixed bottom-right
- Black up-arrow inside
- Box-shadow `0 10px 30px rgba(0,0,0,0.18)`
- Appears after scroll, fades in/out with `translateY(8px)` lift

### Splide arrows (slider chrome)
EP uses circular 40 × 40 arrow buttons in three theme variants:
- `--dark`: teal background, white arrow
- `--light`: beige-md background, teal arrow
- `--white`: white background, teal arrow
Gap between prev/next: 50px. Arrow svg size: 25 × 25.

### Pagination dots (slider)
12 × 12 dots, gap 15px. Inactive: `--gray-lt #c3c3c3`. Active in light context: `--teal`. Active in dark context: `--white`.

### Navigation
Fixed header. Transparent over dark photo heroes; transitions to solid white with hairline border on scroll past hero. The horizontal logo lockup sits left in white-on-photo state, swapping to dark variant when scrolled.

### Image treatment
- Photography: **uncropped, full-bleed where it serves**, no filters, real outdoor light preserved
- Photo containers carry the 22px border-radius signature when contained (cards, features). Heroes go full-bleed without radius.
- The **chevron texture asset** (`texture-chevron.jpg`) is EP's signature pattern fill — use as a thin dark band between sections, opacity 0.15–0.3, behind text or as a decorative break.
- A subtle teal-gradient-down scrim on hero photos for type legibility (no full-overlay)

### Cards
22px border-radius, 1px hairline `--gray-lt` border, no shadow at rest, subtle `0 16px 32px -16px rgba(1,87,96,0.18)` on hover with 4px upward translate. Image fills top with `4/3` aspect.

## Tone keywords
commercial · architectural · workhorse · grounded · 1978-legacy · uppercase-industrial · teal-and-lime · climate-resilient · craftsman · multi-region

## Forbidden / off-brand
- ❌ Stock photography of generic "smiling contractors with hard-hats"
- ❌ Heavy shadows, glassmorphism, neon, dark mode as default (EP is white-or-beige first; teal reserved for footer/feature/hero)
- ❌ Bright gradient backgrounds beyond the three signature gradients
- ❌ Helvetica / system-ui / Arial as display heading (kills the industrial signature — must be Oswald)
- ❌ Sentence-case headlines (EP is uppercase Oswald — always)
- ❌ Replacing `--green #c2eb50` with a "safer" green (forest, sage, mint). The unexpected lime is the brand. Don't dilute it.
- ❌ Body type heavier than Jakarta 400 — the 300 weight is intentional, gives the lightness against bold headlines
- ❌ Round-pill buttons everywhere — use them for primary CTAs only; secondary actions stay text-only or outlined squared
- ❌ Pure-black backgrounds (use `--ink #162a2c` or `--teal #015760` — never `#000`)
- ❌ Emoji as bullet icons
- ❌ Multiple accent colors — green is the *only* accent, no brick/orange/blue accents

## Anything that didn't extract cleanly
- **Logo dark variants:** EP only ships `*-white-RGB.png` files on its CDN. The production site never displays a dark/colored logo because every logo placement is on a teal/dark photo or teal background. If a future page needs a dark-on-light logo (light-themed feature where teal is wrong context), generate by converting white pixels → teal `#015760` via image processing — don't invent a navy or black variant.
- **No SVG vector logo on the public CDN.** Only PNG. For high-DPI/print needs, the user should request the SVG from EP directly. The 1626×422 horizontal PNG is sharp enough for 2× retina at any reasonable nav size.
- **Body weight is light (300).** Some screens may benefit from upping to 400 for accessibility on lower-DPI displays — note this if implementing for users over 50 or on legacy hardware.
- **Container border-radius `22px`** is unusual (most systems use 4–12px). It's intentional and signature — don't normalize it.

---

## Section Patterns

This design system implements the canonical section catalog at `../SECTION-PATTERNS.md`. Every pattern in that catalog renders here in this DS's visual language, adapted for a B2B commercial / luxury hardscape voice (e.g. `service-times` → "regional offices", `ministries-grid` → "services-grid").

**Where to see them rendered:**
- `design-system.html` — kitchen-sink reference of all type/color/component primitives + signature gradients + button variants
- `sections.html` — the canonical section catalog rendered in EP's voice with EP project photography and EP-style commercial copy
- `index.html` — folder navigation hub

When sprinkling a prospect, the pipeline reads `SECTION-PATTERNS.md` for the field contract, fills the prospect's data, and this DS's CSS handles the visual treatment. Note: EP-style is best for commercial/B2B prospects (general contractors, hardscape contractors, masonry, landscape architecture firms, premium custom builders); avoid using EP for retail-consumer prospects where the industrial-uppercase voice would feel cold.

### Signature patterns (european-pavers-only)

These extend the canonical catalog with patterns unique to EP's commercial-architectural voice. The sprinkle pipeline can call them like any other pattern; only this DS implements them.

#### `chevron-texture-band`
- **Purpose:** Full-width thin band using EP's signature chevron paver-texture image at low opacity. Marks chapter breaks the way SBC uses vertical rules — but as a horizontal texture flash.
- **When to use:** Between major chapters of a long page, or as a decorative footer-divider above the closing block.
- **CSS hook:** `.sig-chevron-band`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `height` | `"thin" \| "tall"` | yes | `thin` = 12px, `tall` = 80px |
| `theme` | `"dark" \| "warm"` | no | `dark` overlays texture on `--teal`; `warm` overlays on `--beige-md` |

#### `regional-strip`
- **Purpose:** Two-column or two-row block listing EP's two operating regions (Southwest, Southeast) with city stacks. EP's signature "we're in both places" credential block.
- **When to use:** Below hero on homepage, top of contact page, or anywhere the prospect wants to advertise multi-region service.
- **CSS hook:** `.sig-regional-strip`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `regions` | `array of {label, cities, states}` | yes | Typically 2 regions |
| `intro` | string | no | Optional preface line |

#### `legacy-stat-band`
- **Purpose:** Big chunky uppercase Oswald statistic — "Built to Last Since 1978" / "Two regions, nine states" / "Forty-seven years" — set on `--teal` ground or against a project photo, paired with a lime-green underline accent.
- **When to use:** Once per page max, as a credential beat between hero and body content. Best on homepage second-screen.
- **CSS hook:** `.sig-legacy-stat`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `headline` | string | yes | Big Oswald uppercase number or short phrase |
| `support` | string | no | One sentence below |
| `theme` | `"teal" \| "photo"` | no | `teal` = solid teal background; `photo` = uses an image with teal-down scrim |