Seven Local ← Back to the site

Design guide · How this site was made

A brokerage that is a subway line.

Seven Local sells Queens neighborhoods along the IRT Flushing Line, so the site's entire structure is the line itself: the navigation is a route map, the chapters are stops, and a little purple 7 rides the rail as you scroll.

Concept & art direction

The brief: make Queens feel like the smartest, warmest move in New York for buyers priced out of Brooklyn. The hero opens on the most characteristic thing in this world — a pre-war Jackson Heights block at golden hour — and everything structural borrows honestly from transit design: express stops get the real MTA diamond, the strip map lists all 22 actual stations, and the terminal CTA sits at Flushing–Main St because that really is the end of the line.

Structure encodes truth: local/express badges are accurate, minutes-to-Grand-Central are real ride times, and the seven rail stops are the seven places the page can take you.

Palette

Warm co-op brick and diner-cream do the atmosphere; the Flushing-line purple is the single loud voice — used only for the route, the bullets, and primary actions. Street-tree green marks the good news (local badges, "what your money buys").

Flushing purple#B933AD — the 7 bullet, THE accent

Co-op brick#A0402A — eyebrows, warm emphasis

Diner cream#F7EFDF — page ground

Street-tree green#47713F — local badges, upside

Roasted ink#2B1A10 — text, night sections

Platform edge#D9A62E — the striped card tops

Type pairing

Fraunces — warm, slightly wonky, pre-war bones.

Display & neighborhood storytelling. Its optical-size axis keeps it soft at text sizes and grand in headlines — right for herringbone floors and garden co-ops.

FAMILJEN GROTESK — FRIENDLY WAYFINDING, NEVER COLD.

Navigation, station names, specs, badges. A humanist grotesk with enough roundness to feel neighborly while still reading like signage.

The signature: a route rail that is the nav

The fixed left rail (bottom strip map on phones) is plain HTML stops on a purple line, with one moving element: a 7-bullet "train". A scroll handler maps the reader's position through the document onto positions along the rail, piecewise between stop dots. The train dwells at a stop for the first 55% of each section, then travels — smoothstepped — to the next, so it behaves like a train, not a scrollbar.

// dwell at the stop, then travel between dots
var t = (probe - a) / (b - a);          // progress through section
var travel = t < 0.55 ? 0 : (t - 0.55) / 0.45;
travel = travel * travel * (3 - 2 * travel);  // smoothstep
pos = dot[i] + (dot[i + 1] - dot[i]) * travel;

// eased in a rAF loop; applied instantly if
// prefers-reduced-motion is set
current += (pos - current) * 0.16;
train.style.transform = "translateY(" + current + "px)";

The same code runs the mobile bottom bar — measure() re-reads dot centers on resize and swaps the transform axis. Express stops rotate their dot 45° into the MTA diamond; the moving bullet carries a floating label on mobile naming the current stop.

Photography — Nano Banana Pro

All four photographs were generated with Nano Banana Pro (Google): the Jackson Heights hero block, the LIC balcony skyline, the pre-war interior, and the diner-neon corner under the 7 tracks. This site is the Nano Banana Pro half of a two-model face-off — its sibling site in this series, Five Towns, was shot entirely with GPT Image 2. Compare the film-like street light here against the GPT set and pick your own winner.

Three iteration passes

  1. Pass 1

    Correctness and composition: the strip map's last station label ("Flushing–Main St") was clipping at the container edge — fixed with breathing room on the rotated-label row; the mobile floating stop label was sliding off-screen at the first stop, so it moved out of the train element and now clamps inside the bar. Zero console errors confirmed at 1440 and 390.

  2. Pass 2

    Elevation: the platform-edge stripe on listing cards now slides on hover, like a train passing the platform; the moving bullet squares off toward the <7> diamond when it docks at an express stop and pulses a ring on every arrival; strip-map station names brighten on hover.

  3. Pass 3

    Taste: removed one accessory — the hero's second button, a meta link that competed with the one action that matters ("Ride the line"); the guide stays linked from the footer. Re-checked mobile end to end and the reduced-motion path: the train teleports instead of gliding, the pulse dot holds still, and nothing breaks.

Do this yourself

  1. Find the structural metaphor inside the subject — not decoration on top of it. A brokerage along one subway line = navigation that is a route map. Ask Claude: "what structure in this subject's world could organize the whole page?"
  2. Write the token system first. 4–6 named hex colors from the subject's real materials (brick, cream, the line's official color), two typefaces with jobs ("storytelling serif", "wayfinding grotesk"), and one signature element.
  3. Make structure carry facts. Our badges, diamonds, ride times, and terminal placement are all true. Readers feel honesty even when they can't name it.
  4. Build the signature as plain DOM + one scroll map. Measure anchor points, interpolate between them piecewise, ease with a rAF lerp. No library needed.
  5. Write copy like a brand copywriter. Specific beats clever: "$525K buys a two-bedroom with a formal dining room" outsells "discover your dream home" forever.
  6. Screenshot, critique, repeat — three times. Ask Claude to look at its own screenshots at 1440px and 390px and criticize composition, not just bugs.
  7. Design the reduced-motion and mobile versions as versions, not casualties: our rail becomes a bottom strip map, and the train simply teleports when motion is reduced.
  8. End by removing one accessory. Whatever you added last and love most is the first candidate.