Architecture · Architecture and interior studios
Massing
A multi-page website for an architecture studio where every project has a sheet number, a data plate and a Photographs / Drawings switch, and the archive opens as a grid or as a register, with light and dark mode.
- Pages
- 8
- Modes
- Light and dark
- Responsive
- Desktop, tablet, phone
- Versions
- Framer, Code, XOXI
About this template
What Massing is
Massing is a complete website for an architecture or interior studio. It treats the archive as the site and drawings as first-class: every project has a sheet number, a data plate with client, place, year, size, status and services, and a switch between its photographs and its plan and section.
It has 12 page types: home, projects with a sector filter and two views (a grid of large photographs or a register by sheet number), a page for each project with the brief, the idea and the result, team, collaborators and awards, services with the five stages of a project, the studio, people, recognition with awards and press that link back to the project they are about, a journal, routed enquiries, legal pages and a 404.
The photographs lead: the first screen is one full-bleed photograph with the headline on it. The page is a cool paper white with blue-black ink, and cobalt is the one accent, kept for the linework of the drawings, sheet numbers and links, with square corners and strict rules. Every page is designed in light and in dark, with a toggle in the header, and the layout adapts to desktop, tablet and phone. The studio, its projects and its awards are invented, and the photographs are for demonstration only, so replace them with your own before you publish.
Last updated
What's included
8 pages, ready to fill in
- 01HomeCobalt hero with one project, selected projects, a project with its drawings, services, the studio, recognition and journal
- 02ProjectsNine projects with a sector filter, as a grid of photographs or a register by sheet number
- 03ProjectPhotograph, data plate, brief, idea and result, photographs and drawings, team, collaborators, awards and the next project
- 04ServicesFour services with what each one gives, and the five stages of a project
- 05Studio and peopleThe studio's figures, how it works, two offices, and nine people as monogram tiles
- 06RecognitionAwards and press as two lists, each line linked to its project
- 07Journal and noteResearch, lectures and studio news
- 08Enquiries, legal, 404Three routes (new projects, press, work), a form, privacy, terms and a 404
Features
- Plans and sections drawn in code, ready to swap for your own SVG drawings
- All content in typed files
- Light and dark mode with a toggle
- Responsive on desktop, tablet and phone
- Projects, people, awards, press and journal on the Framer CMS
- Text, colours, figures and photographs are yours to change
Code version
- React 19
- Vite
- Tailwind CSS 4
- TypeScript
- Motion
- React Router
- Content in typed files
Screens
A closer look
Taken from the live demo, in light and in dark, on desktop and on a phone.
Where to get it
Three versions, one design
Pick the one that matches how you build. The pages and the design are the same in each.
- Framer templateRemix it into your Framer account and edit on the canvas. Projects and journal posts run on the Framer CMS.
Free on FramerFramer Marketplace
- Code on Digital Silk RouteThe full source: React 19, Vite, Tailwind CSS 4, TypeScript. Host it anywhere and change anything.
$5one payment
Buy theme · $5 - XOXI themeA theme for your XOXI profile. Live on the XOXI website now; the iOS and Android app gets it with the next app update.
Includedfor Pro and Business+ members
Get it with Pro plan on XOXI
Want to see it first? View demo
More templates
Others you may like
Pagina
A multi-page portfolio template for independent designers and small studios, with light and dark mode.
Free on Framer · $5 code
Stint
A multi-page resume and CV website with a career timeline, a printable resume page, and light and dark mode.
Free on Framer · $5 code
Sidelit
A multi-page photography portfolio where the photograph in view lights the page, with every frame shown whole and light and dark mode.
Free on Framer · $5 code
Want one made for you?
Start with a free 30-minute call. You get a written plan and a fixed quote before any work begins.
Fixed quote. You own everything we make.
