A shape is a silhouette something wears on an edge — a curve, a tilt, a notch. Today one thing wears them: a section. The page is named for the family rather than for the section, so the next thing that wants one has somewhere to land.
a vocabulary of forms
Shapes are not a level of the document model. Section, container and row are that — three terms read outermost first, and a shape is not a fourth. It is a form a level can wear, which is why this sits after the spine rather than inside it.
10 shapes ship. They are named in one place
(partials/utils/section-shape.js) and this page reads that
list, so a shape cannot be documented that the code does not have.
.mk-section-divider · shape_top · shape_bottom
A band's edge is square unless it says otherwise.
shape_bottom and shape_top cut it — the thing the
ecosystem sells as a “shape divider”. Each is a group: a
shape and a height, or just the shape's name when
the default depth will do.
It is painted in the band's own ground and hangs past its edge, overlapping the neighbour. That is the whole mechanism, and it is why this is an axis on the band rather than a divider you place between two: the shape is not drawing the join, it is drawing more of this band, in a shape. The band below declares nothing, and the same markup works over any ground beneath it.
<section class="mk-section surface-muted">
…
<div class="mk-section-divider mk-section-divider--bottom mk-shape--curve-right" aria-hidden="true"></div>
</section>
That element is all a partial emits. The stylesheet derives the rest from
the DOM with :has(> .mk-section-divider) — the positioning
context, the reserved overhang, the opaque tint — so there is no class to
thread through a partial's own class list and no way for the two to
disagree. Sixteen partials offer the axis — every one that renders a
<section>, so a cta-band or a
prose band cuts its edge the same way a bare container does.
tilt · curve · book · wave · split · triangle · valley
| shape | What it is | Direction |
|---|---|---|
tilt-left · tilt-right |
A straight diagonal. | names its side |
curve-left · curve-right |
An asymmetric arc — the shallow swoop. | names its side |
curve |
A symmetric arc, deep in the middle. | — |
book |
Its complement — deep at both ends, shallow between them. | — |
wave |
A true S, both halves mirrored. | — |
split |
Two blocks with a gap between them. | — |
triangle |
A full-width wedge tapering to the centre. | — |
valley |
Its complement — a notch pointing into the band, the same relation book has to curve. | — |
curve and book are complements, not one
shape with a flag. A curve is deep in the middle, so a band cut
with it dips in the centre and a card body domes up into a picture.
book is deep at both ends, so the fill rises at the sides and
whatever sits above it bulges down between them. Mirroring swaps which
side the fill hangs from — never which end of the span is deep — so
neither can be derived from the other. Elementor names it for an open book
seen edge-on, rising at both covers and sagging in the gutter.
The name says whether direction applies. A symmetric
silhouette reads the same flipped, so it takes no side and offers none —
nobody has to wonder what wave-left would mean, because it does
not exist. An asymmetric one always names its side, so nothing silently
picks one for you.
See the set ↗
shape_top.height · shape_bottom.height
Each edge is a group of two: the shape it wears and the
height it cuts to. Depth is its own axis, which
is why no shape name carries a “soft” or “deep”
variant — a softer curve is the same path, shallower. Empty is 4rem.
shape_bottom: { shape: 'curve-right', height: '6rem' }
shape_bottom: 'curve-right' // shorthand — the name, at the default depthThe two edges are independent, so a deep curve above a shallow tilt is one band rather than a compromise.
The band reserves that depth as margin, so the overhang lands in space the band paid for rather than on its neighbour's first line. This was measured rather than assumed — the first cut relied on the next band's lead padding clearing it, and on a real page that padding was 46px against a 64px overhang, so every shape in the set painted over the eyebrow below it.
The clearance strip is margin, so it shows the page's own ground.
That suits what these are for — a coloured band curving down into the page.
Two adjacent coloured bands want the lower one to carry a
shape_top instead, so the strip belongs to it.
a borrowed vocabulary
The roots are the ecosystem's. Elementor and shapedivider.app have between
them settled on tilt, curve, wave,
triangle and split, and a designer arriving from
either should not have to learn a private synonym for the diagonal.
One departure, and it is structural. Those tools express
asymmetry as a suffix (curve-asymmetrical) and handle direction
with a Flip toggle. A checkbox suits a GUI; here it would mean a second
field per edge, doubled again for the top — four fields to say what two
names can. So the side rides in the name, and it replaces
-asymmetrical rather than joining it.
What was left behind: mountains, drops, clouds, pyramids, zigzag, and the opacity and brush treatments. They are era-stamped in a way tilt and curve are not — a page wearing clouds is legible as a particular year, and a system should not ship a date.