A ground-up rebuild of the corporate website for a Mumbai retail-branding and fit-out company. It is an EPC and design-and-build firm that takes signage, fixtures, displays and store interiors from concept to installation across India. Our design brief to ourselves was that the site should feel as precisely made as the company's own work.
The Brief
The company's old site ran on WordPress and Elementor. Its requirements document asked for a very different position: an end-to-end execution partner, not just a fabricator. That meant six solutions, a six-step process from brief to installation, the industries it serves, its client brands, and a filterable projects index. Only the logo and the written content carry over from the old site.
We added one rule of our own. Licensed stock photography is used only for atmosphere, and it is never captioned as the company's facility, team or work. We do not use a stock portrait for a named founder or invent case studies. Wherever real material has not arrived, the page shows an honest empty state.
What We Built
-
✦
A "Fabricated Light" design system Dark graphite pages, with light sections switched on per section (no separate dark-mode styles needed). Crimson is used as a signal and covers less than 5% of any screen. Corners are almost square. There are three self-hosted typefaces with fixed jobs: a variable-width sans-serif stretched wide for headlines that look like signage lettering, a monospace for labels and specs, and an italic serif reserved for one accent word.
-
✦
The logo builds itself The logo's stacked-chevron pyramid is traced exactly from the original artwork. The client noticed when an earlier hand-drawn version was slightly off. It returns across the site: it assembles itself in the hero, and it shapes the stepped reveals, the section dividers and the chevron-shaped transitions.
-
✦
Scroll-driven storytelling Built with GSAP ScrollTrigger and Lenis smooth scrolling: a step-by-step navigator that stays on screen for the process, an industries index that switches to each sector's photo, client logo plates that light up by sector, an approach section that pulls scattered stages onto one rail, and testimonials that appear word by word. All motion turns off when the visitor's system asks for reduced motion, and pages are fully readable without JavaScript.
-
✦
A complete site structure Home, About, six solution pages from one shared template, Infrastructure, Projects and Contact. Every old URL redirects permanently to its new page, including a misspelt legacy one, so existing links and search rankings keep working.
-
✦
An honest enquiry form It checks every field, then opens the visitor's email app with the enquiry already written. It never shows a false "message sent". Until the client chooses where enquiries should go, the optional file upload stays off, because nothing could receive it yet.
-
✦
Automated quality checks Playwright scripts check the heading structure, sideways overflow at phone and desktop widths, missing alt text, and that nothing stays hidden when motion is reduced. Further scripts fail on any console error with motion on or off, confirm every page reads with JavaScript disabled, and confirm the hero headline, copy and both buttons fit on one screen at every screen size we test.
The Stack
Next.js 16 (App Router, React Server Components) with TypeScript and Turbopack. Tailwind CSS v4, with every colour defined once as a design token; no hard-coded colour appears in any component. shadcn/ui on Radix for interface building blocks, Motion for component animation, GSAP with ScrollTrigger for scroll-linked sequences, Lenis for smooth scrolling, and lucide icons. Fonts are self-hosted, so there are no external font requests. 26 licensed stock photographs are catalogued in a manifest with alt text and intended use, ready to be swapped for real photography. Playwright handles quality checks.
Where It Stands
The design system, every page template and the motion work are built. What remains is content only the client can supply: real project data with before-and-after photography for the projects index, photographs of the facility, a portrait of the founder, permission to show each client logo, and a destination for enquiries. Each item is tracked in a running content-gaps document. Every layout is built so that real material can go straight in when it arrives.
Does your website undersell what your company actually builds? Reach out. We design corporate sites with the same care you put into your own work.