Axial

Live preview ->

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, all pre-written with real content.

Inner pages include four capability pages, an About page with leadership bios and studio locations, a journal with category filters and eight entries, and a contact page with a working enquiry form. Every section reads from one file, src/config/site.ts, so rebranding the theme is a text edit, not a rebuild.

Property	Value
Tier	Pro ($59 regular)
Category	B2B Agency & Creative Studio
Display font	Geist Variable (self-hosted)
Mono font	Geist Mono Variable (self-hosted)
Palette	Ink `#080808` and paper `#f1f1ef`, vermilion selection only
Motion	Lenis smooth scroll plus hand-written scroll logic, no GSAP
Content	Config-driven, no collections
Configuration	Everything lives in `src/config/site.ts`

Included routes

/ - homepage with hero loop, about, selected work, sectors, process orbit, numbers, testimonials, clients, journal strip and final call to action
/about/ - studio story, timeline, leadership bios, studios and direct channels
/capabilities/ and /capabilities/[slug]/ - four expanding panels and four generated detail pages
/newsroom/ and /newsroom/filters/[slug]/ - journal index and two category filters
/newsroom/[slug]/ - eight generated articles and case studies
/contact/, /privacy/, /404
Generated sitemap and robots output

The production build generates 21 static pages.

What makes Axial different

The process orbit - a dial that turns as you scroll, each of five stages snapping into place around an exploded lens image. On mobile it becomes a swipeable slider.
No brand color, on purpose - ink, paper and white. The only chroma is the text-selection color, so photography carries the warmth.
A header that follows the page - every section declares whether it is dark or light and the fixed header re-themes itself as you scroll past.
Motion with a job - the hero words converge, stat cards flip, testimonials stage in line by line, the footer clock ticks. Each movement carries a piece of the pitch, and all of it respects prefers-reduced-motion.
One file for everything - hero words, slides, sectors, process stages, stats, quotes, capability pages, journal stories, team bios, studios, form fields and footer labels all live in src/config/site.ts.

Axial-specific setup

Change the identity and palette

Start in src/config/site.ts. The identity block controls the name, descriptor, legal name, production URL, favicon, theme color and logo. The logo is an inline SVG path by default; set identity.logo.src to an image path to replace it.

The palette lives in src/styles/global.css, in the @theme block and the :root variables:

@theme {
  --color-ink: #080808;
  --color-paper: #f1f1ef;
  --color-accent: #b9402a;
}

The accent only paints text selection. If you introduce it anywhere else, do it sparingly; the monochrome restraint is what makes the photography work.

Edit the homepage

The homepage configuration blocks are:

hero - the two headline words, the video loop or poster, and four metrics
about - heading, two columns and a call to action
capabilities.slides - the selected-work reel
industries.items - the sector slider
process.steps - the five orbit stages and the orbit image
stats.items - the flip cards
testimonials.items, clients.items
newsroom.items - the homepage journal strip (independent of the full journal)
contact - the final call to action

Set hero.video to an empty string to use the poster image instead of the loop.

Edit the capability pages

capabilitiesPage.capabilities holds four entries. Each drives one panel on /capabilities/ and one detail page at /capabilities/<slug>/. The detail block needs the same keys the shipped four have: hero body, overview title and body, overview image, a features heading with six features, and a systems heading with four systems.

Add a journal story

Stories are objects in newsroomPage.items, newest first. Each needs a slug, type, filter (one of newsroomPage.filters[].slug), title, date, dateISO, image, imageAlt and a detail block with author, eyebrow, overview, intro and sections. A story without detail renders newsroomPage.articleDefaults, which is a placeholder, so always write the detail.

/newsroom/ lists everything; each other filter lives at /newsroom/filters/<slug>/.

Edit the About page

aboutPage holds the hero, the timeline items (each with a year, body, image and layout), the leadership people (name, role, image, bio shown in the dialog), the studios (city, country, email, image) and the contact rows.

Connect the contact form

Axial starts in safe demo mode and sends no data. Change contactPage.form.provider to one of:

formspree
formsubmit
netlify
custom
demo

The same block controls the endpoint, method, hidden fields, honeypot, submit label, success message and privacy text. Fields are defined in contactPage.fields. The footer newsletter works the same way through footer.newsletter.

Media

Images live in public/images/agency/ and are referenced through the asset() helper in site.ts. Keep them WebP and under 1700px wide. The hero loop is public/videos/agency-hero-motion-v3.mp4; replace it with a silent loop of similar length or switch to the poster.

Localization

Axial is i18n-ready. English stays the complete source in src/config/site.ts; every other language is an override file that only holds the translated keys, and every route has a twin under src/pages/[locale]/ that builds once a second language is registered. Links inside localized pages carry the language prefix, including the routes map, and <html lang> plus the hreflang alternates follow the page.

Copy src/i18n/locales/template.ts to src/i18n/locales/fr.ts, translate the keys you need (the file mirrors src/config/site.ts), then register the language in src/i18n/config.ts.

Several layouts are sized to the English copy (journal cards, article columns, the contact hero), so check a translated page at desktop and phone widths and shorten where a line wraps.

Step by step, with the checklist: Add a language.

Agent-ready

The theme ships an AGENTS.md at its root, plus a CLAUDE.md that points at it. Claude Code, Cursor, Copilot and Codex read these on open, so an agent starts with the file map, the task routing table, the design invariants worth preserving and the six traps that break this theme silently. You get correct edits on the first pass instead of an agent guessing at the structure.

It covers the data-nav-theme header coupling, the reveal attributes, the pixel-locked layouts, the two class systems, the routes map and the unprocessed public/ folder.

Performance

Axial ships no jQuery, no GSAP and no plugin bundle. Motion is Lenis for smooth scrolling plus one hand-written TypeScript module, src/scripts/axial.ts, that drives the hero convergence, the sliders, the process orbit, the dialogs and the canvases.


Imagery	16 WebP files, 1.6 MB for the whole theme
Hero loop	1.3 MB silent mp4 with a WebP poster fallback
Fonts	Geist and Geist Mono self-hosted, no third-party font request

Everything animated respects prefers-reduced-motion: no smooth scrolling, no reveals, all content visible.