Brass manufacturing is a massive industry in Jamnagar — the city produces something like 60% of India's brass output. But most manufacturers still rely on outdated websites or basic WordPress sites that don't do justice to their precision engineering capabilities. I wanted to build something that feels as polished as the products these companies make.
The Challenge
B2B industrial websites have a unique problem: they need to communicate technical precision while still being approachable to international buyers who are evaluating dozens of suppliers. The site needed to showcase 55+ products across 8 categories, each with detailed specifications like thread types, pressure ratings, and material grades — without overwhelming visitors.
My Approach: Design Token Architecture
Instead of hardcoding styles everywhere, I built a design token system that serves as the single source of truth. A theme.json file defines every color, font, spacing value, shadow, and gradient. A build script flattens these into CSS custom properties, which Tailwind v4 consumes via the @theme directive.
The result? Changing the entire brand identity — from the gold/brass palette to a completely different color scheme — requires editing one JSON file and rebuilding. That's it.
The Brass Gold Color System
The color palette was intentional. The primary color #B8860B (dark goldenrod) directly references the material the company works with — brass. Paired with a deep navy secondary #1B2A4A for trustworthiness, and warm neutrals ranging from #FAF9F7 to #0F0E0B that avoid the cold sterility typical of industrial websites.
Building the Product Catalog