Plinth

Live preview ->

Plinth is a complete website system for architecture studios, interior designers, renovation practices, and spatial creatives. Warm stone neutrals, disciplined oversized typography, generous negative space, full-bleed photography, and restrained motion give it the atmosphere of a high-end editorial portfolio.

The demo is written for a multidisciplinary architecture and interiors practice, but the same structure also works for residential designers, hospitality studios, workplace specialists, adaptive-reuse practices, landscape designers, furniture studios, and independent architects.

Property	Value
Tier	Pro ($49 launch / $59 reg.)
Category	Architecture / Interior Design
Display font	Archivo Variable
Interface font	Geist Variable
Palette	Warm stone, soft paper, charcoal, and clay
Photography	Centralized Unsplash URLs
Configuration	Buyer-facing content lives in `src/config/site.ts`

Included routes

/ - ten-section homepage with a scroll-transforming hero, studio introduction, proof marquee, projects, services, expertise, process, testimonials, editorial CTA, and inquiry form
/about/ - studio positioning, values, and photography
/projects/ - filterable project portfolio
/projects/[slug]/ - six generated project detail pages
/services/ - complete service directory
/services/[slug]/ - six generated service detail pages
/contact/ - configurable project inquiry
/sections/ - reusable composition and interface overview
/privacy/, /terms/, and /404
Generated sitemap and robots output

What makes Plinth different

The hero is a spatial composition, not a static banner - three architectural frames contract and re-compose as the visitor scrolls, with independent copy and portrait movement.
Projects behave like a real portfolio - All, Residential, and Commercial filters animate between states while cards use controlled image zoom, crop motion, and directional interactions.
Services are full content objects - each hover-reactive index row opens a generated detail page with an editorial statement, multiple paragraphs, capability list, selected projects, inquiry CTA, and next-service navigation.
Project pages support deeper stories - every project can have multiple introductory paragraphs, facts, a gallery, and explicitly selected related work.
Content stays centralized - identity, navigation, copy, projects, services, images, relationships, forms, page metadata, legal copy, accessibility labels, and SEO all live in src/config/site.ts.
Motion is deliberate and accessible - Lenis smooths wheel input, viewport reveals and hover states are lightweight, and prefers-reduced-motion receives a clear static fallback.

Plinth-specific setup

Change the studio identity

Start in src/config/site.ts:

name: "Your Studio",
legalName: "Your Studio",
shortName: "Studio",
tagline: "Architecture shaped around everyday life.",
url: "https://example.com",

The same file controls the favicon, language, locale, theme color, contact details, navigation, footer, accessibility labels, and default SEO values.

Replace the hero and homepage content

The hero block controls:

heading and supporting copy
primary and secondary calls to action
the main architectural image and alt text
the two portrait images introduced during the scroll transformation

The remaining homepage blocks are intro, proof, featuredProjects, services, expertise, process, testimonials, quoteBanner, and contact. Reorder or remove their components in src/pages/index.astro if your studio needs a shorter homepage.

Add or edit projects

Project detail pages are generated from siteConfig.projects. A project can define:

{
  slug: "courtyard-house",
  title: "Courtyard House",
  category: "Residential Architecture",
  location: "Copenhagen, 2026",
  year: "2026",
  intro: "A calm home organized around daylight and landscape.",
  description: [
    "The first paragraph of the project story.",
    "A second paragraph for materials, planning, or context.",
  ],
  image: unsplash("photo-id", 1200, 1500),
  alt: "Courtyard house surrounded by a planted garden",
  gallery: [/* image URLs */],
  details: {
    client: "Private residence",
    budget: "Example budget",
    services: "Architecture & interiors",
    area: "320 m²",
  },
  relatedProjectSlugs: ["another-project"],
}

Adding a configured project creates /projects/courtyard-house/ on the next build. featuredProjects.projectSlugs determines the homepage order, and each project’s relatedProjectSlugs explicitly controls the related-work section.

The filter labels live in pages.projects.filters. The built-in filtering recognizes Residential and Commercial project categories; update the filter logic in the projects page if you introduce a different taxonomy.

Add or edit services

Service index rows and detail pages come from siteConfig.services.items. Each service can define:

slug, title, and short index description
editorial statement
multiple body paragraphs
capability list
image and descriptive alt text
related project slugs

Adding an item creates its /services/[slug]/ route during the next build. Reorder the array to change the directory and next-service sequence. The projectSlugs array controls the work selected for that service page.

Replace the photography

All demo photography is centralized in src/config/site.ts. The helper at the top of the file keeps Unsplash dimensions, crops, and quality consistent:

const unsplash = (id: string, width = 1600, height = 1100) =>
  `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${width}&h=${height}&q=86`;

Replace a photo ID, use another remote image URL, or point a field to a local file in public/. Keep every alt-text field accurate when the corresponding image changes.

Adjust typography, color, and motion

Core design tokens live under :root in src/styles/global.css. This includes the warm neutral palette, frame width, radii, type scale, spacing, and easing values.

Archivo Variable handles display typography and Geist Variable handles body and interface copy. Both are self-hosted through Fontsource.

The runtime in src/layouts/Layout.astro manages Lenis scrolling, interpolated hero progress, viewport reveals, project filtering, testimonials, navigation, and demo form confirmation. CSS supplies the continuous marquees and card-specific hover treatments. Preserve the existing reduced-motion branch when adapting these effects.

Connect the inquiry form

Plinth ships in local demo mode:

forms: {
  provider: "demo",
  contactAction: "#",
  contactMethod: "post",
}

Replace contactAction with your provider or backend endpoint. The editable fields, labels, submit text, confirmation text, phone, email, and studio address live in the contact block.

What’s next

Configure -> site.ts - identity, navigation, content, projects, services, images, forms, page metadata, and SEO.
Customize -> Brand colors & fonts - adapt Plinth’s warm neutral palette and Archivo/Geist system.
Customize -> Pages - change routes or rearrange homepage sections.
Deploy -> Cloudflare Pages - publish the static build to Cloudflare Pages.