European Pavers Design System

Eight primary tokens lifted directly from the :root block of EP's production CSS, plus a derived ink scale. The brand axis is deep teal grounded by a warm beige scale, lit by a single saturated lime accent. No second accent — green is the only spark.

EP ships three named gradients in defaults.css. Don't invent more. The teal-down is the workhorse — every photo hero on the production site uses it as a bottom-anchored scrim for type legibility.

Both fonts are Google variable fonts, free, used directly in production. Oswald 500 uppercase is the headline voice — narrow, industrial, condensed. Plus Jakarta Sans 300 is the body — light, humanist, generous tracking (0.42px). The contrast between Jakarta 300 body and Jakarta 800 strong is intentional editorial cadence.

EP only ships white-on-transparent variants. Production never displays a dark/colored logo because every logo placement is on a teal block or a dark photo. If a future light-theme placement is needed, generate a teal variant via image processing — don't invent a navy or black version.

Real EP button system. Primary is a full-pill lime button with black type — high contrast, can't be missed. Hover flips to teal-on-white. On dark backgrounds, hover flips green→white instead. Secondary actions are uppercase teal text with translating arrow — no chrome.

EP's signature card uses the system-wide 22px border-radius — unusual for B2B (most use 4–8px) and intentional. The radius is the warmth that softens an otherwise rectilinear hardscape brand. Hover lifts 4px with a teal-tinted shadow.

All lifted from EP's own CDN. Tone: full-bleed architectural hardscape, golden-hour or neutral overcast light, paving stones as visual hero, people minimal. Mix of commercial flagships and residential — the brand sells both.

Full-width thin band using EP's signature chevron paver-texture image at low opacity. Marks chapter breaks — like SBC's vertical rule — but as a horizontal texture flash. Two heights, two themes.

EP's signature credential block. Two left-bordered columns, each with an uppercase eyebrow label, a stacked Oswald city list, and a small states line. Adapt for any multi-region service brand.

Form chrome inherits the same pill radius and Jakarta 300 weight as body type. Inputs use a 1px gray border with no shadow at rest — focus rings the brand teal.