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.
CSS Grid-based page layouts. All layouts are responsive by default.
When to use: Responsive page and panel layouts for app and content structure.
Classes: .layout-card, .layout-sidebar, .layout-rail, .layout-rail.with-workbench, .layout-split, .layout-three-col, .layout-readable, .layout-holy-grail, .section
Variants:
.layout-sidebar - 250px sidebar (default).layout-sidebar.narrow - 150px sidebar.layout-sidebar.wide - 350px sidebar.layout-sidebar.invert - Sidebar on right (combine with .narrow or .wide).layout-sidebar.fill - Full app-shell frame (--layout-gap: 0, height: 100dvh).layout-sidebar.fixed - Sticky sidebar with scrolling main contentUse .layout-rail when you need an icon rail in front of a wider sub-sidebar
(agent switcher / conversation list / file tree) before the main reading
column. Add .with-workbench for a 4th .workbench-panel
on the trailing edge.
Mobile collapse is container-query driven (not media-query). At <768px
container width the rail / list / workbench hide; reveal them via a
.drawer-toggle button + [popover].drawer pair. The shell responds to its
own width, so it works in artboards, embeds, and iframes — not just full
viewports.
Add .no-stack to prevent stacking on mobile.
Responsive: 3 cols → 2 cols → 1 col.
Max-width container for optimal reading:
Variants:
.layout-readable - Centered by default (margin: 0 auto).layout-readable.center - Same as default; explicit affirmation.layout-readable.end - End-aligned (margin-inline-start: auto)Full bleed child:
Use .section to apply consistent block padding around major page regions:
Override the default with --section-padding (defaults to var(--pad-xxxl)).
--gap or --layout-gap - Gap between grid items--min-card-width - Minimum card width for .layout-card--max-width - Max width for .layout-readable--padding - Inline padding for .layout-readable--section-padding - Block padding for .sectionFlexbox utilities for vertical and horizontal layouts.
When to use: Flow and grouping helpers for vertical/horizontal composition.
Classes: .stack, .cluster, .split, .split.vertical, .flex, .grid
.cluster.center — center the row horizontally instead of starting at the inline-start edge.split.even — children take equal width (flex: 1 1 auto).split.center — vertically center children (overrides the default align-items: start).split.vertical — column flow, full height; useful for top+bottom split sidebars.split automatically stacks at container widths under 500pxStack:
display: flexflex-direction: column--gap: 1rem (override via style="--gap: …")Cluster:
display: flexflex-wrap: wrapalign-items: center--gap: 0.5remSplit:
display: flexjustify-content: space-betweenalign-items: startgap: var(--gap, 1rem)Helper classes for common styling needs.
When to use: Common reset, visibility, width, and helper utilities.
Classes: .readable, .no-list, .circle, .row, .visually-hidden, .auto-color, .full, .fc
In forms and fieldsets, .row also works as a field-group wrapper (label + control + help text).
Use .readable or .narrow when you also need max-width constraints.
.fc (alias: .fluid-text-container) turns the element into an inline-size container query root and switches fluid typography to container-query units (cqi) instead of viewport units. Use it on any region whose type should scale with the region's width — sidebars, cards, modals — not the viewport.
.error, .success, and .warning set border colours on form controls (and are scoped to a few other components like .callout, .tag, .timeline li, .sidebar-nav). They do not style generic text — a <small> placed after an input gets caption spacing but inherits the parent's color.
For prominent inline status messages, use <div class="callout error">…</div> instead.
Bypass-navigation link that stays hidden until focused, then reveals as a pinned pill.
When to use: Let keyboard and screen-reader users jump straight to the main content past repeated navigation.
Classes: .skip-link
A skip link is the first focusable element on the page. It is screen-reader-only by default and reveals visually only when it receives keyboard focus, so it never disrupts the visual design while still satisfying WCAG bypass-blocks guidance.
<a class="skip-link" href="#main"> as the very first element inside <body>, before the header and navigation.href at the id of the main landmark (for example <main id="main">).Utility classes for heading-style typography and fluid size tokens.
When to use: Applying type hierarchy styles to non-heading elements.
Classes: .h1, .h2, .h3, .h4, .h5, .h6, .fs-xs, .fs-base, .fs-s, .fs-m, .fs-l, .fs-xl, .fs-xxl, .fs-xxxl
Use these classes when you need visual hierarchy without changing semantic HTML.
.h1-.h6 apply heading styles to any element..fs-* classes map directly to the fluid type scale (--fl).Curated gradient background and gradient text utility classes.
When to use: Adding branded visual emphasis to surfaces and headings.
Classes: .gradient-*, .gradient-text
Gradient utilities provide complete, theme-aware color compositions.
.gradient-* on containers for expressive backgrounds..gradient-text to apply the same gradient treatment to text.