Astrobase

Reusable blocks

Components

Drop-in components built on framework tokens. Tone + size variants where they matter. For raw color / spacing / type tokens, see Style guide.

Navigation 2
Sections 6

Hero

Props: eyebrow?, title, lede?, align: "start" | "center", tone: "default" | "dark" | "brand". Slot: actions.

tone="default" · align="start"

Default hero

A starter you can actually launch from.

Opinionated defaults, OKLCH color engine, fluid type. Edit override.scss, you're done.

Learn more

tone="brand" · align="center"

Brand tone

Build something worth shipping.

Primary ultra-light background, rounded corners, generous padding.

tone="dark" · align="center"

Dark tone

For high-contrast moments.

Neutral ultra-dark background, primary-light eyebrow, inverted text.

Secondary

CTA

Props: title, body?, tone: "default" | "brand" | "dark" | "accent", align: "start" | "center". Slot: actions.

tone="default"

Ready to build?

Clone the starter, tune one file, push.

View style guide

tone="brand"

Make it yours in minutes.

Tune brand colors in override.scss — the whole palette rebuilds via OKLCH.

tone="accent"

Got feedback?

Tell us what's missing — astrobase grows from real project feedback.

tone="dark"

Still reading?

Clone the repo and see how little configuration it takes to ship something clean.

Feature grid

Props: features (array of {icon?, title, body}), columns: 2 | 3 | 4, align: "start" | "center", tone: "default" | "muted".

columns=3 · align="start"

OKLCH palette

10 families × 8 shades, generated perceptually uniform from hue alone.

Fluid scale

Spacing + type interpolate between mobile and desktop via clamp().

One file tuning

Edit override.scss, the whole system rebuilds. Framework file stays untouched.

columns=3 · align="center" · tone="muted"

OKLCH palette

10 families × 8 shades, generated perceptually uniform from hue alone.

Fluid scale

Spacing + type interpolate between mobile and desktop via clamp().

One file tuning

Edit override.scss, the whole system rebuilds. Framework file stays untouched.

Astro native

SCSS compiled by Astro — no extra build step, no runtime CSS-in-JS.

Dark mode

Flip the palette via [data-theme='dark']. All components follow automatically.

Three layers

framework.scss upstream; override.scss is your tuning surface; base.scss is opt-in reset.

columns=4

OKLCH palette

10 families × 8 shades, generated perceptually uniform from hue alone.

Fluid scale

Spacing + type interpolate between mobile and desktop via clamp().

One file tuning

Edit override.scss, the whole system rebuilds. Framework file stays untouched.

Astro native

SCSS compiled by Astro — no extra build step, no runtime CSS-in-JS.

Stats

Props: stats (array of {value, label, hint?}), columns: 2 | 3 | 4, align: "start" | "center", tone: "default" | "muted". Uses <dl>/<dt>/<dd> + tabular-nums for aligned values.

columns=4 · align="start"

Color tokens
10×8

Families × shades generated from hue + lightness + chroma.

Body baseline
18px

Fluid to 16px on mobile. Type scale 1.25 / 1.2.

Framework
0.5.0

SemVer versioned; changelog in /css-framework.

Runtime CSS
0ms

Static SCSS → plain CSS. Zero CSS-in-JS overhead.

columns=4 · align="center" · tone="muted"

Color tokens
10×8

Families × shades generated from hue + lightness + chroma.

Body baseline
18px

Fluid to 16px on mobile. Type scale 1.25 / 1.2.

Framework
0.5.0

SemVer versioned; changelog in /css-framework.

Runtime CSS
0ms

Static SCSS → plain CSS. Zero CSS-in-JS overhead.

Testimonial

Props: quote, author, role?, avatar?, tone: "default" | "muted" | "brand" | "dark".

tone="default"

The OKLCH palette is the cleanest color system I've shipped against. Edit one hue, the whole palette re-derives.

Jamie Chen Design engineer, Relay

tone="brand"

Fluid type and spacing out of the box. I stopped writing media queries and started writing features.

Priya Shah Founder, Nimbus

tone="dark"

Clone, tune override.scss, push. First marketing site of the year that didn't turn into a config swamp.

Marco Alvares CTO, Folio

Logo cloud

Props: title?, logos (array of {name, src?, href?}), align: "start" | "center", tone: "default" | "muted". Text fallback when src omitted.

align="center"

Trusted by teams at

  • Acme
  • Corta
  • Nimbus
  • Folio
  • Relay
  • Pilot

align="start" · tone="muted"

Powering product launches

  • Acme
  • Corta
  • Nimbus
  • Folio
  • Relay
  • Pilot
Content 3

Card

Props: eyebrow?, title?, href?, tone: "default" | "muted" | "brand", padding: "md" | "lg". Slots: default (body), media.

Default trio

Guide

Getting started

Clone astrobase, run npm install, tune override.scss, and you're shipping.

Reference

Style guide

Every token live-rendered — colors, spacing, type, radius, and primitives.

Framework

Three layers

framework.scss is upstream. override.scss is yours. base.scss is opt-in.

tone="brand" · pad-lg

Launch

Ready when you are

Primary-tinted card for emphasis. Use sparingly — hero piece of a grid.

Accordion

Props: items (array of {question, answer}), exclusive? (only one item open at a time — native <details name> group, Chromium 120+/Safari 17+). Uses native <details> so it works without JS.

default (independent)

Can I use a different font?

Yes — swap the @font-face block in main.scss and update the $font-family-* tokens. The framework itself is font-agnostic.

How do I customize the palette?

Set your brand hues in the $color-bases map in override.scss. Each family generates a full 8-shade scale from a single hue, lightness, and chroma in OKLCH.

Do I style each component twice for dark mode?

No. [data-theme="dark"] flips the whole shade palette; any component that uses palette tokens follows automatically — no per-component overrides required.

What do I change when cloning astrobase?

Rename the Astro package, edit override.scss for your brand, build pages under src/pages, and point a deploy webhook at main. That's the whole setup.

exclusive=true

Can I use a different font?

Yes — swap the @font-face block in main.scss and update the $font-family-* tokens. The framework itself is font-agnostic.

How do I customize the palette?

Set your brand hues in the $color-bases map in override.scss. Each family generates a full 8-shade scale from a single hue, lightness, and chroma in OKLCH.

Do I style each component twice for dark mode?

No. [data-theme="dark"] flips the whole shade palette; any component that uses palette tokens follows automatically — no per-component overrides required.

What do I change when cloning astrobase?

Rename the Astro package, edit override.scss for your brand, build pages under src/pages, and point a deploy webhook at main. That's the whole setup.

Alert

Props: variant: "info" | "success" | "warning" | "danger", title?, icon? (overrides default glyph). Renders with role="alert" for warning/danger, role="status" for info/success.

All four variants

Heads up

This is an info alert. Uses role="status" so screen readers announce it politely.

Deploy complete

Your site is live at astrobase.florianstangl.com.

Title only (no body)

Framework version 0.5.0 is live.

All systems operational.

Primitives 3

Button

Props: href? (renders <a> when set, otherwise <button>), variant, size, disabled.

Variants

Sizes

Links vs. buttons

As a link

Badge

Props: variant (9 families, all soft by default), size: "sm" | "md", solid?.

Soft (default) — 9 variants

Neutral Primary Secondary Tertiary Accent Success Warning Info Danger

Solid

Neutral Primary Success Warning Info Danger

Sizes

Small Medium

Divider

Props: label?, align: "start" | "center" | "end", spacing: "sm" | "md" | "lg". Without a label, renders a plain <hr>.

Plain

Text above the rule.

Text below the rule.

With label — align="center"

Some content.

More content.

align="start"