Agency Website Template
Demo brand: VOLTA & CO. · Creative agency · 12 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this agency website template
A complete agency site: twelve built routes covering five individual case-study pages, a studio page, contact, and a journal.
Near-black with signal orange, Anton condensed at display scale against Space Grotesk. The type is the loud channel — one enormous condensed face doing all the shouting so the palette can stay at two colours and a signal.
The signature move is the ignition. A pinned horizontal work-sweep runs as you scroll, and project titles ignite letter by letter as they cross a fixed reading line. The line does not move; the work moves through it. It is the mechanic version of what an agency claims to do, which is make things impossible to ignore at the moment of attention.
The 12 pages you get
- Home
/ - The ignition sweep, the positioning, and the contact close.
- Work
/work/ - The horizontal case-study sweep — five projects crossing the reading line.
- Five case-study pages
/work/… - Afterlight, Atlas Studio, Nova Robotics, Field Press, Pulse Festival. Each a full route, so every project can be linked, shared and found on its own.
- Studio
/studio/ - Who the agency is and how it works. The page that decides whether a client believes the work is repeatable.
- Contact
/contact/ - A working enquiry form plus a live tel:, and a separate jobs mailto: so hiring does not pollute new business.
- Journal
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- One worked article
/blog/one-loud-thing/ - One Loud Thing: how we decide what a page is allowed to shout. The studio’s method, written as a post.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A pinned horizontal work-sweep with titles igniting letter by letter as they cross a fixed reading line
- Five full case-study routes rather than a scrolling reel, which is what lets individual projects earn links
- Anton condensed at display scale against Space Grotesk, both self-hosted
- Separate new-business and jobs contact paths, so recruitment enquiries stop landing in the pitch inbox
- Near-black with a single signal orange — two colours and a highlight, held to that
- Almost no stock photography; the type and the motion carry the page, which means no shoot before launch
- Vitest and Playwright suites included in the repository
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Dark cinematic. Near-black with signal orange and a condensed display face.
- The mechanic
- The ignition. A pinned horizontal work-sweep where titles ignite letter by letter as they cross a fixed reading line.
- Loud channel
- Display type
- Imagery. One image, orange-lit
- Type & palette
- Anton · Space Grotesk
-
#0c0c0d#f4f0e8#ff4d1c
Who it is for
Built for creative agencies, brand studios and production companies that sell on confidence. It suits a shop with five strong projects and a point of view. For a quieter design practice where the work is delicate rather than loud, the portfolio build is the same quality in the opposite register.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Can I add more than five projects?
Yes — projects are routes generated from data and the horizontal sweep scrubs to whatever length you give it. Five is an editorial choice in the demo, not a ceiling.
The display face is very loud. Can I tone it down?
You can swap the family in one @theme block. But be clear about what you are buying: this build is loud in exactly one channel and quiet in the other three. Softening the type without adding loudness somewhere else leaves you with a very dark, very plain site.
Why two contact addresses?
Because an agency that publishes one address gets its new-business inbox filled with job applications. Separating them costs nothing and saves the pitch email.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More studios & agencies templates
Roomtone Recording
Recording studio
Loud
Moving set-piece
BRANTHOLM
Photographer / creative portfolio
Loud
Imagery
DUNARROW
Architecture studio
Loud
Imagery
HULVER STUDIO
Interior design studio
Loud
Palette