Layout

Row Rhythm

A Row-level display setting that applies deliberate staircase offsets to child columns — an editorial cascade where the eye steps down the page as it scans left to right. Three levels map to the spacing token scale. Offsets are static transforms that zero out when columns stack below the row's breakpoint. When paired with a slide-up entrance animation, the offset becomes the resting position the animation settles into.

Setting: columnRhythm on OT_LandingRow display template

Escape hatch: columnRhythmNudge on OT_LandingColumn — adds or subtracts from the base offset per column

Gentle cascade

Step size: sm / md / lg (8 / 16 / 32px). For rows where content is closely related and the cascade should feel like breathing room rather than drama.

3 columns — offsets 0 / 8px / 16px

Column 1

Editorial lead

Column 2

Supporting voice

Column 3

Third perspective

4 columns — offsets 0 / 8px / 16px / 32px

Column 1

Editorial lead

Column 2

Supporting voice

Column 3

Third perspective

Column 4

Trailing note

Moderate cascade

Step size: md / lg / xl (16 / 32 / 64px). The primary editorial choice — pronounced enough to read as intentional composition, measured enough to keep content in easy scanning range.

3 columns — offsets 0 / 16px / 32px

Column 1

Editorial lead

Column 2

Supporting voice

Column 3

Third perspective

4 columns — offsets 0 / 16px / 32px / 64px

Column 1

Editorial lead

Column 2

Supporting voice

Column 3

Third perspective

Column 4

Trailing note

Bold cascade

Step size: lg / xl / 2xl (32 / 64 / 128px). Magazine-spread intensity. Each column occupies a distinct vertical register. Reserve for hero-style rows with short content blocks; add extra row bottom padding to prevent overflow on the deepest column.

3 columns — offsets 0 / 32px / 64px

Column 1

Editorial lead

Column 2

Supporting voice

Column 3

Third perspective

4 columns — offsets 0 / 32px / 64px / 128px

Column 1

Editorial lead

Column 2

Supporting voice

Column 3

Third perspective

Column 4

Trailing note

Per-column nudge

The columnRhythmNudge setting on OT_LandingColumn adds or subtracts one spacing step from a column's base rhythm offset. Useful for asymmetric compositions where one column should break the regular staircase — a portrait image that reads better slightly raised, or a stat block that anchors lower than its neighbors.

Moderate cascade — col 2 nudged +lg (32px extra), col 3 nudged −md (16px back)

Column 1

No nudge

offset: 0

Column 2

Nudge + lg

offset: md + lg

Column 3

Nudge −md

offset: lg − md

Token reference

CSS custom properties

--ot-rhythm-offsetPer-column base offset (set by row rhythm + nth-child). Default 0px.

--ot-rhythm-nudgePer-column correction (set by columnRhythmNudge). Default 0px.

Ramp values

gentlecol1 → 0col2 → sm (8px)col3 → md (16px)

moderatecol1 → 0col2 → md (16px)col3 → lg (32px)

boldcol1 → 0col2 → lg (32px)col3 → xl (64px)

col4 and beyond: one step above col3 (capped at 2xl for bold)