“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 #F4EFE3 page ground — warm ivory --paper-deep #EAE2CE panels, alternate sections --ink #1F1B14 text · ~13:1 on paper --ink-soft #4A4335 secondary text · ~7:1 --hunter #20402C brand green · buttons, headings --hunter-deep #16301F dark sections, footer --brass #77591B accent text · ~5.4:1 --brass-bright #A87E2F ornament & rules (non-text) --hairline #CFC3A4 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.
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.