---
version: alpha
name: "Law firm template by 8B"
description: "Commercial law firm one-pager with greyscale photos in pale fog, white and grey grounds, square corners and one red for its geometric figures, serif promises and fee bars. Free HTML template by 8B, MIT."
colors:
  primary: "#262626"
  secondary: "#5c5c5c"
  tertiary: "#d3271d"
  neutral: "#f1f1f1"
  surface: "#ffffff"
  on-surface: "#262626"
  panel: "#d5d5d5"
  hairline: "#dcdcdc"
typography:
  headline-display:
    fontFamily: Host Grotesk
    fontSize: 168px
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -0.045em
  headline-xl:
    fontFamily: Host Grotesk
    fontSize: 122px
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: Host Grotesk
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.032em
  headline-serif:
    fontFamily: Source Serif 4
    fontSize: 46px
    fontWeight: 300
    lineHeight: 1.02
    letterSpacing: -0.02em
    fontVariation: '"opsz" 60'
  body-lg:
    fontFamily: Host Grotesk
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.01em
  body-md:
    fontFamily: Host Grotesk
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.45
  body-sm:
    fontFamily: Host Grotesk
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
  label-caps:
    fontFamily: Host Grotesk
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.07em
  button:
    fontFamily: Host Grotesk
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1
rounded:
  none: 0px
spacing:
  gutter: 64px
  section-padding: 176px
  nav-height: 64px
  head-margin: 88px
  panel-column-gap: 32px
  panel-photo-width: 460px
  photo-gap: 16px
  cell-padding: 22px
  statement-max: 1000px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: "0 30px"
    height: 56px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
  text-link:
    textColor: "{colors.on-surface}"
    padding: "0 0 3px"
  icon-button:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    size: 48px
  input-field:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: "10px 0"
    height: 48px
  card-promise:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.tertiary}"
    typography: "{typography.headline-serif}"
    rounded: "{rounded.none}"
    padding: "22px 22px 24px"
  fee-bar:
    backgroundColor: "{colors.tertiary}"
    rounded: "{rounded.none}"
    height: 40px
  matter-row:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    padding: "22px 20px 26px 0"
---

# Fellgate

## Overview

Fellgate is a one-page website for a commercial law firm acting for growing companies, their founders and boards. The one idea is firm ground in fog: greyscale photos of ridges in cloud, bare branches and seed heads on white and pale grey, with one red for what the firm stands on, from the figure behind each practice to its serif promises and fee bars. A calm grotesque, square corners and hairlines keep it composed and exact. The demo's firm, people and matters are invented.

## Colors

Seven values in `:root`, `--color-1` to `--color-7`.

- **Primary and on-surface (#262626):** text, logo, dark buttons, focus outline, the fee cap's stop line, the shade over a covered practice panel.
- **Surface (#ffffff):** page ground, promise cells, phone menu, the fog over the opening photo, button labels.
- **Neutral (#f1f1f1):** ground of the partners, questions and footer.
- **Panel (#d5d5d5):** ground of the practice section and its panels.
- **Secondary (#5c5c5c):** small print, form labels and underlines, table heads, the line above each question. 6.7:1 on white.
- **Hairline (#dcdcdc):** 1px rules, icon button outlines, empty photo frames, the pale start of the ink effect. Never text.
- **Tertiary (#d3271d):** the one accent: logo square, practice figures, serif promises and fee names, fee bars, hover fills. 5.2:1 on white; never body text or a ground.

## Typography

- **Host Grotesk**, a variable face for weights 400 to 500 with a size-adjusted Arial fallback, carries everything but the promises and fee names: 500 for headings, labels, links and buttons, 400 for text. Large sizes are tight, with negative tracking.
- **Source Serif 4**, weight 300 only, always red, with `"opsz" 60`: the five promises and three fee names, a thin, quieter voice.

`headline-display` is the h1, three one-word lines stepped right by 0.6em and 1.2em, 56px to 168px (17vw on phones). `headline-xl` sets the practice titles, 42px to 122px. `headline-lg` covers section headings and statements, 30px to 56px; `headline-serif` runs 30px to 46px. `body-lg` (19px to 22px) is the opening lead; `body-md` is 17px text and `body-sm` 15px grey small print. `label-caps` is 12px uppercase at 0.07em, for table heads, terms and form labels. `button` is 15px medium.

The logo is 15px uppercase at 0.3em beside an 11px red square. Headings are sentence case; uppercase is for labels and the logo.

## Layout

Sections run full width inside a side gutter (`--space-1`, 20px to 64px) with vertical padding `--space-2`, 96px to 176px. The opening and contact statements and the contact photos are capped at 1000px.

- Practice, matters, partners and fees open alike: heading at the left, a short note at the right aligned to its foot (1.5fr and 1fr).
- Principles and questions keep a sticky intro column.
- The opening is two screens over one held photo: h1 upper left, lead lower right, then a centred statement.
- A practice panel is at least a screen tall: three columns (1fr, a photo column up to 460px, 1fr, 32px gap), the photo in the middle, the title across all three, text lower left, terms lower right.
- Offices: ten square city photos on an arc around a paragraph, then three office columns.

At 1000px the nav becomes a menu button; at 860px principles, pro bono and questions stack; at 760px panels stack, the table becomes blocks, the ring shrinks and the contact photos form a 2 by 2 grid.

## Elevation & Depth

No shadows. The second screen slides over the held opening photo on a white gradient with rising mist. Practice panels stack, the covered one darkening under a #262626 shade at 50%. Each panel's greyscale photo is multiplied over its red figure, so red shows through the pale parts and some pieces reach past its edges. The nav bar is translucent over a backdrop blur, the city ring fades at its foot through a mask, and white, #d5d5d5 and #f1f1f1 grounds separate sections.

## Shapes

- Every corner is 0px. No pills, no circles.
- 1px hairlines and underlines; the fee cap's stop is a 2px dark line standing past the 40px track.
- The red figures are CSS blocks sized from one unit: two long bars (corporate), four squares (disputes), a dome and a bowl (employment), three squares of different sizes (real estate).
- Crops: a full-bleed opening, tall practice photos, a 4:5 pro bono photo, square contact photos and city tiles.
- The hourly fee bar fades out after 58% of its length.

## Components

- **button-primary:** a dark block, 56px high, 30px side padding; on hover a red layer rises from its foot (0.55s).
- **text-link:** 15px medium over a 1px underline that redraws on hover; nav links are 14px regular and draw it on hover or when current.
- **icon-button:** a 48px outlined square; on hover red grows from the centre and the glyph turns white.
- **input-field:** a 1px grey underline, no box, the label in `label-caps`; focus adds a 2px dark outline.
- **card-promise:** a white hairline cell, red serif title at the top, grey text at the foot. Cells span two rows and the right column starts a row lower, forming a staircase.
- **fee-bar:** a red block on a hairline track, reaching 9%, 52% or 94%.
- **matter-row:** grey year, medium client and outcome, a hairline on top.

## Motion

GSAP 3.13.0 with ScrollTrigger and SplitText, and Lenis 1.3.4 (lerp 0.085), from jsDelivr. The one idea: nearly everything is scrubbed to the scroll and settles into place as you read.

- **Navigation:** hides on scroll down, returns on scroll up.
- **Opening:** on load the photo settles from 1.07 scale, the three words rise in turn and two fog patches drift on loops. Scrolling enlarges and brightens the photo, pushes the lines apart until they fade, raises the mist and inks the statement word by word.
- **Practice areas:** each panel slides over the last, which darkens; its red pieces open from one small central block into the figure, the title slides in from the left, and the index underlines the current practice.
- **Principles:** right-hand cells step down and left-hand cells rise into the staircase; on phones every second cell slides in from the left.
- **Matters, offices list, questions:** once per row, the hairline draws from the left and the text rises 18px.
- **Offices:** the ring turns 40 degrees into place as each photo settles from a closer crop.
- **Partners:** the section holds while the six portraits travel sideways.
- **Pro bono, contact:** statements ink from #dcdcdc word by word; the pro bono photo drifts; the four contact photos deal out from a tilted pile.
- **Fees:** each bar grows from a square to its reach; the cap's stop line grows upward.

Hovers ease on cubic-bezier(0.7, 0, 0.2, 1). Reduced motion turns off smooth scrolling, the entrance and every scroll animation (panels sit in sequence, partners form a grid, statements are dark); the nav bar still hides and hovers still fill. Keep each `data-figure` with its piece count (2, 4, 2, 3), the `data-reach` values and `--city-i` centred on zero.

## Do's and Don'ts

- Do keep one accent; red is never body text or a ground.
- Do keep photos greyscale, except the city tiles.
- Do keep corners square: no rounded cards, pills or round avatars.
- Don't add a second display face; the serif stays light, red and rare.
- Do keep labels in 12px tracked uppercase, headings in sentence case.
- Don't add shadows, glass cards, decorative gradients or stock icons.
- Do divide with 1px hairlines, not boxes.
- Do keep the h1 as three short stepped lines; don't bolt on other scroll effects.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.