Norrhus — Next.js + Sanity Website for a Prefab Home Builder
Akram Adjab
Concept project. Norrhus is a fictional builder of Scandinavian prefab homes: six models in three lines, cabins, backyard annexes and family homes, built in a factory and set on site in a day. I designed the brand and every page in Figma, then built it with Next.js and a Sanity Studio.
The brief was a site that makes a high-ticket purchase legible: a published price, a floor plan and a full spec for every model, and a configurator that turns interest into a qualified lead.
The idea: an architect's drawing set
Every page is a sheet in a set, A-000 to A-800, with title blocks, dimension lines and a north arrow.
The doorway: the three lines as sticky panels in their own colours
Plans that draw themselves: walls, openings, dimensions, then hotspots
A nav that arrives first: the header takes the next page's colour before the page swaps
Built for the team that runs it
Nothing is hard-coded. The Norrhus team edits everything in Sanity Studio.
Models: sizes, prices, specs, and a floor-plan SVG with hotspots placed by percentage
Pricing rules: each option is a document, included or a rate per sq ft, so a price change needs no deploy
Projects and journal: each project links the exact options it was built with
Publishing: Sanity Live puts a publish on the site at once, with no webhook and no rebuild
Features at a glance
Configurator: five steps, a coded elevation that re-skins with every choice, and a live, itemised estimate
Lead flow: a server action with validation, an out-of-area check by ZIP code, and a printable estimate sheet
Model pages: a sticky sub-nav, size and furniture switches, and a price block with what is and isn't included
Progressive enhancement: the configurator is a real form, and its URL keeps every choice
Deliverables and stack
Brand: guidelines in 10 frames (logo, colour, type, spacing, components, imagery, motion, voice)
Design system: Figma variables with desktop, tablet and mobile modes, 20 components and 10 icons
Pages: 11 pages and 9 states at 1440, 834 and 390 px, built to the frames
Build: Next.js 16 App Router with Cache Components, Sanity Live, GROQ typed with typegen, server actions, CSS scroll-driven animations
Tools: Figma · Next.js · React · TypeScript · Sanity
Live site: norrhus.vercel.app
Like this project
Posted Oct 31, 2026
Concept project: a Next.js + Sanity site for a prefab home builder. Brand, UX/UI and a build with a CMS-priced configurator that turns into a qualified lead.
