Studio — Architecture & Creative
A premium Astro theme for architecture studios, design firms, and creative agencies. Dark mode, full-site search, GSAP scroll animations, and 14 production-ready pages.
Studio is built for firms where the work speaks louder than words. Architecture studios, design agencies, and creative collectives need a website that gets out of the way — letting projects, photography, and craft take center stage.
The design language is editorial and restrained: full-bleed imagery, generous whitespace, horizontal pin-scroll project galleries, and GSAP-driven scroll animations that feel physical, not flashy. Dark mode is first-class — both modes get full design attention, neither is an afterthought.
What's included
Pages
- 14 production-ready pages: Home, About, Projects list, Project detail, Blog list, Blog detail, Contact, Privacy, Terms, 404
- Content collections for projects and blog posts — Markdown-driven, no CMS required
- Horizontal pin-scroll project gallery with GSAP ScrollTrigger
- Collage-style image grids with micro-rotation on scroll
- Individual project pages with image curtain reveals
Design & Animation
- Full dark mode with system preference detection — toggle persists, no flash on load
- GSAP scroll animations: horizontal pin scroll, image curtain reveals, text mask reveals
- Lenis smooth scrolling synced with GSAP ScrollTrigger
- Collage micro-rotations — images tilt subtly as they enter the viewport
- Self-hosted fonts — zero external requests, full privacy
Search & Navigation
- Full-site search powered by Pagefind — indexes every page automatically
- Cmd+K / Ctrl+K keyboard shortcut to open search
- Instant results with text highlighting
- Dedicated search results page
SEO & Content
- Sitemap, RSS feed, robots.txt — auto-generated
- Open Graph + Twitter Card metadata per page and per post
- JSON-LD structured data (Organization + BlogPosting + Breadcrumb + FAQ)
- Canonical URLs on every page
- Ships with AGENTS.md for AI coding tools — Cursor and Copilot understand the project structure
Developer Experience
- No-code editing — config.ts for site settings, data.ts for all page content
- Content collections for projects and blog — Markdown + frontmatter
- Scoped CSS per component, shared design tokens via CSS variables
- Full README + DESIGN.md with architecture documentation
- Astro View Transitions for instant page navigation
Best used for
- Architecture studios
- Interior design firms
- Creative agencies
- Photography portfolios
- Design collectives
- Art direction studios
- Boutique branding agencies
- Editorial and magazine sites
Deploy anywhere
Static output means zero config on any host. Run npm run build and deploy the dist/ folder to Cloudflare Pages, Vercel, Netlify, or GitHub Pages. Pagefind search index builds automatically during the build step.
FAQ
How do I customize the theme?
src/config.ts for site name, email, nav links, and footer. Edit src/data.ts for all page content including hero text, project lists, services, and testimonials. Projects and blog posts live in src/content/ as Markdown files.Where can I deploy it?
npm run build and deploy the dist/ folder.Does it include a CMS?
src/content/. No database, no CMS dashboard. For non-technical clients, you can add Keystatic or connect a headless CMS later.