all-grid defaults
Every block on this page is rendered by the compiled kit. Tokens, layout primitives, theme scopes and components, with the class names you type in TXP forms.
Left to right is cascade priority: a rule in a later layer wins over an earlier one whatever its specificity.
One set of short modifiers works on every primitive. They only set --l-x, --l-y, --l-spread and --l-gap; each primitive maps them to its own axes. Every modifier also has @small @medium @desktop variants.
Palette names what a colour is; semantic tokens name what it does. Components read only semantic tokens.
1rlh)Identical markup in four .bg-- scopes. Scopes swap semantic tokens only, so borders, muted text and the brand-ink logo follow without any .bg--brand & overrides.
.m_thumb · responds to its slot, not the viewport.a_button.o_gallery.b_typesetQuarried in the Apuan Alps, Carrara has a soft white ground with fine grey veining.
Honed finishes suit floors and benchtops; polished finishes bring out the veining on walls and vanities. Each slab is unique, so we recommend selecting slabs in person.
Last layer, so they always win. @bp always means “from this width up”.
| Class | Does |
|---|---|
| u_m · u_p --t --b --l --r | Base-unit margin/padding. Suffix - half, doubled letter double, 0 none: u_p--tt, u_m--b0 |
| u_gutter | Page-edge inline padding (tightens below medium) |
| u_span--full-width · --2cols · --3rows | Grid spans, with @bp variants |
| u_self--middle · --bottom … | Align one child within its layout |
| u_hide · u_hide@medium · u_hide--until-medium | Visibility by width; u_visually-hidden for screen-reader text |
| u_flow · u_clamp--2 · u_fill · u_sticky · u_contents | Owl spacing, line clamp, full height, sticky, display: contents |
| a_ratio--1x1 · --gm · --16x9 … | Aspect boxes (atoms), with @bp variants |
| h0-style … h6-style | Heading sizes on any element, with @bp variants: h5-style h3-style@medium |