System / Components

Component kit

The shared primitives — @studio/ui. Import as @studio/ui/Button.astro. Source in packages/ui/src/. Every variant and state shown below.

Button

Renders <a> with href, else <button>. Variants: primary, accent, ghost, link.

Eyebrow

Label above a heading. muted dims it for inverse surfaces.

Default eyebrow

Muted eyebrow

Stack

Vertical spacing. gap: sm | md | lg.

childchildchild

Layout primitives

Container — max-width + gutter. Section — full-bleed with tone (default / muted / inverse) and pad (sm / md); each tone pairs a surface with its correct text color. SiteHeader / SiteFooter — shared shells with slots. Tones rendered live in the Style Guide.