Project Styleguide

This page is intentionally separate from the homepage. It documents the CSS token system and utility classes used by this Astro migration.

Color Tokens

Page Background

--color-bg

Surface

--color-surface

Text

--color-text

Muted Text

--color-text-muted

Heading / Accent

--color-heading

Accent

--color-accent

Accent Strong

--color-accent-strong

Border

--color-border-subtle

Type + Spacing

Heading Sample

Body text sample using the shared semantic tokens. This keeps visual decisions centralized and avoids one-off per-page values.

Core Scale Tokens

--container-max Use directly in layout and component spacing.

--container-narrow Use directly in layout and component spacing.

--container-pad Use directly in layout and component spacing.

--section-pad-block Use directly in layout and component spacing.

--size-2 Use directly in layout and component spacing.

--size-4 Use directly in layout and component spacing.

--size-6 Use directly in layout and component spacing.

--radius-sm Use directly in layout and component spacing.

--radius-md Use directly in layout and component spacing.

--shadow-soft Use directly in layout and component spacing.

Utility Classes

.u-container         // centered max-width container
.u-container--narrow // narrower variant for dense content
.u-stack             // vertical rhythm for direct children
.u-cluster           // inline wrapping groups with gap
.u-split             // split layout with responsive wrap
.u-card              // surface + border + radius + shadow
.u-muted             // muted text token

Token Example

.panel {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--size-5);
}