“Old Line”
The engraved folio: a law practice presented the way a finely printed legal document would be — then brought carefully to life.
This page documents the build so it can be reproduced, audited, or extended. It ships with the candidate on purpose: the process is part of the product.
Why this direction.
Franklin's commercial money is conservative and design-literate: it trusts things that look printed, permanent, and unhurried. Old Line borrows the visual grammar of engraved certificates and county records — double-rule frames, a brass seal, ledger lines, letterpress restraint — because that grammar already means "institution" to this audience. Every animation is slow and dignified (500–700 ms) so the page feels like paper deciding to move, not software showing off.
The register is third-person and measured. No exclamation points exist anywhere in the candidate. The single decorative illustration — a Greek Revival courthouse drawn in engraver's strokes — draws itself on first view, one architectural order at a time, the way a matter is built: ground, then steps, then columns, then pediment.
Palette & type.
--paper #F6F3EC page ground — warm ivory --paper-deep #ECE7DC panels, alternate sections --ink #1F1B14 text · ~13:1 on paper --ink-soft #4A4335 secondary text · ~7:1 --navy #15263F brand navy (live site primary) · buttons, headings --navy-deep #131B2E dark sections, footer (live primary-container) --bronze-text #6E5732 accent text · ~6:1 (text cut of the logo bronze) --bronze #9A7B4F the logo bronze · ornament & rules (non-text) --hairline #D8D2C4 rules, borders Counsel, quietly formidable.
wght 340–620 · opsz 72 · WONK 1 · used for display, buttons, caps labels
Body copy is set in Newsreader at 18px/1.68 with true italics for asides — like this one — and old-style numerals in the ledgers.
There is deliberately no sans-serif anywhere in the candidate.
The inventory.
Engraved courthouse
Hand-drawn SVG (no stock, no AI raster) — ~70 strokes animated by stroke-dashoffset in six architectural groups, triggered by IntersectionObserver, ~2.4s total. Fully drawn when prefers-reduced-motion.
Brass seal
SVG textPath ring — 'LMH LAW PLLC · FRANKLIN TENNESSEE' — rotating at 70s/turn. Static under reduced motion.
Double-rule frames
1px outer + inset 1px inner at 55% ink; the folio border that carries hero, cards, portrait, and forms.
Ledger rows
Practice scope as ruled ledger lines with hanging brass numerals and old-style figures.
Paper grain
SVG feTurbulence tile at 5% multiply, fixed overlay — the print texture.
Reveals
Mask-up reveals: clip-path inset + 16px rise + 70ms stagger, 640ms, cubic-bezier(.22,1,.36,1). Rules scale in from the left.
View transitions
Astro ClientRouter crossfade between pages, 300ms.
Letterpress interactions
Buttons press 1px into the paper on :active; links grow underlines from center; ledger rows tint on hover.
Stack and steps.
Stack. Astro 5 static output · self-hosted variable fonts via Fontsource (Fraunces, Newsreader — woff2, no external font requests) · hand-written CSS design system (~600 lines, no framework) · vanilla TypeScript for reveals, nav, and the form. No client-side JS framework, no tracking, total JS under 6 KB.
Reproduce. npm install → npm run dev in
a-oldline/. Deploy: npm run build →
wrangler pages deploy dist --project-name lmh-oldline. The candidate is
noindexed via meta robots and a _headers X-Robots-Tag until promoted.
Process. Design exploration ran first (ui-ux-pro-max catalog: style,
palette, type, landing-pattern searches), then this candidate's system was locked in
design.md before any page was built. Copy was drafted against the shared
facts file with attorney-advertising rails. Three fine-tooth iteration passes followed
— desktop, mobile, and polish — each in a live browser against the rendered site.
- Pass 1 — desktop: all six routes walked in the rendered browser. Found & fixed: brass caps failed contrast on dark green (3.85:1 → new brighter brass-on-dark token); seal ring lettering overflowed its circle (shortened to exact fit); practice-scope ledgers ran too wide (capped at a 60rem measure).
- Pass 2 — mobile (375px): found & fixed: micro-bar wrapped to two lines (short-form "Franklin, Tennessee" swaps in under 620px); hero CTAs had mismatched widths (full-width buttons under 560px); the matter-type select clipped its text into the chevron (padding + ellipsis). Verified: nav overlay, tap targets ≥44px, no horizontal overflow.
- Pass 3 — polish: programmatic contrast audit of every rendered text node (computed styles → WCAG ratios) caught the footer caps override; sticky rails verified at real scroll; courthouse hatching given a slow idle breathe; banned-phrase grep (guarantees, "expert", superlatives) clean; production build: six pages, ~16 KB total JS.
- Revision round — after selection: Old Line won the three-way bake-off, with direction to align it to the firm's existing brand and full service set. Palette re-cut to the live site's navy (#15263F / #131B2E) and logo bronze (#9A7B4F, with a darker text cut for WCAG); Immigration restored as Practice No. 3 with its real national service scope; The Brief added at /brief with the five live articles migrated verbatim; the header consolidated into a Practice Areas dropdown; and a local-SEO layer added — LegalService, BreadcrumbList, FAQPage, and Article structured data, canonicals, Open Graph, and a sitemap — with noindex kept until promotion.
What must be replaced.
Every bracketed [LEEN: …] item is a deliberate placeholder: Avvo review excerpts and reviewer initials, the Avvo profile link, education and admission years, memberships, and fee-structure language. Nothing on this candidate is fabricated — placeholders stay visibly bracketed until real content exists. The contact form is in demo mode and must be wired to the firm's form endpoint before launch. Attorney-advertising review of final copy belongs to the attorney.
Old Line was selected from a three-way bake-off. The two unselected explorations remain deployed (noindexed) as process documentation: “Monument” and “Horizon”.