Who is this template for?
Studios that need their thinking to sell the work, and developers who have to ship it.
For studios and agencies: a paper-toned editorial layout with one coral accent, where every case study moves from problem to goal to scope to measured results, and an insights section gives your point of view a home. The whole design system lives in one token block, and a style guide page renders it live, so retheming is a color value away.
For developers: every copy string sits in one of nine typed data files, and every motion effect is its own module. TypeScript strict, and no build config to fight.
Features
Case studies that show results. Four complete case studies in MDX with a 9-component library: numbered chapters, single and paired figures, count-up result metrics, full-bleed testimonials, and a closing CTA. Four insight articles share the same category vocabulary. A typo in the frontmatter fails the build, not the page.
Motion that responds to the reader. A staged hero entrance, per-line text reveals, curtain image reveals, parallax, a scroll-linked process timeline, a services accordion with image push, a draggable client stories carousel, and logo tickers. Each effect is its own module, and you delete one line to remove it.
Built to be edited. Change your studio name, services, process, team, testimonials, or navigation without opening a component. The footer wordmark refits itself to any name. Retheme the entire site from a single @theme block: colors, type scale, spacing, and motion easing all flow from there.
Pages & Sections
Eleven page templates:
- Home: hero with an animated signal grid, studio intro with stats, client logo tickers, selected work with a flagship case, services accordion, client stories carousel, process timeline, latest insights, closing CTA
- Work: case study index, newest first
- Case study: dynamic route generated from MDX, four written examples included
- Insights: featured article plus the full list
- Insight article: dynamic route generated from MDX, with three more insights at the foot
- About: hero with studio facts, image band, manifesto, practices, a year-by-year ledger, team, who it's for (and who it isn't), closing CTA
- Contact: details, socials, and a form with sending, success and error states, ready for your form endpoint
- Privacy and Terms: long-form legal pages with a sticky table of contents
- Style guide: your live design system, covering colors, type, components, motion and case-study components
- 404: with a route index so nobody dead-ends
Tech Stack
- Astro 7: latest major version, static output by default
- Tailwind CSS v4 via the Vite plugin, CSS-first configuration
- GSAP 3 + ScrollTrigger + SplitText for scroll-driven motion
- Lenis for smooth scrolling
- MDX content collections with schema validation
- TypeScript, strict mode
- Two self-hosted font families via the Astro Fonts API, with metric-adjusted fallbacks
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 on every text token, keyboard-navigable menu with focus trap, 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
