Forge.Supply — The Utility Nav, Built for Real Catalogs

Summary

A sticky two-tier ecommerce utility navbar in white, near-black ink, and a single sale-red accent: a thin black utility strip (shipping + support left, find-a-store + sale link right) sits above a white main bar that pairs a bag-icon wordmark ('Forge.Supply') with a search-first inline field (an 'All' department dropdown + input + a red submit button), an account 'Sign in' chip and a cart icon carrying a live red count badge, and a black 'Sell with us' CTA, with a third hairline category rail below (Shop all, Power Tools, Hand Tools, Hardware, Workwear, Deals + a 'Hot' pill, Brands) whose links grow a red underline on hover. Built entirely on Inter with Solar icons, it pins flush to the top and reflows down to a single icon row + a scrollable category rail on mobile.

Style

A crisp, high-contrast retail / hardware-storefront aesthetic on a clean white canvas with near-black ink (#0a0a0a) text and one hot sale-red accent (#e5341f, darker #c42912 on hover) used only for commerce signals: the search submit, the cart count badge, the 'Sale' link, discount tags, the 'Hot' pill, and category underlines. Everything else is monochrome ink at opacities. The whole UI is set in Inter (400 to 900) with tight tracking on the wordmark and headings, so weight and the single red punch carry hierarchy. Depth is quiet: a soft hairline-plus-faint-drop nav shadow and 1px ink borders, never heavy chrome.

Layout & Structure

A `sticky top-0 z-50` `<header>` stacking three full-width tiers that share one centered `mx-auto max-w-[1240px] px-5 sm:px-8` column: (1) a thin black utility strip (h-9) with left info (free shipping, weekday support) and right links (find a store, a red-tagged Sale link); (2) a white main bar (h-[68px] sm:h-[72px], with the soft 'nav' shadow) holding the wordmark on the left, a flexible inline search field in the middle (hidden below md, capped at max-w-[560px]), and a right cluster of account + cart + a black 'Sell with us' CTA; (3) a category rail (h-12) separated by a 1px top hairline, with a horizontally scrollable row of category links on the left and a 'Track an order' affordance on the right (xl only). Below md the search field hides and is replaced by a search-toggle icon, the account label collapses to an icon, and the CTA + 'Track an order' drop, leaving an icon row over a scrollable category rail.

Sticky three-tier header shell

Black utility strip (tier 1)

White main bar (tier 2)

Bag-icon wordmark (left zone)

Search-first inline field (center zone)

Account + cart + CTA cluster (right zone)

Category rail (tier 3)

Responsive reflow

Special Notes

Single typeface: Inter (Google Fonts, weights 400/500/600/700/800/900); the wordmark and headings use font-black/extrabold with a custom .tracking-tightest (-0.04em). Exact color tokens (Tailwind config): ink #0a0a0a (all structural text + hairlines, used at /70 /60 /50 /45 /40 /15 /12 /10 /8 /5), sale #e5341f and sale-dark #c42912 (the only accent, hover only on interactive red), plus neutral fills #ffffff (page + bar), #fafafa (search field rest), #f4f4f4 (product-image placeholder). Icons are Iconify Solar (bolt-bold, headphones-round-bold, map-point-bold, tag-price-bold, bag-4-bold, magnifer-linear, alt-arrow-down-linear, user-linear, cart-large-2-linear, widget-5-bold, delivery-bold, plus screwdriver/plug/ruler/box on the demo product cards). Custom shadows: 'nav' = '0 1px 0 0 rgba(10,10,10,0.08), 0 8px 24px -16px rgba(10,10,10,0.18)' under the white bar; 'field' = a tiny input shadow; 'badge-ring' = a 2px white ring around the cart count. The header is `sticky top-0 z-50` and pins flush; all three tiers share the centered `max-w-[1240px] px-5 sm:px-8` column. Built with the Tailwind CDN. The page beneath (a dotted-grain hero with a red-accented H1 'built for real catalogs', CTA buttons, and a 4-up product-card grid) is demo context so the sticky bar has something to scroll over; the prompt-library value is the navbar pattern itself.