🧑‍🚀 Hello, Astronaut!

Welcome to the official Astro blog starter template. This template serves as a lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with Astro.

This template comes with a few integrations already configured in your astro.config.mjs file. You can customize your setup with Astro Integrations to add tools like Tailwind, React, or Vue to your project.

Here are a few ideas on how to get started with the template:

Edit this page in src/pages/index.astro
Edit the site header items in src/components/Header.astro
Add your name to the footer in src/components/Footer.astro
Check out the included blog posts in src/content/blog/
Customize the blog post page layout in src/layouts/BlogPost.astro

Have fun! If you get stuck, remember to read the docs or join us on Discord to ask questions.

Looking for a blog template with a bit more personality? Check out astro-blog-template by Maxi Ferreira.

🎨 Interactive Theme Designer

Create beautiful, accessible color themes with OKLCH color space. Generate perceptually uniform color scales for dark and light modes with WCAG contrast compliance.

💡 Color System Best Practicesss

-low variants: Use for subtle backgrounds (alerts, badges, hover states)
Base colors: Primary action colors, borders, and medium emphasis
-high variants: Text on dark backgrounds, icons, high contrast needs
Gray scale: white → gray-1 (text) → gray-2 (secondary) → gray-3 (muted) → gray-4-6 (borders/backgrounds) → black
Semantic colors: Reserve success/warning/danger for their specific meanings only

Presets

WCAG Contrast Level

AA AAA

Accent Color

Hue 269

Chroma 0.27

Gray Color

Hue 270

Chroma 0.016

🌙 Dark Mode

Body text Link text Dim text inline code

Success Warning Error

Buttons

Alerts & Notifications

Success: Your changes have been saved successfully.

Warning: Your session will expire in 5 minutes.

Error: Unable to connect to the server.

Cards & Containers

Feature Card

Use gray-6 for container backgrounds, gray-5 for borders, and gray-1 for primary text.

Typography Hierarchy

white - Headings & Emphasis

gray-1 - Body Text

gray-2 - Secondary Text

gray-3 - Muted / Disabled

☀️ Light Mode