Utilities
Utility Classes
Utilities
Hybrid utility system supporting both Industrial T-shirt sizes (3xs..6xl) and Mathematical rhythm units (1-12, half, trim, leading).
| Name |
Description |
.p-*, |
.pt-, .pb-, .pl-, .pr-, .px-, .py- Padding scale utilities. |
.m-*, |
.mt-, .mb-, .ml-, .mr-, .mx-, .my- Margin scale utilities. |
.gap-*, |
.gap-x-, .gap-y- Grid and flex gap utilities. |
.w-*, |
.h-, .max-w-, .min-w-, .max-h-, .min-h-* Sizing scale utilities. |
.text-muted, |
.text-subtle, .text-accent Foreground text color utilities. |
.bg-surface, |
.bg-background Background color utilities. |
.border, |
.border-accent, .border-transparent Border stroke utilities. |
.rounded, |
.rounded-sm, .rounded-lg, .rounded-full Border radius utilities. |
.shadow, |
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl Elevation shadow utilities. |
.flex, |
.inline-flex, .grid, .inline-grid, .block, .inline-block, .hidden Layout display utilities. |
Generated classes
One scale, stamped into 37 CSS properties by @include generate-scale(prefix, property) — one row below per call in the source. .{prefix} is the bare class (the scale’s default entry below); .{prefix}-{suffix} covers the rest of the scale.
| Suffix |
Value |
| full |
100% |
| 0 |
0 |
| auto |
auto |
| 3xs — Industrial T-shirt Scale |
var(--size-3xs) |
| 2xs |
var(--size-2xs) |
| xs |
var(--size-xs) |
| sm |
var(--size-sm) |
| base |
var(--size-base) |
| lg |
var(--size-lg) |
| xl |
var(--size-xl) |
| 2xl |
var(--size-2xl) |
| 3xl |
var(--size-3xl) |
| 4xl |
var(--size-4xl) |
| 5xl |
var(--size-5xl) |
| 6xl |
var(--size-6xl) |
| (bare) — Mathematical Unit Scale (1-12) |
var(--space) |
| 2 |
var(--space-2) |
| 3 |
var(--space-3) |
| 4 |
var(--space-4) |
| 5 |
var(--space-5) |
| 6 |
var(--space-6) |
| 7 |
var(--space-7) |
| 8 |
var(--space-8) |
| 9 |
var(--space-9) |
| 10 |
var(--space-10) |
| 11 |
var(--space-11) |
| 12 |
var(--space-12) |
| half |
var(--space-d2) |
Naming collision worth knowing: this “trim”/“leading” scale keys (feeding .mt-trim, .p-leading, etc.) use —size-2xs/—size-xs (the type scale) — NOT the real —trim/—leading rhythm tokens (_standard-01-token.scss) that happen to share the same words. A class like .mt-trim does not use —trim.
| Suffix |
Value |
| trim |
var(--size-2xs) |
| leading |
var(--size-xs) |
| Prefix |
CSS property |
Breakpoint |
Classes |
min-w |
min-width |
— |
.min-w / .min-w-{suffix} |
max-w |
max-width |
— |
.max-w / .max-w-{suffix} |
h |
height |
— |
.h / .h-{suffix} |
min-h |
min-height |
— |
.min-h / .min-h-{suffix} |
max-h |
max-height |
— |
.max-h / .max-h-{suffix} |
m |
margin |
— |
.m / .m-{suffix} |
my |
margin-block |
— |
.my / .my-{suffix} |
mx |
margin-inline |
— |
.mx / .mx-{suffix} |
mt |
margin-top |
— |
.mt / .mt-{suffix} |
mr |
margin-right |
— |
.mr / .mr-{suffix} |
mb |
margin-bottom |
— |
.mb / .mb-{suffix} |
ml |
margin-left |
— |
.ml / .ml-{suffix} |
p |
padding |
— |
.p / .p-{suffix} |
py |
padding-block |
— |
.py / .py-{suffix} |
px |
padding-inline |
— |
.px / .px-{suffix} |
pt |
padding-top |
— |
.pt / .pt-{suffix} |
pr |
padding-right |
— |
.pr / .pr-{suffix} |
pb |
padding-bottom |
— |
.pb / .pb-{suffix} |
pl |
padding-left |
— |
.pl / .pl-{suffix} |
gap |
gap |
— |
.gap / .gap-{suffix} |
gap-x |
column-gap |
— |
.gap-x / .gap-x-{suffix} |
gap-y |
row-gap |
— |
.gap-y / .gap-y-{suffix} |
w |
width |
— |
.w / .w-{suffix} |
sm:mt |
margin-top |
(max-width: $small) |
.sm:mt / .sm:mt-{suffix} |
sm:mr |
margin-right |
(max-width: $small) |
.sm:mr / .sm:mr-{suffix} |
sm:mb |
margin-bottom |
(max-width: $small) |
.sm:mb / .sm:mb-{suffix} |
sm:ml |
margin-left |
(max-width: $small) |
.sm:ml / .sm:ml-{suffix} |
sm:my |
margin-block |
(max-width: $small) |
.sm:my / .sm:my-{suffix} |
sm:mx |
margin-inline |
(max-width: $small) |
.sm:mx / .sm:mx-{suffix} |
sm:m |
margin |
(max-width: $small) |
.sm:m / .sm:m-{suffix} |
sm:pt |
padding-top |
(max-width: $small) |
.sm:pt / .sm:pt-{suffix} |
sm:pr |
padding-right |
(max-width: $small) |
.sm:pr / .sm:pr-{suffix} |
sm:pb |
padding-bottom |
(max-width: $small) |
.sm:pb / .sm:pb-{suffix} |
sm:pl |
padding-left |
(max-width: $small) |
.sm:pl / .sm:pl-{suffix} |
sm:py |
padding-block |
(max-width: $small) |
.sm:py / .sm:py-{suffix} |
sm:px |
padding-inline |
(max-width: $small) |
.sm:px / .sm:px-{suffix} |
sm:p |
padding |
(max-width: $small) |
.sm:p / .sm:p-{suffix} |
All classes
MIXIN: Generate Scale
| Class |
Declares |
.w-auto |
width: auto !important |
.w-full |
width: 100% !important |
.w-screen |
width: 100vw !important |
.w-min |
width: min-content !important |
.w-max |
width: max-content !important |
.w-fit |
width: fit-content !important |
.min-w-full |
min-width: 100% !important |
.min-w-screen |
min-width: 100vw !important |
.max-w-none |
max-width: none !important |
.max-w-full |
max-width: 100% !important |
.max-w-screen |
max-width: 100vw !important |
.max-w-mobile |
max-width: var(--mobile) !important |
.max-w-small |
max-width: var(--line-width-sm) !important |
.max-w-large |
max-width: var(--line-width-lg) !important |
.max-w-medium |
max-width: var(--line-width-md) !important |
.max-w-line |
max-width: var(--line-width) !important |
HEIGHT
| Class |
Declares |
.h-auto |
height: auto !important |
.h-full |
height: 100% !important |
.h-screen |
height: 100vh !important |
.h-min |
height: min-content !important |
.h-max |
height: max-content !important |
.h-fit |
height: fit-content !important |
.min-h-full |
min-height: 100% !important |
.min-h-screen |
min-height: 100vh !important |
.max-h-none |
max-height: none !important |
.max-h-full |
max-height: 100% !important |
.max-h-screen |
max-height: 100vh !important |
.m-gap-header |
margin-top: var(--gap-header) |
.p-gap-header |
padding-top: var(--gap-header) |
.m-gap-footer |
margin-bottom: var(--gap-footer) |
.p-gap-footer |
padding-bottom: var(--gap-footer) |
DISPLAY
| Class |
Declares |
.block |
display: block !important |
.inline |
display: inline !important |
.inline-block |
display: inline-block !important |
.grid |
display: grid !important |
.hidden |
display: none !important |
POSITION
| Class |
Declares |
.relative |
position: relative !important |
.absolute |
position: absolute !important |
.fixed |
position: fixed !important |
.sticky |
position: sticky !important |
FLEXBOX
| Class |
Declares |
.flex, .flex-row, .flex-col |
display: flex !important |
.flex-1 |
flex: 1 1 0% !important |
.flex-row |
flex-direction: row !important |
.flex-col |
flex-direction: column !important |
.flex-wrap |
flex-wrap: wrap !important |
.flex-nowrap |
flex-wrap: nowrap !important |
.flex-far |
display: flex |
.items-start |
align-items: flex-start !important |
.items-center |
align-items: center !important |
.items-end |
align-items: flex-end !important |
.items-baseline |
align-items: baseline !important |
.items-stretch |
align-items: stretch !important |
.justify-start |
justify-content: flex-start !important |
.justify-center |
justify-content: center !important |
.justify-end |
justify-content: flex-end !important |
.justify-between |
justify-content: space-between !important |
.justify-around |
justify-content: space-around !important |
.justify-evenly |
justify-content: space-evenly !important |
LAYOUT HELPERS
| Class |
Declares |
.center-content |
display: flex |
.center-horizontally, .mh-auto |
margin-left: auto |
.center-vertically |
display: flex |
.no-body-margin |
margin-inline: calc((var(--gap-body) * -1)) !important |
TYPOGRAPHY — Size
| Class |
Declares |
.text-3xs |
font-size: var(--size-3xs) !important |
.text-2xs |
font-size: var(--size-2xs) !important |
.text-xs |
font-size: var(--size-xs) !important |
.text-sm |
font-size: var(--size-sm) !important |
.text-base |
font-size: var(--size-base) !important |
.text-lg |
font-size: var(--size-lg) !important |
.text-xl |
font-size: var(--size-xl) !important |
.text-2xl |
font-size: var(--size-2xl) !important |
.text-3xl |
font-size: var(--size-3xl) !important |
.text-4xl |
font-size: var(--size-4xl) !important |
.text-5xl |
font-size: var(--size-5xl) !important |
.text-6xl |
font-size: var(--size-6xl) !important |
TYPOGRAPHY — Weight
| Class |
Declares |
.font-bold |
font-weight: var(--font-weight-bold) !important |
.font-header |
font-family: var(--font-header) !important |
.font-normal |
font-weight: var(--font-weight) !important |
.font-light |
font-weight: 300 !important |
TYPOGRAPHY — Line Height
| Class |
Declares |
.compact |
line-height: var(--line-height-compact) !important |
.relaxed |
line-height: var(--line-height-relaxed) !important |
TYPOGRAPHY — Alignment
| Class |
Declares |
.text-left |
text-align: left !important |
.text-center |
text-align: center !important |
.text-right |
text-align: right !important |
.text-justify |
text-align: justify !important |
| Class |
Declares |
.uppercase |
text-transform: uppercase !important |
.lowercase |
text-transform: lowercase !important |
.capitalize |
text-transform: capitalize !important |
.text-transform-none |
text-transform: none !important |
TYPOGRAPHY — Wrapping & Overflow
| Class |
Declares |
.no-wrap |
white-space: nowrap !important |
.no-trim |
text-box-trim: none !important |
.ellipsis, .ellipsis li |
overflow: hidden |
READING WIDTH (line-width constraints)
| Class |
Declares |
.line-xs |
max-width: var(--line-width-xs) !important |
.line-s |
max-width: var(--line-width-sm) !important |
.line |
max-width: var(--line-width) !important |
.line-l |
max-width: var(--line-width-lg) !important |
.line-xl |
max-width: var(--line-width-xl) !important |
.line-full |
max-width: var(--line-width-full) !important |
COLORS — Text (semantic)
| Class |
Declares |
.text-primary |
color: var(--color-foreground) !important |
.text-muted |
color: var(--color-muted) !important |
.text-subtle |
color: var(--color-subtle) !important |
.text-accent |
color: var(--color-accent) !important |
.font-text |
font-family: var(--font-text) !important |
.font-monospace |
font-family: var(--font-monospace) !important |
.font-serif |
font-family: var(--font-serif) !important |
.font-sans |
font-family: var(--font-sans) !important |
COLORS — Status
| Class |
Declares |
.success |
color: var(--color-success) !important |
.warning |
color: var(--color-warning) !important |
.error |
color: var(--color-error) !important |
.info |
color: var(--color-info) !important |
COLORS — Named spectrum (text)
| Class |
Declares |
.red |
color: var(--color-red) !important |
.orange |
color: var(--color-orange) !important |
.yellow |
color: var(--color-yellow) !important |
.green |
color: var(--color-green) !important |
.cyan |
color: var(--color-cyan) !important |
.blue |
color: var(--color-blue) !important |
.purple |
color: var(--color-purple) !important |
.pink |
color: var(--color-pink) !important |
BACKGROUNDS — Semantic
| Class |
Declares |
.bg-background |
background-color: var(--color-background) !important |
.bg-surface |
background-color: var(--color-surface) !important |
.bg-accent |
background-color: var(--color-accent) !important |
.bg-foreground |
background-color: var(--color-foreground) !important |
.bg-transparent |
background-color: transparent !important |
.bg-glass |
backdrop-filter: var(--filter-glass) |
.bg-surface-lowest |
background-color: var(--color-surface-lowest) !important |
.bg-surface-low |
background-color: var(--color-surface-low) !important |
.bg-surface-high |
background-color: var(--color-surface-high) !important |
.bg-surface-highest |
background-color: var(--color-surface-highest) !important |
BACKGROUNDS — Named spectrum
| Class |
Declares |
.bg-red |
background-color: var(--color-red) !important |
.bg-orange |
background-color: var(--color-orange) !important |
.bg-yellow |
background-color: var(--color-yellow) !important |
.bg-green |
background-color: var(--color-green) !important |
.bg-cyan |
background-color: var(--color-cyan) !important |
.bg-blue |
background-color: var(--color-blue) !important |
.bg-purple |
background-color: var(--color-purple) !important |
.bg-pink |
background-color: var(--color-pink) !important |
INVERT
| Class |
Declares |
.invert |
color: var(--color-background) |
SHADOWS
| Class |
Declares |
.shadow |
box-shadow: var(--shadow) !important |
.shadow-raised |
box-shadow: var(--shadow-raised) !important |
.shadow-inset |
box-shadow: var(--shadow-inset) !important |
.shadow-lg |
box-shadow: var(--shadow-lg) !important |
.shadow-xl |
box-shadow: var(--shadow-xl) !important |
.shadow-glow |
box-shadow: var(--shadow-glow) !important |
.shadow-ring |
box-shadow: var(--shadow-ring) !important |
.shadow-inset-ring |
box-shadow: var(--shadow-inset), var(--shadow-ring) !important |
.no-shadow |
box-shadow: none !important |
BORDERS
| Class |
Declares |
.border-0 |
border: 0 !important |
.border |
border: var(--border) !important |
.border-accent |
border: var(--border-accent) !important |
.border-t |
border-top: var(--border) !important |
.border-b |
border-bottom: var(--border) !important |
.border-l |
border-left: var(--border) !important |
.border-r |
border-right: var(--border) !important |
BORDER RADIUS
| Class |
Declares |
.rounded-sm |
border-radius: calc(var(--radius) / 2) !important |
.rounded |
border-radius: var(--radius) !important |
.rounded-lg |
border-radius: calc(var(--radius) * 1.5) !important |
.rounded-xl |
border-radius: calc(var(--radius) * 2) !important |
.rounded-full |
border-radius: 9999px !important |
.rounded-50, .rounded-50 img |
border-radius: 50% |
.no-rounded |
border-radius: 0 !important |
MULTI-COLUMN FLOW
| Class |
Declares |
.columns, .columns-2 |
columns: 2 |
.columns-3 |
columns: 3 |
.columns-4 |
columns: 4 |
.columns-auto |
columns: auto |
.columns-gap-compact |
column-gap: var(--leading) |
.columns-gap-wide |
column-gap: var(--space-2) |
.columns-keep |
break-inside: avoid |
.columns-rule |
column-rule: var(--border) |
.columns-rule-accent |
column-rule: 1px solid var(--color-accent) |
.columns-2, .columns-3, .columns-4 |
columns: 1 |
.columns-3, .columns-4 |
columns: 2 |
ACCESSIBILITY & RESETS
| Class |
Declares |
.visually-hidden |
position: absolute |
.no-decoration, .no-decoration * |
text-decoration: none !important |
.no-mouse |
pointer-events: none |
.no-bullet |
list-style: none |
.no-wrap |
white-space: nowrap |
.keep-words |
word-break: keep-all |
.no-hyphen |
hyphens: none |
RESPONSIVE BREAKPOINTS
| Class |
Declares |
.sm\:hidden |
display: none !important |
.sm\:only |
display: inherit !important |
.md\:only |
display: none !important |
.lg\:only |
display: none !important |
.sm\:text-center |
text-align: center !important |
.md\:hidden |
display: none !important |
.sm\:only |
display: none !important |
.md\:only |
display: inherit !important |
.lg\:only |
display: none !important |
.lg\:hidden |
display: none !important |
.sm\:only |
display: none !important |
.md\:only |
display: none !important |
.lg\:only |
display: inherit !important |