Reference

Utilities

Single-purpose classes on the φ scale, generated at build time, with responsive and container variants.

Every class.

329 of them. Classes marked responsive also exist as s: (<48rem), m: (≥48rem), l: (≥64rem) and xl: (≥80rem) variants, e.g. m:flex, and as container variants cq-s: (<32rem), cq-m: (≥32rem) and cq-l: (≥48rem), measured against the nearest .cq ancestor. Not needed? Use aequitas.core.css.

Helpers

`.hide-s`	Hidden below 48rem.
`.hide-l`	Hidden from 48rem up.
`.light-only`	Shown only in the light theme, forced or from the system; e.g. a dark logo.
`.dark-only`	Shown only in the dark theme.
`.scrollbar-thin`	Thin native scrollbar.
`.scrollbar-none`	No scrollbar; the element still scrolls.
`.gap-1 … .gap-8`	Gap of a flex or grid container, on the φ space scale.
`.end`	Pushes an item to the far end of a flex row.
`.mono`	Monospace font; the same as .font-mono.
`.sr-only`	Visually hidden, still read by screen readers. More
`.frost`	Frosted glass on any element. More
`.scroll-x · .scroll-y`	Edge fades while there is more to scroll. More

spacing

`.m-0`	margin: 0
`.m-1`	margin: var(--ae-space-1)
`.m-2`	margin: var(--ae-space-2)
`.m-3`	margin: var(--ae-space-3)
`.m-4`	margin: var(--ae-space-4)
`.m-5`	margin: var(--ae-space-5)
`.m-6`	margin: var(--ae-space-6)
`.m-7`	margin: var(--ae-space-7)
`.m-8`	margin: var(--ae-space-8)
`.m-auto`	margin: auto
`.p-0`	padding: 0
`.p-1`	padding: var(--ae-space-1)
`.p-2`	padding: var(--ae-space-2)
`.p-3`	padding: var(--ae-space-3)
`.p-4`	padding: var(--ae-space-4)
`.p-5`	padding: var(--ae-space-5)
`.p-6`	padding: var(--ae-space-6)
`.p-7`	padding: var(--ae-space-7)
`.p-8`	padding: var(--ae-space-8)
`.mx-0`	margin-inline: 0
`.mx-1`	margin-inline: var(--ae-space-1)
`.mx-2`	margin-inline: var(--ae-space-2)
`.mx-3`	margin-inline: var(--ae-space-3)
`.mx-4`	margin-inline: var(--ae-space-4)
`.mx-5`	margin-inline: var(--ae-space-5)
`.mx-6`	margin-inline: var(--ae-space-6)
`.mx-7`	margin-inline: var(--ae-space-7)
`.mx-8`	margin-inline: var(--ae-space-8)
`.mx-auto`	margin-inline: auto
`.px-0`	padding-inline: 0
`.px-1`	padding-inline: var(--ae-space-1)
`.px-2`	padding-inline: var(--ae-space-2)
`.px-3`	padding-inline: var(--ae-space-3)
`.px-4`	padding-inline: var(--ae-space-4)
`.px-5`	padding-inline: var(--ae-space-5)
`.px-6`	padding-inline: var(--ae-space-6)
`.px-7`	padding-inline: var(--ae-space-7)
`.px-8`	padding-inline: var(--ae-space-8)
`.my-0`	margin-block: 0
`.my-1`	margin-block: var(--ae-space-1)
`.my-2`	margin-block: var(--ae-space-2)
`.my-3`	margin-block: var(--ae-space-3)
`.my-4`	margin-block: var(--ae-space-4)
`.my-5`	margin-block: var(--ae-space-5)
`.my-6`	margin-block: var(--ae-space-6)
`.my-7`	margin-block: var(--ae-space-7)
`.my-8`	margin-block: var(--ae-space-8)
`.my-auto`	margin-block: auto
`.py-0`	padding-block: 0
`.py-1`	padding-block: var(--ae-space-1)
`.py-2`	padding-block: var(--ae-space-2)
`.py-3`	padding-block: var(--ae-space-3)
`.py-4`	padding-block: var(--ae-space-4)
`.py-5`	padding-block: var(--ae-space-5)
`.py-6`	padding-block: var(--ae-space-6)
`.py-7`	padding-block: var(--ae-space-7)
`.py-8`	padding-block: var(--ae-space-8)
`.mt-0`	margin-block-start: 0
`.mt-1`	margin-block-start: var(--ae-space-1)
`.mt-2`	margin-block-start: var(--ae-space-2)
`.mt-3`	margin-block-start: var(--ae-space-3)
`.mt-4`	margin-block-start: var(--ae-space-4)
`.mt-5`	margin-block-start: var(--ae-space-5)
`.mt-6`	margin-block-start: var(--ae-space-6)
`.mt-7`	margin-block-start: var(--ae-space-7)
`.mt-8`	margin-block-start: var(--ae-space-8)
`.mt-auto`	margin-block-start: auto
`.pt-0`	padding-block-start: 0
`.pt-1`	padding-block-start: var(--ae-space-1)
`.pt-2`	padding-block-start: var(--ae-space-2)
`.pt-3`	padding-block-start: var(--ae-space-3)
`.pt-4`	padding-block-start: var(--ae-space-4)
`.pt-5`	padding-block-start: var(--ae-space-5)
`.pt-6`	padding-block-start: var(--ae-space-6)
`.pt-7`	padding-block-start: var(--ae-space-7)
`.pt-8`	padding-block-start: var(--ae-space-8)
`.mb-0`	margin-block-end: 0
`.mb-1`	margin-block-end: var(--ae-space-1)
`.mb-2`	margin-block-end: var(--ae-space-2)
`.mb-3`	margin-block-end: var(--ae-space-3)
`.mb-4`	margin-block-end: var(--ae-space-4)
`.mb-5`	margin-block-end: var(--ae-space-5)
`.mb-6`	margin-block-end: var(--ae-space-6)
`.mb-7`	margin-block-end: var(--ae-space-7)
`.mb-8`	margin-block-end: var(--ae-space-8)
`.mb-auto`	margin-block-end: auto
`.pb-0`	padding-block-end: 0
`.pb-1`	padding-block-end: var(--ae-space-1)
`.pb-2`	padding-block-end: var(--ae-space-2)
`.pb-3`	padding-block-end: var(--ae-space-3)
`.pb-4`	padding-block-end: var(--ae-space-4)
`.pb-5`	padding-block-end: var(--ae-space-5)
`.pb-6`	padding-block-end: var(--ae-space-6)
`.pb-7`	padding-block-end: var(--ae-space-7)
`.pb-8`	padding-block-end: var(--ae-space-8)
`.ms-0`	margin-inline-start: 0
`.ms-1`	margin-inline-start: var(--ae-space-1)
`.ms-2`	margin-inline-start: var(--ae-space-2)
`.ms-3`	margin-inline-start: var(--ae-space-3)
`.ms-4`	margin-inline-start: var(--ae-space-4)
`.ms-5`	margin-inline-start: var(--ae-space-5)
`.ms-6`	margin-inline-start: var(--ae-space-6)
`.ms-7`	margin-inline-start: var(--ae-space-7)
`.ms-8`	margin-inline-start: var(--ae-space-8)
`.ms-auto`	margin-inline-start: auto
`.ps-0`	padding-inline-start: 0
`.ps-1`	padding-inline-start: var(--ae-space-1)
`.ps-2`	padding-inline-start: var(--ae-space-2)
`.ps-3`	padding-inline-start: var(--ae-space-3)
`.ps-4`	padding-inline-start: var(--ae-space-4)
`.ps-5`	padding-inline-start: var(--ae-space-5)
`.ps-6`	padding-inline-start: var(--ae-space-6)
`.ps-7`	padding-inline-start: var(--ae-space-7)
`.ps-8`	padding-inline-start: var(--ae-space-8)
`.me-0`	margin-inline-end: 0
`.me-1`	margin-inline-end: var(--ae-space-1)
`.me-2`	margin-inline-end: var(--ae-space-2)
`.me-3`	margin-inline-end: var(--ae-space-3)
`.me-4`	margin-inline-end: var(--ae-space-4)
`.me-5`	margin-inline-end: var(--ae-space-5)
`.me-6`	margin-inline-end: var(--ae-space-6)
`.me-7`	margin-inline-end: var(--ae-space-7)
`.me-8`	margin-inline-end: var(--ae-space-8)
`.me-auto`	margin-inline-end: auto
`.pe-0`	padding-inline-end: 0
`.pe-1`	padding-inline-end: var(--ae-space-1)
`.pe-2`	padding-inline-end: var(--ae-space-2)
`.pe-3`	padding-inline-end: var(--ae-space-3)
`.pe-4`	padding-inline-end: var(--ae-space-4)
`.pe-5`	padding-inline-end: var(--ae-space-5)
`.pe-6`	padding-inline-end: var(--ae-space-6)
`.pe-7`	padding-inline-end: var(--ae-space-7)
`.pe-8`	padding-inline-end: var(--ae-space-8)
`.gap-x-0`	column-gap: 0
`.gap-y-0`	row-gap: 0
`.gap-x-1`	column-gap: var(--ae-space-1)
`.gap-y-1`	row-gap: var(--ae-space-1)
`.gap-x-2`	column-gap: var(--ae-space-2)
`.gap-y-2`	row-gap: var(--ae-space-2)
`.gap-x-3`	column-gap: var(--ae-space-3)
`.gap-y-3`	row-gap: var(--ae-space-3)
`.gap-x-4`	column-gap: var(--ae-space-4)
`.gap-y-4`	row-gap: var(--ae-space-4)
`.gap-x-5`	column-gap: var(--ae-space-5)
`.gap-y-5`	row-gap: var(--ae-space-5)
`.gap-x-6`	column-gap: var(--ae-space-6)
`.gap-y-6`	row-gap: var(--ae-space-6)
`.gap-x-7`	column-gap: var(--ae-space-7)
`.gap-y-7`	row-gap: var(--ae-space-7)
`.gap-x-8`	column-gap: var(--ae-space-8)
`.gap-y-8`	row-gap: var(--ae-space-8)

display

`.block`responsive	display: block
`.inline`responsive	display: inline
`.inline-block`responsive	display: inline-block
`.flex`responsive	display: flex
`.inline-flex`responsive	display: inline-flex
`.grid`responsive	display: grid
`.contents`responsive	display: contents
`.hidden`responsive	display: none

flex

`.flex-row`responsive	flex-direction: row
`.flex-col`responsive	flex-direction: column
`.flex-wrap`	flex-wrap: wrap
`.flex-nowrap`	flex-wrap: nowrap
`.flex-1`	flex: 1 1 0%
`.flex-auto`	flex: 1 1 auto
`.flex-none`	flex: none
`.grow`	flex-grow: 1
`.shrink-0`	flex-shrink: 0
`.items-start`responsive	align-items: start
`.items-center`responsive	align-items: center
`.items-end`responsive	align-items: end
`.items-stretch`responsive	align-items: stretch
`.items-baseline`responsive	align-items: baseline
`.justify-start`responsive	justify-content: start
`.justify-center`responsive	justify-content: center
`.justify-end`responsive	justify-content: end
`.justify-between`responsive	justify-content: space-between
`.justify-around`responsive	justify-content: space-around
`.justify-evenly`responsive	justify-content: space-evenly
`.self-start`	align-self: start
`.self-center`	align-self: center
`.self-end`	align-self: end
`.order-first`responsive	order: -1
`.order-last`responsive	order: 1

grid

`.cols-1`responsive	grid-template-columns: repeat(1, minmax(0, 1fr))
`.cols-2`responsive	grid-template-columns: repeat(2, minmax(0, 1fr))
`.cols-3`responsive	grid-template-columns: repeat(3, minmax(0, 1fr))
`.cols-4`responsive	grid-template-columns: repeat(4, minmax(0, 1fr))
`.cols-5`responsive	grid-template-columns: repeat(5, minmax(0, 1fr))
`.cols-6`responsive	grid-template-columns: repeat(6, minmax(0, 1fr))
`.cols-auto`responsive	grid-template-columns: repeat(auto-fit, minmax(min(var(--min, calc(1rem * pow(var(--ae-phi), 5))), 100%), 1fr)) · set --min
`.col-span-2`responsive	grid-column: span 2
`.col-span-3`responsive	grid-column: span 3
`.col-span-4`responsive	grid-column: span 4
`.col-span-5`responsive	grid-column: span 5
`.col-span-6`responsive	grid-column: span 6
`.col-full`responsive	grid-column: 1 / -1
`.place-center`	place-items: center
`.place-content-center`	place-content: center

position

`.static`	position: static
`.relative`	position: relative
`.absolute`	position: absolute
`.fixed`	position: fixed
`.sticky`	position: sticky
`.inset-0`	inset: 0
`.top-0`	inset-block-start: 0
`.bottom-0`	inset-block-end: 0
`.start-0`	inset-inline-start: 0
`.end-0`	inset-inline-end: 0
`.z-0`	z-index: 0
`.z-1`	z-index: 1
`.z-2`	z-index: 2
`.z-3`	z-index: 3
`.z-10`	z-index: 10
`.z-20`	z-index: 20
`.z-50`	z-index: 50

sizing

`.w-full`	inline-size: 100%
`.w-auto`	inline-size: auto
`.w-fit`	inline-size: fit-content
`.w-screen`	inline-size: 100vw
`.h-full`	block-size: 100%
`.h-auto`	block-size: auto
`.h-screen`	block-size: 100dvh
`.min-h-screen`	min-block-size: 100dvh
`.min-w-0`	min-inline-size: 0
`.max-w-full`	max-inline-size: 100%
`.max-w-measure`	max-inline-size: var(--ae-measure)
`.max-w-container`	max-inline-size: var(--ae-container)
`.size-3`	inline-size: var(--ae-space-3); block-size: var(--ae-space-3) · square
`.size-4`	inline-size: var(--ae-space-4); block-size: var(--ae-space-4) · square
`.size-5`	inline-size: var(--ae-space-5); block-size: var(--ae-space-5) · square
`.size-6`	inline-size: var(--ae-space-6); block-size: var(--ae-space-6) · square
`.size-7`	inline-size: var(--ae-space-7); block-size: var(--ae-space-7) · square
`.size-8`	inline-size: var(--ae-space-8); block-size: var(--ae-space-8) · square
`.aspect-square`	aspect-ratio: 1
`.aspect-golden`	aspect-ratio: var(--ae-ratio)
`.aspect-video`	aspect-ratio: 16 / 9
`.object-cover`	object-fit: cover
`.object-contain`	object-fit: contain

typography

`.text-xs`	font-size: var(--ae-text-xs)
`.text-s`	font-size: var(--ae-text-s)
`.text-m`	font-size: var(--ae-text-m)
`.text-l`	font-size: var(--ae-text-l)
`.text-xl`	font-size: var(--ae-text-xl)
`.text-2xl`	font-size: var(--ae-text-2xl)
`.text-3xl`	font-size: var(--ae-text-3xl)
`.text-4xl`	font-size: var(--ae-text-4xl)
`.font-sans`	font-family: var(--ae-font-sans)
`.font-mono`	font-family: var(--ae-font-mono)
`.weight-400`	font-weight: 400
`.weight-500`	font-weight: 500
`.weight-600`	font-weight: 600
`.weight-700`	font-weight: 700
`.text-start`responsive	text-align: start
`.text-center`responsive	text-align: center
`.text-end`responsive	text-align: end
`.uppercase`	text-transform: uppercase; letter-spacing: 0.08em
`.normal-case`	text-transform: none; letter-spacing: 0
`.italic`	font-style: italic
`.tracking-tight`	letter-spacing: -0.03em
`.tracking-wide`	letter-spacing: 0.06em
`.leading-tight`	line-height: var(--ae-leading-tight)
`.leading-normal`	line-height: var(--ae-leading-normal)
`.leading-none`	line-height: 1
`.nowrap`	white-space: nowrap
`.break-words`	overflow-wrap: anywhere
`.balance`	text-wrap: balance
`.pretty`	text-wrap: pretty
`.tabular`	font-variant-numeric: tabular-nums
`.truncate`	overflow: hidden; text-overflow: ellipsis; white-space: nowrap
`.clamp-2`	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden
`.clamp-3`	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden

colour

`.text-accent`	color: var(--ae-accent-ink)
`.bg-accent`	background: var(--ae-accent); color: var(--ae-accent-contrast)
`.text-success`	color: var(--ae-success-ink)
`.bg-success`	background: var(--ae-success); color: var(--ae-success-contrast)
`.text-warning`	color: var(--ae-warning-ink)
`.bg-warning`	background: var(--ae-warning); color: var(--ae-warning-contrast)
`.text-danger`	color: var(--ae-danger-ink)
`.bg-danger`	background: var(--ae-danger); color: var(--ae-danger-contrast)
`.text-info`	color: var(--ae-info-ink)
`.bg-info`	background: var(--ae-info); color: var(--ae-info-contrast)
`.text-muted`	color: var(--ae-text-muted)
`.text-body`	color: var(--ae-text)
`.text-tone`	color: var(--ae-tone-ink) · with data-tone
`.bg-tone`	background: var(--ae-tone); color: var(--ae-tone-contrast) · with data-tone
`.bg-tint`	background: color-mix(in oklch, var(--ae-tone) var(--ae-tint-hover), transparent) · with data-tone
`.bg-fill`	background: var(--ae-fill)
`.bg-surface`	background: var(--ae-surface)
`.bg-sunken`	background: var(--ae-bg-sunken)
`.bg-page`	background: var(--ae-bg)
`.bg-transparent`	background: transparent

edges

`.hairline`	box-shadow: inset 0 0 0 1px var(--ae-border)
`.hairline-t`	box-shadow: inset 0 1px 0 var(--ae-border)
`.hairline-b`	box-shadow: inset 0 -1px 0 var(--ae-border)
`.hairline-s`	box-shadow: inset var(--ae-hairline-x) 0 0 var(--ae-border)
`.hairline-e`	box-shadow: inset calc(var(--ae-hairline-x) * -1) 0 0 var(--ae-border)
`.shadow-s`	box-shadow: var(--ae-shadow-s)
`.shadow-m`	box-shadow: var(--ae-shadow-m)
`.shadow-l`	box-shadow: var(--ae-shadow-l)
`.shadow-none`	box-shadow: none
`.radius-0`	border-radius: 0
`.radius-s`	border-radius: var(--ae-radius-s)
`.radius-m`	border-radius: var(--ae-radius-m)
`.radius-l`	border-radius: var(--ae-radius-l)
`.radius-full`	border-radius: var(--ae-radius-full)
`.ring`	box-shadow: var(--ae-ring)

misc

`.opacity-0`	opacity: 0
`.opacity-25`	opacity: 0.25
`.opacity-50`	opacity: 0.5
`.opacity-75`	opacity: 0.75
`.opacity-100`	opacity: 1
`.overflow-hidden`	overflow: hidden
`.overflow-auto`	overflow: auto
`.overflow-x-auto`	overflow-x: auto
`.overflow-y-auto`	overflow-y: auto
`.overflow-clip`	overflow: clip
`.cursor-pointer`	cursor: pointer
`.cursor-default`	cursor: default
`.select-none`	user-select: none
`.pointer-none`	pointer-events: none
`.invisible`	visibility: hidden
`.transition`	transition: all var(--ae-duration) var(--ae-ease)
`.transition-fast`	transition: all var(--ae-duration-fast) var(--ae-ease)
`.transition-slow`	transition: all var(--ae-duration-slow) var(--ae-ease)
`.cq`	container-type: inline-size · container query root
`.frost-filter`	backdrop-filter: var(--ae-frost-filter)
`.print-hidden`	@media print { display: none !important }
`.print-only`	display: none; @media print { display: revert }

Theme

Accent Blue

Density

Shape