Plinth
Editorial Astro theme for architecture studios, interior designers, renovation practices, and spatial creatives. A cinematic scroll-transforming hero, animated portfolio filters, service collections, detailed project pages, refined image interactions, and one-file configuration.
See Plinth in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Plinth is a complete Astro website system for architecture studios, interior designers, renovation practices, and spatial creatives who want their work to feel considered before a visitor reads a single paragraph. Warm stone neutrals, disciplined oversized typography, generous negative space, full-bleed photography, and restrained motion create the atmosphere of a high-end editorial portfolio rather than a generic agency template. The homepage opens with a three-frame architectural hero that contracts and re-composes as the visitor scrolls. Project cards use controlled image crops and directional motion, services reveal photography directly inside the index, and expertise and process cards shift into cinematic interactive states. It ships 21 generated static routes, six project detail pages, six service detail pages, an animated portfolio, about and contact pages, legal pages, a section library, and static SEO output. All buyer-facing content, images, selections, links, forms, project relationships, service capabilities, and SEO values live in src/config/site.ts.
Best Fit For
- Architecture and multidisciplinary design studios
- Interior designers and interior-architecture practices
- Residential, hospitality, workplace, and cultural designers
- Renovation, remodeling, and adaptive-reuse specialists
- Landscape, spatial, and furniture design practices
- Freelance architects and creative studios needing a premium portfolio
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
16 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
Architecture That Moves With the Scroll
The hero begins as three architectural frames and gradually contracts into a composed central image while the copy and side portraits move independently. Lenis smoothing and interpolated progress keep the transition fluid without making the rest of the site feel heavy.
A Real Portfolio and Service System
Plinth includes animated project filters, six detailed case studies, a hover-reactive service directory, and six full service pages. Project relationships and service-to-project selections are explicit, editable, and generated automatically from one configuration file.
Editorial Restraint, Useful Interaction
Warm stone neutrals, Archivo display type, Geist interface copy, immersive Unsplash photography, and precise hover motion create a studio identity that feels premium. Every interaction supports browsing the work instead of competing with it.
Forms, newsletter, and analytics - pre-wired
Plinth is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup - just an email confirmation
- Netlify FormsFree 100/month - Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file
for customization. Change your brand, navigation, form providers, analytics, and section content
without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Plinth-specific page - all live now.