Astro starter

A starter you can actually launch from.

Astrobase pairs an opinionated Astro setup with an in-house CSS framework built on OKLCH, fluid type, and fluid spacing. Clone it, tune override.scss, push. That's the whole workflow.

Browse components →Style guide

What's inside

OKLCH color engine

10 families × 7 shades generated from a single base lightness + chroma, plus a runtime hover shade and a non-flipping --on-{family} contrast token for text on the medium shade.

Fluid spacing + type

Every --space-* and --text-* token is a clamp() between mobile and desktop breakpoints. Set a base value and a scale ratio; the rest falls out.

Three-layer SCSS

framework.scss stays pristine. override.scss tunes per project via @use … with(). base.scss is opt-in reset. Pull framework updates without losing your brand.

Section shell

Main is bare. Pages compose full-bleed Sections that own their own gutter, width, tone and rhythm — the closing CTA is rendered by the layout.

Get going

Clone the repo and rename the package in astro/package.json.
Set brand colors, fonts and gutters in css-framework/framework-import/override.scss. Set site in astro/astro.config.mjs so canonical and Open Graph URLs resolve.
Compose pages from Sections under astro/src/pages/. Pass cta to Base to hide or reword the closing call-to-action.
npm run dev locally; git push to deploy.