Hearth is a cinematic smart home blog landing page built on an asymmetric 60/40 grid. It translates technical home automation into warm, human stories through a creator-spotlight layout, a newspaper-style masthead, and two built-in email capture paths. The design pairs deep charcoal and amber accents with editorial typography to feel like a premium publication from the first scroll.
by Rocket studio
Loading preview…
Quick summary
Hearth is a single-page editorial template for a smart home blog. It uses a 60/40 asymmetric grid to balance cinematic photography with curated sidebar content. Three creator spotlights anchor the scroll, each built around a real person's home automation story. Two lead-generation paths collect first names and emails before the visitor reaches the footer.
Who this template is for
This template suits anyone launching or refreshing an editorial smart home publication. It works especially well when the brand voice leans human and story-driven rather than spec-heavy.
Content creators and bloggers covering home automation, smart lighting, or whole-home audio
Design-conscious homeowners building a personal publication around their retrofit or starter home setup
Remote workers and parent-engineers who want a polished editorial home for their DIY smart home advice
What problem this template solves
Most smart home content looks like a product catalogue. Readers land on a page full of device specs and bounce before they feel anything. Hearth solves the trust gap by leading with people, not products.
Technical setups feel cold and inaccessible, so the creator-spotlight structure puts human stories and faces first
Generic blog layouts waste the emotional pull of cinematic photography by cramming it into small thumbnails
Email sign-up forms appear too early and too bluntly, so this template earns the click by proving editorial taste before the form appears
What you get with this template
You get a complete, ready-to-customise landing page structured around editorial storytelling and subscriber growth. Every section is already placed in a deliberate reading order.
A newspaper-style hero masthead with a 60/40 split featuring a lead story and a three-headline sidebar
Three alternating creator-spotlight sections, each with a portrait, an oversized pull-quote, a story block, and product picks
Two email capture paths: a slim inline form between spotlights and a persistent sidebar quiz that delivers a personalised starter guide
Theme
Warm Artisan
Creative direction
Creator Spotlight
Color system
Cinematic Dark
Style
Asymmetric Grid (60/40)
Direction
Lead Generation
Page Sections
Asymmetric 60/40 Editorial Grid
Newspaper Masthead Header
Creator Spotlight Sections
Dual Email Capture Paths
Interactive Scene Builder Quiz
Recent Stories Bento Grid
Related questions
Can I use this template for a newsletter-first smart home blog?
Do I need all three creator spotlights, or can I reduce the number?
Is the interactive quiz functional out of the box?
How customisable are the colours and typography?
Is this template suitable for a single creator or a multi-author publication?
Feature list
Hearth ships with a focused set of design and layout capabilities drawn directly from the editorial brief.
Asymmetric 60/40 Editorial Grid
The page is built on a two-column grid where the dominant 60-column carries the primary story or portrait and the 40-column holds supporting content. The grid alternates sides across creator spotlights, creating a rhythm that feels like turning magazine pages.
Newspaper Masthead Header
The header presents the blog name in a bold condensed serif at full width, followed by a dateline and a cinematic lead-story photograph. The 40-column sidebar stacks three article headlines with byline portrait thumbnails, one per creator.
Creator Spotlight Sections
Each of the three spotlight sections opens with the creator's face and a single oversized quote in amber type. The section then expands into their story, their room setup photographs, and their product picks, giving each contributor a full editorial profile.
Inline Email Capture Form
A slim two-field form sits between the second and third creator spotlights. It asks only for a first name and email address, keeping friction low at the moment trust is highest.
Interactive "Build Your First Scene" Quiz
A three-question quiz lives in the persistent desktop sidebar. It collects room type, household size, and comfort priorities, then delivers a personalised starter guide to the subscriber's inbox.
Recent Stories Bento Grid
Below the spotlights, four recent articles display in an asymmetric bento grid layout. This section keeps the editorial breadth visible and encourages deeper reading before the visitor leaves.
Page sections overview
Section
Purpose
Hero Masthead
Establishes editorial identity with a cinematic 60/40 newspaper-style header
Creator Spotlight One
Profiles the first contributor with portrait, pull-quote, story, and product picks
Saturday Brief Form
Slim inline email capture placed between spotlights two and three
Creator Spotlight Two
Profiles the second contributor with alternating grid orientation
Creator Spotlight Three
Profiles the third contributor, completing the alternating magazine rhythm
Build Your First Scene
Three-question sidebar quiz delivering a personalised guide to new subscribers
Recent Stories Grid
Asymmetric bento layout of four articles encouraging continued reading
Footer
Arc Browser Split pattern footer closing the editorial layout
Design & branding system
The visual identity follows a Warm Artisan approach expressed through a Cinematic Dark colour palette. Every colour choice reinforces the feeling of analog warmth meeting digital intelligence.
Deep charcoal (#1A1A2E) anchors full-bleed section backgrounds; smoked walnut (#3D2C2E) fills card surfaces and pull-quote blocks; parchment cream (#F0E6D3) carries body text and editorial whitespace
Soft amber (#E8A87C) marks every interactive element, including toggles, inline links, and subscribe buttons, so calls to action glow like embers against the dark ground
Typography pairs Fraunces condensed serif for headlines and pull-quotes with DM Sans for body text and interface labels, creating a clear editorial hierarchy
Mobile & speed optimization
The template is built desktop-first around the 60/40 grid, and it stacks gracefully into a single-column layout on smaller screens so no content is lost on mobile.
Images are lazy-loaded to avoid blocking the initial render on slower connections
CSS animations are GPU-accelerated, covering scroll reveals, beam borders, image hover states, and quiz transitions without heavy JavaScript overhead
The interactive quiz and FAQ-style accordion use lightweight transitions designed to feel smooth on both desktop and touch devices
How this template helps you convert
The page is sequenced so that editorial trust comes before any conversion ask. By the time a visitor sees a form, they have already read two creator profiles they want to hear from again.
The cinematic masthead and the first creator spotlight establish credibility and voice before any call to action appears, so visitors arrive at the form already engaged
The slim inline form asks only for a first name and email, reducing friction at the highest-trust moment in the scroll
The persistent sidebar quiz offers a second, personalised path to the same inbox, capturing visitors who prefer a guided experience over a direct sign-up
Other information about this template
This template is part of a curated set of editorial and blog landing page designs built for niche content publishers. A few additional details worth knowing before you start customising.
The footer follows the Arc Browser Split pattern, dividing the closing section into two distinct visual zones for newsletter reinforcement and navigation
The colour system is labelled Cinematic Dark and the theme is Warm Artisan, both of which are reflected in the specific hex values and typography pairing shipped with the template
The template falls under the Blog and Editorial category with a DIY and Home Improvement subcategory, making it a strong fit for smart home content that bridges lifestyle and technology
Animation intensity is set to medium by default, with beam borders, scroll reveals, and quiz transitions all included and adjustable to suit a quieter or more expressive brand preference
