ArStudio is a premium Architecture & Design Studio website template built with Astro for architecture firms, interior design studios, landscape architects, and multidisciplinary design practices that want to showcase their portfolio, communicate their design philosophy, and turn visitors into project inquiries.
Designed around how architecture studios actually win work, ArStudio combines a portfolio-first structure, sector-specific positioning, and a calm, editorial design language to help you present projects, services, studio culture, and design thinking with the same care you bring to your buildings.
This Theme Supports Astro Version 7.x.x 🎉
Built specifically for architecture and design studios, ArStudio goes far beyond a typical agency template. From the homepage and service pages to detailed project case studies, sector pages, and a dedicated journal, every section is structured to guide visitors from "who is this studio" to "let's start a project."
🚀 What Makes ArStudio Stand Out
- Portfolio-driven architecture — every page is designed around showcasing finished work, design reasoning, and studio credibility rather than generic marketing copy
- Service-specific positioning — dedicated service detail pages for Architectural Design, Landscape Planning, Interior Direction, Project Management, Sustainable Strategy, and Master Planning, each with process, deliverables, and a linked project in practice
- Sector-specific positioning — a dedicated sectors page covering Residential, Commercial, Cultural, and Hospitality work, so visitors immediately see relevant experience
- Project case studies with real depth — story, design concept, gallery, materials & details, and project facts for every portfolio entry, filterable by category with pagination
- Studio culture, not just a team page — philosophy, "how we work" timeline, people-first values, and full team profiles that build trust before the first call
- Reusable TypeScript data layer — header/footer navigation, homepage sections, author profiles, and page-level copy are editable from structured data files
- Content Collections for everything that grows — projects, services, blog insights, and legal pages are all managed as MDX collections, so adding a new project or service never requires touching component code
- Dynamic, cross-linked content — featured projects surface automatically on the homepage, and each service links to a real project that used it, based on simple frontmatter fields, no manual linking required
- Fully static and SEO-ready — optimized Astro output with excellent performance and Core Web Vitals
🎯 Design DNA
- Editorial Studio Aesthetic — warm brand palette, generous whitespace, dotted-border image frames, and a calm, confident visual hierarchy that reads like a design portfolio, not a template
- Show, Don't Sell UX — every section is intentionally built to let finished work and process speak first, with a free-project-conversation CTA close behind
- Evidence-Driven Design — years of practice, projects completed, design awards, and client satisfaction woven throughout the homepage and studio story
- Interactive Elements — mega-menu navigation with active-link highlighting, category-filtered projects and insights, an animated testimonial carousel, accordion FAQs, and a lightbox project gallery, all powered by lightweight Alpine.js
- Responsive Excellence — optimized layouts for desktop, tablet, and mobile with smooth navigation and interaction patterns
📦 Pages Included (Fully Coded)
- Architecture studio homepage with hero stats, featured projects, philosophy, services grid, process timeline, testimonial carousel, and journal preview
- Studio (About) page with hero, studio numbers, philosophy, people-first values, "how we work" timeline, full team grid, and CTA
- Sectors page positioning the studio across Residential, Commercial, Cultural, and Hospitality work
- Services overview page with full services grid and integrated-team positioning
- Service detail pages with what's included, our approach, service process, deliverables stage by stage, and a featured project in practice
- Projects (portfolio) listing page with category filtering and pagination
- Project detail pages with story, design concept, image gallery with lightbox, materials & details, and project facts
- Contact page with a multi-field project inquiry form, direct contact info, office locations with map, and FAQ accordion
- Insight (journal) system powered by Astro Content Collections, with category filtering and pagination
- Insight post detail pages with author profiles, tags, social share, and related insights
- Legal pages (Privacy Policy, Terms of Service, Cookie Policy) rendered from MDX with an auto-generated table of contents
- Custom 404 / Not Found page
⚙️ Modern Tech Stack
- Astro 7 — ultra-fast static site generation
- Tailwind CSS v4 — utility-first styling with custom design tokens
- Alpine.js — lightweight interactions and UI enhancements
- TypeScript — type-safe data layer and component architecture
- MDX — content management for projects, services, and journal insights
- Bootstrap Icons — lightweight icon system via astro-icon
- GLightbox — touch-friendly, zoomable project gallery lightbox
- Astro Content Collections — structured, schema-validated content management
⚡ Quick Setup
- Download and extract the template
- Run npm install
- Start development with npm run dev
- Update content in src/data/ and src/content/
- Replace images and branding assets in public/img/
- Build production files with npm run build
🎁 Perfect For
- Architecture Firms & Design Studios
- Interior Design Practices
- Landscape Architecture Studios
- Urban & Master Planning Consultancies
- Sustainability-Focused Design Practices
- Boutique Studios Serving Residential, Commercial, Cultural, or Hospitality Clients
- Anyone selling portfolio-driven, project-based design services
🆓 Free Updates & Support
ArStudio includes free lifetime updates to maintain compatibility with future Astro releases, performance improvements, and ongoing enhancements.
