These utility classes actually have utility.
We aren't replicating CSS with classnames, but providing real functionality to be combined or used individually. If you want a common layout or pattern or even automatic color contrast, we've got you.
Auto-fill responsive card grid
Sidebar + main content (250px default)
Full-height sticky sidebar for app shells. Combine with .split.vertical for sidebar internal layout.
See UI Blocks for full layout templates.
50/50 two column layout
Stays side-by-side on mobile
Three equal columns
Max-width for optimal readability (default: start-aligned)
Learning to drop in on a skateboard is an exciting and challenging milestone for any skateboarder. Before attempting to drop in, ensure that you have a solid foundation of basic skateboarding skills.
Centered readable content with max-width constraint.
End-aligned readable content with max-width constraint.
Group and cluster your stuff in common ways.
Vertical flexbox stack with gap
Horizontal wrapping list with gap (perfect for tags, pills, breadcrumbs)
Flex with space-between and top alignment (used in header)
Vertical split - pushes first and last children to opposite ends
Display flex with 20px gap
Minimal grid utility (like .flex)
Readable measure container (72ch max-width)
This content is constrained to a 72ch max-width for optimal readability. Unlike .layout-readable, this doesn't include padding.
Remove list styling (margin, padding, list-style)
Circular element (default --size: 40px)
Add vertical margin (--vs-m)
Hide element visually but keep accessible to screen readers
There is hidden text after this colon: This text is hidden visually but available to screen readers!
You can't see it, but it's there for accessibility.
Automatically sets text color (light or dark) based on background luminosity
Set --bg-color and the text color adjusts automatically
Maintain specific aspect ratios for containers (useful for images, videos, cards)
Custom: Use aspect-ratio: 2 / 1; or aspect-ratio: var(--aspect-ratio);
Makes typography responsive to container width instead of viewport
Text scales with viewport width
Text scales with this box's width
Apply heading sizes to any element without semantic heading tags
.h1 - Largest heading size
.h2 - Second level
.h3 - Third level
.h4 - Fourth level
.h5 - Fifth level
.h6 - Sixth level
Fluid font size utilities using the --fl (fluid level) system
.fs-xs - Extra small (--fl: -1)
.fs-base - Base size (--fl: 0)
.fs-s - Small heading (--fl: 1)
.fs-m - Medium (--fl: 2)
.fs-l - Large (--fl: 3)
.fs-xl - Extra large (--fl: 4)
.fs-xxl - Double extra large (--fl: 5)
.fs-xxxl - Triple extra large (--fl: 6)
Curated, theme-aware gradient utilities. Each gradient is a complete
composition — type, angle, position, and color stops all baked in.
Drop a single class on any element. All gradients adapt to light and
dark mode automatically via light-dark().
Apply to any element for an instant gradient background. Each uses a curated gradient type (linear, radial, or conic) with positioned stops.
Add .gradient-text alongside any gradient class to apply
the gradient to text instead of the background.