Art Gallery Website Template
Demo brand: KOLM · Contemporary gallery · 15 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this art gallery website template
A complete site for a contemporary gallery: fifteen built routes covering seven individual exhibition pages, an artists index, a visit page and a wired notes journal.
It is a curatorial white cube — warm white and ink, four rendered colours, no accent, zero texture. This is the catalog’s one deliberately quiet build: every channel held down, nothing loud. Restraint is the position, and a gallery is the one business where restraint is the most expensive thing you can show.
The signature move is the hang. A pinned horizontal room-walk renders every painting at its true size from real centimetres on a fixed 155 cm eye line — a 90px study hangs beside a 720px canvas, at the ratio they would have on the wall. Nothing else on the web shows scale honestly, which is why a gallery site usually flattens a whole programme into identical thumbnails.
The 15 pages you get
- Home
/ - The room-walk at true scale, the current programme, and the visit close.
- Programme
/program/ - Every exhibition, past and present — the index a curator or collector arrives looking for.
- Seven exhibition pages
/program/… - First Hang, Nine Grays, Black Paintings, Second Nature, Slow Ground, Surface Tension, Works on Paper. Each a full route, so every show has a permanent, linkable page.
- Artists
/artists/ - The represented roster — the other half of what a gallery is judged on.
- Plan a visit
/visit/ - Hours, address, access, and a walk-through booking path via mailto:.
- Notes
/blog/ - A wired content collection for curatorial writing — add an .mdx file and it appears here and in the sitemap.
- One worked note
/blog/the-150-line/ - A long-form piece on the 150 line, carrying the full editorial component set.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- Works rendered at true size from real centimetre dimensions on a fixed 155 cm eye line — a study and a large canvas keep their actual ratio
- Pinned horizontal room-walk, so scrolling moves you along a wall rather than down a list
- Seven permanent exhibition routes, which is how a gallery accumulates the archive that collectors and writers link to
- No accent colour, no texture, no shadow — four rendered colours in the whole build, held on purpose
- Le Murmure for display against Switzer for text, both self-hosted
- Twenty images wired through the true-size system; add a work with its real dimensions and it hangs correctly
- 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
- Curatorial white cube. Warm white and ink, four rendered colours, no accent, zero texture.
- The mechanic
- The hang. A pinned horizontal room-walk where every painting renders at its true size from real centimetres on a 155 cm eye line — a 90px study beside a 720px canvas.
- Loud channel
- All four held quiet
- Imagery. Works at true size
- Type & palette
- Le Murmure · Switzer
-
#fbfbf9#111111#6f6c66 - The control case
- Restraint-led: the catalog’s first deliberately quiet page.
Who it is for
Built for contemporary galleries, project spaces, artist-run initiatives and independent curators — and the studios that build for them. It suits a gallery whose programme is the pitch. If you sell prints and need a shop, this is not that; the ecommerce build is.
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
What do I have to enter for a work to hang correctly?
Its real dimensions in centimetres. The layout does the rest — the eye line is fixed at 155 cm and every work is scaled from its actual size, so a 30 cm study and a 200 cm canvas sit together the way they would in the room.
There is no accent colour at all. Can I add one?
You can, and the palette is one @theme block. But the absence is the design: this is the one build in the catalog that holds every channel quiet, and adding a brand colour turns it into an ordinary white-cube theme. Consider it a decision rather than an omission.
Does it handle sales or enquiries on a work?
Enquiries, yes — via a working mailto: path including a walk-through booking link. Transactions, no. Galleries close on a conversation, and a buy button on a painting reads wrong in this register.
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.
