My Styled Site

Welcome to My Styled Astro Site

This site uses CSS layers for organized, scalable styling. Experience your custom theme and fluid Utopia-powered spacing!

Read the explainer

The Theme

Design tokens are defined in the theme layer. We're using a custom primary scale generated via Radix UI color algorithms.

Layouts

Layout classes like l-switcher, l-stack, and l-cluster (prefixed with l-) manage the structural arrangement of components.

Utilities

Utility classes (prefixed with u-) provide fine-grained control over things like typography, spacing, and colors.

Why CSS Layers?

Layers allow us to control specificity explicitly. Styles in the utilities layer will always override those in base, regardless of selector complexity.

Modern Normalize

We've integrated modern-normalize directly into our base layer to ensure a consistent starting point across browsers.