AstroRise · Scale is a complete, bilingual (English + Japanese) marketing site for a product or startup — home, pricing, blog with search, docs, changelog, customer stories, careers, integrations, comparison, waitlist, contact, and legal pages, plus a component showcase, a roadmap, and a quality catalog — all in both locales.
What makes it different is the layer underneath the design: machine-checkable guardrails. Most templates hand you components and wish you luck. This one hands you a build that fails when the site regresses — which is exactly what you want when you (or an AI coding agent) start rewriting copy, swapping colors, and adding pages.
Guardrails, not just components
One command — <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">pnpm harness:template</code> — runs 34 automated checks across 5 categories (source, build, artifacts, SEO, assets) before your site ships. Among them:
- Architecture — trips if static output or the zero-framework rule regresses
- i18n — every translation key exists in both locales; untranslated prose is flagged
- Accessibility — WCAG AA contrast resolved for every accent × light/dark pairing; focus rings checked at 3:1
- Typography — every type token is a rem-bounded <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">clamp()</code>, so user font-size and zoom stay safe
- SEO & structured data — sitemap, RSS, JSON-LD, canonical URLs, robots policy
- Consistency — one description per entry, verified identical across <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);"><meta></code>, JSON-LD, and RSS
- Budgets — image and font weight held to a ceiling
- Launch readiness — a production build fails while template branding or placeholder content is still in place
Named profiles let you choose the strictness: <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">template</code> for daily work, <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">preview</code> for content review, <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">fork</code> for the final pre-launch pass on your real domain.
Bilingual by construction, not by plugin
Page copy lives in typed per-locale modules (<code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">src/i18n/en</code>, <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">src/i18n/ja</code>), so each language can be written rather than machine-translated — the Japanese copy here is authored, not converted. Japanese pages add a scoped typography layer (strict line-breaking, tuned tracking, <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">palt</code> on headings only) and Latin glyphs stay on the self-hosted Inter subset, so no multi-megabyte CJK webfont ships. Pagefind search works in Japanese too. Don't need two languages? Delete a directory.
Built for AI coding agents
- <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">AGENTS.md</code> / <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">CLAUDE.md</code> carry the architecture constraints agents must hold
- Customization recipes and a route → source-file surface map, so an agent knows which files a page actually reads
- <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">pnpm fork:rebrand <YourBrand></code> — a dry-run-first codemod, plus an honest residue report of what it deliberately did not touch
- <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">pnpm fork:prune-demo</code> — remove the sample content when you're done borrowing it
What's in the box
- Astro 6 + Tailwind CSS v4, <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">output: 'static'</code> — no server runtime, deploy anywhere
- No UI framework. Interactivity is vanilla JS and custom elements; core pages still render with JavaScript disabled
- Pagefind full-text search with tag filtering, including CJK
- Content collections for blog, docs, changelog, customers, careers, and integrations — typed, schema-validated
- SEO & answer-engine surfaces: sitemap, RSS, JSON-LD, build-time OG images, <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">robots.txt</code>, <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">llms.txt</code>, and <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">.md</code> twins of your blog, docs, and changelog for LLM consumption
- Design system: light/dark themes, two visual presets (precision and expressive) you can preview in-page, token-driven colors and type
- Forms that work on static hosting — plain HTML POST to a Formspree-style endpoint; unconfigured forms render as honest, non-submitting demos instead of faking a success
- Tests included: 150 end-to-end tests, 164 JavaScript-disabled browser gates, and 13 visual baselines — with axe accessibility assertions across light and dark
Requirements
Node 22.12+ and pnpm 10.6. Deploy to Cloudflare Pages, Netlify, Vercel, GitHub Pages, or any static host: build command <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">pnpm build</code>, output <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">dist</code>, one <code style="color: rgb(225, 224, 217); background-color: rgba(255, 255, 255, 0.08);">SITE_URL</code> environment variable.
License
Commercial license, one developer. Build unlimited personal, commercial, and client sites with it; you may not redistribute the template itself or ship a competing template product.
