Utility Families

Run /utility-list in a Claude Code session to see the full family catalogue with current values based on your tokens configuration.

/utility-list            # all families summary
/utility-list spacing    # spacing family detail
/utility-list flex       # flex family detail
/utility-list color-bg   # color-bg family detail

Family quick reference

Family	Responsive	!important	Example
color-bg	no	no	.bg-primary, .bg-surface
color-text	no	no	.text-primary, .text-muted
color-border	no	no	.border-primary
spacing	yes	no	.m-4, .px-6, .gap-3
display	yes	yes	.hide, .show, .sr-only
flex	yes	no	.flex, .flex-col, .items-center
grid	yes	no	.grid, .grid-cols-3
type	no	no	.text-sm, .font-bold
radius	no	no	.rounded-md, .rounded-full
shadow	no	no	.shadow-sm, .shadow-lg
position	no	no	.relative, .absolute
z-index	no	no	.z-10, .z-50

color-bg family

bg-primary

<div class="bg-primary">…</div>

--color-primary: —

bg-surface

<div class="bg-surface">…</div>

--color-surface: —

bg-success

<div class="bg-success">…</div>

--color-success: —

bg-danger

<div class="bg-danger">…</div>

--color-danger: —

color-text family

Text styled with .text-primary

<div class="text-primary">…</div>

--color-primary: —

Secondary text styled with .text-muted

<div class="text-muted">…</div>

--color-text-muted: —

spacing family

Element with .m-4 (1rem margin)

<div class="m-4">…</div>

flex family

<div class="flex gap-3 items-center">…</div>

radius family

.rounded-md

<div class="rounded-md">…</div>

.rounded-full

<div class="rounded-full">…</div>