---
version: alpha
name: "Architecture template by 8B"
description: "Architecture office website with a pale sky ground, flat square colour blocks stepped like facades and condensed headings; Free HTML template by 8B, MIT."
colors:
  primary: "#1a2430"
  secondary: "#b9471f"
  tertiary: "#e7a36a"
  surface: "#d9e4f0"
  on-surface: "#1a2430"
  sky-high: "#a9c1dd"
  cream: "#f3eeed"
  plaster: "#e6dad8"
  white: "#ffffff"
  door-green: "#3f6964"
  tram-blue: "#26419b"
  signal-red: "#d22630"
  slate: "#475463"
typography:
  headline-display:
    fontFamily: Mozilla Headline
    fontSize: 92px
    fontWeight: 650
    lineHeight: 0.93
    letterSpacing: -0.005em
  headline-lg:
    fontFamily: Mozilla Headline
    fontSize: 72px
    fontWeight: 620
    lineHeight: 0.95
  headline-md:
    fontFamily: Mozilla Headline
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: 0.005em
  wordmark:
    fontFamily: Mozilla Headline
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.01em
  lead:
    fontFamily: Mozilla Text
    fontSize: 22px
    fontWeight: 450
    lineHeight: 1.42
  body-md:
    fontFamily: Mozilla Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Mozilla Text
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
  label:
    fontFamily: Mozilla Text
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.07em
  button:
    fontFamily: Mozilla Text
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.01em
rounded:
  none: 0px
spacing:
  gutter: 64px
  gutter-min: 20px
  section-y: 160px
  section-y-min: 72px
  content-max: 1360px
  wide-max: 1440px
  nav-height: 72px
  block-padding: 36px
  block-padding-dark: 56px
  rule: 2px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0 24px
    height: 50px
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0 22px
    height: 50px
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.wordmark}"
    rounded: "{rounded.none}"
    height: 72px
  block-cream:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: 36px
  block-plaster:
    backgroundColor: "{colors.plaster}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: 36px
  block-night:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    rounded: "{rounded.none}"
    padding: 56px
  badge:
    textColor: "{colors.primary}"
    typography: "{typography.label}"
  input-field:
    backgroundColor: "{colors.white}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    height: 50px
---

## Overview

This is a website template for an architecture office that builds on tiny, awkward plots; the demo office works in the gaps between houses. The one idea is the street: flat square blocks of colour stand on a pale sky and step up and down like facades, a street photograph is smeared into vertical slabs that snap into focus, and thin coloured stripes act as pavement and kerb. It is precise, civic and a little playful, for clients and neighbours who care about a place.

## Colors

A pale sky ground, one dark ink, and a small set of house colours (sand, brick, plaster, door green, tram blue) used as flat blocks, bands and thin stripes.

- **Primary (#1a2430):** ink navy. Text, button fill, 2px rules and the dark sections (method, floors, contact, footer).
- **Surface (#d9e4f0):** pale sky. Page background and the nav bar. **Sky-high (#a9c1dd)** is the upper end of the sky gradient behind the first screen.
- **Cream (#f3eeed):** headline block, two of the three facts, the first quote, the form panel. **Plaster (#e6dad8):** second block on the first screen, one colour band, photo placeholders.
- **White (#ffffff):** the register and team sections, text on ink, input fill.
- **Secondary (#b9471f):** brick. Stripes, button hover stripes, link underlines, badge markers, one colour band.
- **Tertiary (#e7a36a):** sand. Third block on the first screen, labels and lit steps on ink, a stripe in the pavement.
- **Door-green (#3f6964):** badge markers, a stripe, one colour band. **Tram-blue (#26419b):** one colour band and the stripes in the secondary button's hover.
- **Signal-red (#d22630):** the scan line, thin red bands and hairline stripes.
- **Slate (#475463):** small labels, table headings, notes and rules on ink.

## Typography

**Mozilla Headline**, condensed to 75 percent width, sets headings and the wordmark. It is semibold (600 to 700) with tight leading (0.93 to 1.02), so long sentences stay compact. The first headline runs from 44px on a phone to 92px; section headings from 38px to 72px; sub-headings 24px to 34px. **Mozilla Text** sets body at 16px to 18px, leads at 18px to 22px (weight 450), buttons at 16px semibold, and the labels: 13px, semibold, uppercase, 0.07em tracking, used for table headings, plot data, times and field labels. The footer wordmark is sized from its character count (`--len`) to fill the width.

## Layout

Content sits in wrappers of 1300px to 1440px (most often 1360px) with side gutters of 20px to 64px and section padding of 72px to 160px. The first screen is a pinned stage: the street photo fills 100svh and the three headline blocks, each narrower and offset from the last, hang in the middle like a stepped facade. Sections alternate between simple grids: a 34/66 split with a sticky photo (method), a 4/8 split with a table (register), 5/7 for floors and questions, a 5-column row of portraits at stepped heights (team), and a 22/52/22 stage around the form. The buildings section is a horizontal run of photos whose widths follow each plot's real width (4.6vw per metre). At 900px and below nearly every grid becomes a single column, the sticky photos stay at the top, the table turns into stacked rows and the portraits form two columns.

## Elevation & Depth

There are no shadows and no rounded corners. Depth comes from flat colour and offset: blocks of different colours overlap and step sideways (the middle fact is pulled 14 percent left over its neighbour), the sky gradient fades behind the slabs, and the pavement is a thin three-colour stripe (ink, sand, green) under the buildings and a similar stripe under the quotes. Hierarchy is drawn with 2px ink rules, a 4px rule above plot plates and portrait names, and 3px rules beside the method steps and above the floors.

## Shapes

Every corner is square (0px), including buttons, fields, blocks and photos. Photos are vertical slabs, plot-width frames or portraits at different heights (39 to 58 percent of the viewport height). Stripes are 4px to 22px bars; badge markers are 18 by 6 pixel bars; the nav mark is three vertical bars with a shorter brick one in the middle. Icons are plain lines: a two-bar menu button and a plus drawn from two bars. The scan line is a 3px signal-red rule.

## Components

- **Primary button:** ink fill, white label, 2px ink border, 50px high. On hover a stripe pattern of brick, sand and red wipes in from the left in 0.45s. The secondary button is an outlined version that fills with ink and blue and green stripes.
- **Nav bar:** 72px high, sky fill, 2px ink rule below; it slides away on scroll down.
- **Blocks:** cream, plaster and ink blocks are flat, padded 20px to 36px (24px to 56px for ink).
- **Badge:** 13px uppercase label with a small coloured bar before it.
- **Input field:** white fill, only a 2px ink underline, no radius; focus shows a 3px ink outline.
- **Links:** a short ink dash under the text that stretches to full width on hover while a brick line appears above it.

## Motion

The page loads GSAP 3.13.0 with ScrollTrigger and Lenis 1.3.27 (lerp 0.085, wheel multiplier 0.95) from jsDelivr, with no text-splitting library. The motion idea is a street seen in motion: photos arrive as horizontal streaks of colour (stretched sideways) and resolve into sharp images; blocks step in from alternating sides; stripes grow out of hairlines.

- **First screen:** slabs rise in, drift in slow loops (paused off screen) and the headline blocks slide in. The stage is pinned; scrolling grows each slab to full height while its photo resolves from a streak, the middle gap opens from its centre, the floor wipes in and the blocks drift up at different speeds.
- **Buildings:** pinned; the five buildings pass sideways, each photo drifting inside its frame and resolving as it enters.
- **Method:** a signal-red line sweeps across the photo, leaving a smeared copy behind that resolves; each step and its time tick light up in sand as the line reaches them.
- **Register, quotes, questions:** copy blocks slide in from alternating sides (0.9s); three stripes grow from hairlines; the quotes' photo resolves.
- **Colour bands:** six bands unroll downward one by one, each label wiping in from the left.
- **Floors:** reading down the seven levels slides the photo's slices left and right, with the slice of the level being read nearest to aligned.
- **Team and contact:** portraits rise or drop into their stepped row and sharpen; two street slabs slide in from the edges towards the form.
- **Footer:** four stripes grow from hairlines above the wordmark.

With reduced motion enabled there is no smooth scrolling and no scrolled scene; every section reads as static content (the first screen stays as still streaks of colour around the sharp middle gap).

## Do's and Don'ts

- Do keep every corner square and every surface flat; add no shadows or glass effects, and no soft gradient other than the sky.
- Do use one condensed heading face and one text face; keep labels uppercase, small and tracked.
- Do colour only with the named house colours; keep brick, sand, green and red as thin stripes, and signal red only for the scan line and hairline bands.
- Don't fill buttons with red or tram blue.
- Do step blocks sideways and vertically so a screen reads like a facade.
- Do separate content with 2px ink rules, not cards.
- Don't crop photos into circles or rounded frames; use slabs, plot-width frames and portraits at different heights.
- Do keep body text at 4.5:1 contrast: ink on sky, cream or white, white on ink.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.