Hello Gravel Supplier directory · redesign · v1

Four page types. One coherent system.

The redesign hangs on a strict hierarchy — national → state → supplier, plus a parallel partner-brand view. Open each page below; the navigation between them is wired up.

01 · NATIONAL HUB /suppliers/

National directory

Suppliers

Hero with live counts, 50-state searchable grid, US tile-map by density, plus six editorial sections (how it works, why HG, materials, partner brands, recent yards, FAQ).

Open the Hub

02 · STATE /suppliers/arizona/

State page (Arizona)

Suppliers Arizona

Editorial intro about the state's aggregate market, AZ-shaped map with city pins, city breakdown, materials-share bars, full supplier list, and nearby-states strip.

Open Arizona

03 · SUPPLIER /suppliers/arizona/brimhall-sand-and-rock-show-low/

Supplier page (Brimhall)

Suppliers Arizona Brimhall S&R

Hero with verified badge, parent-brand chip, and a giant phone-call card. Side-by-side contact + map, materials table, 75-mile delivery-radius visual, verified breakdown, and a sticky sidebar.

(928) 537-4040

Open Brimhall

04 · PARTNER BRAND /suppliers/partner-suppliers/martin-marietta/

Partner-brand page

Suppliers Partner brands Martin Marietta

Hero with network counts, coverage tile-map, materials-network strip, editorial brand history with pull quote, four-stop timeline, and a state-grouped locations directory with expand-all controls.

Design decisions worth flagging

Single orange accent. No gradients, no orange-to-yellow heroes. Orange is the call-to-action color (phone CTA, pins, hover states); everything else is ink + grays.
Hierarchy through structure, not shadows. Off-white section backgrounds (#f7f7f5) alternate with white; the dark ink (#0f1419) is used for verified strips and the supplier hero phone block to anchor each page.
Phone everywhere. Header CTA = HG concierge line. Supplier hero = a black phone-card with live "Open now". Sticky sidebar = the same number, again. The phone is never further than a glance.
Icons are SVG. Every 📞 🏗️ 🗺️ ✅ 🚚 🏢 from the original has a 1.6-stroke lucide-style replacement; mounted via data-icon attrs.
Map approach. National coverage is a tile-map (11×8 grid) colored by supplier density — looks intentional and never breaks. State page uses a stylized AZ silhouette with HTML-overlaid pins so hovers are crisp. Supplier page draws a small map composition with road glyphs.
Verified is treated as the brand. The verified badge appears in heroes, supplier cards, and a full dark "verified section" on the supplier page that itemizes what was checked.
Sticky sidebar. Supplier page's sidebar carries the phone + address + hours, the HG concierge CTA, the parent-brand link card, and verification recency — sticks under the header at top: 92px.
Type. Geist for everything UI, Geist Mono for stats, codes, and phone numbers. Stat numbers in mono read like a real directory — never feels like a marketing site.