Design guide · Candidate C of III

“Horizon”

First light over Williamson County. The whole site is one day — it opens at sunrise and every page ends at dusk, with the light on.

I · Concept

Place, not product.

Neither folio nor monument — land. Premium the way a Leiper's Fork farmhouse is premium: warm, permanent, unhurried.

The other two candidates argue with typography and gravity. Horizon argues with belonging: a hand-drawn Middle-Tennessee landscape in four parallax ridge layers, a sun that breathes, clouds on 2-minute drifts, a lone oak on the third ridge, and — because every page should resolve — a dusk finale with canvas fireflies and a lit-window CTA. The narrative arc is the promise: from first light to last light, the matter is handled.

Type pairs a characterful humanist grotesque (Bricolage Grotesque) with a warm workhorse (Figtree), and lets Instrument Serif italic speak exactly where the voice softens: close to home.

II · Tokens

Palette & type.

--cream #FBF5EA page ground
--parchment #F3EADA alternate sections
--espresso #2F2418 text · ~12.5:1
--umber #5C4A36 secondary text · ~6.3:1
--terracotta #B4502A CTA & links · ~5:1
--pine #2E4B3F labels, secondary accent · ~8:1
--wheat #D99A3D sun & ornament (decorative)
--dusk #241D2B the finale — every page ends at nightfall
--firefly #FFD98A particles & dusk accents
Display · Bricolage Grotesque

Warmth with a spine.

wght 600–800 · tight leading · used for display & wordmark

Body · Figtree  ·  Accent · Instrument Serif

Body copy is Figtree at 17.5px/1.68. The italic serif appears only where the register softens — like this — one warm phrase per section, never more.

III · The moving parts

Motion inventory.

The living sky

Hand-drawn SVG scene: 4 ridge layers in atmospheric perspective, wheat sun with an 11s breathing glow, two clouds on 120–160s drifts, a 3-bird flock that crosses once, a lone oak on ridge three. No stock, no AI raster — every path written by hand.

Ridge parallax

Scroll moves the layers at different rates (sky 0.16 → front ridge 0.02), transform-only, rAF-throttled, capped, disabled under reduced-motion.

Ridge dividers

Every section boundary is a curved ridge-line SVG, so the whole page reads as receding hill country.

Dusk finale

All six routes end at nightfall: gradient dusk, a horizon after-glow, 14 canvas fireflies with radial-gradient glows and sine-phase blinking (IntersectionObserver + visibility gated; static dots under reduced-motion), and a lit-window CTA card glowing warm.

Soft reveals

16px rise + fade + blur(6px)→0, 520ms, 70ms stagger. The page assembles like morning haze burning off.

Ken Burns arch

Leen's portrait sits in an arched frame with a slow 20s breathing zoom.

Micro-moves

Pill buttons deepen and nudge their arrows 3–4px; cards lift 5px with warmer shadows; nav links underline in terracotta.

IV · Build, iteration, launch list

How it was made.

Stack. Astro 5, static output. Self-hosted fonts via Fontsource (Bricolage Grotesque, Figtree, Instrument Serif) — zero external requests. Hand-written CSS design system; vanilla TypeScript for reveals, parallax, fireflies, nav, and the form. View transitions via Astro's ClientRouter.

Process. Design exploration first (ui-ux-pro-max catalog), system locked in design.md, copy drafted against the shared facts file under attorney-advertising rails — no outcome claims, no "expert/specialist," nothing fabricated. Placeholders stay bracketed until Leen supplies the real thing: Avvo excerpts & initials, the profile link, education years, memberships, fee language. The form is demo-mode until wired to the firm's endpoint.

Iteration log — three passes in the rendered browser
  • Pass 1 — desktop: every route walked in the rendered browser: sunrise scene, ridge dividers, step cards, arch portrait, dusk finale all verified visually. Found & fixed three real firefly-canvas bugs — a zero-width layout collapse could set the canvas to 0 and throw; the animation didn't restart when a hidden tab became visible again; and no frame painted before the observer's first tick (now an immediate still frame draws at mount).
  • Pass 2 — mobile: breakpoint mechanics (full-width buttons ≤560, single-column grids ≤960, overlay nav ≤860) verified, plus a final phone-width walkthrough against the deployed site — no horizontal overflow, scene keeps its composition at 375px.
  • Pass 3 — polish: programmatic WCAG audit of computed styles — one true failure (the wheat caps tag at 4.04:1 on warm cream) darkened to ~5.2:1; the rest were the audit misreading gradient backgrounds. Banned-phrase grep clean. Production build: six pages, ~532 KB total.

Reproduce. npm install && npm run dev in c-horizon/. Deploy: npm run buildwrangler pages deploy dist --project-name lmh-horizon. Noindexed (meta robots + _headers X-Robots-Tag) until promoted.

The light is on

That's the whole day.

Sunrise hero, a day of work, and a porch light at dusk. If this is the one, the fireflies stay.

Request a Consultation (615) 767-2685
Franklin · Brentwood · Williamson County