Utility Layer

The utility layer provides single-purpose classes for common styling needs. It's loaded last so utilities always win over other layers.

Each section below covers a group of related utilities. Click through to see available classes, live demos, and usage guidance.

Text size, line height, font weight, font family, text decoration, alignment, overflow, wrapping, and whitespace.

Vibrant and neutral palettes, invertible semantic tokens, opacity, and dark mode variants.

Container queries and why Axiom responds to available space, not the viewport.

Flex containers, direction, wrapping, alignment, sizing, grow, shrink, and order.

Grid columns, fluid grids, responsive columns, spanning, flow, alignment, and common patterns.

Padding, margin, and gap using the mathematical size scale. Fixed and fluid variants.

Width, height, min/max constraints, aspect ratios, and viewport units.

Object fit, object position, and background image utilities.

Border sides, thickness, colors, opacity, radius, and removal.

Multi-layer shadows, dark mode behavior, and customization.

Display modes and positioning schemes.

Control content overflow on both axes or individually.

Smooth transitions, speed modifiers, easing functions, and reduced motion.

Entrance effects, loading indicators, and animation variables.

Cursor utilities and other small helpers.