---
version: alpha
name: "Electrician template by 8B"
description: "One-page website design for a home electrician: cream and aqua sheets on dark green, one light grotesque, photos cut with a notch. Free HTML template by 8B, MIT."
colors:
  primary: "#212320"
  secondary: "#575953"
  neutral: "#f8f6f1"
  surface-stone: "#e0dcd3"
  accent-aqua: "#a4e6f4"
  ground-green: "#10231a"
  ground-deep: "#1c3428"
  sage: "#a6b8ac"
typography:
  headline-display:
    fontFamily: Host Grotesk
    fontSize: 62px
    fontWeight: 340
    lineHeight: 1.08
    letterSpacing: -0.028em
  headline-lg:
    fontFamily: Host Grotesk
    fontSize: 48px
    fontWeight: 340
    lineHeight: 1.1
    letterSpacing: -0.022em
  headline-md:
    fontFamily: Host Grotesk
    fontSize: 24px
    fontWeight: 420
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-md:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Host Grotesk
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Host Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.005em
  button:
    fontFamily: Host Grotesk
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
  badge:
    fontFamily: Host Grotesk
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.01em
rounded:
  sm: 6px
  md: 10px
  lg: 18px
  full: 9999px
spacing:
  sheet-gap: 24px
  sheet-padding: 52px
  band-padding: 160px
  band-gutter: 76px
  field-padding: 14px
components:
  button-primary:
    backgroundColor: "{colors.accent-aqua}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 12px 22px
    height: 48px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 9px 16px
    height: 40px
  sheet-cream:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.sheet-padding}"
  sheet-aqua:
    backgroundColor: "{colors.accent-aqua}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.sheet-padding}"
  photo-notch:
    backgroundColor: "{colors.surface-stone}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
  badge-passed:
    backgroundColor: "{colors.accent-aqua}"
    textColor: "{colors.primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.sm}"
    padding: 3px 12px
    height: 28px
  badge-due:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.badge}"
    rounded: "{rounded.sm}"
    padding: 3px 12px
    height: 28px
  input-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    height: 48px
---

# Ohmstead design system

## Overview

This is the visual system of a one-page website for a home electrician who quotes fixed prices, books landlord reports and keeps an emergency line open. The one idea is a clean, trade-friendly calm: cream and aqua sheets set into a dark green ground, a light grotesque for every word, and photos whose top-right corner is cut away for a label. It should feel organised and safe to let into a house, not flashy. Prices, steps and checklists are shown as plain ruled rows, so a homeowner can read them in seconds.

## Colors

The palette is two neutrals, one dark ground and one accent.

- **Primary (#212320):** near-black ink for text on cream and aqua, the hover fill of buttons and the landlord rule lines.
- **Secondary (#575953):** grey for secondary text on cream and for the Due badge and unchecked landlord rows.
- **Neutral (#f8f6f1):** cream for reading sheets, photo tabs, form fields, and for text on the dark bands.
- **Surface stone (#e0dcd3):** hairline rules between rows, review card borders and the empty ground behind photos.
- **Accent aqua (#a4e6f4):** the only accent: the opening sheet, primary buttons, Passed badges, the charger price tab and the lit cells of the night section.
- **Ground green (#10231a):** the page ground, the tidy promise, prices, the night panel and the footer.
- **Ground deep (#1c3428):** the charger and contact photo panels, the ground behind dark photos and the rule above the footer credit line.
- **Sage (#a6b8ac):** secondary text on the dark bands.

## Typography

Host Grotesk is the only family, loaded as a variable font from weight 300 to 500. Headings use a light 340 weight with negative tracking, which keeps large type calm. Sub-headings sit at 420, body copy at 400, and labels, buttons, badges and photo tabs at 500. Nothing is uppercase and no second face is used.

The display level runs from 36px on a phone to 62px on a wide screen, the large level from 30px to 48px, and the sub-heading level from 19px to 24px. The footer wordmark is the same face at weight 340 with tracking of -0.045em, and its size is calculated from the screen width and the number of characters in the name.

## Layout

There is no centred container. Sections are sheets that fill the screen width less a 24px margin, with 52px of inner padding, stacked with 24px between them. Dark bands (tidy promise, prices, night, footer) run edge to edge with generous vertical padding, up to 160px, and a 76px side gutter. Section heads pair a heading with a short note set against a vertical hairline on the left.

Services are a list of room names, without numbers, beside a sticky photo frame. The three process steps stand in columns, each with a hairline on its left; the price list and the landlord checklist are ruled rows. At 900px the grids collapse to one column, the sticky photo frame docks along the bottom of the screen, the navigation turns into a Menu button, and the team grid becomes two columns. The price list becomes one column at 760px.

## Elevation & Depth

Depth is made by colour fields and overlap, not by shadow. The only shadow is a soft green one under the navigation bar once it floats over the page. The services photos are stacked in one frame and open over each other, and the charger sheet sits over a photo that fills its rounded panel, with a price tab docked against its side.

## Shapes

Corners come in three sizes: 18px for sheets and panels, 10px for photos and review cards, and 6px for buttons, badges and form fields. Circles appear only on the numbered step markers. Photos are cropped to fill their frame. The room photos, team portraits and the wide tidy photo have a notch cut from the top-right corner that holds a small label, with the inner corners rounded to match. Review cards and form fields use a thin stone or ink outline.

## Components

- **button-primary:** aqua fill, ink text, 15px medium, at least 48px tall, with a small arrow. On hover an ink fill wipes in from the top right corner.
- **button-outline:** the smaller Book a visit button in the bar, 40px tall, with an ink outline and an aqua wipe on hover. Under the opening heading it is filled with ink.
- **sheet-cream and sheet-aqua:** the reading surfaces; the aqua one holds the opening and the charger price tab.
- **photo-notch:** a cropped photo with a cream tab (green on dark bands) cut into the corner.
- **badge-passed and badge-due:** small 28px tags in the landlord checklist, solid aqua when passed and outlined grey when due.
- **input-field:** cream, 48px, ink text, used in the visit form.

## Motion

The page loads GSAP with ScrollTrigger and SplitText, and Lenis for smooth scrolling. The one motion idea is things being revealed from a corner or a line: photos open from the notch corner, headings rise out of a mask, notes wipe in beside their rule.

- **Navigation:** the bar floats after 60px of scroll and slides away while you scroll down past 160px.
- **Opening:** the heading, note and three steps rise in on load, one after another; the steps start 0.08 seconds apart.
- **Services:** each photo opens over the previous one as its row reaches the reading line, while the room name darkens and then dims.
- **Tidy promise, prices, FAQ, contact, footer:** headings rise line by line; notes and price rows wipe in once.
- **Charger:** the photo zooms out from 1.55 times, the sheet rises and the price tab slides in from the right.
- **Landlords:** each row draws a line across, darkens its text and flips from Due to Passed.
- **Team:** four portraits start as a tilted pile and are dealt out.
- **Night:** a 230vh section with a fixed stage; a grid of 66px cells (46px on phones) lights up from the phone number outwards.
- **Reviews:** two rows of cards slide in opposite directions.

Reduced motion switches off the entrance and scroll animations and smooth scrolling, and the page then reads in full. The navigation bar still hides on scroll and button hover wipes still run. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors AGENTS.md lists, because the scripts read them.

## Do's and Don'ts

- Do keep aqua as the single accent: the opening sheet, the main buttons, the charger price tab, the Passed badges and the night cells.
- Do keep one light grotesque at weight 340 for headings with negative tracking.
- Do show prices and checklists as ruled rows with a short line of detail under each.
- Do keep the notch corner and its small label on the room, team and wide tidy photos.
- Do keep the corner sizes: 18px, 10px and 6px.
- Don't add drop shadows to cards, or gradients on the aqua sheets.
- Don't add a second typeface, uppercase labels or stock icon sets.
- Don't add more accent colours; extra states reuse ink, grey and stone.
- Don't remove the rule beside section notes, or replace the ruled rows with boxed cards.