Astro starter

An Astro base that ships as a wireframe.

Astro 7, an OKLCH token framework, a Section shell and a flat header. Greyscale on purpose: clone it, set the skin tokens in override.scss, and the same components become the brand.

Browse components Style guide

What's inside

Four decisions the template makes so a clone does not have to.

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.
Work through the skin checklist at the top of css-framework/framework-import/override.scss: palette, radii, card fill, fonts, control and link colours. 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.