---
version: alpha
name: "Smart home installer template by 8B"
description: "One-page website for a smart home installer: white and pale grey sections broken by dusk-indigo bands, one orange accent, square-cornered controls and scroll scenes. Free HTML template by 8B, MIT."
colors:
  primary: "#121316"
  secondary: "#45464b"
  tertiary: "#ff5a1f"
  neutral: "#f4f4f4"
  surface: "#ffffff"
  on-surface: "#121316"
  caption: "#5b5d62"
  hairline: "#e2e2e2"
  night: "#121630"
  plum: "#57224f"
  glow-teal: "#0d6a74"
  glow-blue: "#1f47a3"
  glow-pink: "#e6a8c6"
  glow-amber: "#f3b866"
typography:
  headline-display:
    fontFamily: Stack Sans Headline
    fontSize: 108px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Stack Sans Headline
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.05em
  headline-md:
    fontFamily: Stack Sans Headline
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: -0.035em
  headline-sm:
    fontFamily: Stack Sans Headline
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.03em
  body-md:
    fontFamily: Stack Sans Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Stack Sans Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Stack Sans Text
    fontSize: 12.5px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.1em
  button:
    fontFamily: Stack Sans Text
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.06em
  wordmark:
    fontFamily: Stack Sans Headline
    fontSize: 120px
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -0.065em
rounded:
  none: 0px
  sm: 4px
  md: 10px
  lg: 22px
  full: 9999px
spacing:
  gutter: 32px
  gutter-min: 16px
  max-width: 1376px
  section-padding: 136px
  section-padding-min: 80px
  button-height: 48px
  field-height: 50px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: "0 8px 0 20px"
    height: 48px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
  button-light:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: "0 8px 0 20px"
    height: 48px
  lamp-circle:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 32px
  card-surface:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 32px
  badge-tag:
    textColor: "{colors.caption}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: 32px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: "13px 16px"
    height: 50px
  contact-panel:
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 40px
---

# Kelvin House, smart home installer template

## Overview

A single page for a firm that designs, wires and looks after smart homes, written for homeowners who want a calm, premium installer rather than a gadget shop. The one idea is light: the page behaves like a house at dusk. Bright white and pale grey sections alternate with deep indigo bands, and an orange accent works like a lit lamp. Controls are small and square, type is tight and heavy, and photos carry the warmth.

## Colors

Neutrals carry the page, the dark indigo carries the evenings, and orange is the only saturated colour in the interface.

- **Primary, ink (#121316):** body text, the full-screen menu ground, the outline and selected state of the plan tabs, and the arrow inside the orange lamp circles.
- **Secondary, graphite (#45464b):** the fill of the dark square-cornered buttons.
- **Tertiary, orange (#ff5a1f):** the fill that sweeps across buttons and tabs on hover, the lamp circles, the small squares beside facts and features, and the marker on the aftercare rail.
- **Surface (#ffffff):** page ground, navigation bar, cards, fields, and text on dark bands.
- **Neutral (#f4f4f4):** the ground of the houses and aftercare sections and photo placeholders.
- **Caption (#5b5d62):** secondary text, tags and placeholders.
- **Hairline (#e2e2e2):** rules under headings, card and field borders, the aftercare rail track.
- **Night (#121630):** the deep indigo ground of the opening, scenes and stories sections, and the shade that falls over covered house cards.
- **Plum (#57224f):** a glow in the night layers.
- **Glow teal (#0d6a74), glow blue (#1f47a3), glow pink (#e6a8c6), glow amber (#f3b866):** only soft glows and gradients: the contact panel's daylight, the night blobs and the colour layers over the scenes photo. Never flat fills.

## Typography

Two families from Google Fonts. **Stack Sans Headline** (weights 500 to 600) sets every heading, the plan prices and the giant footer wordmark, always with negative tracking between -0.02em and -0.065em. **Stack Sans Text** (weights 400 to 600) sets body copy, tags, form fields and labels.

- Section headings use headline-lg at 64px on desktop, scaling down to 36px (clamp from 36px to 64px). The statement in the opening and the long aftercare heading use headline-md, 42px down to 24px.
- Card and list titles use headline-sm at 24px.
- Labels use label-caps: 12.5px, uppercase, 0.1em tracking. Buttons are uppercase at 14px with 0.06em tracking.
- The contact heading reaches 108px; only the footer wordmark is larger, sized from its container so the name fills the width; its `--len` value must match the character count of the name.

## Layout

Content sits in a centred wrapper of at most 1376px with 16px to 32px gutters. Sections are padded 80px to 136px top and bottom (10vw). Most sections open with a heading, a hairline under it and a short paragraph beside it, which drops its side rule under 700px. Five system columns share a row, plan panels use three columns, and the contact panel splits into info and form.

Below 960px the navigation switches to a Menu button with a full-screen overlay, and the opening columns stack. The pinned systems scene works from 1024px wide; narrower screens use a lighter per-photo reveal. Scenes and care stack at 900px, houses get taller photos at 760px, and plan panels become one column at 1023px.

## Elevation & Depth

There are no drop shadows in use. Depth comes from alternating light and dark bands, hairline borders, overlapping layers and glass. The "reeded glass" over photos is a CSS layer made of backdrop blur and vertical stripes, driven by a custom property that sets how much of the photo it covers (half by default); the scripts slide it from full cover back to half, or to clear on the story portraits. House cards stack on top of each other and the covered one darkens under an indigo shade. Blurred radial glows add atmosphere behind the opening and the contact panel.

## Shapes

Controls are almost square: buttons, tabs, badges and fields use a 4px radius. Cards, photo frames and the footer link cards use 10px. Only the contact panel is large and soft at 22px. Lamp circles inside buttons, the plus circles of the FAQ and the round nav mark are the only full circles. The navigation mark is a circle with an orange lower half. List markers and the aftercare marker are small orange squares, never dots.

## Components

- **button-primary:** a graphite 48px bar with uppercase text and a lamp circle on the right. Hover floods it orange from the lamp, the label turns ink and the circle turns ink with an orange arrow.
- **button-light:** the same button in white, for the dark opening.
- **lamp-circle:** the orange 32px circle with an ink arrow at the end of each button.
- **card-surface:** white, 1px hairline border, 10px corners; used for plan features and prices, process steps, the contact form and footer columns.
- **badge-tag:** a 32px outlined tag in caption grey, 13px text at weight 500.
- **input-field:** 50px tall, hairline border, 4px corners, ink border on focus.
- **contact-panel:** a 22px rounded panel whose indigo night layer fades to a teal-to-blue daylight gradient.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and Lenis smooth scrolling from jsDelivr. The idea is light changing over a day as you scroll, with pinned scenes that change one thing at a time.

- **Navigation:** the bar slides up out of view after about 24px of downward scroll and returns after about 12px upward, with a 0.5s transition. Button fills and link underline sweeps run on hover.
- **Opening:** the statement, facts, button and photos rise in turn on load (0.9s, delays of 0, 0.14s, 0.22s and 0.3s). Three soft blobs drift slowly on the indigo background and are paused when the section is off screen.
- **Systems:** from 1024px the stage pins for about 3.6 screen heights while one column widens beside a larger copy of its photo and the others narrow, their names turning upright. Below that each photo opens as it scrolls in.
- **Houses:** the four cards stick below the top bar one over another; the covered card shrinks, darkens and its reeded glass closes.
- **Scenes:** the stage pins for about 3 screen heights while an orange marker steps down four times, and four colour layers regrade one photo from cool morning to night.
- **Process:** each step slides from the previous one's position into place on a diagonal.
- **Care:** a square marker rides down the rail as it fills, entries fade in from faint to full, and the heading's words fade in one by one with the scroll.
- **Plans:** tabs switch with no animation; the glass over each photo slides back to half on entry.
- **Stories:** the stage pins and five cards slide left as one row, glass clearing and quotes lifting near the middle.
- **Contact:** the panel's night fades to daylight and the heading settles from 1.32 times its size.
- **Footer:** the wordmark rises into view and the photo glass slides back to half.

With reduced motion the entrance, drift, scroll scenes and Lenis smooth scrolling are all off and the page reads in full. Two things still run: the navigation bar still hides on scroll down and returns on scroll up, and the hover transitions on buttons, tabs and links still play.

## Do's and Don'ts

- Do keep orange as the single accent; let the other hues appear only as soft glows.
- Do alternate white, pale grey and indigo bands.
- Do keep controls square (4px) and cards at 10px; no pill buttons.
- Do keep headings in Stack Sans Headline with tight negative tracking; do not add a second display face.
- Do update the footer wordmark `--len` when the name changes.
- Don't add drop shadows, new gradients or stock icon sets.
- Don't add scroll effects of your own; keep the page readable with reduced motion.
- Don't remove the Design: 8B footer link unless the site owner asks.