Text + spacing
Muted helper text.
Subtle helper text with a tiny top margin.
Centered utility text.
Utilities overview
Back to docsUtilities stay intentionally small in Spectra. They are token-driven escape hatches for repeated patterns, not a second design system layered on top of the components.
Utility groups
| Group | Classes | Used for |
|---|---|---|
| Visibility | .sp-hidden, .sp-visually-hidden | Hide content visually or only for sighted users while keeping semantics intact. |
| Text | .sp-link, .sp-muted, .sp-subtle, .sp-text-center | Link color, emphasis, and quick text alignment. |
| Spacing | .sp-mt-2..4, .sp-mb-2..4 | Small margin nudges when component composition needs minor adjustment. |
| Layout | .sp-inline, .sp-row | Inline grouping and flex rows for small clusters. |
| Code | .sp-code, .sp-code-list, .sp-codeblock | Docs-friendly code styling and bounded code blocks. |
| Position | .sp-float, .sp-pos-* | Viewport pinning for drawers, menus, and toasts. |
| Effects | .sp-shadow-1..3, .sp-text-shadow-1..3 | Reusable shadow helpers backed by tokens. |
| Headings | .sp-h1 … .sp-h4 | Type scale helpers for docs and demos. |
Preview
Inline + row
Inline
tight inline grouping
Code list
.sp-pos-bottom-rightpin a toast to the lower edge.sp-visually-hiddenkeep screen-reader text available
Heading helpers
H3 helper
H4 helper
Use these mostly in docs and demos.
Position helpers
The .sp-pos-* helpers are intentionally opinionated. They use floating gap and layer tokens so overlay components can land in predictable places without hand-tuned inline coordinates.
.sp-pos-top-rightgood for menus or non-blocking notices.sp-pos-bottom-rightcommon toast position.sp-pos-centercentered floating UI or overlay stage
Guidance
When a pattern starts needing lots of utilities chained together, that is usually a signal to promote it into a real component or pattern instead of growing the utility layer.