How Evergreen & Stone was made

i.The concept

Evergreen & Stone is a fictional Pasadena landscape studio with one promise: we design it, we build it, we maintain it. The visual language borrows from editorial garden publishing — think a well-set gardening quarterly: an elegant serif display face (Fraunces), a quiet system sans for body copy, generous whitespace, a soft print grain, and a committed palette of deep evergreen, sage, slate, and cream.

But it's a service-business template first. Under the editorial surface sits a strict conversion skeleton: phone number in the header, hero, quote section, footer, and a sticky mobile call bar; a trust strip under the hero; six plain-named services; a three-step process; local reviews; a neighborhood map; and a four-field quote form. The design-studio calm is a trust signal — the layout is a sales tool.

ii.The techniques

Self-drawing branch line-work

Each section heading carries a small SVG branch that draws itself as you scroll to it. The trick is pathLength="1" on every path, which normalizes the geometry so one CSS rule animates any path regardless of its true length:

.branch path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in-view .branch path {
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);
  stroke-dashoffset: 0;
}

The stem draws over 1.6s; the four leaf paths draw faster with staggered transition-delays, so foliage appears to sprout along the stem as it grows. A single IntersectionObserver adds .in-view once per section and then unobserves.

Service cards that "grow" in

Cards start at scale(.94), slightly sunk and transparent. When the grid enters the viewport, JavaScript adds a .grown class to each card on a 110ms cadence — a planting rhythm rather than a mechanical grid pop. Reduced-motion users get the cards fully visible with no transition.

Print grain without images

A fixed, pointer-events-none pseudo-element carries an inline SVG feTurbulence noise tile at 5% opacity with mix-blend-mode: multiply. It warms every photo and flat color like uncoated paper stock, and costs zero network requests.

Photography with thin scrims

The hero photo runs nearly full-bleed and untouched — the scrim is a bottom-weighted gradient (82% → 0% opacity) that only darkens where the headline and trust strip sit, so the golden-hour garden stays luminous while text stays AA-readable.

The hand-drawn service-area map

No map tiles, no API keys: the "map" is a small inline SVG — dashed concentric route rings around a Pasadena dot, faint road strokes, and serif neighborhood labels. It reads as a studio's sketch and communicates locality faster than an embedded map would load.

iii.How it was made

Hand-coded HTML, CSS, and JavaScript — no page builders, no frameworks, no off-the-shelf themes. One HTML file per page, written line by line and engineered for conversion from the first section down.

The only external resource is the Fraunces typeface from Google Fonts. Everything else — icons, the branch drawings, the map, the grain — is inline SVG.