Utility classes

Source: src/styles/utilities.scs — last in the cascade, so a utility can win over a component.

These are the class names the sass build exposed, with the new design behind them: pages, markdown and phtml templates already use them, and they keep working unchanged. Anything an element needs it inlines from lib:: instead — a shadow root never sees these classes.

Flex

.hflex is a row, .vflex a column. Both are position: relative, so anything absolutely positioned inside them is positioned against them.

betweenbetweenbetween

spacedspacedspaced

evenlyevenlyevenly

center

end

startstart

stretchstretch

justify-center

123 .reverse

wrapwrapwrapwrapwrapwrap

.hflex.inline

gap-sm8px

gap16px

gap-lg24px

.flex-0

.grow — takes what is left

Fractions

Six box dimensions × six fractions. Inside a .gap container the gap is taken out of the track, so two halves plus a gap still add up to one row — which is the whole reason these exist rather than a plain width: 50%.

.width-1-2 50%

.width-1-3 33.3333%

.width-2-3 66.6666%

.width-1-4 25%

.width-3-4 75%

.width-1-5 20%

.width-1-2

Dimension	Classes
`width`	`.width-1-2` `.width-1-3` `.width-2-3` `.width-1-4` `.width-3-4` `.width-1-5`
`min-width`	`.min-width-1-2` `.min-width-1-3` `.min-width-2-3` `.min-width-1-4` `.min-width-3-4` `.min-width-1-5`
`max-width`	`.max-width-1-2` `.max-width-1-3` `.max-width-2-3` `.max-width-1-4` `.max-width-3-4` `.max-width-1-5`
`height`	`.height-1-2` `.height-1-3` `.height-2-3` `.height-1-4` `.height-3-4` `.height-1-5`
`min-height`	`.min-height-1-2` `.min-height-1-3` `.min-height-2-3` `.min-height-1-4` `.min-height-3-4` `.min-height-1-5`
`max-height`	`.max-height-1-2` `.max-height-1-3` `.max-height-2-3` `.max-height-1-4` `.max-height-3-4` `.max-height-1-5`

Layout helpers

Class	What it does
`.hidden`	removed from the layout, with `!important`
`.m-auto`	`margin: auto` — centres a fixed width in its container
`.fit-content`	the box takes the width of what is in it
`.overflow-auto`	scrolls in its own container, with the thin scrollbar and contained overscroll
`.scrollable`	the same, capped at the height of its container
`.toggle`	hidden until it also carries `.active`
`.sticky`	stays in view while its scroller moves under it — on the surface ground, at the sticky layer. On its own it sticks to the top
`.sticky.top` `.bottom` `.left` `.right`	the edge it sticks to; name two for a corner (`.sticky.top.left`)
`.phone-hidden`	gone below 620px — the parts of a header or toolbar that may go
`.phone-only`	the opposite: shown below 620px only
`.cluster`	a wrapping row with the small gap
`.stack`	a column with the standard gap
`.autogrid`	as many 280px columns as fit, each filling its share

clusterwrapssmall gap

autogrid

A sticky element needs two things, and the class gives it both: a ground — what scrolls underneath would otherwise show straight through it — and an offset on the edge it sticks to, because position: sticky with no offset never sticks at all. That is why the edge is a class of its own rather than a default nobody sees.

The bar above carries .sticky.top: it is in the flow until the scroller reaches it, and then it stays.

Its ground is the surface token, so the lines passing under it do not show through.

A third paragraph, so there is something to scroll.

And a fourth.

Reference	Client	Contact	City	Status	Amount
`INV-0146`	Hydra Agency	marc@hydra-agency.com	Paris	Paid	1 250,00
`INV-0147`	Oviepro	contact@oviepro.fr	Lyon	Late	860,00
`INV-0148`	Lorem SAS	hello@lorem.example	Lille	Blocked	3 400,00
`INV-0149`	Ipsum SARL	contact@ipsum.example	Marseille	Trial	120,00
`INV-0150`	Dolor SA	hello@dolor.example	Nantes	Paid	640,00

A container that scrolls rather than clipping, with the thin scrollbar and overscroll-behavior: contain — so reaching its end does not start scrolling the page behind it.

Content that can outgrow its track scrolls in its own container, never clips: that rule is lib::scroll-area, and both this class and .overflow-auto are it.

A third paragraph, so that there is something to scroll to.

Text

.text-left

.text-center

.text-right

.text-small

.text-large

.uppercase, with the tracking capitals need

.eyebrow

.hint — the quiet line under a control

A label long enough that it cannot fit on one line of this box, which is exactly when a row has to decide between wrapping and cutting.

1 250 1 250,00 2026-09-18 14:30 2026-09-18 14:30 .numeric

.text-vertical .text-sideway

Title 47 characters left

This sentence is only read aloud. .visually-hidden takes an element out of sight and leaves it in the accessibility tree — there is one right before this text.

Tones

A tone class paints a ground; its .text-* twin paints text only. The ground is the soft step and the text the strong one, so both stay legible after a theme switch; .solid swaps them over.

.primary .secondary .success .warning .error .info .muted .grey .dark .dark-grey .yellow .white

.primary.solid .secondary.solid .success.solid .warning.solid .error.solid .info.solid .yellow.solid

.text-primary .text-secondary .text-success .text-warning .text-error .text-info .text-muted .text-grey .text-dark .text-dark-grey .text-yellow .text-white

Responsive

Three rules, and they are the only ones a page has to know about:

below 720px an .hflex becomes a column, unless it carries .keep-row — and the width fractions all go to 100%;
below 620px .phone-hidden disappears and .phone-only appears;
body::after carries the breakpoint's name, which is what MMO.window.device reads.

Print

The print stylesheet is part of the system, not an afterthought: .no-print removes what only exists on screen, .print-break-before and .print-break-after control pagination, links are expanded to show their target, and cards, panels, <pre> and tables lose their shadow and are kept whole on one page.

Class	What it does when printing
`.no-print`	the element and everything in it is removed
`.print-break-before`	starts a new page before the element
`.print-break-after`	starts a new page after it