Theme first
Global tokens define the palette, typography, radii, surfaces, and dark mode before pages start to multiply.
Start with a documented visual system, a ready Blog foundation, and generic sample content that is safe to replace with your own.
Theme console
tokens stay readable
primary
--color-primary
canvas
--color-bg-primary
accent
--color-accent
dark
--color-bg-primary-dark
starter routes
Global tokens define the palette, typography, radii, surfaces, and dark mode before pages start to multiply.
The design notes are part of the template, so human builders and AI agents can follow the same visual rules.
MDX posts, RSS, pagination, article layout, table of contents, and image handling are already wired.
Buttons, badges, cards, typography, motion, form controls, and layout primitives live in one reference page.
This starter is intentionally quiet: it gives you a polished visual system, a content layer, and a component reference. Your app, brand, product screenshots, and copy can take over from there.
Edit src/config/site.js
Tune colors in global.css and themes.css
Write MDX in src/content/post
Build from the Elements reference
Why this starter begins with a theme, a documented design system, and a small public route surface.
Use DESIGN.md as the shared design contract for humans, AI agents, and future contributors.
Clone the starter, keep the design language, and replace the sample writing with your own project structure and content.
A generic Astro 7 starter with Blog, DESIGN.md, Elements, Tailwind CSS v4, MDX, and a reusable theme system.
© 2026 · Released under the MIT License.