New: studio and agency theme for Astro and Next.js + Sanity
Offset
The site for your design studio or agency, built around the work: case studies, services, the team and a journal. In two editions, Astro or Next.js with a Sanity Studio. 26 pages, 24 sections and 3 presets, light and dark, WCAG 2.2 AA.
Pay once · Both editions · Lifetime updates
- 26
- pages
- 24
- sections
- 3
- presets
- 2
- editions, one license
- 0
- axe violations
- 13
- screen widths checked
Home, work, case studies, services, studio and journal, ready for your work.
Every page as it ships, with the invented studio Corvel. Switch to dark to see the other mode, and click a page to see all of it.
As considered on a phone.
Every page is checked at phone width in both modes, with its own smaller type and spacing. Case studies keep their facts, gallery and outcomes readable at 320 pixels, and the menu works from the keyboard.
Two editions, one license
Static files or a Studio. Same design.
Both editions render the same pages from the same sections and presets, so you choose by who edits the site, not by how it looks. Your license includes both.
- Framework
- AstroAstro 7, static output
- Next.js + SanityNext.js 16, App Router and React Server Components
- Content
- AstroMarkdown and MDX in typed collections; page copy in typed data files
- Next.js + SanitySanity Studio with a page builder: pages are stacks of 26 section types, each with its layouts and tones
- Case studies
- AstroOne MDX file per project: the front matter fills the card and case header, the body is the story
- Next.js + SanityA project document per case study: facts, outcomes, quote, gallery and the story as rich text
- Journal posts
- AstroMarkdown or MDX, with figures, tables and highlighted code
- Next.js + SanityRich text: headings, lists, quotes, links, captioned images, tables and highlighted code
- Demo content
- AstroIn the repository
- Next.js + SanityA seed script imports every page, project, post and image into your dataset
- Publishing
- AstroRebuild and deploy
- Next.js + SanityPages generated ahead of time, refreshed within a minute or at once with the publish webhook
- Preview
- Astropnpm dev
- Next.js + SanityDrafts beside the form in the Studio’s Presentation tool
- Forms
- AstroAn optional Cloudflare Worker that fails closed, or any form service
- Next.js + SanityA Route Handler that forwards to your endpoint and fails closed
- JavaScript
- AstroSmall inline scripts: the mobile menu, the light/dark switch, the announcement bar, the logo strip’s pause button and sections that rise in
- Next.js + SanityThe same small parts as client components; every page renders on the server
- Lighthouse, mobile
- Astro96–97
- Next.js + Sanity95
- Deploys to
- AstroCloudflare Workers, Netlify, Vercel or any static host
- Next.js + SanityVercel, or Cloudflare Workers through OpenNext
- Repository
- Astrothemesdev/offset-astro
- Next.js + Sanitythemesdev/offset-next
| Aspect | Astro | Next.js + Sanity |
|---|---|---|
| Framework | Astro 7, static output | Next.js 16, App Router and React Server Components |
| Content | Markdown and MDX in typed collections; page copy in typed data files | Sanity Studio with a page builder: pages are stacks of 26 section types, each with its layouts and tones |
| Case studies | One MDX file per project: the front matter fills the card and case header, the body is the story | A project document per case study: facts, outcomes, quote, gallery and the story as rich text |
| Journal posts | Markdown or MDX, with figures, tables and highlighted code | Rich text: headings, lists, quotes, links, captioned images, tables and highlighted code |
| Demo content | In the repository | A seed script imports every page, project, post and image into your dataset |
| Publishing | Rebuild and deploy | Pages generated ahead of time, refreshed within a minute or at once with the publish webhook |
| Preview | pnpm dev | Drafts beside the form in the Studio’s Presentation tool |
| Forms | An optional Cloudflare Worker that fails closed, or any form service | A Route Handler that forwards to your endpoint and fails closed |
| JavaScript | Small inline scripts: the mobile menu, the light/dark switch, the announcement bar, the logo strip’s pause button and sections that rise in | The same small parts as client components; every page renders on the server |
| Lighthouse, mobile | 96–97 | 95 |
| Deploys to | Cloudflare Workers, Netlify, Vercel or any static host | Vercel, or Cloudflare Workers through OpenNext |
| Repository | themesdev/offset-astro | themesdev/offset-next |
What's inside
26 pages from 24 sections.
Each page is a short list of sections: hero, work, services, case header, gallery, figures, team, timeline, FAQ, form and the rest. Every section takes a layout and a tone, so a new page is a matter of picking and filling, in code or in the Studio.
- Home
- A large statement, selected work, a logo strip that moves slowly (with a pause button), services, figures, a client quote and a closing call.
- Work
- Every project as a card with client, year and services, in the order you set.
- Case studies
- One page per project: a case header with the facts, the story in a readable column, a gallery, the outcomes in figures, the client’s quote and the next two projects. Eight in the demo.
- Services
- Disciplines with their deliverables, how a project runs, and an FAQ.
- Studio
- Story, figures, values, team, a timeline and open roles.
- Journal
- An index with pagination, and seven posts with reading time, author box and related posts.
- Contact
- A form beside the studio addresses, with a honeypot against bots, and an FAQ.
- Privacy, terms, thank-you and 404
- Sample legal texts for the demo studio, marked as samples until you replace them, and the pages forms and lost visitors land on.
Three looks, one line apart.
Everything a section draws comes from the preset’s tokens: colours, type, space and corners. Switch the import and the whole site changes, contrast checked in every mode. Your projects’ images stay as they are.
Checked, not promised
Accessible and fast, page by page.
These checks ran on every page of both editions, in light and dark, at desktop and phone widths.
- WCAG 2.2 AA
- Zero axe violations on all 26 pages, in light and dark, at desktop and phone widths. Every preset’s colours are checked for contrast in every mode and tone. The moving logo strip has a pause button, and with reduced motion nothing moves.
- Fast on a phone
- Lighthouse performance on mobile: 96–97 for the Astro edition, 95 for Next.js, and 100 for accessibility, best practices and SEO. Self-hosted fonts, only the Latin files, preloaded.
- Checked at 13 widths
- Every page measured from 320 to 1920 pixels: no sideways scrolling, no clipped text, and no rows of three that break into two and one on a tablet.
- Forms that fail closed
- Contact and newsletter forms post without JavaScript, carry a honeypot against bots, and refuse submissions until you connect a destination. Nothing visitors send is logged.
- SEO done
- Titles, canonical links, Open Graph images drawn for every page and post, JSON-LD, a sitemap, robots.txt and an RSS feed.
- Design rules, checked
- Colours only from the preset, images with alt text and a size: pnpm lint holds every page to it, yours included.
Delivery
A zip, or straight from GitHub.
Download both editions from your account, or connect GitHub and get read access to the private repositories. Each release is one tagged commit, so updating is a pull.
$ git clone git@github.com:themesdev/offset-next.git
$ cd offset-next && pnpm install
$ pnpm dev # the demo content, until you connect Sanity
$ pnpm seed # then import it into your own dataset- 01Buy a licensePay once. The license belongs to your organisation; owners and admins hand out the seats.
- 02Connect GitHubIn your account, sign in with GitHub once. We learn only your username, and invite it read-only to both repositories.
- 03Pull updatesUpdates are free for life. Access follows your license, and the zip stays in your account next to it.
Pay once. Both editions.
Unlimited projects, private, commercial and for clients, with every future update of both editions. Prices exclude VAT; we sell to businesses. License details
What's new
Updates for both editions, free.
v1.0.1
Latest
Documentation only; no change to pages, sections or styles.
Astro
- README: lists every script that runs in the browser (the light/dark switch, the logo strip's pause button and the sections that rise in were missing), explains how the light/dark switch remembers a choice and how to remove it, and adds a Motion section: the marquee logo strip and the reveal, and that reduced motion stops both.
Next.js + Sanity
- README: lists every script that runs in the browser (the light/dark switch, the logo strip's pause button and the sections that rise in were missing), explains how the light/dark switch remembers a choice and how to remove it, and adds a Motion section: the marquee logo strip and the reveal, and that reduced motion stops both.
Questions
Do I get both editions?
Yes. Offset is one product: every license includes the Astro theme and the Next.js + Sanity edition, as a zip and as two private GitHub repositories. Use either or both in any project your license covers.
Which edition should I use?
The Astro edition if you keep the case studies and journal yourself, in Markdown files, and want plain static HTML on any host. The Next.js + Sanity edition if the studio’s team adds the work: they get a Studio with a page builder and a live preview, and nobody touches code to publish a project.
Do I need a paid Sanity plan?
No. Sanity’s free plan is enough for this theme. The README walks you through the project, tokens and the seed script in about ten minutes.
How does the GitHub access work?
In your themes.dev account, connect your GitHub account once by signing in with GitHub. You then get a read-only invitation to themesdev/offset-astro and themesdev/offset-next. Every release is a tagged commit there. Access follows your license: a seat you lose or a refund ends it. The zip stays in your account either way.
Can I build sites for clients with it?
Yes, in unlimited projects. A site you build with Offset for a client is theirs: they may own, host, edit and keep running it without a license of their own. They may not take Offset out of that site to build other sites.
Can I see it before buying?
Yes. The live demo is the Astro edition with every page, and the screenshots on this page show them in light and dark. The demo studio, Corvel, and everything in it are invented: clients, projects, people and figures, and every image was drawn for the theme.
Can I use my own images and colours?
Yes, that is the idea. The theme’s frames, rules and type stay neutral so your projects bring the colour. Replace the drawn demo images with your own work, or switch to the Riso or Night preset, or change the tokens in one file.
Do you charge VAT?
We sell to businesses. Dutch businesses pay 21% VAT; businesses elsewhere in the EU with a valid VAT number pay none (reverse charge); outside the EU there is no Dutch VAT. You get a proper invoice by email.
Is Offset an official Astro, Next.js or Sanity product?
No. Offset is made by themes.dev and builds on the open-source Astro, Next.js, Tailwind CSS and Sanity projects; it is not affiliated with them.
Show your work on Offset.
From €49 for one person to €349 for your whole company. Both editions, pay once, lifetime updates.