Most architecture templates on the market are visual moodboards — a hero render, a project grid, an about page. They're built for studios that want to look established. Forma was built for studios that already are — established practices with decades of history, institutional clients, and government tender requirements, whose current website undersells the depth of what they actually do. The goal: build a template that a senior principal at a 40-person practice could hand to a procurement team without flinching.

Before any design decisions were made, I studied how the world's leading practices actually operate — Foster + Partners, Gensler, Snøhetta, SOM, Perkins & Well, Herzog & de Meuron, HOK, Renzo Piano Building Workshop, MVRDV, Olson Kundig, Studio Gang, and Selldorf Architects, among others.

I wasn't looking for visual inspiration. I was reverse-engineering how serious practices structure their services, document their process, and present professional governance — because that's what institutional and government clients actually evaluate before they look at a single portfolio image.   Three findings shaped the entire template:

Services are delivered in discrete, named disciplines (MEP coordination, authority approvals, site feasibility), not a vague "our services" page.

Process has to be documented stage-by-stage, from consultation through construction-phase coordination, with deliverables attached to each stage.

HSEQ (Health, Safety, Environment, Quality) governance is a prerequisite, not a nice-to-have — practices tendering for infrastructure or municipal work are screened on this before anyone looks at their design work.

That last point is what most competing templates miss entirely. Forma is built around it.

Established architectural design studios working across residential, commercial, institutional, and infrastructure typologies

Principal architects and studio directors whose practice spans decades and multiple international markets

Family practices entering a second or third generation of professional operation

Studios preparing to tender for government, municipal, or institutional commissions

Practices whose work includes airports, railway infrastructure, civic institutions, large-scale commercial developments, and urban master planning

Firms whose digital presence must withstand the scrutiny of procurement teams evaluating professional governance alongside design capability

Any practice whose reputation has been earned over decades — and whose website should finally reflect it

Homepage A single, complete homepage built around the studio as a professional institution — leading with the work, the capability, and the depth of practice. Designed for studios that operate under a firm name and present their collective expertise as their primary market proposition.

Eight Dedicated Service Pages Each covering a distinct architectural discipline in the language the profession actually uses. Every page is structured around real service delivery — what the service is, what it produces, how it is executed, and why it matters to the client commissioning it.

Architectural Design and Concept Development

Construction Documentation and Technical Drawings

MEP Coordination and Integration

Authority Approvals and Regulatory Compliance

Design Consultancy and Project Coordination

Visualization and 3D Presentation

Sustainability and Passive Design Strategy

Site Feasibility and Plot Analysis

Ten Complete Project Case Studies Across five typologies — Residential, Commercial, Institutional, Urban and Master Planning, and Ongoing. Each case study is fully written: client brief, design response, technical delivery process, project outcome, and client perspective. Complete professional narratives, not placeholder content.

Seven-Step Process Framework Documenting the complete architectural workflow from initial consultation through site analysis, concept design, design development, construction documentation, authority approvals, and construction phase design consultancy — with deliverables listed for each stage.

Complete HSEQ Governance Section Health and Safety Policy · Environmental Policy · Quality Assurance Policy · Sustainability Commitment — four dedicated CMS-powered policy pages, each written to the standard of a working professional practice document, each managed with version number, policy owner, and annual review date fields.

This section exists because the research was unambiguous: practices seeking commissions from government bodies, infrastructure clients, and institutional commissioners are evaluated on professional governance as a prerequisite to portfolio review. Forma is the only Framer architecture template that addresses this professional reality.

Three-Tier Team and Leadership System Board and Senior Leadership with full dedicated profile pages · Associate Architects with extended card format · Studio Team with standard cards. All powered by a single CMS collection with a tier field controlling display behaviour. Three complete fictional leadership profiles provided — Founding Principal, Design Director, and Technical Director — each with full biographical content written to reflect decades of credible international practice.

Insights, Careers, and Job Listings A publishing platform for project announcements, technical perspectives, awards, and industry commentary. A careers section with culture statement and professional standards criteria. Individual job listing pages. The infrastructure of a practice that is active, growing, and contributing to its profession.

Core: Home · About Studio

Services: Services Overview · Service Detail × 8

Work: Projects · Project Detail

Practice: Process · HSEQ Landing · HSEQ Policy × 4

Publishing: Insights · Insight Post

People: Careers · Job Detail

Utility: Contact · Thank You · Legal Policies · 404 Error

Services: Eight service entries powering individual service detail pages

Projects: Ten project entries with complete case study fields

Insights: Article collection with category filtering

Team: Single collection with tier field controlling three display levels

Careers: Job listings powering index and individual job detail pages

Legal: Three policy pages managed as editable CMS entries

Topology: Project typology taxonomy powering portfolio filter system

HSEQ: Four governance policy pages with version and review date fields

More than 60 images and video assets throughout Forma were individually selected or generated using AI with precise contextual intention — evaluated for operational relevance to each specific section, not chosen for general architectural atmosphere.

Technical drawing review sections show architects working at large-format drawing sets. MEP coordination sections show integrated building services. Site analysis sections show professional site assessment in progress. Process steps are illustrated by the actual activity they describe. Project case studies carry visuals that move from concept sketches through construction documentation to completed spaces.

This level of visual intentionality reflects a straightforward understanding: the audience Forma is built for reads imagery with the same critical intelligence they bring to a set of construction drawings. Every visual in Forma earns its place.

Typography Cormorant Garamond for display and headline use — a high-contrast serif with architectural proportions that communicates authority and craft. Inter for body text and all UI elements — precise, neutral, and legible at every scale. A pairing that holds the core tension of the profession: design intelligence and technical precision in equal measure.

Colour A warm neutral layered system — page background through surface levels to card surfaces, anchored by a dark warm footer and a single aged brass accent. Every value chosen for systemic coherence, not individual appeal.

Navigation Full-screen overlay with typographic hierarchy. Primary destinations at display scale. Secondary pages grouped cleanly. Contact information anchored in the

Built natively in Framer

Fully CMS-integrated across 8 collections

Responsive across Desktop 1440px · Tablet 1024px · Mobile 390px

Forms ready for lead capture and consultation requests

SEO-optimised layout structure throughout

Performance-focused lightweight component architecture

All typography and colour managed through Framer Styles and Variables

AI-assisted contextual visual direction — 60+ images and video assets

https://www.abubaker.org/store/forma