OKLCH color engine
10 families × 7 shades generated from a single base lightness + chroma. Perceptual uniformity baked in. Hover states derived at runtime via CSS relative colors.
Astro starter · v0.1.0
A starter you can actually launch from.
Hakbase 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.
What's inside
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.
Ready to build?
Clone the starter and see how little configuration it takes to ship something clean.