Residential Design Blog Website Template

Quick summary

Envelope is a single-page, atmosphere-first landing page template for passive house design practices. It turns technical performance data into editorial moments, guiding visitors through sensation before science. The result is a page that earns trust through feeling, then closes through a stepped project configurator that filters serious enquiries from day one.

Who this template is for

This template is built for practices and professionals who sell certified passive house design at a premium. The visitor already knows the numbers; the page shows them the life those numbers create.

• Self-builders who track U-values and want a designer who matches their precision
• Architects handling EnerPHit (Energy Performance in Historic Buildings) retrofits of period properties
• Developers who have calculated the resale premium a certified Passive House commands

What problem this template solves

Most architecture practice pages describe services. This template makes a visitor feel the outcome before they read a word. The brief is direct: passive house comfort is invisible, and the page must communicate that invisibility as a luxury, not a technical footnote.

• Generic portfolio pages bury the value proposition in project galleries and jargon
• Technically minded clients arrive with spreadsheets; the page must respect their knowledge while moving them emotionally
• The gap between research mode and commission mode is wide; the template bridges it with a configurator that qualifies leads on entry

What you get with this template

This template delivers a complete, ready-to-customise storybook landing page with five full-page sections, two conversion modules, and a desktop-first layout with mobile support. Every section is a self-contained visual spread built to scroll beautifully on large screens.

• Five atmospheric full-page spreads covering hero, sensory storytelling, thermal data, interior lifestyle, and client-type targeting
• A stepped configurator modal that collects project type, floor area, site postcode, and budget range
• An email capture modal for the secondary "Download the Specification Pack" path

Feature list

This template's standout capabilities are designed around one goal: making comfort feel inevitable before the call to action appears.

Oversized Editorial Hero Headline

The header section displays a two-hundred-pixel serif headline centred on a deep graphite field. No image, no illustration. The letterforms become architecture. A pearl-white italic subline sits below, and an iridescent shimmer pulses softly behind the type.

Atmospheric Scroll Storytelling

Three consecutive full-page spreads immerse visitors in sensation rather than specification. A condensation-free triple-glazed glass macro, a thermal imaging gradient with a single annotated data point, and a dusk interior shot without a visible heat source each communicate comfort as absence.

Stepped Project Configurator Modal

A magenta-triggered configurator opens as a modal with clearly stepped inputs. Visitors select project type (new build, retrofit, or EnerPHit), set approximate floor area with a slider, enter a site postcode, and choose a budget range that starts at a realistic floor. This removes unqualified enquiries before the first conversation.

Email Capture for Research-Phase Visitors

A secondary call-to-action offers a downloadable Specification Pack in exchange for an email address. This path captures visitors who are in research mode, giving the practice a warm contact before the visitor is ready to commission.

Scroll-Linked Parallax and Iridescent Animation

High-intensity scroll animation runs throughout the page. Section dividers pulse with holographic lilac and spectral teal gradients. Hover states shift across the iridescent palette. The thermal gradient spread animates across the viewport to reflect the 0.6 ACH (air changes per hour) data point it frames.

Pinned Magenta Call-to-Action Bar

After the third full-page spread, the primary "Commission Your Passive House" button in high-signal magenta is pinned to the bottom of every subsequent section. The button is impossible to miss but never intrusive; it appears only after the page has earned the click.

Page sections overview

Design & branding system

The visual identity follows an Editorial Magazine theme built on the AI Iridescent colour system. Every colour choice is intentional: graphite anchors gravity, pearl holds legibility, and the iridescent accents reward attention without demanding it.

• Deep graphite (#1C1E26) for full-bleed section backgrounds, holographic lilac (#C4A8E0) and spectral teal (#5EECD0) for gradient accents and hover states, warm pearl (#F0ECE3) for text panels
• High-signal magenta (#E8457E) reserved exclusively for the primary purchase action button, never used decoratively
• Fraunces sharp editorial serif for display headings and pull quotes, DM Sans for body text and interface elements

Mobile & speed optimization

The template is built desktop-first to match the primary audience of architects and developers working on large screens. Mobile support is included so self-builders can explore on any device.

• Intersection Observer API drives section reveals, keeping scroll performance smooth without blocking the main thread
• CSS custom properties power the theme system, making colour and spacing adjustments straightforward across breakpoints
• The configurator modal and email capture modal are both touch-friendly and readable at mobile viewport widths

How this template helps you convert

The page is structured so that every scroll step reduces visitor resistance. By the time the call to action appears, the visitor has already felt the product.

1. The first three spreads create emotional buy-in through sensation; visitors understand the comfort before they read a specification, so the configurator feels like a natural next step rather than a cold form.
2. The stepped configurator filters leads by project type and budget at the point of enquiry, meaning every submission that arrives is already pre-qualified with the key data a practice needs to respond meaningfully.

Other information about this template

This template is part of the Storybook and Full-Page template style category and is designed to work within an Atmosphere and Mood creative direction framework. It suits practices that want the page itself to reflect the quality of the built work.

• The template uses UK English conventions throughout, including EnerPHit terminology, period home references, and self-builder language
• The footer follows a minimal horizontal layout pattern suited to premium practice branding
• The Atmosphere and Mood creative direction means each section functions as a stand-alone editorial spread, not a traditional feature row
• The Direct Sales landing page direction means the configurator is the primary conversion mechanism, not a contact form or enquiry button
• The template is suitable for customisation by designers familiar with component-based layout systems who want a strong starting visual direction

Show more