Utility Classes

Layout Primitives

Stack

Vertical layout with consistent spacing.

<div class="stack">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Class	Gap
.stack	--space-md (0.75rem)
.stack-sm	--space-sm (0.35rem)
.stack-lg	--space-lg (1.5rem)

Row

Horizontal layout with alignment.

<div class="row">
  <span>Left</span>
  <span>Right</span>
</div>

Class	Description
.row	Horizontal flex with center alignment
.row-sm	Smaller gap (--space-xs)
.row-lg	Larger gap (--space-md)
.row-between	Space between items
.row-end	Align to end
.row-start	Align items to start

Grid

Responsive auto-fit grid.

<div class="grid">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Class	Columns
.grid	Auto-fit (min 250px)
.grid-2	2 columns
.grid-3	3 columns
.grid-4	4 columns

Customize the minimum column width:

<div class="grid" style="--grid-min: 150px">...</div>

Center

Max-width centered content.

<div class="center">
  Centered content with max-width
</div>

Class	Max Width
.center	65ch
.center-narrow	45ch
.center-wide	90ch

Cluster

Wrapping horizontal layout for tags/buttons.

<div class="cluster">
  <span class="badge">Tag 1</span>
  <span class="badge">Tag 2</span>
</div>

List

Styled lists with proper markers.

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Works with both <ul> and <ol>, with automatic nested styling.

Text Utilities

Class	Description
.text-primary	Primary text color
.text-muted	Muted text
.text-subtle	Subtle text
.text-faint	Faint text
.text-accent	Accent color text
.text-xs	Extra small text (0.75rem)
.text-sm	Small text (0.875rem)
.text-base	Base text (1rem)
.text-lg	Large text (1.125rem)
.text-xl	Extra large text (1.25rem)
.text-2xl	2x large text (1.5rem)
.text-3xl	3x large text (1.875rem)
.text-4xl	4x large text (2.25rem)
.font-medium	Medium weight (500)
.font-bold	Bold weight (700)
.font-mono	Monospace font
.truncate	Truncate with ellipsis

Interactive

Class	Description
.interactive	Border highlights on hover
.interactive-color	Color changes on hover

Visibility

Class	Description
.hidden	Display none
.sr-only	Screen reader only
.hover-reveal	Show on parent hover
.hide-mobile	Hide on mobile (< 768px)

Animation

Class	Description
.animate-spin	Spinning animation
.animate-pulse	Pulsing animation

Animations respect prefers-reduced-motion.