Halftone: a bold studio site
An orange loader, a hero behind a halftone dot screen and four full-screen projects that slide over each other. The contact card is short: name, email, message. It suits a practice with a strong graphic identity and a handful of flagship projects. More on the Halftone page.
Quell: a portfolio along a timeline
Eight projects on both sides of a line that fills as you scroll, each with its year. The project form asks for type, place and timing. Good for an architect or structural engineer whose work is best told in order. More on the Quell page.
Kavelle: a studio with a founder up front
A full-screen project slider, categories you can scroll sideways and a block about the founder. Fits a small practice where clients hire the architect personally. More on the Kavelle page.
Goldleaf: fixed-price design services
On a visible line grid with a drawn arch in the hero. Nine service cards each open the form with the topic filled in, and client reviews come in through Formgong. For a studio that sells defined services, like a planning package or a consultation. More on the Goldleaf page.
What an architecture site needs
- Projects with facts. Place, year, size, your role. Quell has room for year and structure; in the other three, add a line under each project title.
- Photos you have the rights to. Photographers often license architecture shots per use. Check before you replace the demo images.
- What kind of work you take. New builds, renovations, interiors, planning applications. A short list saves you enquiries you'd turn down.
- A project form. Quell asks for type, place and timing; the others start shorter. Ask what you need to decide whether to call back, and no more.
The templates load no analytics or ad scripts. Fonts come from Google Fonts; if your privacy policy rules that out, download the font files and serve them from your own host.
Mostly interiors? See the interior design templates. Building homes? Lattice Estate is made for a design-and-build firm.
Questions
Can I add a page per project?
Yes. Copy index.html, keep the header and footer, and fill the middle with one project. Link the new files from the project list.
Can I use them for client work?
Yes. The MIT license allows client sites and any changes. Keep the license file.
Do the scroll effects work on phones and for people who turn motion off?
They work on phones. With reduced motion turned on in the system settings, the effects stop and every section shows in its final state.
Sources
Checked on 16.10.2026 against these public pages: Halftone on GitHub, Quell on GitHub, MIT License (Open Source Initiative).