Design-led starterAstro + Blog + Elements

A clean Astro starter shaped by a real design system

Start with a documented visual system, a ready Blog foundation, and generic sample content that is safe to replace with your own.

ricoui-astro-starter.vercel.app

Theme console

tokens stay readable

v1.0

primary

--color-primary

canvas

--color-bg-primary

accent

--color-accent

dark

--color-bg-primary-dark

starter routes

/
/blog
/design
/elements

Pure starter surface

The template keeps the useful parts visible and removes product-specific demo pages, pricing copy, auth screens, and release-note filler from the public site.

Theme first

Global tokens define the palette, typography, radii, surfaces, and dark mode before pages start to multiply.

DESIGN.md included

The design notes are part of the template, so human builders and AI agents can follow the same visual rules.

Blog ready

MDX posts, RSS, pagination, article layout, table of contents, and image handling are already wired.

Element theme

Buttons, badges, cards, typography, motion, form controls, and layout primitives live in one reference page.

Theme workflow

Build from the design, then fill in the product

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.

starter/theme-map
src/pages/index.astro
starter home
src/pages/blog
MDX blog routes
src/pages/design.astro
DESIGN.md preview
src/pages/elements.astro
theme components
src/styles/global.css
Tailwind v4 tokens
src/config/site.js
site metadata

A short path from clone to custom site

Most first edits should happen in four places. The rest of the starter stays out of your way.
01

Site metadata

Edit src/config/site.js

02

Theme tokens

Tune colors in global.css and themes.css

03

Content posts

Write MDX in src/content/post

04

Page composition

Build from the Elements reference

Starter notes

Use the Blog as documentation, release writing, essays, or product updates.

Start with the theme, ship your own thing

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.

v1.0.0Astro 7 starterView source