# Law firm home, editorial > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The one-page home for a fictional eleven-lawyer disputes and advisory firm, Thorne & Aldridge, with offices in London, Edinburgh and Bristol. It reads like the front of a serious newspaper, not like a SaaS page. Ivory paper, ink navy, one oxblood, Bodoni Moda at display sizes, Schibsted Grotesk for everything else, 1px hairline rules, 0–2px radii, no shadows. The hero is one sentence: "We are the firm you call when the outcome *cannot* be undone." at 88px, with "cannot" in oxblood italic. Below it: six numbered practice areas that reveal a one-line description on hover, a navy band of four case results, three partner profiles, an insights list, a confidential consultation form with a privacy note, and three offices. The detail worth copying is the **practice list**: a numbered table of contents where hover slides the title 8px, fades in a description, turns the arrow 45° and draws an oxblood rule under the row, with no layout shift. ## Reference behaviour 1. Initial state: the hero sentence fills the left of the first frame. A 280px aside on the right holds a 15px note and a "Speak to a partner today" underlined link. A hairline row under both lists three facts. 2. Header: logo "Thorne & Aldridge" with an oxblood italic ampersand, five text links, and a navy "Confidential consultation" button on the right. The header is sticky at 72px. 3. Practice areas: six rows, each a link to the form. On hover or keyboard focus of a row: the title moves right 8px (320ms, expo out), the description fades in and rises 6px into place (opacity 200ms, transform 320ms), the arrow rotates −45° and turns oxblood, and a 1px oxblood rule grows from 0 to full width under the row (320ms). Moving away reverses all four. 4. The description holds its space when hidden (opacity 0), so rows never change height. 5. Case results: a full-width navy band. Four numbers at 64px: "£41.2m", "48hrs", "0", "No action", each with a category label and one sentence. A fine-print line under them says past results do not guarantee outcomes. 6. Partners: three columns. Each has a 4:5 monogram panel (italic Bodoni initials at 96px inside an inset hairline frame), a role label, a name, a sentence, and a two-row definition list. 7. Insights: four rows. Date, title, category, read time. Hover turns the title oxblood. 8. Consultation form: submit with name, email or outline missing: each bad field's underline turns oxblood, focus moves to the first one, and the status line says "Please complete your name, a valid email and a short outline." With all three valid: the status reads "Received. A partner will contact you by email by the end of the next working day." The phrase follows the chosen reply method. The button then disables. 9. Offices: three columns split by hairlines. City in Bodoni 30px, address, phone link. 10. At 1023px and below, the nav hides and a 44px menu button opens a dropdown. Practice descriptions show at all times (no hover on touch). ## Structure ``` 1280 × 800 (first frame) ┌───────────────────────────────────────────────────────────────────────┐ │ Thorne & Aldridge Practice Results Partners Insights Offices [Confidential consultation] │ 72 ├───────────────────────────────────────────────────────────────────────┤ 1px rule │ COMMERCIAL DISPUTES · CORPORATE ADVISORY · EST. 1998 (12px oxblood) │ │ We are the firm you │ │ call when the 88px Bodoni, 15ch ───────────── │ │ outcome cannot be note 15px │ │ undone. Speak to… → │ │ ───────────────────────────────────────────────────────────────────── │ │ 27 years in practice Three offices … Ranked tier 1 … (14px) │ ├───────────────────────────────────────────────────────────────────────┤ │ PRACTICE AREAS Six areas, each led by a partner… (52px) │ │ ═════════════════════════════════════════════════════ 1px navy │ │ 01 Commercial litigation (description, hidden) → │ │ 02 International arbitration → │ └───────────────────────────────────────────────────────────────────────┘ below: results (navy) · partners · insights · consultation · offices · footer ``` - Content max width 1280px, side padding 64px. - Hero grid: `minmax(0,1fr) 280px`, 64px gap, items aligned to the bottom. The facts row spans both columns. - Every band after the hero opens with a section head grid: `280px minmax(0,1fr)`, 64px gap. Left is a 12px uppercase label, right is a 52px Bodoni `h2`. - Practice list: `
    ` with a 1px navy top rule. Each `
  1. ` has a 1px `--rule` bottom border and holds one `` laid out as `80px minmax(0,1fr) minmax(0,1fr) 40px`: number, title `h3`, description, arrow. - Results: `section` with navy fill. A 4-column grid with a 1px top rule and 1px vertical dividers at 18% ivory alpha. - Partners: 3 columns, 40px gap, each an `
    ` with a `
    `. - Insights: `
      ` of links laid out `140px minmax(0,1fr) 160px 100px`, each with a `