Interior Design Website Template

About this interior design website template

The 13 pages you get

Home /

The coats set-piece, the studio’s position, the work and the enquiry close.

Work /work/

The portfolio index — how an interiors practice is judged.

Four project pages /work/…

Ashcombe Kitchen, Marlowe Drawing Room, Pell Bedroom, Tarn Cottage. Each a full route with its own specified scheme — and Tarn Cottage’s limewash is the control that never fully covers.

Studio /studio/

Who the studio is and how it works, with the service stages and fee structure. The page that justifies a design fee.

Contact /contact/

A working enquiry form plus live tel: and mailto: paths.

Journal /journal/

A wired content collection — add an .mdx file and it appears here and in the sitemap.

Two worked articles /journal/…

How many coats is two coats, and reading a north-facing room. Both are genuinely useful and both sell the expertise.

Privacy /privacy/

A real legal route.

404 /404

Designed, not default. Keeps the navigation.

What is in the build

• Painted surfaces re-composited every frame by the real paint-hiding law, resolving from primer grey to the specified colour as coats are laid
• A declared control: a limewash room whose translucent mineral finish never fully hides the substrate, at any scroll position
• Four project routes each carrying their own specified scheme, so the mechanic shows four different colours arriving
• Services, stages and FAQ data as typed arrays, with the fee structure on the studio page
• Balanced-neutral photography at restrained chroma across sixteen images, so the room photographs never fight the colour system
• Faustina with Onest, both self-hosted; a working enquiry form plus live tel: and mailto:
• Vitest and Playwright suites included in the repository

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.

The world

Bone and warm taupe carrying a single clay-brown accent — the whole colour field is the moving thing, each room's specified scheme resolving up out of a bare grey primer as the page is read.

The mechanic

"The Colour Comes Up Through the Coats": scroll depth within a room is coats laid, and every painted surface is re-composited each frame — resolving from primer-grey mud to the specified swatch by the paint-hiding law perceived = paint·(1−tⁿ) + substrate·tⁿ.

Loud channel

Palette

Imagery. Balanced neutral, chroma restrained

Type & palette

Faustina · Onest

#050f48 #efe9df #d9a441

The control case

The limewash room — a translucent mineral finish that never fully hides, so the substrate is still visible at the foot of the page as it was at the top. Drawn, not labelled.

Who it is for

Built for interior design studios, decorators working at the design end, and colour consultants. It suits a practice that specifies schemes and needs clients to understand that specification is the work. For architecture, the architecture-studio build draws sections instead of coats; for a showroom with products, ecommerce.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions