Axial
Astro 7 theme for independent agencies, B2B studios and creative consultancies, built with Tailwind CSS 4 and Lenis. A full-bleed hero video, a scroll-driven process orbit, capability pages and a journal with case studies, all edited from one configuration file.
One payment for Axial and everything else - all 31 themes, every future release, and the visual builder included.
See Axial in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Axial is an Astro 7 theme for independent agencies, B2B studios and creative consultancies, built with Tailwind CSS 4, TypeScript and Lenis for smooth scrolling. The homepage ships with a full-bleed hero video, a selected-work reel, a five-stage process shown as a scroll-driven dial around an exploded lens, flip stat cards, a testimonial slider and a client logo strip. Inner pages include four capability pages, an About page with leadership bios and studio locations, a journal with category filters and eight pre-written entries, and a contact page with a working enquiry form. Every section reads from one file, src/config/site.ts: copy, images, slides, stats, capability pages, journal stories, team bios and form fields, so rebranding the theme is a text edit, not a rebuild. Axial also ships a locale-aware config layer, so adding a language is one override file, and an AGENTS.md that tells a coding agent like Claude Code or Cursor exactly which files to edit and which decisions to leave alone.
Best Fit For
- Independent strategy, design and digital agencies
- B2B brand and creative consultancies
- Product and design studios with a small senior team
- Campaign and content studios that need case studies
- Consultancies that publish a point of view
- Any studio that wants a journal, capabilities and a contact funnel in one site
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
17 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
Motion That Explains the Studio
The process orbit is the section people remember: a dial that turns as you scroll, each stage snapping into place around an exploded lens. Stat cards flip, testimonials stage in line by line, the hero words slide together. None of it is decoration; each movement carries a piece of the pitch.
No Brand Color, On Purpose
Ink, paper and white. The only chroma in the theme is the text-selection color, so the client work and studio photography carry the color instead of a template palette.
Everything Edits From One File
Hero words, slides, sectors, process stages, stats, quotes, client names, capability pages, journal stories, team bios, studios, contact rows, form fields and footer labels all live in src/config/site.ts. A non-developer can rebrand the whole site without opening a component.
Ready for a Second Language and for Agents
Every route has a localized twin and every internal link carries the language prefix, so adding French is one override file. AGENTS.md maps the repo, routes tasks to the right config block and names the six things that break the design silently, so an AI assistant gets it right on the first pass.
Forms, newsletter, and analytics - pre-wired
Axial is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup - just an email confirmation
- Netlify FormsFree 100/month - Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file
for customization. Change your brand, navigation, form providers, analytics, and section content
without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Built to be edited by AI
Axial ships an AGENTS.md and
a CLAUDE.md at the project root.
Claude Code, Cursor, Copilot, and Codex read them the moment you open the folder.
So your agent starts knowing which file to edit, which design decisions are deliberate, and which parts of the theme break quietly if touched. You get the right change on the first pass instead of a confident guess.
- A task map. Every common request routed to the exact file, so no time is spent exploring.
- Design invariants. The decisions that make the theme worth buying, marked do-not-touch.
- The traps. The specific things that break this theme silently, written down.
- A done checklist. What to build, what to scroll, what to verify before claiming success.
# AGENTS.md - Axial
## Task map
| The client wants to change | Edit |
|---|---|
| Brand name, logo, favicon | site.ts -> identity |
| Colors | site.ts -> theme |
| Any homepage copy | site.ts -> home.<block> |
| Add a page or an article | new .md in src/content/ |
Rule: copy belongs in site.ts, never inside a component.
## Design invariants
Do not "improve" these. They are why the theme is worth its price.
- The accent stays loud. Do not mute or pastel it.
- Display headings stay oversized. The scale is the design.
## Traps
The things that break this theme silently, written down,
so your agent does not have to discover them by breaking them.
## Before you say you are done
npm run build # must succeed and emit every route
Scroll each page to the bottom. Report what you did not verify.Excerpt. The full file ships with the theme.
Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Axial-specific page - all live now.
More themes from the collection.
Falcon
Agency / Portfolio / Blog
August
Personal / Portfolio / SaaS
Slab
SaaS / Startup
Vertex
SaaS / Startup
Or get every theme - these included - with the All-Access Pass.