Who is this template for?
Agencies that want their own site to look like their best client work, and developers who have to ship it.
For agencies and studios: a site that looks like your best client work. Warm, editorial, and a little hand-made, with handwritten notes in the margins and a dark mode your visitors can switch to. Your services, case studies with real results, your team, and a blog are all there from day one, so you can launch by replacing the words and the photos.
For developers: a template you can hand to a client without rewriting it first. Changing the copy, the colors, or the navigation takes minutes, and nothing breaks when you remove a section you don’t need. You spend your time on the client’s content, not on figuring out someone else’s code.
Features
Case studies and a blog, ready to publish. Six complete case studies in Markdown, each built from its frontmatter: a facts panel, a sticky sidebar, a photo gallery, highlighted result metrics, and previous/next navigation. Five blog posts in MDX with a featured slot, category filters, tags, author cards tied to your team list, and related posts. A typo in the frontmatter fails the build, not the page.
Dark mode and interactions without a framework. A dark theme that follows the system setting, then a navbar toggle that remembers the choice, with no flash on load. Services as keyboard-navigable tabs with deep links, category filters on projects and blog, a CSS-only FAQ accordion, and a full-screen mobile menu. No animation library and no UI framework, so you can remove any of them cleanly.
Built to be edited. Change your agency name, services, process, team, testimonials, FAQ, or navigation without opening a component. Headlines take an italic accent or the lime highlighter straight from the data. Colors are named by role, so both themes are rethemed from one stylesheet, and a labeled placeholder renders wherever you leave a photo out.
Pages & Sections
Twelve page templates:
- Home: hero with floating stat cards and handwritten annotations, client logos, manifesto, services preview, selected work, about with stats, testimonials, latest posts, closing CTA
- Services: six services as tabs, a four-step process, FAQ, closing CTA
- Projects: case study index in a mosaic grid, with category filters
- Case study: dynamic route generated from Markdown, six written examples included
- About: story, stats, team, values, closing CTA
- Blog: featured post, the full list with category filters, newsletter signup
- Blog post: dynamic route generated from MDX, with an author card and related posts
- Contact: a form with a demo success state, ready for your form endpoint, plus direct contact details and FAQ
- Privacy and Terms: long-form legal pages with structured placeholder sections
- Style guide: your live design system, covering colors, type, labels, buttons, surfaces and motion
- 404: an illustrated page with links back to home and projects
Tech Stack
- Astro 7: latest major version, static output by default
- Tailwind CSS v4 via the Vite plugin, CSS-first configuration
- Markdown and MDX content collections with schema validation
- TypeScript, strict mode
- Four self-hosted font families via the Astro Fonts API, with metric-matched fallbacks
- No client-side framework and no animation library
Additional Highlights
- Complete SEO: meta tags, Open Graph, Twitter cards, canonical URLs, JSON-LD, per-page social images, sitemap, robots.txt
- Accessibility: WCAG AA contrast in both themes, keyboard-navigable menu, tabs and filters, reduced-motion support throughout
- Audited with Lighthouse on the production build: 100 for accessibility and best practices, 100 SEO on every indexable page
- View Transitions for instant navigation without a SPA framework
- Responsive from 375px, tuned for phone, tablet and desktop
- Deploys anywhere that serves static files
- Full source, a documented README, and a commercial license for unlimited personal and client projects
