Developer Website Template
Demo brand: BELLWETHER · Developer tool / CI test selection · 11 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this developer website template
A complete marketing site for a developer tool: eleven built routes covering the product, pricing, install notes, an about page, a two-post writing section, contact and real terms.
Dimmed graphite, with type as the loud channel carried by weight rather than by scale. Five tokens in the whole build and one amber, spent only on price and CTA. Onest against JetBrains Mono. It is the register developers trust, which is to say it looks like documentation that happens to be well set.
The signature move is an argument the product actually makes. Test selection is a partition, not a reduction: 45 tests stay 45 after 8 are picked. Scroll cross-fades weight from 300 to 700 — nothing is removed, nothing moves. The control case is a change to Dockerfile.base, upstream of every test, so nothing is skipped and the separation is zero. Drawn, not labelled.
The 11 pages you get
- Home
/ - The partition set-piece, the claim, and the install close.
- How it picks tests
/product/ - The mechanism, explained. For a developer tool this is the page that sells, not the home page.
- Pricing
/pricing/ - Tiers and limits, with the one amber accent in the build spent here.
- Install notes
/docs/ - How to get it running. The route a developer opens before they decide anything.
- About
/about/ - Who builds it. Developer tools are bought partly on whether the team looks like it will still exist next year.
- Contact
/contact/ - A working form plus live tel: and mailto: paths.
- Writing
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/blog/… - Coverage tells you what ran, not what mattered; what a red build is worth once nobody believes it. Both are product arguments, written as engineering posts.
- Terms
/terms/ - A real legal route.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A set-piece that partitions rather than reduces — 45 items stay 45 as 8 are selected, by weight cross-fade alone, with nothing removed or moved
- A declared control: an upstream change where nothing is skipped and the separation is zero
- Type loud by weight instead of by scale, which is how a technical page stays readable while still having a voice
- Five colour tokens in the entire build, with the single amber reserved for price and CTA
- An install-notes route, because a developer tool that hides its setup behind a demo booking loses the evaluation
- Onest with JetBrains Mono, both self-hosted; a working contact form plus tel: and mailto:
- 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 62 different worlds reading as one design system in different paint.
- The world
- Dimmed graphite. Type is the loud channel, carried by weight not scale; five tokens only, one amber spent on price and CTA.
- The mechanic
- "The Selection Reads Down": test selection is a partition, not a reduction. 45 tests stay 45 after 8 are picked; scroll cross-fades weight 300 to 700, nothing is removed or moved.
- Loud channel
- Display type
- Imagery. One ink, eight steps
- Type & palette
- Onest · JetBrains Mono
-
#3d3d40#f0f1f2#f2a53a - The control case
- A change to Dockerfile.base, upstream of every test, so nothing is skipped and the separation is zero. Drawn, not labelled.
Who it is for
Built for developer tools, CLI products, CI and infrastructure companies selling to engineers. It suits a product whose pitch is a technical claim that can be demonstrated. For a broader B2B SaaS with a security-review sale, the saas-platform build has the policy and limits pages; for an SMB app, the startup one.
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
Why does the set-piece insist nothing is removed?
Because that is the product’s actual claim, and the usual animation — items fading out to leave a short list — would misrepresent it. A partition keeps every test visible and changes only its weight. The set-piece is the argument, so it has to be honest.
Is it only for CI tooling?
The structure — product, pricing, docs, about, writing — fits any developer tool. The partition set-piece is specific to selection problems, which is a larger class than CI: search ranking, feature flagging, sampling, alert routing.
Where do real docs go?
The install-notes route is marketing-side setup. Full documentation normally lives on its own subdomain or in a docs generator, and the template links out rather than pretending to be a docs site.
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 software & saas templates
WRACKLINE
Tide prediction app
Loud
Moving set-piece
MIDSHIFT
Shift scheduling app
Loud
Display type
FENWRIGHT
Deterministic log replay
Loud
Moving set-piece
KELVERN
Payments / money movement
Loud
Moving set-piece
HALVARD
Analytics / operations dashboard
Loud
Moving set-piece