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.
One payment for Plinth and everything else - all 31 themes, every future release, and the visual builder included.
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;Built to be edited by AI
Plinth ships an AGENTS.md and
a CLAUDE.md at the project root.
Claude Code, Cursor, Copilot, and Codex read them the moment you open the folder.
So your agent starts knowing which file to edit, which design decisions are deliberate, and which parts of the theme break quietly if touched. You get the right change on the first pass instead of a confident guess.
- A task map. Every common request routed to the exact file, so no time is spent exploring.
- Design invariants. The decisions that make the theme worth buying, marked do-not-touch.
- The traps. The specific things that break this theme silently, written down.
- A done checklist. What to build, what to scroll, what to verify before claiming success.
# AGENTS.md - Plinth
## Task map
| The client wants to change | Edit |
|---|---|
| Brand name, logo, favicon | site.ts -> identity |
| Colors | site.ts -> theme |
| Any homepage copy | site.ts -> home.<block> |
| Add a page or an article | new .md in src/content/ |
Rule: copy belongs in site.ts, never inside a component.
## Design invariants
Do not "improve" these. They are why the theme is worth its price.
- The accent stays loud. Do not mute or pastel it.
- Display headings stay oversized. The scale is the design.
## Traps
The things that break this theme silently, written down,
so your agent does not have to discover them by breaking them.
## Before you say you are done
npm run build # must succeed and emit every route
Scroll each page to the bottom. Report what you did not verify.Excerpt. The full file ships with the theme.
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.
More themes from the collection.
August
Personal / Portfolio / SaaS
Slab
SaaS / Startup
Vertex
SaaS / Startup
Tally
SaaS / Startup
Or get every theme - these included - with the All-Access Pass.